/* ==========================================================================
   TECNEVECA — Tecnología Neumática Venezuela, C.A.
   Hoja única de estilos. Reescrita entera el 2026-08-20.

   ---------------------------------------------------------------------------
   POR QUÉ SE TIRÓ LA ANTERIOR
   ---------------------------------------------------------------------------
   El dueño, tras cuatro ajustes seguidos que no cuadraban: «no me termina de
   cuadrar, quiero reestructurar todo, no va con la vibra». Preguntado qué
   chirriaba, señaló cuatro cosas —la tipografía, los colores, la portada y que
   se sentía vacía— y eligió dirección: CATÁLOGO COMERCIAL.

   La versión anterior era editorial y técnica: oscura, mayúsculas condensadas,
   rótulos en letra de máquina, retícula de plano. Bien hecha, pero era la página
   de un estudio de ingeniería, no la de quien vende cilindros. Queda guardada
   entera en `respaldos/version-editorial-2026-08-20/`.

   ---------------------------------------------------------------------------
   QUÉ CAMBIA, Y CONTRA QUÉ QUEJA
   ---------------------------------------------------------------------------
   · TIPOGRAFÍA. Fuera la condensada en mayúsculas y fuera la letra de máquina,
     que era la que daba el aire frío. Entran Manrope —geométrica y redonda, se
     lee comercial— y Barlow para el cuerpo, que aguanta bien las listas largas
     de datos. Los titulares en caja normal, no gritando.

   · COLOR. El azul de marca se queda, porque es el de su logo. Pero deja de
     estar solo: entra un NARANJA para todo lo que se pulsa. No es un color
     traído de fuera — es el de las turbinas VIBCO que ellos venden.
     >> RETIRADO el 2026-11-06: ahora solo blanco y azul (ver :root).

   · DENSIDAD. El centro de la página pasa a ser una rejilla de categorías con
     foto de producto, que es como se mira un catálogo. Se acabaron las
     secciones largas con poco dentro.
   ========================================================================== */

:root {
	/* --- Marca --- */
	--azul: #003B8D;          /* el del logo TNV, medido pixel a pixel */
	--azul-fuerte: #002A66;
	--azul-claro: #E8F0FC;

	/*
	 * SOLO BLANCO Y AZUL (2026-11-06). Felipe: «No uses color naranja en
	 * tecneveca, solo blanco y azul». El naranja de agosto (#EE6522, el de los
	 * botones, la lupa, las flechas del catálogo y las etiquetas) se fue entero.
	 *
	 * · --azul (#003B8D) rellena los botones, con texto blanco; al pasar el
	 *   ratón, --azul-fuerte.
	 * · --azul-vivo (#2F72E8) es SOLO para texto grande, acentos y líneas:
	 *   sobre blanco da ~4,3:1 y no alcanza para letra pequeña.
	 * · --azul-hielo es el azul claro para rótulos sobre los fondos azules.
	 */
	--azul-vivo: #2F72E8;
	--azul-hielo: #A9C6F5;

	/* --- Neutros, sesgados a azul --- */
	--tinta: #16202E;         /* más blando que el casi negro de antes */
	--gris: #5B6B7F;
	--gris-claro: #8D9AAB;
	--nieve: #F5F7FA;
	--papel: #FFFFFF;
	--linea: #E2E8F0;

	/* --- Ritmo --- */
	--seccion-y: clamp(56px, 7vw, 96px);
	--ancho: 1240px;
	--margen: clamp(16px, 4vw, 40px);

	--radio: 10px;
	--radio-gr: 16px;
	--sombra: 0 2px 4px rgba(22, 32, 46, .04), 0 12px 28px rgba(22, 32, 46, .07);
	--sombra-alta: 0 4px 8px rgba(22, 32, 46, .06), 0 20px 44px rgba(22, 32, 46, .12);

	/* --- Tipografía --- */
	--titulo: "Manrope", "Segoe UI", system-ui, sans-serif;
	--texto: "Barlow", "Segoe UI", system-ui, sans-serif;

	--barra: 36px;   /* la tira de contacto de arriba */
	--cabecera: 68px;
	--techo: calc(var(--barra) + var(--cabecera));
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--techo) + 20px);
	-webkit-text-size-adjust: 100%;
	/* el hueco de la barra queda reservado: al bloquear el desplazamiento
	   durante el salto (.salto-quieto) la página no se corre de lado */
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--texto);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--titulo);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.12;
	text-wrap: balance;
	margin: 0;
}

:focus-visible {
	outline: 3px solid var(--azul-vivo);
	outline-offset: 2px;
	border-radius: 4px;
}

.barra :focus-visible,
.seccion--azul :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   PIEZAS COMPARTIDAS
   -------------------------------------------------------------------------- */

.caja {
	width: 100%;
	max-width: var(--ancho);
	margin-inline: auto;
	padding-inline: var(--margen);
}

.seccion { padding-block: var(--seccion-y); position: relative; }

/*
 * SECCIONES CON FOTO DE FONDO.
 *
 * La foto va en un `::before` propio y el velo en el `background` de la sección,
 * no al revés: así el contenido queda por encima de los dos sin necesidad de
 * tocarle el z-index a nada, y cambiar la foto es cambiar una línea.
 *
 * Las dos fotos que se usan estaban huérfanas —eran láminas del slider de la
 * versión anterior— así que esto no cuesta ni una descarga nueva.
 */
.seccion--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--foto);
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.seccion--foto > .caja { position: relative; z-index: 2; }

.seccion--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--velo);
}

/*
 * El velo de cada una. Sin él, cada foto decidiría el contraste del texto que
 * tiene encima y bastaría cambiar una imagen para dejar la sección ilegible.
 */
.seccion--azul.seccion--foto {
	/* Aflojado del 94/88 al 84/68: al 94 la foto no se veía, solo teñía. Con
	   13:1 de contraste medido había margen de sobra para dejarla asomar. */
	--velo: linear-gradient(115deg, rgba(0, 42, 102, .96) 0%, rgba(0, 42, 102, .84) 45%, rgba(0, 59, 141, .68) 100%);
}

.seccion--nieve.seccion--foto {
	/* Casi opaco a propósito: aquí la foto no se mira, se siente. Es textura, y
	   la sección tiene que seguir leyéndose clara. */
	--velo: linear-gradient(180deg, rgba(245, 247, 250, .965) 0%, rgba(245, 247, 250, .93) 100%);
}
.seccion--nieve { background: var(--nieve); }
.seccion--azul { background: var(--azul); color: #fff; }

/*
 * EL RÓTULO DE SECCIÓN. Ya no va en letra de máquina —eso era parte de lo que
 * se sentía frío—: ahora es una etiqueta con fondo, que es como se marcan las
 * secciones en un catálogo.
 */
.rotulo {
	display: inline-block;
	font-family: var(--titulo);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--azul);
	background: var(--azul-claro);
	padding: 6px 12px;
	border-radius: 999px;
	margin: 0 0 16px;
}

.seccion--azul .rotulo { color: #fff; background: rgba(255, 255, 255, .18); }

.titulo { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

.entrada {
	max-width: 62ch;
	color: var(--gris);
	margin: 12px 0 0;
	font-size: 1.05rem;
}

.seccion--azul .entrada { color: rgba(255, 255, 255, .82); }

.cabeza-seccion {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 36px;
}

/* --- Botones: UNA forma, UN hover --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--titulo);
	font-size: .95rem;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover { background: var(--azul-fuerte); }

.btn--linea { border-color: var(--linea); color: var(--tinta); background: var(--papel); }
.btn--linea:hover { border-color: var(--azul); color: var(--azul); }

.btn--blanco { background: #fff; color: var(--azul); }
.btn--blanco:hover { background: var(--azul-claro); }

.btn--fantasma-blanco { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn--fantasma-blanco:hover { background: #fff; color: var(--azul); border-color: #fff; }

/* --------------------------------------------------------------------------
   LA TIRA DE CONTACTO Y LA CABECERA
   -------------------------------------------------------------------------- */

/*
 * La tira de arriba deja de ser una marquesina y pasa a ser fija y legible. Un
 * dato de contacto que se mueve es un dato que hay que perseguir, y estos son
 * justo los que alguien necesita leer de un vistazo.
 */
.barra {
	position: fixed;
	inset: 0 0 auto;
	z-index: 70;
	height: var(--barra);
	display: flex;
	align-items: center;
	background: var(--azul-fuerte);
	color: rgba(255, 255, 255, .9);
	font-size: .82rem;
}

.barra .caja { display: flex; align-items: center; gap: 8px 26px; overflow: hidden; }
.barra a { text-decoration: none; white-space: nowrap; }
/* 2026-11-07: el ☎ de texto sale como emoji rojo en iPhone: ícono dibujado, del color del enlace. */
.ico-tel { display: inline-block; width: 1em; height: 1em; margin-right: .35em; vertical-align: -.14em; flex: none; }
.barra a:hover { color: #fff; text-decoration: underline; }
.barra__lejos { margin-left: auto; opacity: .82; white-space: nowrap; }

.cab {
	position: fixed;
	top: var(--barra);
	right: 0;
	left: 0;
	z-index: 60;
	height: var(--cabecera);
	display: flex;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid var(--linea);
}

.cab .caja { display: flex; align-items: center; gap: 24px; }
.cab__marca { margin-right: auto; display: flex; }
.cab__marca img { height: 46px; width: auto; }

.cab__nav { display: flex; gap: 22px; }

.cab__nav a {
	font-family: var(--titulo);
	font-size: .92rem;
	font-weight: 700;
	color: var(--tinta);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: color .16s ease, border-color .16s ease;
}

.cab__nav a:hover { color: var(--azul); border-bottom-color: var(--azul); }

/* --------------------------------------------------------------------------
   EL CAJÓN DE MÓVIL
   -------------------------------------------------------------------------- */

/*
 * Antes, en el teléfono, el menú simplemente se escondía: media página —catálogo,
 * servicio, descargas, marcas, empresa— era inalcanzable desde un móvil, que es
 * por donde entra la mitad de las visitas.
 */
.hamburguesa {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--linea);
	border-radius: 10px;
	background: var(--papel);
	cursor: pointer;
	padding: 0;
	/* las tres barras, centradas en el botón (2026-11-08: Felipe las vio pegadas arriba) */
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex-direction: column;
}

.hamburguesa span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--tinta);
	transition: transform .22s ease, opacity .22s ease;
}

/* Abierto, las tres barras se vuelven una equis: el mismo botón cierra. */
.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.velo {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(22, 32, 46, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .25s ease;
}

.menu-abierto .velo { opacity: 1; }

.cajon {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	width: min(88vw, 340px);
	background: var(--papel);
	/* La sombra SOLO con el cajón abierto: cerrado está justo fuera de la
	   pantalla y su sombra asomaba como una franja gris en el borde derecho de
	   toda la página (se vio el 2026-11-06 sobre el fondo claro del taller). */
	box-shadow: none;
	padding: 18px 22px 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	/*
	 * Entra deslizándose. Se anima `transform` y no `right`: mover una
	 * propiedad de posición obliga al navegador a recalcular la página en cada
	 * fotograma, y en un teléfono modesto eso se ve a tirones.
	 */
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.menu-abierto .cajon { transform: none; box-shadow: -20px 0 50px rgba(22, 32, 46, .2); }

.cajon__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cajon__cab img { height: 42px; width: auto; }

.cajon__cerrar {
	width: 40px;
	height: 40px;
	border: 1px solid var(--linea);
	border-radius: 10px;
	background: var(--papel);
	color: var(--gris);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.cajon__cerrar:hover { border-color: var(--azul); color: var(--azul); }

.cajon__nav { display: flex; flex-direction: column; }

.cajon__nav a {
	font-family: var(--titulo);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tinta);
	text-decoration: none;
	padding: 14px 0;
	border-bottom: 1px solid var(--linea);
}

.cajon__nav a:hover { color: var(--azul); }

/* El botón de cotizar va DENTRO del cajón, como pidió el dueño, y ocupa todo el
   ancho: en un cajón estrecho, un botón a medias parece un enlace más. */
.cajon__cotizar { width: 100%; }

.cajon__datos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: .9rem;
	color: var(--gris);
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--linea);
}

.cajon__datos a { color: var(--azul); text-decoration: none; }

/* Con el cajón abierto, la página de detrás no se desplaza. Si no, se mueve lo
   que hay debajo mientras el dedo cree estar moviendo el menú. */
.menu-abierto body { overflow: hidden; }

/* --------------------------------------------------------------------------
   EL BANNER
   -------------------------------------------------------------------------- */

/*
 * NO ES UNA PORTADA CON FOTO GRANDE, y es a propósito: el dueño dijo que esa no
 * funcionaba «sea cual sea la foto». Es una banda compacta que dice qué es esto
 * y trae el buscador — y justo debajo empiezan las categorías, que es lo que se
 * viene a ver.
 */
.banner {
	background:
		radial-gradient(1100px 420px at 82% 12%, rgba(255, 255, 255, .16), transparent 60%),
		linear-gradient(135deg, var(--azul) 0%, var(--azul-fuerte) 100%);
	color: #fff;
	padding-block: calc(var(--techo) + 40px) 44px;
}

.banner__lienzo {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
}

.banner h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 14px; }
.banner h1 em { font-style: normal; color: var(--azul-hielo); }

.banner__texto {
	color: rgba(255, 255, 255, .88);
	max-width: 52ch;
	margin: 0 0 24px;
}

/* --- El buscador --- */

.buscador { position: relative; max-width: 520px; }

.buscador input {
	width: 100%;
	padding: 15px 56px 15px 20px;
	border: 0;
	border-radius: 999px;
	font-family: var(--texto);
	font-size: 1rem;
	color: var(--tinta);
	box-shadow: var(--sombra);
}

.buscador input::placeholder { color: var(--gris-claro); }

/* La etiqueta del buscador. Estaba saliendo por accidente —se marcó como oculta
   con una clase que no existe en esta hoja— pero funciona bien a la vista, así
   que se queda y se le da estilo de verdad. */
.buscador label {
	display: block;
	margin-bottom: 8px;
	font-size: .92rem;
	color: rgba(255, 255, 255, .82);
}

.buscador__lupa {
	position: absolute;
	right: 6px;
	/*
	 * ABAJO Y NO AL CENTRO. `top: 50%` centra sobre el CONTENEDOR, y el
	 * contenedor lleva además la etiqueta encima: el botón se iba 13 px arriba y
	 * asomaba por el borde del campo.
	 *
	 * El campo es el último hijo, así que anclando abajo los dos bordes
	 * inferiores coinciden pase lo que pase con lo que haya encima.
	 * (49 de alto el campo − 40 el botón) / 2 = 4,5 ≈ 5.
	 */
	bottom: 6px;
	/* 37 y no 40: el campo mide 49 de alto y su extremo es una píldora, cuya
	   curva se cierra justo donde va el botón. Con 40 quedaban 4,5 px de margen
	   y la curva se los comía; con 37 quedan 6 por lado y respira. */
	width: 37px;
	height: 37px;
	border: 0;
	border-radius: 50%;
	background: var(--azul);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.buscador__lupa svg { width: 18px; height: 18px; }
.buscador__lupa:hover { background: var(--azul-fuerte); }

.banner__pista { margin: 12px 0 0; font-size: .88rem; color: rgba(255, 255, 255, .72); }

/* --- Los tres avales, en tira bajo el buscador --- */

.avales {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
	color: rgba(255, 255, 255, .82);
}

.avales li { display: flex; align-items: baseline; gap: 7px; }

.avales b {
	font-family: var(--titulo);
	font-size: 1.15rem;
	font-weight: 800;
	color: #fff;
}

/* --- El racimo de piezas --- */

.banner__racimo { display: flex; justify-content: center; }

.banner__racimo img {
	/* 340 y no 460 — el dueño lo vio y pidió «más pequeños». A 460 el racimo
	   competía con el titular y se salía por arriba del banner. */
	width: min(100%, 340px);
	height: auto;
	/* La sombra sigue la silueta de las piezas, no una caja: es lo que las
	   separa del azul y las hace parecer objetos y no un recorte pegado. */
	filter: drop-shadow(0 30px 40px rgba(0, 15, 40, .55));
	/* Flotación muy lenta. El dueño lo quería «más quieto», así que son ocho
	   segundos y seis píxeles: se nota que está vivo, no que se mueve. */
	animation: flota 8s ease-in-out infinite;
}

@keyframes flota {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
	.banner__racimo img { animation: none; }
}

/* --------------------------------------------------------------------------
   LA REJILLA DE CATEGORÍAS — el centro de la página
   -------------------------------------------------------------------------- */

.categorias {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	gap: 20px;
}

.cat {
	display: flex;
	flex-direction: column;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-gr);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.cat:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--sombra-alta);
}

/*
 * LA PIEZA FLOTANDO. Ver la nota de arriba: la sombra elíptica es lo que le da
 * volumen, y el levantarse al pasar por encima es lo que lo hace sentir un
 * objeto y no una foto.
 */
.cat__pieza {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
	padding: 14px 14px 22px;
	background: radial-gradient(120% 90% at 50% 18%, #FFFFFF 0%, var(--nieve) 55%, #EAEFF6 100%);
	overflow: hidden;
}

/* La sombra del suelo. Va DEBAJO de la pieza y no es la sombra de la caja: es
   la que proyectaría un objeto apoyado, achatada y difusa. */
.cat__pieza::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 58%;
	height: 12px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(22, 32, 46, .3), transparent 78%);
	transition: width .35s ease, opacity .35s ease, filter .35s ease;
	filter: blur(1px);
}

.cat__pieza img {
	position: relative;
	z-index: 1;
	max-width: 82%;
	max-height: 82%;
	width: auto;
	height: auto;
	object-fit: contain;
	/* La sombra propia de la pieza, pegada a su silueta. Es lo que separa un
	   recorte pegado de un objeto que está ahí. */
	filter: drop-shadow(0 10px 12px rgba(22, 32, 46, .22));
	transition: transform .35s cubic-bezier(.2, .8, .3, 1), filter .35s ease;
}

/* Al levantarla: sube, crece y se inclina un punto. La sombra del suelo se
   ensancha y se aclara, que es lo que pasa cuando alejas un objeto de la mesa. */
.cat:hover .cat__pieza img,
.cat:focus-visible .cat__pieza img {
	transform: translateY(-10px) scale(1.07) rotate(-1.5deg);
	filter: drop-shadow(0 22px 20px rgba(22, 32, 46, .26));
}

.cat:hover .cat__pieza::after {
	width: 68%;
	opacity: .55;
	filter: blur(3px);
}

@media (prefers-reduced-motion: reduce) {
	.cat:hover .cat__pieza img { transform: none; }
}

.cat__cuerpo {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.cat h3 { font-size: 1.05rem; }
.cat p { margin: 0; font-size: .9rem; color: var(--gris); flex: 1; }

.cat__pie {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--titulo);
	font-size: .85rem;
	font-weight: 800;
	color: var(--azul);
}

.cat__pie::after { content: "→"; transition: transform .18s ease; }
.cat:hover .cat__pie::after { transform: translateX(4px); }

.cat[hidden] { display: none; }

/*
 * LA FILA CORTA SE ESTIRA — misma regla que la Vitrina de Latinos en Texas.
 *
 * Once tarjetas en cuatro columnas dejan la última fila con tres y un hueco a la
 * derecha. Aquí sí toca estirar, y no empaquetar como en los catálogos: las once
 * tienen contenido parecido, así que una un poco más ancha no desentona.
 *
 * El ancho lo pone el guion con `--tramos`, porque cuántas columnas hay solo se
 * sabe al pintar y el CSS no sabe dividir.
 */
.cat[style*="--tramos"] { grid-column: span var(--tramos); }
/* 2026-11-07: la tarjeta estirada conserva la altura de foto de las demás. Con 4/3 a doble ancho su foto
   salía el doble de alta y estiraba toda la fila (las vecinas quedaban con un hueco blanco enorme). */
.cat[style*="--tramos"] .cat__pieza { aspect-ratio: calc(4 * var(--tramos)) / 3; }
.cat[style*="--tramos"] .cat__pieza img { max-width: calc(82% / var(--tramos)); }

.sin-resultados {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--gris);
	padding: 40px 0;
}

/* --------------------------------------------------------------------------
   LA CINTA DE MARCAS
   -------------------------------------------------------------------------- */

.cinta {
	position: relative;
	overflow: hidden;
	background: var(--papel);
	border-block: 1px solid var(--linea);
	padding-block: 26px;
}

.cinta__marco {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 92%, transparent);
}

/*
 * La pista lleva el contenido repetido y se desplaza exactamente la mitad: al
 * llegar al final, la segunda mitad está donde estaba la primera y el salto de
 * vuelta no se ve. Con una sola copia se vería el hueco en cada vuelta.
 */
.cinta__pista {
	display: flex;
	width: max-content;
	animation: desfile 46s linear infinite;
}

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

@keyframes desfile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.cinta__grupo {
	display: flex;
	align-items: center;
	gap: clamp(40px, 6vw, 78px);
	padding-inline: clamp(20px, 3vw, 39px);
}

.cinta__grupo img {
	height: 30px;
	width: auto;
	/* Los logos son JPEG con fondo blanco: `multiply` hace desaparecer el blanco
	   y deja solo la tinta, sin recortarlos uno a uno. */
	mix-blend-mode: multiply;
	opacity: .72;
	transition: opacity .2s ease;
}

.cinta__grupo img:hover { opacity: 1; }

.cinta__parar {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--papel);
	border: 1px solid var(--linea);
	color: var(--gris);
	border-radius: 999px;
	padding: 5px 12px;
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 700;
	cursor: pointer;
}

.cinta__parar:hover { border-color: var(--azul); color: var(--azul); }

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

/* SERVICIO TÉCNICO: rehecho el 2026-11-10, ver «El taller» más abajo
   (en «CADA SECCIÓN CON SU FIRMA»). */

/* --------------------------------------------------------------------------
   LOS CATÁLOGOS
   -------------------------------------------------------------------------- */

/*
 * LOS CATÁLOGOS SE EMPAQUETAN, NO SE ESTIRAN.
 *
 * Tecneveca tiene 1 documento y MICRO tiene 11. Igualar las alturas dejaría la
 * tarjeta de Tecneveca con un documento y un palmo de vacío DENTRO: el hueco no
 * desaparecería, se mudaría al interior de la tarjeta.
 *
 * Con columnas, cada tarjeta sube a ocupar el hueco que deja la de arriba. No
 * queda espacio muerto y ninguna tarjeta se infla.
 */
.pdfs {
	columns: 3;
	column-gap: 20px;
}

.pdf {
	/* Que una tarjeta no se parta entre dos columnas: la mitad de MICRO abajo de
	   una columna y la otra mitad arriba de la siguiente sería ilegible. */
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 20px;
	/* En un contexto de columnas hace falta para que el margen inferior cuente y
	   la tarjeta ocupe el ancho entero de su columna. */
	display: inline-block;
	width: 100%;
}

@media (max-width: 980px) { .pdfs { columns: 2; } }
@media (max-width: 620px) { .pdfs { columns: 1; } }

.pdf {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-gr);
	overflow: hidden;
}

.pdf__cab { padding: 16px 20px 14px; border-bottom: 1px solid var(--linea); }
.pdf__cab h3 { font-size: 1rem; }
.pdf__cab p { margin: 4px 0 0; font-size: .8rem; color: var(--azul); font-weight: 600; }

.pdf__lista { list-style: none; margin: 0; padding: 0; }
.pdf__lista li + li { border-top: 1px solid var(--linea); }

.pdf__lista a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 20px;
	text-decoration: none;
	color: var(--tinta);
	transition: background .15s ease;
}

.pdf__lista a:hover { background: var(--azul-claro); }

/* El distintivo se dibuja: 28 imágenes para decir «PDF» serían 28 peticiones. */
.pdf__lista a::before {
	content: "PDF";
	flex: 0 0 auto;
	font-size: .6rem;
	font-weight: 800;
	font-family: var(--titulo);
	color: #fff;
	background: var(--azul);
	border-radius: 3px;
	padding: 3px 5px;
}

.pdf__nombre { flex: 1; font-size: .92rem; line-height: 1.3; }

.pdf__dato {
	flex: 0 0 auto;
	font-size: .76rem;
	color: var(--gris-claro);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MARCAS, EMPRESA Y CONTACTO
   -------------------------------------------------------------------------- */

.marcas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 18px;
}

.marca {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-gr);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow .2s ease, transform .2s ease;
}

.marca:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.marca img { height: 26px; width: auto; align-self: flex-start; mix-blend-mode: multiply; }

.marca__que {
	font-family: var(--titulo);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--azul);
	margin: 0;
}

.marca p:last-child { margin: 0; font-size: .9rem; color: var(--gris); }

.valores { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.valores li {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: .88rem;
	color: var(--gris);
}

.pilares {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 32px;
}

.pilar {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-left: 4px solid var(--azul);
	border-radius: var(--radio);
	padding: 22px;
}

.pilar h3 { font-size: 1.05rem; color: var(--azul); margin-bottom: 8px; }
.pilar p { margin: 0; font-size: .93rem; color: var(--gris); }

/* --- Contacto --- */

.contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }

.ficha { margin: 0; display: grid; gap: 18px; }

.ficha dt {
	font-family: var(--titulo);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--azul-hielo);
	margin-bottom: 4px;
}

.ficha dd { margin: 0; font-size: 1rem; line-height: 1.5; }
.ficha dd a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.ficha dd a:hover { border-color: #fff; }
.ficha dd span { display: block; font-size: .85rem; color: rgba(255, 255, 255, .65); }

.mapa {
	border-radius: var(--radio-gr);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
}

.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.cierre {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, .2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cierre h3 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); max-width: 24ch; }
.cierre__botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   EL ASISTENTE
   -------------------------------------------------------------------------- */

.asistente {
	position: fixed;
	/* 32 y no 20: a 20 se veía pegado al borde. Es además la distancia habitual
	   de un botón flotante — más cerca parece un error, más lejos se pierde. */
	left: 32px;
	bottom: 28px;
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.asistente__boton {
	position: relative;
	width: 58px;
	height: 58px;
	border: 0;
	border-radius: 50%;
	background: var(--azul);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 8px 24px rgba(0, 42, 102, .38);
	transition: transform .2s ease, background .2s ease;
}

.asistente__boton svg { width: 26px; height: 26px; position: relative; z-index: 1; }
.asistente__boton:hover { transform: scale(1.06); background: var(--azul-fuerte); }

/*
 * EL PULSO. Un anillo que crece y se desvanece detrás del botón — no es el botón
 * el que late, porque un botón que cambia de tamaño solo es difícil de acertar
 * con el dedo. El anillo llama la atención y el objetivo se queda quieto.
 */
.asistente__pulso,
.asistente__pulso::after {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* ARO, no disco. Un círculo relleno creciendo se lee como una mancha; un aro
	   se lee como una onda que sale del botón y se apaga. */
	border: 2px solid var(--azul);
	animation: palpita 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
}

/* El segundo aro va a medio ciclo del primero. Con uno solo queda un silencio
   largo entre latido y latido y el botón parece apagado la mitad del tiempo. */
.asistente__pulso::after {
	content: "";
	inset: -2px;
	animation-delay: 1.3s;
}

@keyframes palpita {
	0%        { transform: scale(1); opacity: .75; }
	70%, 100% { transform: scale(1.85); opacity: 0; }
}

/* Abierto, el pulso sobra: ya tiene la atención. */
.asistente.abierto .asistente__pulso,
.asistente.abierto .asistente__pulso::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.asistente__pulso,
	.asistente__pulso::after { animation: none; opacity: .35; transform: scale(1.25); }
}

.asistente__panel {
	width: min(84vw, 300px);
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-gr);
	box-shadow: 0 18px 50px rgba(22, 32, 46, .22);
	padding: 16px;
	transform-origin: bottom left;
	animation: asoma .22s ease-out;
}

@keyframes asoma {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

.asistente__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asistente__cab strong { font-family: var(--titulo); font-size: 1rem; }

.asistente__cerrar {
	border: 0;
	background: transparent;
	color: var(--gris);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.asistente__cerrar:hover { color: var(--tinta); }

.asistente__panel > p { margin: 6px 0 14px; font-size: .92rem; color: var(--gris); }

.asistente__opcion {
	display: block;
	padding: 11px 14px;
	margin-bottom: 8px;
	background: var(--nieve);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	font-size: .92rem;
	font-weight: 600;
	color: var(--tinta);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

.asistente__opcion:hover { background: var(--azul-claro); border-color: var(--azul); }

.asistente__pie {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--linea);
	font-size: .88rem;
}

.asistente__pie a { color: var(--azul); text-decoration: none; font-weight: 600; }

/* Sobre el azul de «Contacto» el botón azul desaparecía: ahí va en blanco
   (la clase la pone el guion cuando la sección pasa por detrás del botón). */
.asistente--claro .asistente__boton { background: #fff; color: var(--azul); box-shadow: 0 8px 24px rgba(0, 20, 60, .45); }
.asistente--claro .asistente__boton:hover { background: var(--azul-claro); }
.asistente--claro .asistente__pulso,
.asistente--claro .asistente__pulso::after { border-color: #fff; }

/* Con el cajón de móvil abierto, el asistente estorba: el cajón lo tapa a
   medias y quedan dos cosas flotando a la vez. */
.menu-abierto .asistente { display: none; }

/* --------------------------------------------------------------------------
   PIE
   -------------------------------------------------------------------------- */

.pie {
	background: var(--tinta);
	color: var(--gris-claro);
	padding-block: 34px;
	font-size: .86rem;
}

.pie .caja { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; }
.pie p { margin: 0; max-width: 62ch; }
.pie a { color: var(--gris-claro); text-decoration: none; }
.pie a:hover { color: #fff; }
.pie__redes { display: flex; gap: 18px; }

/* --------------------------------------------------------------------------
   APARICIÓN AL DESPLAZAR
   -------------------------------------------------------------------------- */

/*
 * El estado oculto SOLO existe si el guion lo enciende. Si algo se tuerce, el
 * contenido se ve: una animación no puede ser el requisito para leer la página.
 */
.anima .aparece {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}

.anima .aparece.visible { opacity: 1; transform: none; }

@media print {
	.anima .aparece { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   PANTALLAS ESTRECHAS
   -------------------------------------------------------------------------- */

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

	/*
	 * EN UNA COLUMNA, LAS PIEZAS VAN DELANTE DEL TEXTO. Lo pidió el dueño el
	 * 2026-08-20: «las imágenes de los objetos primero y luego el texto, pero
	 * en celular».
	 *
	 * Se cambia aquí y no en el marcado porque el orden del HTML es el que
	 * manda para un lector de pantalla y para el teclado: ahí lo primero sigue
	 * siendo el titular, que es lo que dice de qué va la empresa. Una imagen
	 * anunciada antes que el título haría que quien no ve empezara la página
	 * por la descripción de cuatro piezas sueltas.
	 *
	 * Va en los 980 y no solo en el teléfono a propósito: 980 es donde las dos
	 * columnas se convierten en una, que es justo donde aparece la pregunta de
	 * quién va primero. Partirlo en dos umbrales dejaría una franja de tablet
	 * con el orden contrario y sin ninguna razón que lo explique.
	 */
	.banner__racimo { order: -1; }

	/*
	 * El menú en línea y el botón suelto se van; los dos viven ahora dentro del
	 * cajón. El botón de cotizar se queda hasta los 560 px, que es donde deja de
	 * caber junto al logo.
	 */
	.cab__nav { display: none; }
	.hamburguesa[hidden] { display: none; }
	.hamburguesa:not([hidden]) { display: flex; }

	.avales { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

@media (max-width: 560px) {
	.cab__cotizar { display: none; }
}

/* Sin JavaScript no hay cajón, así que el menú vuelve a verse en línea y nadie
   se queda sin poder navegar. */
@media (max-width: 980px) {
	html:not(.hay-js) .cab__nav {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		font-size: .85rem;
	}
}

@media (max-width: 700px) {
	body { font-size: 16px; }

	.barra__lejos { display: none; }
	.cab__marca img { height: 38px; }

	.categorias { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

	.cat__cuerpo { padding: 14px; }
	.cat h3 { font-size: .95rem; }

	/* En el teléfono manda la foto y el nombre: la descripción sobra y alarga
	   la rejilla hasta hacerla incómoda de recorrer. */
	.cat p { display: none; }

	.cierre { flex-direction: column; align-items: flex-start; }
	.cierre__botones { width: 100%; }
	.cierre__botones .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}

	.anima .aparece { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   LA PORTADA v4 (2026-11-07, noche) — el cilindro arriba, se desarma solo y,
   al bajar, la cámara recorre sus piezas (ver el guion, sección 7).

   Felipe: «debería de ir arriba el cilindro… quiero que él se desarme solo, y
   que cuando baje se acerque a las partes del cilindro y enseñe cada parte y lo
   que ellos hacen con eso. Es que ni siquiera sé qué hace esta empresa».

   Dos estados, y el que manda es el que NO necesita guion:
   · SIN `html.portada-js` (sin JavaScript o con «menos movimiento»): el
     cilindro desarmado fijo, el titular y las cinco fichas en rejilla.
   · CON `html.portada-js`: escena pegada; el lienzo pinta el cilindro y la
     cámara; las fichas aparecen una a una.

   RENDIMIENTO: un solo dibujo por cuadro en el lienzo y, fuera de él, solo
   `opacity` y `transform`. Nada de blur, backdrop-filter ni @property.
   -------------------------------------------------------------------------- */

.portada {
	position: relative;
	/* el fondo del propio video, medido en sus cuadros: así el borde difuminado
	   del cuadro no se nota */
	background: linear-gradient(180deg, #D9E5EA 0%, #DEE8EC 55%, #E7EDEF 100%);
}

.portada__lienzo,
.portada__plano,
.portada__pines,
.portada__indice,
.portada__guia,
.portada__otra { display: none; }

/* --- Estado fijo --- */
.portada__escena { padding: calc(var(--techo) + 8px) 0 clamp(48px, 7vw, 88px); }
.portada__ventana { margin: 0 auto; max-width: 1500px; }
.portada__cartel { display: block; width: 100%; height: auto; }

.portada__entrada { text-align: center; }
.portada .rotulo { background: rgba(255, 255, 255, .8); }

.portada h1 {
	font-size: clamp(2rem, 2.3vw + 2.3vh, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.035em;
	max-width: 21ch;
	margin-inline: auto;
	color: var(--tinta);
}

.portada h1 em,
.parada__titulo em {
	font-style: normal;
	color: var(--azul);
	background: linear-gradient(90deg, var(--azul) 0%, var(--azul-vivo) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.portada__bajada {
	max-width: 70ch;
	margin: 14px auto 0;
	color: #46566B;
	font-size: clamp(.98rem, .5vw + .7rem, 1.12rem);
	line-height: 1.55;
}

.portada__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

.portada__paradas {
	list-style: none;
	max-width: var(--ancho);
	margin: 48px auto 0;
	padding: 0 var(--margen);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}

.parada {
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio-gr);
	padding: 22px 22px 24px;
	box-shadow: var(--sombra);
}

.parada__pieza {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris);
}

.parada__pieza span {
	flex: none;
	white-space: nowrap;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--azul);
	color: #fff;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}

.parada__titulo { font-size: clamp(1.25rem, 1.4vw + .6rem, 2rem); line-height: 1.1; letter-spacing: -.025em; }
.parada__texto { margin: 10px 0 0; color: var(--gris); font-size: 1rem; line-height: 1.55; }

.parada__accion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-family: var(--titulo);
	font-size: .9rem;
	font-weight: 800;
	color: var(--azul);
	text-decoration: none;
}

.parada__accion::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

.parada__accion:hover::after { transform: translateX(4px); }

.parada--cierre { grid-column: 1 / -1; text-align: center; }
.parada--cierre .parada__pieza { justify-content: center; }
.parada--cierre .parada__titulo { font-size: clamp(1.7rem, 2vw + 1.2vh, 2.8rem); }

.portada .avales {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
	color: var(--gris);
}

.portada .avales b { color: var(--azul); font-family: var(--titulo); font-size: 1.15rem; margin-right: 4px; }

/* ==========================================================================
   ESTADO VIVO (html.portada-js)
   ========================================================================== */

/* seis paradas, una pantalla entre cada una (el guion engancha en cada una).
   (2026-11-08, noche 4: ya no hay tramo de salida; del cierre al catálogo se
   pasa con un fundido a negro y un salto, «como si se teletransportara».)
   (2026-11-08 noche: el telón —el catálogo subiendo encima como una hoja— se
   cambió por el fundido. Felipe: «en vez de deslizarse, que el pistón
   desaparezca y se vaya haciendo un fade a negro».) */
.portada-js .portada__pista { height: 600vh; height: 600svh; }

/* El catálogo (negro) va montado 65svh sobre la salida: su borde asoma cuando
   el fondo de la escena ya es negro (no hay costura) y su título sube mientras
   el pistón todavía se está desvaneciendo: lo uno aparece mientras lo otro se
   va, sin rato de negro vacío. Un enlace a #catalogo lo deja bajo la cabecera. */
.portada-js #catalogo {
	z-index: 1;
	scroll-margin-top: -20px;
}

.portada-js .portada__escena {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	padding: 0;
}

.portada-js .portada__lienzo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

/* la cuadrícula de plano, quieta y tenue, por encima del cilindro */
.portada-js .portada__plano {
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(47, 114, 232, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(47, 114, 232, .07) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 85%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 85%);
}

.portada-js .portada__ventana { display: none; }

.portada-js .portada__entrada {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(18px, 4.5vh, 52px);
	z-index: 3;
	/* vuelve cuando la cámara ya llegó a la portada */
	transition: opacity .5s ease .55s, transform .5s ease .55s, visibility 0s linear 0s;
}

.portada--recorrido .portada__entrada {
	opacity: 0;
	transform: translateY(-22px);
	visibility: hidden;
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

/* --- Las fichas del recorrido --- */
.portada-js .portada__paradas {
	position: absolute;
	inset: 0;
	z-index: 3;
	max-width: none;
	margin: 0;
	padding: 0;
	display: block;
	pointer-events: none;
}

.portada-js .parada {
	position: absolute;
	left: calc(max(0px, (100% - var(--ancho)) / 2) + var(--margen));
	top: calc(50% + var(--techo) / 2);
	translate: 0 -50%;
	width: min(410px, 31vw);
	padding: 28px 28px 26px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 4px rgba(22, 32, 46, .05), 0 24px 48px -16px rgba(0, 42, 102, .28);
	opacity: 0;
	transform: translateY(18px);
	visibility: hidden;
	transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

/* la ficha entra cuando la cámara está llegando a su pieza */
.portada-js .parada.es-actual {
	opacity: 1;
	transform: none;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .5s ease .6s, transform .5s ease .6s, visibility 0s linear 0s;
}

.portada-js .parada--cierre {
	left: 0;
	right: 0;
	top: auto;
	bottom: clamp(18px, 4.5vh, 52px);
	translate: none;
	width: auto;
	padding: 0 var(--margen);
	background: none;
	border: 0;
	box-shadow: none;
}

.portada-js .parada--cierre .parada__texto { max-width: 56ch; margin-inline: auto; }

/* --- Los pines numerados sobre las piezas --- */
.portada-js .portada__pines { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.pin {
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--azul);
	color: #fff;
	font-family: var(--titulo);
	font-size: .82rem;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 14px -4px rgba(0, 42, 102, .55);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, background-color .25s ease;
}

.pin::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid var(--azul-vivo);
	opacity: 0;
	pointer-events: none;
}

.pines--visibles .pin { opacity: 1; pointer-events: auto; }
.pines--visibles .pin::after { animation: pin-latido 1.6s ease-out 2; }
.pines--recorrido .pin { opacity: .35; pointer-events: auto; }
.pines--recorrido .pin.es-actual { opacity: 1; background: var(--azul-vivo); }
.pin:hover { background: var(--azul-vivo); }

@keyframes pin-latido {
	0% { opacity: .8; transform: scale(.7); }
	100% { opacity: 0; transform: scale(1.5); }
}

/* --- El índice del recorrido (a la derecha) --- */
.portada-js .portada__indice {
	display: flex;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
	flex-direction: column;
	align-items: flex-end;
	gap: 18px;
	position: absolute;
	right: var(--margen);
	top: calc(50% + var(--techo) / 2);
	translate: 0 -50%;
	z-index: 4;
	opacity: 0;
}

/* solo durante el recorrido: en la portada y el cierre taparía la punta */
.portada--recorrido:not(.portada--cierre) .portada__indice {
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease .3s, visibility 0s linear 0s;
}

.portada__indice::before {
	content: "";
	position: absolute;
	right: 6px;
	top: 8px;
	bottom: 34px;
	width: 2px;
	background: rgba(0, 59, 141, .16);
}

.portada__indice button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 0;
	border: 0;
	background: none;
	font-family: var(--titulo);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6A7A8E;
	cursor: pointer;
	transition: color .25s ease;
}

/* solo se lee el nombre de la pieza actual (y todos al pasar el ratón): siete
   rótulos fijos encima del cilindro estorbaban */
.portada__indice button span {
	padding: 4px 8px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .88);
	opacity: 0;
	transform: translateX(6px);
	transition: opacity .25s ease, transform .25s ease;
}
.portada__indice button.es-actual span,
.portada__indice:hover button span,
.portada__indice button:focus-visible span { opacity: 1; transform: none; }

.portada__indice i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(0, 59, 141, .35);
	background: #E3ECF1;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.portada__indice button:hover { color: var(--azul); }
.portada__indice button.es-actual { color: var(--azul); }
.portada__indice button.es-actual i { background: var(--azul-vivo); border-color: var(--azul-vivo); transform: scale(1.15); }

/* --- «Saltar animación»: el botón flotante con la flecha (2026-11-08) --- */
.portada__saltar { display: none; }

.portada-js .portada__saltar {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	position: absolute;
	right: var(--margen);
	bottom: clamp(18px, 4.5vh, 52px);
	z-index: 6;
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--azul);
}

.portada__saltar span {
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .8);
}

.portada__saltar i {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--azul);
	color: #fff;
	box-shadow: 0 12px 26px -12px rgba(0, 42, 102, .7);
	transition: background-color .2s ease, transform .2s ease;
}

.portada__saltar svg { width: 22px; height: 22px; }
.portada__saltar:hover i { background: var(--azul-fuerte); transform: translateY(2px); }
.portada__saltar:focus-visible { outline: none; }
.portada__saltar:focus-visible i { outline: 3px solid var(--azul-vivo); outline-offset: 3px; }

/* --- «Baje…» y «Desarmar otra vez» --- */
.portada-js .portada__guia {
	display: flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	right: var(--margen);
	bottom: clamp(18px, 4.5vh, 52px);
	z-index: 4;
	margin: 0;
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--azul);
	opacity: 0;
	transition: opacity .4s ease;
}

.portada--abierta:not(.portada--recorrido) .portada__guia { opacity: 1; transition: opacity .5s ease .6s; }

/* abajo a la derecha va «Saltar animación»: el «Baje…» pasa a la izquierda
   (en pantallas medianas chocaría con los botones de la portada: se quita) */
.portada-js .portada__guia { right: auto; left: var(--margen); }
/* …y desde el 2026-11-10 se corre a la derecha del botón de ayuda, que ya se ve
   en la portada; si no cabe en una línea antes de los botones, va en dos */
.portada-js .portada__guia { left: max(var(--margen), 112px); max-width: calc(50vw - 300px); line-height: 1.5; text-wrap: balance; }
@media (max-width: 1199.98px) { .portada-js .portada__guia { display: none; } }

.portada__guia i {
	position: relative;
	width: 20px;
	height: 30px;
	border: 2px solid currentColor;
	border-radius: 12px;
}

.portada__guia i::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	width: 4px;
	height: 7px;
	margin-left: -2px;
	border-radius: 2px;
	background: currentColor;
	animation: guia-rueda 1.6s ease-in-out infinite;
}

@keyframes guia-rueda {
	0% { opacity: 0; transform: translateY(0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translateY(9px); }
}

.portada-js .portada__otra:not([hidden]) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: absolute;
	left: var(--margen);
	bottom: clamp(18px, 4.5vh, 52px);
	z-index: 4;
	padding: 8px 12px;
	border: 1.5px solid rgba(0, 59, 141, .22);
	border-radius: 8px;
	background: rgba(255, 255, 255, .7);
	font-family: var(--titulo);
	font-size: .78rem;
	font-weight: 800;
	color: var(--azul);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.portada-js .portada__otra:hover { background: #fff; border-color: var(--azul); }
.portada--recorrido .portada__otra:not([hidden]) { opacity: 0; visibility: hidden; }
.portada__otra svg { width: 16px; height: 16px; }

/* «Desarmar otra vez» sube a la esquina de arriba (abajo va el «Baje…») */
.portada-js .portada__otra:not([hidden]) { top: calc(var(--techo) + 14px); bottom: auto; }

/* El botón de ayuda se ve DESDE EL PRINCIPIO (2026-11-10, Felipe: «que el
   chat se vea desde el principio, eso me lo están pidiendo»). Antes se
   escondía mientras la portada estaba a la vista. En el teléfono, abajo van
   las fichas y los botones de la portada: el botón sube justo encima de lo
   que haya abajo (--asistente-sube, lo pone el guion), como un botón flotante
   que se aparta de un aviso, y baja a su esquina al salir de la portada. */
.asistente {
	translate: 0 calc(var(--asistente-sube, 0px) * -1);
	transition: opacity .3s ease, visibility 0s linear 0s, translate .45s cubic-bezier(.2, .8, .2, 1);
}

/* --- Computador bajo (portátiles de 650-760 px de alto) --- */
@media (min-width: 1000px) and (max-height: 780px) {
	.portada-js .portada h1 { font-size: clamp(1.7rem, 1.6vw + 2vh, 2.7rem); }
	.portada-js .portada__bajada { font-size: .95rem; margin-top: 10px; }
	.portada-js .portada__botones { margin-top: 16px; }
	.portada-js .portada .rotulo { margin-bottom: 10px; }
	.portada-js .parada { padding: 22px; }
	.portada-js .parada__titulo { font-size: 1.45rem; }
}

/* --- Tableta y teléfono --- */
@media (max-width: 999.98px) {
	.portada h1 { font-size: clamp(1.55rem, 6.4vw, 2.4rem); max-width: 18ch; }
	.portada__bajada { font-size: .93rem; line-height: 1.5; }
	/* uno encima del otro y del mismo largo (Felipe, 2026-11-08: «no están del
	   mismo tamaño en celular… uno encima de otro mejor») */
	.portada__botones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 360px; margin-inline: auto; }
	.portada__botones .btn { width: 100%; max-width: none; min-height: 54px; padding: 13px 16px; }

	.portada-js .parada {
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 12px;
		translate: none;
		width: auto;
		padding: 18px 18px 16px;
	}

	.portada-js .parada__titulo { font-size: clamp(1.15rem, 4.8vw, 1.5rem); }
	.portada-js .parada__texto { font-size: .92rem; margin-top: 6px; }
	.portada-js .parada__accion { margin-top: 10px; }
	.portada-js .parada--cierre { left: 0; right: 0; bottom: 16px; padding: 0 var(--margen); }
	.portada-js .parada--cierre .avales { gap: 4px 16px; font-size: .82rem; margin-top: 14px; }

	.pin { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: .72rem; }

	.portada-js .portada__indice,
	.portada-js .portada__guia { display: none; }

	.portada-js .portada__otra:not([hidden]) {
		left: 12px;
		right: auto;
		top: calc(var(--techo) + 10px);
		bottom: auto;
		padding: 8px;
	}

	.portada__otra span { display: none; }

	/* en el teléfono abajo van las fichas: el botón de saltar sube a la esquina */
	.portada-js .portada__saltar { right: 12px; top: calc(var(--techo) + 10px); bottom: auto; }
	.portada__saltar span { display: none; }
	.portada__saltar i { width: 44px; height: 44px; }
	.portada__saltar svg { width: 20px; height: 20px; }


}

@media (max-width: 700px) {
	.portada-js .portada .rotulo { font-size: 10px; padding: 5px 10px; margin-bottom: 10px; }
	.portada .avales { gap: 4px 16px; font-size: .84rem; }
}

/* Teléfonos bajos (iPhone SE): menos aire */
@media (max-width: 999.98px) and (max-height: 720px) {
	.portada-js .portada h1 { font-size: 1.5rem; }
	.portada-js .portada__bajada { font-size: .86rem; margin-top: 8px; }
	.portada-js .portada__botones { margin-top: 12px; }
	.portada-js .parada__texto { font-size: .86rem; }
}

/* Teléfono apaisado: la ficha va a la izquierda, como en el computador */
@media (max-width: 999.98px) and (max-height: 500px) {
	.portada-js .portada h1 { font-size: 1.3rem; max-width: none; }
	.portada-js .portada__bajada,
	.portada-js .portada .rotulo { display: none; }
	.portada-js .portada__botones { margin-top: 8px; }
	.portada-js .portada__botones .btn { padding-block: 9px; }
	.portada-js .parada {
		left: 12px;
		right: auto;
		top: calc(50% + var(--techo) / 2);
		bottom: auto;
		translate: 0 -50%;
		width: 44%;
		padding: 14px;
	}
	.portada-js .parada__accion { display: none; }
	.portada-js .parada--cierre { left: 0; right: 0; top: auto; bottom: 8px; translate: none; width: auto; }
	.portada-js .parada--cierre .parada__texto,
	.portada-js .parada--cierre .avales { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.portada__guia i::after,
	.pines--visibles .pin::after { animation: none; }
	.portada__saltar:hover i { transform: none; }
}

/* --------------------------------------------------------------------------
   EL BUSCADOR, EN EL CATÁLOGO (2026-11-06)
   Antes iba en el banner azul; ahora está justo encima de lo que filtra.
   -------------------------------------------------------------------------- */

.buscador--catalogo { max-width: 620px; margin: -12px 0 28px; }
.buscador--catalogo label { color: var(--gris); font-family: var(--titulo); font-weight: 700; }
.buscador--catalogo input { border: 1px solid var(--linea); }

/* --------------------------------------------------------------------------
   LA CABECERA TRANSPARENTE (2026-11-06)
   Felipe: «se ve más futurista». Con la portada animada (html.portada-js):
   · encima de la portada (html.cabecera-flota), la tira y la barra son
     transparentes y flotan sobre el plano, con letra azul;
   · pasada la portada, barra blanca con una línea azul fina abajo.
   Sin blur ni backdrop-filter: solo cambia el color de fondo (barato).
   Sin guion o con «menos movimiento», la cabecera de siempre.
   -------------------------------------------------------------------------- */

.portada-js .barra,
.portada-js .cab {
	transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.portada-js .barra {
	background: #fff;
	color: var(--azul);
	border-bottom: 1px solid rgba(0, 59, 141, .08);
}

.portada-js .barra a:hover { color: var(--azul-fuerte); }

.portada-js .cab { border-bottom: 1px solid var(--azul-vivo); }

.cabecera-flota .barra,
.cabecera-flota .cab {
	background: transparent;
	border-bottom-color: transparent;
}

.cabecera-flota .hamburguesa { background: rgba(255, 255, 255, .55); border-color: rgba(0, 59, 141, .25); }


/* =========================================================================
   PROYECTOS A MEDIDA (2026-11-07) — fotos reales del cliente: una foto grande y
   una chica montada en la esquina; la fila de en medio va al revés y la última
   lleva dos verticales. No son tres tarjetas iguales.
   ========================================================================= */
.proyectos { display: grid; gap: clamp(40px, 6vw, 80px); margin-top: 12px; }
.proyecto { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.proyecto--al-reves { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.proyecto--al-reves .proyecto__fotos { order: 2; }
.proyecto__fotos { position: relative; padding: 0 0 48px 0; }
.proyecto__foto { display: block; width: 100%; height: auto; border-radius: var(--radio-gr); box-shadow: var(--sombra); object-fit: cover; }
.proyecto__foto--chica { position: absolute; right: -18px; bottom: 0; width: 42%; border: 6px solid var(--papel); }
.proyecto--al-reves .proyecto__foto--chica { right: auto; left: -18px; }
.proyecto--par .proyecto__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; }
.proyecto--par .proyecto__foto { aspect-ratio: 3 / 4; }
.proyecto__texto h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; }
.proyecto__texto p { margin: 12px 0 0; color: var(--gris); }
.proyectos__cierre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(40px, 6vw, 72px);
	padding: 24px 28px; border: 1px solid var(--linea); border-radius: var(--radio-gr); background: var(--papel); }
.proyectos__cierre p { margin: 0; max-width: 60ch; }

/* La empresa: el texto y la foto real de la tienda. */
.empresa { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.empresa__foto { margin: 0; }
.empresa__foto img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: var(--radio-gr); box-shadow: var(--sombra); }
.empresa__foto figcaption { margin-top: 10px; font-size: .85rem; color: var(--gris); }

@media (max-width: 900px) {
	.proyecto, .proyecto--al-reves, .empresa { grid-template-columns: 1fr; }
	.proyecto--al-reves .proyecto__fotos { order: 0; }
	.proyecto__foto--chica { right: 10px; width: 40%; border-width: 4px; }
	.proyecto--al-reves .proyecto__foto--chica { left: 10px; }
	.empresa__foto img { max-height: 420px; }
}


/* =========================================================================
   BOTONES (2026-11-07). Felipe: «esos botones así casi no me gustan, no me
   cuadran». Pasan de píldora a botón industrial: esquinas de 8 px, peso 700 y,
   los de acción, una flecha que avanza al pasar el ratón. Un solo estilo en toda
   la página. La flecha es SVG (una flecha de texto sale como emoji en iPhone).
   ========================================================================= */
.btn { border-radius: 8px; padding: 14px 22px; font-weight: 700; letter-spacing: .01em; }
.btn:hover { transform: none; }
.btn--azul::after, .btn--blanco::after {
	content: ''; flex: none; width: 17px; height: 17px; margin-right: -3px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}
.btn--azul:hover::after, .btn--blanco:hover::after { transform: translateX(4px); }
.btn--azul { box-shadow: 0 10px 22px -12px rgba(0, 59, 141, .55); }
.btn--linea { border-width: 1.5px; border-color: #B6C4D6; background: rgba(255, 255, 255, .78); color: var(--azul); }
.btn--linea:hover { background: #fff; border-color: var(--azul); color: var(--azul); }
.cab .btn::after { display: none; }
@media (prefers-reduced-motion: reduce) { .btn--azul:hover::after, .btn--blanco:hover::after { transform: none; } }


/* =========================================================================
   «TODA LA PÁGINA WOW» (2026-11-07)

   Felipe: «necesito que toda la página sea WOW, que es algo increíble,
   impresionante… primero haz todo lo demás y último dejemos ese cilindro».

   El concepto es el de la portada: PLANO TÉCNICO. Cuadrícula de plano en los
   paneles, piezas que se inclinan bajo la mano, catálogos que se abren como
   libros. Todo lo que se mueve es transform u opacidad (la web de Laura se
   hundió a 6 fps con blur animado y backdrop-filter) y todo tiene su versión
   quieta para quien pide menos movimiento.
   ========================================================================= */

/* ---- Los títulos de sección suben un poco más que su bloque ---- */
.anima .cabeza-seccion.aparece .titulo {
	transform: translateY(18px);
	transition: transform .8s cubic-bezier(.2, .8, .2, 1) .06s;
}
.anima .cabeza-seccion.aparece.visible .titulo { transform: none; }

/* ---- La cuadrícula de plano, compartida ---- */
.plano {
	background-color: var(--nieve);
	background-image:
		linear-gradient(rgba(0, 59, 141, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 59, 141, .055) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: -1px -1px;
}

/* -------------------------------------------------------------------------
   CATÁLOGO: la tarjeta se inclina bajo el ratón y la pieza flota por delante.
   El guion pone la inclinación (transform) y la posición del brillo (--mx/--my).
   Solo con ratón: en el teléfono no hay «bajo la mano».
   ------------------------------------------------------------------------- */
.cat { position: relative; }
.cat::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(47, 114, 232, .14), transparent 62%);
	opacity: 0;
	transition: opacity .3s ease;
}
.cat:hover::after { opacity: 1; }
.cat.cat--inclina { transition: transform .12s linear, box-shadow .2s ease, border-color .2s ease; }
.cat.cat--inclina .cat__pieza img {
	transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 10px), 0) scale(1.08);
	transition: transform .12s linear, filter .35s ease;
}

/* El aviso de «agregado a su cotización» */
.aviso-cotiza {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100vw - 32px);
	padding: 12px 12px 12px 18px;
	border-radius: 12px;
	background: var(--tinta);
	color: #fff;
	font-size: .92rem;
	box-shadow: 0 18px 40px -12px rgba(22, 32, 46, .5);
	transform: translate(-50%, 140%);
	opacity: 0;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.aviso-cotiza.esta { transform: translate(-50%, 0); opacity: 1; }
.aviso-cotiza strong { font-family: var(--titulo); }
.aviso-cotiza a {
	flex: none;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff;
	color: var(--azul);
	font-family: var(--titulo);
	font-weight: 800;
	font-size: .85rem;
	text-decoration: none;
	white-space: nowrap;
}
.aviso-cotiza a:hover { background: var(--azul-claro); }
/* en el teléfono, por encima del botón del asistente (abajo a la izquierda) */
@media (max-width: 620px) {
	.aviso-cotiza { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px); justify-content: space-between; }
}

/* La cuenta en el botón «Cotizar» de la cabecera */
.cuenta-cotiza {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	margin-right: -6px;
	border-radius: 999px;
	background: #fff;
	color: var(--azul);
	font-size: .75rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.cuenta-cotiza[hidden] { display: none; }
.cuenta-cotiza.salta { animation: cuenta-salta .5s cubic-bezier(.3, 1.6, .5, 1) 1; }
@keyframes cuenta-salta { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

/* -------------------------------------------------------------------------
   SERVICIO: el recorrido de una pieza por el taller. La línea se dibuja con el
   desplazamiento y cada paso se enciende cuando la línea llega a él.
   ------------------------------------------------------------------------- */
.proceso {
	margin-top: clamp(48px, 6vw, 80px);
	padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 36px) clamp(28px, 4vw, 44px);
	border: 1px solid var(--linea);
	border-radius: var(--radio-gr);
}
.proceso > .rotulo { background: var(--papel); }

.proceso__linea {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

/* El riel va de centro a centro del primer y el último círculo */
.proceso__riel {
	position: absolute;
	top: 27px;
	left: calc((100% - 80px) / 10);
	right: calc((100% - 80px) / 10);
	height: 2px;
	background: var(--linea);
	border-radius: 2px;
	overflow: hidden;
}
.proceso__riel span {
	position: absolute;
	inset: 0;
	background: var(--azul);
	transform-origin: left center;
}

.proceso__paso {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
}
.proceso__icono {
	position: relative;
	width: 56px;
	height: 56px;
	margin-bottom: 8px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid var(--azul);
	background: var(--azul);
	color: #fff;
	transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.proceso__icono svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.proceso__icono::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 2px solid var(--azul-vivo);
	opacity: 0;
	pointer-events: none;
}
.proceso--vivo .proceso__paso:not(.hecho) .proceso__icono {
	background: var(--papel);
	color: var(--azul);
	border-color: var(--linea);
}
.proceso--vivo .proceso__paso.hecho .proceso__icono::after { animation: proceso-pulso .9s ease-out 1; }
@keyframes proceso-pulso {
	0% { opacity: .75; transform: scale(.85); }
	100% { opacity: 0; transform: scale(1.4); }
}
.proceso__num {
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--azul);
}
.proceso__paso strong { font-family: var(--titulo); font-size: 1rem; color: var(--tinta); line-height: 1.25; }
.proceso__paso > span:last-child { font-size: .88rem; color: var(--gris); max-width: 24ch; line-height: 1.45; }

@media (max-width: 760px) {
	.proceso__linea { grid-template-columns: 1fr; gap: 22px; }
	.proceso__riel { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
	.proceso__riel span { transform-origin: center top; }
	.proceso__paso {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 2px;
		align-items: start;
		text-align: left;
	}
	.proceso__icono { grid-row: 1 / span 3; margin: 0; }
	.proceso__num { padding-top: 4px; }
	.proceso__paso > span:last-child { max-width: none; }
}

/* -------------------------------------------------------------------------
   DESCARGAS: la biblioteca técnica. Las portadas son la primera página real de
   cada PDF; al pasar por encima el catálogo se abre como un libro.
   ------------------------------------------------------------------------- */
.biblio__filtros { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.biblio--viva .biblio__filtros { display: flex; }
.biblio__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1.5px solid var(--linea);
	border-radius: 999px;
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--titulo);
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.biblio__chip i { font-style: normal; font-size: .75rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.biblio__chip:hover { border-color: var(--azul); color: var(--azul); }
.biblio__chip[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.biblio__chip[aria-pressed="true"] i { color: var(--azul-hielo); }

.biblio__estante {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
	gap: 34px 22px;
}
.libro[hidden] { display: none; }
.libro a { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--tinta); }
.libro a:focus-visible { outline-offset: 6px; }
.libro__tapa {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	margin-bottom: 12px;
	border-radius: 3px 7px 7px 3px;
	overflow: hidden;
	background: var(--papel);
	box-shadow: 0 1px 2px rgba(22, 32, 46, .1), 0 12px 22px -10px rgba(22, 32, 46, .32);
	transform-origin: left center;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
.libro__tapa img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.libro__tapa--apaisada img { object-fit: contain; object-position: center; }
.libro__tapa--apaisada { background: #EEF2F7; }
/* el lomo */
.libro__tapa::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .05) 3%, rgba(255, 255, 255, .22) 4.5%, transparent 10%);
}
/* el brillo que cruza al abrirse */
.libro__tapa::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%);
	transform: translateX(-110%);
	transition: transform .8s ease;
}
.libro a:hover .libro__tapa,
.libro a:focus-visible .libro__tapa {
	transform: perspective(900px) rotateY(-18deg) translateY(-6px);
	box-shadow: 16px 20px 30px -14px rgba(22, 32, 46, .4);
}
.libro a:hover .libro__tapa::after,
.libro a:focus-visible .libro__tapa::after { transform: translateX(110%); }
.libro__marca {
	font-family: var(--titulo);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--azul);
}
.libro__nombre { font-family: var(--titulo); font-size: .95rem; line-height: 1.25; }
.libro a:hover .libro__nombre { color: var(--azul); }
.libro__dato { font-size: .8rem; color: var(--gris); font-variant-numeric: tabular-nums; }
.libro.entra { animation: libro-entra .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes libro-entra { from { opacity: 0; transform: translateY(16px); } }

/* En el teléfono, 28 portadas en rejilla serían 14 filas: pasan a un estante
   que se desliza de lado, con la siguiente portada asomando. */
@media (max-width: 620px) {
	.biblio__estante {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 44%;
		gap: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--margen));
		padding: 4px var(--margen) 14px;
		scroll-padding-inline: var(--margen);
		scrollbar-width: thin;
	}
	.libro { scroll-snap-align: start; }
	.libro a:hover .libro__tapa { transform: none; }
}

/* -------------------------------------------------------------------------
   MARCAS: un índice, con el nombre en grande. El logo queda de firma.
   ------------------------------------------------------------------------- */
.indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.indice__fila {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .7fr) minmax(0, 1.6fr) 120px;
	align-items: center;
	gap: 24px;
	padding: 24px 12px;
	border-bottom: 1px solid var(--linea);
}
.indice__fila::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--papel);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.indice__fila:hover::before { transform: scaleY(1); }
.indice__fila > * { position: relative; z-index: 1; }
.indice__nombre {
	font-family: var(--titulo);
	font-weight: 800;
	font-size: clamp(1.9rem, 4.4vw, 3.4rem);
	letter-spacing: -.035em;
	line-height: 1;
	color: var(--tinta);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1), color .25s ease;
}
.indice__fila:hover .indice__nombre { transform: translateX(12px); color: var(--azul); }
.indice__que {
	font-family: var(--titulo);
	font-size: .74rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--azul);
}
.indice__texto { font-size: .93rem; color: var(--gris); line-height: 1.5; }
.indice__logo {
	justify-self: end;
	height: 30px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
	mix-blend-mode: multiply;
	opacity: .55;
	transition: opacity .25s ease;
}
.indice__fila:hover .indice__logo { opacity: 1; }

@media (max-width: 860px) {
	.indice__fila {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 8px 16px;
		padding: 20px 4px;
	}
	.indice__nombre { grid-column: 1; grid-row: 1; }
	.indice__logo { grid-column: 2; grid-row: 1; height: 24px; }
	.indice__que, .indice__texto { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   EMPRESA: los valores pasan como una cinta, en letra grande.
   ------------------------------------------------------------------------- */
.cinta-valores {
	margin-top: clamp(40px, 5vw, 64px);
	display: flex;
	overflow: hidden;
	padding-block: 22px;
	border-block: 1px solid var(--linea);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.valores-cinta {
	flex: none;
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: valores-pasa 46s linear infinite;
}
.valores-cinta li {
	display: flex;
	align-items: center;
	font-family: var(--titulo);
	font-weight: 800;
	font-size: clamp(1.35rem, 2.8vw, 2.1rem);
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--tinta);
	white-space: nowrap;
}
.valores-cinta li:nth-child(even) { color: var(--azul); }
.valores-cinta li::after {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-inline: clamp(18px, 2.4vw, 32px);
	border-radius: 50%;
	background: var(--azul-vivo);
}
.cinta-valores:hover .valores-cinta,
.cinta-valores.quieta .valores-cinta { animation-play-state: paused; }
@keyframes valores-pasa { to { transform: translateX(-100%); } }

/* -------------------------------------------------------------------------
   CONTACTO: «Arme su cotización». Deja el correo escrito; no guarda nada.
   ------------------------------------------------------------------------- */
.cotizador {
	margin-top: clamp(40px, 5vw, 64px);
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(28px, 4vw, 56px);
	padding: clamp(24px, 4vw, 48px);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radio-gr);
	background-color: var(--azul-fuerte);
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 28px 28px;
	scroll-margin-top: calc(var(--techo) + 20px);
}
.cotizador__cab h3 { font-size: clamp(1.45rem, 2.7vw, 2.05rem); max-width: 17ch; }
.cotizador__cab > p:not(.rotulo) { margin: 14px 0 0; max-width: 42ch; color: rgba(255, 255, 255, .8); }
.cotizador__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-content: start; }
.cotizador__form > *, .cotizador > * { min-width: 0; }
.cotizador__lineas { grid-column: 1 / -1; min-width: 0; margin: 0 0 6px; padding: 0; border: 0; }
.cotizador__lineas legend {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 0;
	margin-bottom: 12px;
	font-family: var(--titulo);
	font-weight: 800;
	font-size: 1rem;
}
.cotizador__cuenta { font-family: var(--texto); font-weight: 600; font-size: .85rem; color: var(--azul-hielo); }
.cotizador__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; cursor: pointer; }
.opcion input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.opcion span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	border: 1.5px solid rgba(255, 255, 255, .3);
	border-radius: 8px;
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	user-select: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.opcion span::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	border: 1.5px solid currentColor;
	border-radius: 4px;
	opacity: .75;
	background: center / 11px no-repeat;
}
.opcion:hover span { border-color: #fff; }
.opcion input:checked + span { background: #fff; border-color: #fff; color: var(--azul); }
.opcion input:checked + span::before {
	opacity: 1;
	border-color: var(--azul);
	background-color: var(--azul);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.opcion input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.opcion.destello span { animation: opcion-destello .7s ease 1; }
@keyframes opcion-destello { 35% { transform: scale(1.07); } }

.cotizador__campo { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: rgba(255, 255, 255, .86); }
.cotizador__campo--ancho { grid-column: 1 / -1; }
.cotizador__campo input,
.cotizador__campo textarea {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 12px 14px;
	border: 1.5px solid rgba(255, 255, 255, .24);
	border-radius: 8px;
	background: rgba(255, 255, 255, .07);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
	resize: vertical;
	transition: border-color .18s ease, background-color .18s ease;
}
.cotizador__campo input::placeholder,
.cotizador__campo textarea::placeholder { color: rgba(255, 255, 255, .5); }
.cotizador__campo input:hover,
.cotizador__campo textarea:hover { border-color: rgba(255, 255, 255, .45); }
.cotizador__campo input:focus,
.cotizador__campo textarea:focus { border-color: #fff; background: rgba(255, 255, 255, .12); }
.cotizador__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.cotizador__estado { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font-size: .9rem; color: var(--azul-hielo); }

/* «Su lista»: lo marcado, en vivo, como una hoja de pedido */
.cotizador__resumen {
	margin-top: 28px;
	padding: 18px 20px 20px;
	border: 1.5px dashed rgba(255, 255, 255, .28);
	border-radius: 12px;
}
.cotizador__resumen-tit {
	margin: 0 0 10px;
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--azul-hielo);
}
.cotizador__resumen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cotizador__resumen li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--titulo);
	font-weight: 700;
	font-size: .95rem;
	animation: resumen-entra .35s cubic-bezier(.2, .8, .2, 1) both;
}
.cotizador__resumen li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: var(--azul-vivo); }
.cotizador__resumen li.vacia { font-family: var(--texto); font-weight: 400; color: rgba(255, 255, 255, .6); animation: none; }
.cotizador__resumen li.vacia::before { display: none; }
@keyframes resumen-entra { from { opacity: 0; transform: translateX(-8px); } }

@media (min-width: 861px) {
	.cotizador__cab { position: sticky; top: calc(var(--techo) + 28px); align-self: start; }
}
@media (max-width: 860px) {
	.cotizador { grid-template-columns: minmax(0, 1fr); }
	.cotizador__resumen { display: none; }
}
/* En el teléfono las casillas van de dos en dos: una por fila eran doce filas */
@media (max-width: 560px) {
	.cotizador__chips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
	.opcion span { width: 100%; height: 100%; min-height: 46px; padding: 8px 10px; gap: 8px; font-size: .84rem; line-height: 1.2; }
	.cotizador__acciones .btn { flex: 1 1 100%; }
}
@media (max-width: 340px) {
	.cotizador__form { grid-template-columns: minmax(0, 1fr); }
}

/* Los filtros de la biblioteca, en una sola fila que se desliza */
@media (max-width: 620px) {
	.biblio--viva .biblio__filtros {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--margen));
		padding: 2px var(--margen) 6px;
		scrollbar-width: none;
	}
	.biblio__filtros::-webkit-scrollbar { display: none; }
	.biblio__chip { flex: none; }
}

/* -------------------------------------------------------------------------
   MENOS MOVIMIENTO: todo quieto, todo visible
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.anima .cabeza-seccion.aparece .titulo { transform: none; transition: none; }
	.cat.cat--inclina .cat__pieza img { transform: none; }
	.libro a:hover .libro__tapa,
	.libro a:focus-visible .libro__tapa { transform: none; }
	.libro__tapa::after { display: none; }
	.libro.entra { animation: none; }
	.indice__fila:hover .indice__nombre { transform: none; }
	.valores-cinta { flex: 1; flex-wrap: wrap; row-gap: 10px; animation: none; }
	.valores-cinta[aria-hidden] { display: none; }
	.cinta-valores { -webkit-mask-image: none; mask-image: none; }
	.proceso__icono::after,
	.cotizador__resumen li,
	.opcion.destello span,
	.cuenta-cotiza.salta { animation: none; }
	.aviso-cotiza { transition: opacity .2s ease; }
}


/* =========================================================================
   EL ESCAPARATE (2026-11-08, noche)

   Felipe: «que esta sección sea más chévere, más animaciones, los productos por
   categorías… que la sección suba de color negro… y más abajo, con la blanca,
   que los colores cambien con un fade in».

   · El catálogo sube NEGRO como telón sobre el cilindro (el negro de la marca,
     #070B12, el de la primera paleta: azul, blanco y negro).
   · Arriba, el escaparate: seis familias a la izquierda y una vitrina con la
     pieza flotando sobre un halo azul y las líneas de esa familia.
   · Abajo, «Las 11 líneas»: el buscador y las tarjetas. Al llegar, TODA la
     sección se funde a blanco (.catalogo--claro). Los colores salen de unas
     variables que cambian de valor; cada elemento anima su propio color, fondo
     o borde (las variables no se animan, las propiedades sí).
   · Sin blur ni backdrop-filter animados (la lección de la web de Laura): el
     halo es un degradado quieto que solo escala, la pieza flota con transform.
   ========================================================================= */

.catalogo {
	/* negro de verdad (Felipe: «negro oscuro… negro, no azul oscuro»); el
	   azul queda solo en los acentos */
	--noche: #000000;
	--c-fondo: var(--noche);
	--c-texto: #F5F5F6;
	--c-tenue: #A4A9B2;
	--c-apagado: rgba(245, 245, 246, .34);
	--c-linea: rgba(255, 255, 255, .11);
	--c-vitrina: #0B0B0D;
	--c-plano: rgba(255, 255, 255, .055);
	--c-numero: rgba(255, 255, 255, .13);
	--c-halo: 1;
	--c-sombra: rgba(0, 0, 0, .55);
	--c-rotulo: var(--azul-hielo);
	--c-rotulo-fondo: rgba(47, 114, 232, .18);
	--c-ficha: rgba(255, 255, 255, .04);
	--c-ficha-viva: rgba(47, 114, 232, .16);
	--c-acento: #5B95F5;          /* 7:1 sobre el negro */
	--fundido: .9s ease;

	position: relative;
	padding-top: clamp(56px, 6vw, 84px);
	background: var(--c-fondo);
	color: var(--c-texto);
	transition: background-color var(--fundido), color var(--fundido);
}

.catalogo--claro {
	--c-fondo: var(--nieve);
	--c-texto: var(--tinta);
	--c-tenue: var(--gris);
	--c-apagado: rgba(22, 32, 46, .38);
	--c-linea: var(--linea);
	--c-vitrina: #FFFFFF;
	--c-plano: rgba(0, 59, 141, .05);
	--c-numero: rgba(0, 59, 141, .1);
	--c-halo: .4;
	--c-sombra: rgba(22, 32, 46, .22);
	--c-rotulo: var(--azul);
	--c-rotulo-fondo: var(--azul-claro);
	--c-ficha: var(--nieve);
	--c-ficha-viva: var(--azul-claro);
	--c-acento: var(--azul);
}

.catalogo .rotulo { color: var(--c-rotulo); background: var(--c-rotulo-fondo); transition: color var(--fundido), background-color var(--fundido); }
.catalogo .titulo { color: var(--c-texto); transition: color var(--fundido); }
.catalogo .entrada { color: var(--c-tenue); transition: color var(--fundido); }
.catalogo .buscador--catalogo label { color: var(--c-tenue); transition: color var(--fundido); }

/* ---------- la cabeza ---------- */
.escaparate__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 48px;
	margin-bottom: clamp(28px, 3.4vw, 44px);
}

/* en el computador, la bajada al lado del título: la vitrina entra en la pantalla */
@media (min-width: 1000px) {
	.escaparate__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.escaparate__titulo {
	margin: 0;
	font-size: clamp(2.2rem, 4.2vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -.025em;
}

.escaparate__titulo em { font-style: normal; color: var(--c-acento); transition: color var(--fundido); }

/* cada renglón sube desde detrás de su propio borde */
.corte { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.corte > span { display: inline-block; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.corte ~ .corte > span { transition-delay: .09s; }

.escaparate__bajada {
	max-width: 32ch;
	margin: 0;
	font-size: 1.08rem;
	color: var(--c-tenue);
	transition: color var(--fundido), opacity .8s ease .3s, transform .8s ease .3s;
}

/* ---------- EL PLANO DE LA PLANTA (2026-11-10, noche) ----------
   Felipe, sobre el anillo: «algo más chimba, eso está muy básico y con esas letras también». El plano isométrico
   de una línea de producción, en trazo fino sobre negro, con las seis estaciones del circuito de aire. Lo dibuja
   pagina.js (bloque 10); aquí van los colores (variables que se funden a blanco con el resto del catálogo), la
   entrada (el trazo con pathLength=1 + dashoffset, sin vector-effect), el aire, la estación encendida, los
   mecanismos y la ficha que se abre. Solo transform, opacidad y stroke-dashoffset: nada de blur animado.
   Letras de esta sección: Big Shoulders Display (rótulo de fábrica) y JetBrains Mono (las del plano). */
.catalogo {
	--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
	--rotulista: "Big Shoulders Display", "Arial Narrow", "Barlow", sans-serif;
	--p-fondo: #040507;
	--p-raya: rgba(226, 234, 246, .62);
	--p-raya-tenue: rgba(226, 234, 246, .3);
	--p-raya-apagada: rgba(226, 234, 246, .36);
	--p-f0: #16181c;
	--p-f1: #0e0f12;
	--p-f2: #090a0c;
	--p-f3: #020203;
	--p-losa0: #0b0c0f;
	--p-losa1: #08090b;
	--p-losa2: #060708;
	--p-rejilla: rgba(255, 255, 255, .075);
	--p-tubo: #2a2f37;
	--p-num: rgba(255, 255, 255, .07);
	--p-etq: rgba(226, 234, 246, .42);
	--p-act: #5B95F5;
	--p-act0: #10213f;
	--p-act1: #0b172d;
	--p-act2: #08101f;
	--p-aire: #5B95F5;
	--p-flujo: var(--azul-hielo);
}

.catalogo--claro {
	--p-fondo: #FFFFFF;
	--p-raya: rgba(22, 32, 46, .55);
	--p-raya-tenue: rgba(22, 32, 46, .25);
	--p-raya-apagada: rgba(22, 32, 46, .32);
	--p-f0: #FFFFFF;
	--p-f1: #EEF2F8;
	--p-f2: #E3E9F2;
	--p-f3: #D5DDE9;
	--p-losa0: #F5F7FA;
	--p-losa1: #EBEFF5;
	--p-losa2: #E2E8F0;
	--p-rejilla: rgba(0, 59, 141, .08);
	--p-tubo: #CBD5E1;
	--p-num: rgba(0, 59, 141, .08);
	--p-etq: rgba(22, 32, 46, .45);
	--p-act: var(--azul-vivo);
	--p-act0: #E8F0FC;
	--p-act1: #DCE7FA;
	--p-act2: #CFDDF6;
	--p-aire: var(--azul-vivo);
	--p-flujo: var(--azul);
}

/* el título: rótulo de fábrica, grande, condensado y en mayúsculas */
.escaparate__titulo {
	font-family: var(--rotulista);
	font-size: clamp(2.9rem, 7.2vw, 6.4rem);
	font-weight: 900;
	line-height: .88;
	letter-spacing: .005em;
	text-transform: uppercase;
}
.escaparate .rotulo { font-family: var(--mono); font-weight: 600; letter-spacing: .16em; }
.escaparate__bajada { font-size: 1.05rem; }

/* ---------- el marco del plano ---------- */
.planta { position: relative; }
.planta__marco {
	position: relative;
	aspect-ratio: var(--aspecto, 2.4);
	overflow: hidden;
	border: 1px solid var(--c-linea);
	border-radius: 22px;
	background: var(--p-fondo);
	isolation: isolate;
	transition: background-color var(--fundido), border-color var(--fundido), opacity .5s ease;
}
.planta__lienzo { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .75s cubic-bezier(.2, .8, .2, 1), opacity .55s ease; }
.planta__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.planta.abierta .planta__lienzo { opacity: .38; }
.planta:not(.es-vivo) .planta__marco { display: none; }

/* el HUD del plano: rótulos técnicos en las esquinas */
.planta__hud, .planta__leyenda {
	position: absolute;
	z-index: 3;
	margin: 0;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--p-etq);
	pointer-events: none;
	transition: color var(--fundido), opacity .4s ease;
}
.planta__hud--uno { left: 20px; top: 16px; display: flex; gap: 18px; }
.planta__hud--uno span:first-child { color: var(--c-acento); }
.planta__hud--dos { right: 20px; top: 16px; }
.planta__leyenda { left: 20px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.planta__ley-aire { width: 22px; height: 2px; background: var(--p-aire); }
.planta__ley-est { width: 9px; height: 9px; margin-left: 14px; border: 1.5px solid var(--p-act); border-radius: 50%; }
.planta.abierta .planta__leyenda, .planta.abierta .planta__hud--dos { opacity: 0; }

/* ---------- el dibujo ---------- */
.planta__svg .t {
	fill: var(--p-f0);
	stroke: var(--p-raya);
	stroke-width: 1.15;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .85s cubic-bezier(.45, 0, .2, 1) var(--d, 0s), fill-opacity .5s ease calc(var(--d, 0s) + .38s), fill .5s ease, stroke .45s ease;
}
.planta__svg .f0 { fill: var(--p-f0); }
.planta__svg .f1 { fill: var(--p-f1); }
.planta__svg .f2 { fill: var(--p-f2); }
.planta__svg .f3 { fill: var(--p-f3); }
.planta__svg .interior { stroke: var(--p-raya-tenue); }
.planta__svg .p0 { fill: var(--p-losa0); stroke: var(--p-raya-tenue); }
.planta__svg .p1 { fill: var(--p-losa1); stroke: var(--p-raya-tenue); }
.planta__svg .p2 { fill: var(--p-losa2); stroke: var(--p-raya-tenue); }
.planta__svg .l { fill: none; }
.planta__svg .fino { stroke: var(--p-raya-tenue); stroke-width: .9; }
.planta__svg .manguera { stroke: var(--p-raya-tenue); stroke-width: 1.5; }
.planta__svg .aguja { stroke-width: 1.4; }
.planta__svg .cota { stroke: var(--p-raya-tenue); stroke-width: .8; }
.planta__svg .haz { stroke: var(--p-act); stroke-width: 1.2; stroke-dasharray: .015 .012; opacity: .35; }
.planta__svg .led { fill: var(--p-f1); }
.planta__svg .rejilla { fill: none; stroke: var(--p-rejilla); stroke-width: .8; transition: stroke var(--fundido), opacity .6s ease; }
.planta__svg .num-suelo { font-family: var(--rotulista); font-weight: 900; fill: var(--p-num); transition: fill var(--fundido), opacity .5s ease calc(var(--d, 0s) + .5s); }
.planta__svg .etq-suelo { font-family: var(--mono); font-weight: 500; letter-spacing: .12em; fill: var(--p-etq); transition: fill var(--fundido), opacity .5s ease calc(var(--d, 0s) + .55s); }
.planta__svg .cota-txt { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; fill: var(--p-etq); transition: fill var(--fundido), opacity .5s ease calc(var(--d, 0s) + .6s); }
.planta__svg .est { cursor: pointer; }

/* la tubería y el aire que corre por dentro */
.planta__svg .tubo { fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--fundido), opacity .5s ease .2s; }
.planta__svg .tubo--fuera { stroke: var(--p-tubo); stroke-width: 7; }
.planta__svg .tubo--dentro { stroke: var(--p-fondo); stroke-width: 3.4; }
.planta__svg .aire { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.planta__svg .aire--brillo { stroke: var(--p-aire); stroke-width: 9; opacity: .16; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.35s cubic-bezier(.5, 0, .3, 1); }
.planta__svg .aire--linea { stroke: var(--p-aire); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.35s cubic-bezier(.5, 0, .3, 1), stroke var(--fundido); }
.planta__svg .aire--flujo { stroke: var(--p-flujo); stroke-width: 2.4; stroke-dasharray: 3 13; opacity: 0; transition: opacity .4s ease; }
.planta.con-aire .aire--brillo, .planta.con-aire .aire--linea { stroke-dashoffset: 0; }
.planta.fluye .aire--flujo { opacity: .95; animation: planta-flujo .9s linear infinite; }
@keyframes planta-flujo { to { stroke-dashoffset: -16; } }

/* antes de la entrada: todo sin trazar */
.planta:not(.dibujada) .planta__svg .t { stroke-dashoffset: 1; fill-opacity: 0; }
.planta:not(.dibujada) .planta__svg .num-suelo,
.planta:not(.dibujada) .planta__svg .etq-suelo,
.planta:not(.dibujada) .planta__svg .cota-txt,
.planta:not(.dibujada) .planta__svg .tubo,
.planta:not(.dibujada) .planta__svg .rejilla,
.planta:not(.dibujada) .planta__pines { opacity: 0; }
.planta__pines { transition: opacity .5s ease .9s; }
.planta.sin-transicion, .planta.sin-transicion * { transition: none !important; }

/* ---------- la estación encendida: azul, su mecanismo en marcha; las demás, tenues ---------- */
.planta__svg .est { transition: opacity .45s ease; }
.planta.dibujada:not(.abierta) .planta__svg .est:not(.es-activa) .t { stroke: var(--p-raya-apagada); }
.planta.dibujada:not(.abierta) .planta__svg .est:not(.es-activa) .p0,
.planta.dibujada:not(.abierta) .planta__svg .est:not(.es-activa) .p1,
.planta.dibujada:not(.abierta) .planta__svg .est:not(.es-activa) .p2 { stroke: var(--p-raya-tenue); }
.planta__svg .est.es-activa .t { stroke: var(--p-act); }
.planta__svg .est.es-activa .f0 { fill: var(--p-act0); }
.planta__svg .est.es-activa .f1 { fill: var(--p-act1); }
.planta__svg .est.es-activa .f2, .planta__svg .est.es-activa .f3 { fill: var(--p-act2); }
.planta__svg .est.es-activa .p0 { fill: var(--p-act2); stroke: var(--p-act); }
.planta__svg .est.es-activa .num-suelo { fill: rgba(91, 149, 245, .2); }
.planta__svg .est.es-activa .etq-suelo { fill: var(--p-act); }
.planta__svg .est.es-activa .led { fill: var(--p-act); }

.planta.fluye .est.es-activa .mec-compresor { animation: mec-compresor .42s ease-in-out infinite alternate; }
@keyframes mec-compresor { to { transform: translateY(-5px); } }
.planta.fluye .est.es-activa .led { animation: mec-led 1s steps(1) infinite; animation-delay: calc(var(--k, 0) * .25s); }
@keyframes mec-led { 50% { fill: var(--p-f1); } }
.planta.fluye .est.es-activa .mec-prensa { animation: mec-prensa 1.7s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes mec-prensa { 0%, 18% { transform: none; } 48%, 62% { transform: translateY(27px); } 100% { transform: none; } }
.planta.fluye .est.es-activa .mec-vacio { animation: mec-vacio 2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes mec-vacio { 0%, 20% { transform: none; } 50%, 70% { transform: translateY(-24px); } 100% { transform: none; } }
.planta.fluye .est.es-activa .mec-banda { animation: mec-banda 2.6s linear infinite; }
@keyframes mec-banda { 0% { transform: none; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translate(85px, 49px); opacity: 0; } }
.planta.fluye .est.es-activa .haz { animation: mec-haz 2.6s linear infinite; }
@keyframes mec-haz { 0%, 34% { opacity: .35; } 38%, 58% { opacity: 1; } 62%, 100% { opacity: .35; } }
.planta.fluye .est.es-activa .mec-vibra { animation: mec-vibra .09s linear infinite alternate; }
@keyframes mec-vibra { from { transform: translate(-1.1px, .4px); } to { transform: translate(1.1px, -.4px); } }
.planta.en-pausa *, .planta.en-pausa .planta__svg * { animation-play-state: paused !important; }

/* ---------- los rótulos de las estaciones ---------- */
.planta__pines { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.planta.abierta .planta__pines { opacity: 0; transition-delay: 0s; }
.pin-est {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-texto);
	cursor: pointer;
	pointer-events: auto;
	transform: translate(-7px, -50%);
}
.pin-est__punto { position: relative; flex: none; width: 13px; height: 13px; border: 2px solid var(--p-act); border-radius: 50%; background: var(--p-fondo); transition: background-color .3s ease; }
.pin-est__punto::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--p-act); border-radius: 50%; opacity: 0; }
.pin-est.es-activa .pin-est__punto { background: var(--p-act); }
.planta.fluye .pin-est.es-activa .pin-est__punto::after { animation: pin-pulso 1.6s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes pin-pulso { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.pin-est__etq {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 5px 10px 5px 9px;
	border: 1px solid var(--c-linea);
	border-radius: 6px;
	background: var(--p-fondo);
	font-family: var(--rotulista);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--c-tenue);
	transform-origin: 0 50%;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), color .3s ease, border-color .3s ease, background-color var(--fundido);
}
.pin-est__etq b { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--c-acento); }
.pin-est:hover .pin-est__etq { color: var(--c-texto); }
.pin-est.es-activa .pin-est__etq { transform: scale(1.22); color: var(--c-texto); border-color: rgba(91, 149, 245, .7); }
.pin-est--izq { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.pin-est--izq .pin-est__etq { transform-origin: 100% 50%; }

/* ---------- la ficha: la pieza real y su nombre, al abrir una estación ---------- */
.planta__ficha { position: absolute; inset: 0; z-index: 4; pointer-events: none; visibility: hidden; transition: visibility 0s linear .5s; }
.planta.abierta .planta__ficha { visibility: visible; transition-delay: 0s; }
.ficha__halo {
	position: absolute;
	left: 30%;
	top: 54%;
	width: 46%;
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(47, 114, 232, .5), rgba(47, 114, 232, .14) 55%, transparent);
	opacity: 0;
	transform: scale(.6);
	transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.ficha__piezas { position: absolute; left: 30%; top: 54%; width: 38%; height: 70%; translate: -50% -50%; }
.ficha__pieza { position: absolute; inset: 0; opacity: 0; transform: translateY(26px) scale(.9); transition: opacity .35s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.ficha__pieza .pieza__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); transition: opacity .35s ease; }
.ficha__pieza .pieza__foto.es-actual { opacity: 1; }
.planta.abierta .ficha__halo { opacity: 1; transform: none; transition-delay: .2s; }
.planta.abierta .ficha__pieza.es-actual { opacity: 1; transform: none; transition-delay: .28s; animation: ficha-flota 6s ease-in-out .9s infinite; }
@keyframes ficha-flota { 50% { translate: 0 -10px; } }
.ficha__texto { position: absolute; right: 5%; top: 50%; width: 38%; translate: 0 -50%; pointer-events: auto; opacity: 0; transform: translateX(24px); transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1); }
.planta.abierta .ficha__texto { opacity: 1; transform: none; transition-delay: .3s; }
.ficha.cambia .ficha__texto, .planta__ficha.cambia .ficha__nombre { animation: ficha-cambia .45s ease both; }
@keyframes ficha-cambia { from { opacity: 0; transform: translateY(10px); } }
.ficha__est { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-acento); }
.ficha__nombre { margin: 10px 0 0; font-family: var(--rotulista); font-size: clamp(2.6rem, 5.4vw, 5.2rem); font-weight: 900; line-height: .86; letter-spacing: .005em; text-transform: uppercase; color: var(--c-texto); text-wrap: balance; }
.ficha__cuenta { margin: 14px 0 0; font-size: 1rem; color: var(--c-tenue); }
.ficha__mando { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.ficha__volver, .ficha__paso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	background: transparent;
	color: var(--c-texto);
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ficha__volver { padding: 0 18px; }
.ficha__paso { width: 44px; flex: none; }
.ficha__volver svg, .ficha__paso svg { width: 16px; height: 16px; }
.ficha__volver:hover, .ficha__paso:hover { background: #2A66D6; border-color: #2A66D6; color: #fff; }
.ficha__volver:focus-visible, .ficha__paso:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 3px; }
.catalogo--claro .ficha__volver, .catalogo--claro .ficha__paso { border-color: rgba(22, 32, 46, .25); }

/* ---------- las estaciones 01–06, debajo del plano ---------- */
.planta__chips { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; transition: opacity .6s ease .5s, transform .6s ease .5s; }
.planta__chips::-webkit-scrollbar { display: none; }
.planta__chips[hidden] { display: none; }
.chip-est {
	position: relative;
	flex: 1 0 auto;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 12px 16px 14px;
	border: 1px solid var(--c-linea);
	border-radius: 10px;
	background: transparent;
	color: var(--c-apagado);
	cursor: pointer;
	scroll-snap-align: start;
	transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}
.chip-est__num { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; }
.chip-est__nombre { font-family: var(--rotulista); font-size: 1.25rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.chip-est:hover { color: var(--c-tenue); }
.chip-est.es-actual { color: var(--c-texto); background: var(--c-ficha-viva); border-color: rgba(47, 114, 232, .7); }
.chip-est.es-actual .chip-est__num { color: var(--c-acento); }
.chip-est:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 3px; }
.chip-est__barra { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.chip-est__barra i { display: block; height: 100%; background: var(--azul-vivo); transform: scaleX(0); transform-origin: 0 50%; }
.chip-est.es-actual .chip-est__barra i { transform: scaleX(var(--avance, 1)); }

/* ---------- las líneas de la estación, con su «Cotizar» ---------- */
.planta__lineas { display: grid; margin-top: 18px; transition: opacity .6s ease .6s, transform .6s ease .6s; }
.lineas-fam { grid-area: 1 / 1; min-width: 0; }
.escaparate.es-vivo .lineas-fam { transition: opacity .3s ease, visibility 0s linear 0s; }
.escaparate.es-vivo .lineas-fam:not(.es-actual) { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
.escaparate:not(.es-vivo) .lineas-fam { grid-area: auto; margin-bottom: 22px; }
.lineas-fam__titulo { margin: 0 0 12px; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-tenue); }
.lineas-fam__titulo span { margin-right: 6px; color: var(--c-acento); }
.escaparate.es-vivo .lineas-fam__titulo { display: none; }
.lineas-fam__lista { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }

.linea {
	--d: calc(var(--i, 0) * 60ms + .05s);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "nombre boton" "texto texto";
	align-items: center;
	gap: 6px 12px;
	padding: 15px 14px 16px 20px;
	border: 1px solid var(--c-linea);
	border-radius: 12px;
	background: var(--c-ficha);
	transition: background-color .3s ease, border-color .3s ease, opacity .4s ease var(--d), transform .5s cubic-bezier(.2, .8, .2, 1) var(--d);
}
.linea::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--azul-vivo); transform: scaleY(0); transition: transform .35s ease; }
.linea.es-actual { background: var(--c-ficha-viva); border-color: rgba(47, 114, 232, .5); }
.linea.es-actual::before { transform: scaleY(1); }
.escaparate.es-vivo .lineas-fam:not(.es-actual) .linea { opacity: 0; transform: translateY(10px); }
.lineas-fam--una .linea { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; grid-template-areas: "nombre texto boton"; gap: 8px 28px; padding: 18px 20px 18px 24px; }
.linea h3 { grid-area: nombre; margin: 0; font-family: var(--rotulista); font-size: 1.35rem; font-weight: 800; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--c-texto); transition: color var(--fundido); }
.linea p { grid-area: texto; margin: 0; font-size: .92rem; line-height: 1.45; color: var(--c-tenue); transition: color var(--fundido); }

/* azul un punto más claro que el de los botones: sobre el negro el #003B8D se pierde; con blanco encima da 5,2:1 */
.linea__cotizar {
	grid-area: boton;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border: 0;
	border-radius: 8px;
	background: #2A66D6;
	color: #fff;
	font-family: var(--mono);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.linea__cotizar svg { width: 14px; height: 14px; }
.linea__cotizar:hover { background: var(--azul); transform: translateY(-1px); }
.linea__cotizar:focus-visible { outline: 2px solid var(--azul-hielo); outline-offset: 2px; }
.catalogo--claro .linea__cotizar:focus-visible { outline-color: var(--azul-vivo); }

/* ---------- la entrada (cuando el telón sube) ---------- */
.escaparate.es-vivo:not(.escaparate--visto) .corte > span { transform: translateY(108%); }
.escaparate.es-vivo:not(.escaparate--visto) .escaparate__bajada { opacity: 0; transform: translateY(14px); }
.escaparate.es-vivo:not(.escaparate--visto) .planta__marco { opacity: 0; }
.escaparate.es-vivo:not(.escaparate--visto) .planta__chips,
.escaparate.es-vivo:not(.escaparate--visto) .planta__lineas { opacity: 0; transform: translateY(18px); }
.escaparate__cabeza .rotulo { transition: color var(--fundido), background-color var(--fundido), opacity .6s ease, transform .6s ease; }
.escaparate.es-vivo:not(.escaparate--visto) .escaparate__cabeza .rotulo { opacity: 0; transform: translateY(10px); }

/* ---------- abajo: las 11 líneas, ya en blanco ---------- */
.catalogo__todas { padding-top: clamp(100px, 13vw, 180px); }

/* ---------- teléfono y tableta ---------- */
@media (max-width: 999.98px) {
	.planta__marco { border-radius: 18px; }
	.planta__hud { font-size: 9px; }
	.planta__hud--uno { left: 14px; top: 12px; flex-direction: column; gap: 3px; }
	.planta__hud--dos { display: none; }
	.planta__leyenda { left: 14px; bottom: 10px; font-size: 9px; }
	.planta__svg .t { stroke-width: 1.5; }
	.pin-est__etq { font-size: 13px; padding: 4px 8px; gap: 6px; }
	.pin-est.es-activa .pin-est__etq { transform: scale(1.1); }
	/* en el teléfono, solo el número; el nombre, en la estación encendida */
	.pin-est:not(.es-activa) .pin-est__nom { display: none; }
	.ficha__halo { left: 50%; top: 30%; width: 70%; }
	.ficha__piezas { left: 50%; top: 30%; width: 62%; height: 44%; }
	.ficha__texto { left: 16px; right: 16px; top: auto; bottom: 18px; width: auto; translate: none; transform: translateY(18px); }
	.ficha__nombre { font-size: clamp(2.2rem, 11vw, 3.4rem); }
	.ficha__cuenta { margin-top: 8px; font-size: .92rem; }
	/* abajo a la izquierda va el botón de ayuda: «Ver toda la planta» va a la derecha y las flechas se
	   quedan en los números 01–06 de abajo */
	.ficha__mando { justify-content: flex-end; margin-top: 14px; }
	.ficha__paso { display: none; }
	.chip-est { flex: none; padding: 10px 14px 13px; }
	.chip-est__nombre { font-size: 1.12rem; }

	/* las líneas de la estación, de lado */
	.lineas-fam__lista {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 86%;
		margin: 0 calc(var(--margen) * -1);
		padding: 0 var(--margen) 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.lineas-fam__lista::-webkit-scrollbar { display: none; }
	.lineas-fam--una .lineas-fam__lista { grid-auto-columns: 100%; }
	.lineas-fam--una .linea { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre boton" "texto texto"; gap: 6px 12px; padding: 14px 14px 15px 18px; }
	.linea { scroll-snap-align: start; padding: 14px 14px 15px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.planta__svg .t, .planta__svg .aire, .planta__lienzo, .ficha__pieza, .ficha__texto, .ficha__halo,
	.corte > span, .planta__marco, .planta__chips, .planta__lineas, .lineas-fam, .linea, .escaparate__bajada { transition-duration: .01s !important; transition-delay: 0s !important; }
	.planta .mec, .planta .led, .planta .haz, .planta .aire--flujo, .pin-est__punto::after, .ficha__pieza { animation: none !important; }
}


/* =========================================================================
   FUNDIDO A NEGRO, CABECERA NEGRA Y «LAS 11 LÍNEAS» CON VIDA (2026-11-08)

   Felipe: «en vez de deslizarse, quiero que el pistón desaparezca… y que se
   vaya haciendo la animación por fade in a color negro. Negro oscuro… que el
   header se vuelva de color negro e invertimos el logo… negro, no azul
   oscuro. Y la sección "¿Ya sabe lo que busca?" mucho más elaborada».
   ========================================================================= */

/* ---------- 1. La salida: el pistón se disuelve en negro ----------
   (rehecho el 2026-11-08, noche 3: «muy brusca… mucho espacio en negro… que
   el pistón alcance a tener un fondo negro… que no vaya bajando, que se vaya
   desapareciendo, y aparezca lo otro. Suavemente»).
   En la pantalla final de la pista la escena sigue quieta y el LIENZO hace el
   trabajo: primero se van las letras (--letras, aquí abajo), luego el fondo
   del estudio pasa a negro con el pistón encima (un recorte de la pieza,
   pieza-d/m.webp) y por último el pistón se desvanece en su sitio, sin
   moverse, mientras el catálogo negro sube con su título. */
.portada-js .portada__plano,
.portada-js .portada__pines,
.portada-js .portada__paradas,
.portada-js .portada__saltar { opacity: calc(1 - var(--letras, 0)); }

/* (2026-11-11) Antes, ya a oscuras, nada de la escena se podía tocar. Ahora el negro
   es solo el FONDO y los botones de la portada siguen a la vista: se pueden tocar. */

/* ---------- 2. La cabecera en negro ----------
   html.portada-negra: la escena ya está casi negra (cabecera transparente,
   letra blanca). html.catalogo-arriba: el escaparate negro está debajo de la
   cabecera (fondo negro). Al fundirse el catálogo a blanco, vuelve la blanca.
   El logo claro es PROVISIONAL (sacado del nuestro: neutros invertidos y el
   azul aclarado); Felipe va a pasar el suyo invertido. */
.cab__marca .cab__logo-noche { display: none; }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab__marca img { display: none; }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab__marca .cab__logo-noche { display: block; }

:is(.portada-negra, .catalogo-arriba, .fundiendo) .barra,
:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab {
	background: #000;
	color: rgba(255, 255, 255, .8);
	border-bottom-color: rgba(255, 255, 255, .1);
}

.cabecera-flota:is(.portada-negra, .catalogo-arriba, .fundiendo) .barra,
.cabecera-flota:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab { background: transparent; border-bottom-color: transparent; }

:is(.portada-negra, .catalogo-arriba, .fundiendo) .barra a { color: rgba(255, 255, 255, .82); }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .barra a:hover { color: #fff; }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab__nav a { color: rgba(255, 255, 255, .92); }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab__nav a:hover { color: #fff; border-bottom-color: var(--azul-vivo); }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab__cotizar { background: #fff; color: #000; box-shadow: none; }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .cab__cotizar:hover { background: var(--azul-vivo); color: #fff; }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .hamburguesa { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .24); }
:is(.portada-negra, .catalogo-arriba, .fundiendo) .hamburguesa span { background: #fff; }
.barra a, .cab__nav a, .cab__cotizar, .hamburguesa { transition: color .3s ease, background-color .3s ease, border-color .3s ease; }

/* ---------- 3. «¿Ya sabe lo que busca?» con vida ---------- */

/* lo que se sale de lado (la luz, la cuadrícula) no puede ensanchar la página */
.catalogo { overflow: clip; }
@supports not (overflow: clip) { .catalogo { overflow-x: hidden; } }

.catalogo__todas { position: relative; isolation: isolate; }

/* el fondo: una cuadrícula de plano y una luz azul que sigue al ratón */
.todas__fondo {
	position: absolute;
	top: -60px;
	bottom: calc(var(--seccion-y) * -1);
	left: 50%;
	width: 100vw;
	translate: -50% 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--fundido);
}

.catalogo--claro .todas__fondo { opacity: 1; }

.todas__fondo::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(0, 59, 141, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 59, 141, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 240px, #000 60%, transparent 100%);
}

.todas__luz {
	position: absolute;
	left: 0;
	top: 0;
	width: 780px;
	height: 780px;
	margin: -390px 0 0 -390px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(47, 114, 232, .15), rgba(47, 114, 232, 0));
	transform: translate3d(var(--lx, 50vw), var(--ly, 360px), 0);
	opacity: 0;
	transition: opacity .6s ease;
}

.todas__fondo.con-luz .todas__luz { opacity: 1; }

/* el título: «busca» se subraya al aparecer */
.subraya {
	background: linear-gradient(var(--azul-vivo), var(--azul-vivo)) 0 94% / 0 .13em no-repeat;
	transition: background-size 1.1s cubic-bezier(.2, .8, .2, 1) .45s;
}

.visible .subraya,
html:not(.anima) .subraya { background-size: 100% .13em; }

/* la consola: el buscador grande, las sugerencias, las familias y la cuenta */
.consola { display: grid; gap: 16px; margin-bottom: clamp(28px, 3.4vw, 44px); }

.catalogo .buscador--catalogo { max-width: 780px; margin: 0; }

.catalogo .buscador--catalogo input {
	height: 62px;
	padding: 0 72px 0 24px;
	border: 1.5px solid var(--linea);
	border-radius: 16px;
	font-size: 1.1rem;
	box-shadow: 0 1px 2px rgba(22, 32, 46, .04), 0 22px 44px -22px rgba(0, 59, 141, .45);
	transition: border-color .2s ease, box-shadow .3s ease;
}

.catalogo .buscador--catalogo input:focus {
	outline: none;
	border-color: var(--azul-vivo);
	box-shadow: 0 0 0 4px rgba(47, 114, 232, .16), 0 22px 44px -22px rgba(0, 59, 141, .5);
}

.catalogo .buscador--catalogo .buscador__lupa { right: 8px; bottom: 8px; width: 46px; height: 46px; border-radius: 12px; }

.sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sugerencias[hidden] { display: none; }

.sugerencias__rotulo {
	margin-right: 4px;
	font-family: var(--titulo);
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--c-tenue);
	transition: color var(--fundido);
}

.sugiere {
	padding: 7px 13px;
	border: 1px dashed rgba(47, 114, 232, .45);
	border-radius: 999px;
	background: transparent;
	color: var(--c-acento);
	font-family: var(--texto);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color var(--fundido);
}

.sugiere:hover { background: rgba(47, 114, 232, .1); border-style: solid; transform: translateY(-1px); }
.sugiere:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }

.filtros {
	position: relative;
	display: flex;
	gap: 4px;
	width: max-content;
	max-width: 100%;
	padding: 6px;
	border: 1px solid var(--c-linea);
	border-radius: 999px;
	background: var(--c-vitrina);
	overflow-x: auto;
	scrollbar-width: none;
	transition: background-color var(--fundido), border-color var(--fundido);
}

.filtros::-webkit-scrollbar { display: none; }
.filtros[hidden] { display: none; }

/* la píldora azul que viaja a la familia elegida */
.filtros__marca {
	position: absolute;
	left: 0;
	top: 6px;
	z-index: 0;
	width: 0;
	height: calc(100% - 12px);
	border-radius: 999px;
	background: var(--azul);
	box-shadow: 0 8px 18px -8px rgba(0, 59, 141, .7);
	transition: transform .5s cubic-bezier(.2, .8, .2, 1), width .5s cubic-bezier(.2, .8, .2, 1);
}

.filtro {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--c-tenue);
	font-family: var(--titulo);
	font-size: .9rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: color .3s ease;
}

.filtro b {
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--c-ficha);
	font-size: .72rem;
	font-weight: 800;
	transition: background-color .3s ease;
}

.filtro:hover { color: var(--c-texto); }
.filtro.es-actual { color: #fff; }
.filtro.es-actual b { background: rgba(255, 255, 255, .2); }
.filtro:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }

.cuenta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; font-size: .95rem; color: var(--c-tenue); transition: color var(--fundido); }
.cuenta b { font-family: var(--titulo); font-size: 1.1rem; color: var(--c-texto); font-variant-numeric: tabular-nums; transition: color var(--fundido); }
.cuenta__todas {
	padding: 0;
	border: 0;
	background: none;
	color: var(--azul-vivo);
	font-family: var(--titulo);
	font-size: .9rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.cuenta__todas[hidden] { display: none; }

/* las tarjetas: su número y su familia */
.cat__num {
	position: absolute;
	left: 14px;
	top: 12px;
	z-index: 2;
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--gris-claro);
	transition: color .25s ease;
}

.cat__fam {
	position: absolute;
	right: 12px;
	top: 10px;
	z-index: 2;
	padding: 4px 9px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	font-family: var(--titulo);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--azul);
}

.cat:hover .cat__num,
.cat:focus-visible .cat__num { color: var(--azul-vivo); }

/* la ola: las tarjetas suben en cascada, columna por columna, al llegar */
.anima .categorias .cat.aparece { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.anima .categorias .cat.aparece.visible {
	animation: cat-sube .95s cubic-bezier(.2, .8, .2, 1) backwards;
	animation-delay: calc(var(--ola, 0) * 95ms);
}

@keyframes cat-sube {
	from { opacity: 0; transform: perspective(900px) translateY(56px) rotateX(12deg) scale(.95); }
}

@media (min-width: 1000px) {
	.categorias .cat:nth-child(4n+2) { --ola: 1; }
	.categorias .cat:nth-child(4n+3) { --ola: 2; }
	.categorias .cat:nth-child(4n+4) { --ola: 3; }
}

.catalogo .sin-resultados {
	padding: 44px 20px;
	border: 1.5px dashed var(--linea);
	border-radius: var(--radio-gr);
	background: var(--papel);
}

@media (max-width: 999.98px) {
	.catalogo .buscador--catalogo input { height: 56px; font-size: 1rem; padding-left: 18px; }
	.catalogo .buscador--catalogo .buscador__lupa { width: 42px; height: 42px; bottom: 7px; right: 7px; }
	.sugerencias { flex-wrap: nowrap; margin: 0 calc(var(--margen) * -1); padding: 0 var(--margen); overflow-x: auto; scrollbar-width: none; }
	.sugerencias::-webkit-scrollbar { display: none; }
	.sugerencias__rotulo, .sugiere { flex: none; }
	.filtros { width: auto; }
	.todas__luz { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.anima .categorias .cat.aparece.visible { animation: none; }
	.subraya, .filtros__marca { transition: none; }
}


/* =========================================================================
   LA FRANJA NEGRA: CIFRAS Y MARCAS (2026-11-08, noche 3)
   Entre el escaparate y «Las 11 líneas». Alarga el negro para que la página
   se lea partida en dos: el negro del producto y el blanco de la búsqueda.
   ========================================================================= */
.nocturno { padding-top: clamp(80px, 10vw, 140px); }

.cifras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.cifra {
	position: relative;
	display: grid;
	gap: 10px;
	padding: 28px clamp(16px, 3vw, 40px) 8px;
}

/* la raya azul de arriba se dibuja al llegar */
.cifra::before {
	content: "";
	position: absolute;
	left: clamp(16px, 3vw, 40px);
	right: clamp(16px, 3vw, 40px);
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--azul-vivo), rgba(47, 114, 232, 0));
	transform-origin: 0 50%;
	transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 150ms);
}

.cifra + .cifra { border-left: 1px solid var(--c-linea); transition: border-color var(--fundido); }

.cifra__n {
	font-family: var(--titulo);
	font-size: clamp(4rem, 9vw, 8.5rem);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.04em;
	color: var(--c-texto);
	font-variant-numeric: tabular-nums;
	transition: color var(--fundido);
}

.cifra span { max-width: 22ch; font-size: 1.02rem; line-height: 1.45; color: var(--c-tenue); transition: color var(--fundido); }
.cifra:nth-child(2) { --i: 1; }
.cifra:nth-child(3) { --i: 2; }

.nocturno.es-vivo:not(.visto) .cifra::before { transform: scaleX(0); }

/* las marcas, en letra grande que pasa: llena, hueca, llena… */
.cinta--noche {
	margin-top: clamp(56px, 7vw, 96px);
	padding-block: clamp(18px, 2.4vw, 30px);
	background: transparent;
	border-block: 1px solid var(--c-linea);
	transition: border-color var(--fundido);
}

.cinta--noche .cinta__pista { animation-duration: 38s; }
.cinta--noche .cinta__grupo { gap: clamp(40px, 5vw, 80px); padding-inline: clamp(20px, 2.5vw, 40px); }

.marca-letra {
	position: relative;
	font-family: var(--titulo);
	font-size: clamp(2.6rem, 7vw, 6.2rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--c-texto);
	transition: color .3s ease;
}

.marca-letra--hueca { color: transparent; -webkit-text-stroke: 1.5px var(--c-tenue); }
.marca-letra:hover { color: var(--azul-vivo); -webkit-text-stroke-color: var(--azul-vivo); }

/* el punto azul entre marca y marca (dibujado: un carácter podría salir como emoji en iPhone) */
.marca-letra::after {
	content: "";
	position: absolute;
	right: calc(clamp(40px, 5vw, 80px) / -2 - 5px);
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--azul-vivo);
}

.cinta--noche .cinta__parar { background: var(--c-vitrina); border-color: var(--c-linea); color: var(--c-tenue); }

@media (max-width: 760px) {
	.cifras { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.cifra { grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 22px 4px 14px; }
	.cifra + .cifra { border-left: 0; }
	.cifra::before { left: 4px; right: 4px; }
	.cifra__n { min-width: 2ch; }
}

@media (prefers-reduced-motion: reduce) {
	.cifra::before { transition: none; }
}


/* =========================================================================
   CADA SECCIÓN CON SU FIRMA (2026-11-08, noche 3)
   Felipe: «que todas las secciones tengan algo distintivo, algo raro, que llame
   la atención, que incite a la compra y que haga ver esta empresa WOW».
   ========================================================================= */

/* ---------- Servicio técnico: EL TALLER, toda la sección en azul de plano (2026-11-10) ----------
   Felipe: «que esa parte sea de otro color… que TODA la sección sea azul y sea
   diferente… que incite a tomar el servicio y que nos haga ver con porte».
   Un solo bloque: titular grande, la foto del banco con su cinta, una franja de
   hechos del taller y la orden con los seis trabajos (cada uno con «Cotizar»),
   el manómetro y el sello. Sin guion (o con «menos movimiento») todo se ve en su
   estado final: marcado, la aguja arriba y el sello puesto. */
.taller {
	color: #fff;
	background-color: #0A3C8C;
	background-image:
		radial-gradient(1000px 560px at 10% -5%, rgba(255, 255, 255, .1), transparent 70%),
		linear-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .085) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: auto, 140px 140px, 140px 140px, 28px 28px, 28px 28px;
	background-position: 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
	padding-block: clamp(64px, 8vw, 120px);
	overflow: hidden;
}

.taller .rotulo { color: #fff; background: rgba(255, 255, 255, .16); }

/* --- la cabeza: el titular con porte y la foto del banco --- */
.taller__cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: center;
}

.taller__titulo {
	margin: 4px 0 0;
	max-width: 13ch;
	font-family: var(--titulo);
	font-size: clamp(2.2rem, 5.2vw, 4.7rem);
	font-weight: 800;
	line-height: .98;
	letter-spacing: -.035em;
	color: #fff;
	text-wrap: balance;
}

.taller__titulo em { font-style: normal; color: var(--azul-hielo); }

.taller__entrada {
	margin: 24px 0 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.2vw, 1.14rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, .84);
}

/* la foto, pegada al plano con una cinta (rotate y no transform: la entrada
   .aparece usa transform y se lo quitaría) */
.taller__foto {
	position: relative;
	justify-self: end;
	width: min(100%, 320px);
	margin: 0;
	padding: 10px 10px 12px;
	border-radius: 6px;
	background: #fff;
	rotate: 2.4deg;
	box-shadow: 0 34px 64px -30px rgba(0, 10, 40, .75);
}

.taller__foto::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -13px;
	left: 50%;
	width: 96px;
	height: 26px;
	translate: -50% 0;
	rotate: -4deg;
	background: rgba(233, 240, 252, .72);
	box-shadow: 0 1px 2px rgba(0, 20, 60, .2);
}

.taller__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }

.taller__foto figcaption {
	margin-top: 9px;
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--gris);
}

/* --- la franja con las cifras de la portada: el tamaño de la casa ---
   (antes eran cuatro hechos del taller, pero repetían lo que ya dice la propia
   sección: los sellos, la prueba en banco y el registro) */
.taller__datos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: clamp(44px, 5.5vw, 80px) 0 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid rgba(255, 255, 255, .24);
}

.taller__datos li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 24px 28px;
	border-left: 1px solid rgba(255, 255, 255, .24);
}

.taller__datos li:first-child { padding-left: 0; border-left: 0; }

.taller__datos b {
	font-family: var(--titulo);
	font-size: clamp(2.4rem, 4.4vw, 4rem);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.04em;
	color: #fff;
}

.taller__datos span {
	font-family: var(--titulo);
	font-size: clamp(.95rem, 1.2vw, 1.1rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--azul-hielo);
}

/* --- la orden de servicio --- */
.orden {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(230px, 290px);
	grid-template-areas: "cab cab" "trabajos banco" "pie pie";
	gap: 0 clamp(28px, 4vw, 56px);
	margin-top: clamp(40px, 5vw, 72px);
	padding: clamp(22px, 3vw, 42px);
	border: 1.5px solid rgba(255, 255, 255, .34);
	border-radius: 18px;
	background: rgba(0, 18, 56, .24);
}

.orden__cab {
	grid-area: cab;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .26);
}

.orden__marca { font-family: var(--titulo); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--azul-hielo); }
.orden__titulo { margin: 0; font-family: var(--titulo); font-size: clamp(1.45rem, 2.5vw, 2.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.orden__nota { font-size: .94rem; color: rgba(255, 255, 255, .78); }

.orden__trabajos { grid-area: trabajos; margin: 0; padding: 0; list-style: none; }

.trabajo {
	display: grid;
	grid-template-columns: 28px 2.1em minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 15px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, .22);
}

.trabajo:last-child { border-bottom: 0; }
.trabajo__num { font-family: var(--titulo); font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--azul-hielo); }

.trabajo__que { display: grid; grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr); align-items: baseline; gap: 4px 22px; }
.trabajo__que h4 { margin: 0; font-family: var(--titulo); font-size: 1.06rem; font-weight: 800; line-height: 1.25; color: #fff; }
.trabajo__que p { margin: 0; font-size: .94rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }

/* el visto: en su estado final, marcado */
.trabajo__check {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: #fff;
}

.trabajo__check svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--azul);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

/* «Cotizar» de cada trabajo: agrega «Servicio técnico» y deja el trabajo escrito */
.trabajo__cotizar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1.5px solid rgba(255, 255, 255, .6);
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font-family: var(--titulo);
	font-size: .82rem;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.trabajo__cotizar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.trabajo__cotizar:hover { background: #fff; border-color: #fff; color: var(--azul); }
.trabajo__cotizar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.trabajo.en-cotizacion .trabajo__cotizar { background: #fff; border-color: #fff; color: var(--azul); }

/* --- el banco: el manómetro y el sello --- */
.orden__banco {
	grid-area: banco;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 14px;
	padding: 18px 0 18px clamp(22px, 3vw, 44px);
	border-left: 1px dashed rgba(255, 255, 255, .22);
	text-align: center;
}

.orden__reloj { position: relative; width: min(230px, 100%); }
.manometro { display: block; width: 100%; height: auto; overflow: visible; }
.manometro .esfera { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .78); stroke-width: 2.5; }
.manometro .esfera--dentro { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.manometro .marca { stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; stroke-linecap: round; }
.manometro .marca--mayor { stroke: #fff; stroke-width: 3; }
.manometro .zona { fill: none; stroke: var(--azul-hielo); stroke-width: 9; stroke-linecap: round; opacity: .9; }
.manometro .aguja { --giro: 68deg; transform-origin: 100px 100px; transform: rotate(var(--giro)); }
.manometro .aguja line { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.manometro .eje { fill: #fff; }

.orden__banco-pie { margin: 0; font-family: var(--titulo); font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--azul-hielo); }
.orden__banco-texto p + p { margin: 6px 0 0; font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .8); }

/* el sello: en su estado final, puesto y torcido */
.orden__sello {
	position: absolute;
	left: 50%;
	top: 64%;
	padding: 9px 16px;
	border: 3.5px solid #fff;
	border-radius: 12px;
	outline: 1.5px solid rgba(255, 255, 255, .55);
	outline-offset: 3px;
	font-family: var(--titulo);
	font-size: 1.12rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: rgba(10, 60, 140, .62);
	transform: translate(-50%, -50%) rotate(-11deg);
	pointer-events: none;
}

/* --- el pie: el registro y el llamado grande --- */
.orden__pie {
	grid-area: pie;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 36px;
	margin-top: 8px;
	padding-top: 26px;
	border-top: 2px dashed rgba(255, 255, 255, .3);
}

.orden__pie > p { flex: 1 1 360px; margin: 0; max-width: 58ch; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.orden__pie strong { font-family: var(--titulo); color: #fff; }
.orden__acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.orden__cta { min-height: 60px; padding: 17px 30px; font-size: 1.06rem; box-shadow: 0 20px 40px -20px rgba(0, 8, 36, .85); }
.orden__llamar { font-size: .92rem; color: rgba(255, 255, 255, .86); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 3px; }
.orden__llamar:hover { color: #fff; text-decoration-color: #fff; }

/* --- la orden se llena al entrar (solo con guion y movimiento) ---
   Los seis vistos se marcan uno tras otro (110 ms), la aguja sube y, al final,
   cae el sello. Unos 1,7 s en total, una sola vez. */
.anima .trabajo__check { transition: background-color .28s ease calc(var(--i, 0) * 110ms + .15s), border-color .28s ease calc(var(--i, 0) * 110ms + .15s), transform .4s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i, 0) * 110ms + .15s); }
.anima .trabajo__check svg { transition: stroke-dashoffset .32s ease calc(var(--i, 0) * 110ms + .25s); }
.anima .trabajo__que { transition: opacity .35s ease calc(var(--i, 0) * 110ms + .1s); }
.anima .orden:not(.orden--llena) .trabajo__check { background: transparent; border-color: rgba(255, 255, 255, .45); transform: scale(.9); }
.anima .orden:not(.orden--llena) .trabajo__check svg { stroke-dashoffset: 1; }
.anima .orden:not(.orden--llena) .trabajo__que { opacity: .5; }

.anima .manometro .aguja { transition: transform 1.1s cubic-bezier(.3, 1.45, .5, 1) .5s; }
.anima .orden:not(.orden--llena) .manometro .aguja { --giro: -120deg; }

.anima .orden__sello { transition: transform .42s cubic-bezier(.2, 1.5, .45, 1), opacity .18s ease; }
.anima .orden:not(.orden--sellada) .orden__sello { opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(2.3); }
.anima .orden--sellada .orden__reloj { animation: orden-golpe .36s ease .1s; }
@keyframes orden-golpe { 30% { transform: translateY(3px) scale(.985); } }

/* --- tableta y teléfono --- */
@media (max-width: 980px) {
	.taller__cabeza { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.taller__titulo { max-width: 16ch; }
	/* la foto, una tira apaisada: el cilindro y el vástago */
	.taller__foto { justify-self: stretch; width: auto; max-width: 560px; padding: 7px 7px 8px; rotate: -1deg; }
	.taller__foto img { aspect-ratio: 3 / 1; object-position: 50% 22%; }
	.taller__foto figcaption { display: none; }
	.taller__foto::before { width: 74px; height: 22px; top: -11px; }

	.taller__datos { grid-template-columns: minmax(0, 1.05fr) minmax(0, .7fr) minmax(0, 1.25fr); margin-top: 32px; }
	.taller__datos li { flex-direction: column; gap: 6px; padding: 16px 0 16px 16px; }
	.taller__datos li:first-child { padding-left: 0; }

	.orden { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "trabajos" "banco" "pie"; margin-top: 32px; }
	.trabajo__que { grid-template-columns: minmax(0, 1fr); }

	.orden__banco {
		grid-template-columns: 124px minmax(0, 1fr);
		justify-items: start;
		gap: 18px;
		padding: 18px 0;
		border-left: 0;
		border-top: 1px dashed rgba(255, 255, 255, .22);
		text-align: left;
	}

	.orden__sello { font-size: .72rem; padding: 6px 10px; border-width: 2.5px; border-radius: 9px; outline-offset: 2px; }
}

@media (max-width: 620px) {
	.taller { padding-block: 52px; }
	.taller__titulo { font-size: clamp(2rem, 9vw, 2.5rem); }
	.taller__entrada { margin-top: 16px; font-size: .98rem; line-height: 1.55; }
	.taller__datos b { font-size: 2.1rem; }
	.taller__datos span { font-size: .82rem; }

	.orden { padding: 16px 14px 20px; border-radius: 16px; }
	.orden__cab { flex-direction: column; gap: 4px; padding-bottom: 12px; }
	.orden__nota { font-size: .88rem; }

	.trabajo { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; align-items: start; }
	.trabajo__num { display: none; }
	.trabajo__check { width: 22px; height: 22px; margin-top: 1px; }
	.trabajo__check svg { width: 12px; height: 12px; }
	.trabajo__que { gap: 2px; }
	.trabajo__que h4 { font-size: .94rem; letter-spacing: -.01em; }
	.trabajo__que p { font-size: .84rem; line-height: 1.38; }
	.trabajo__cotizar { min-height: 34px; padding: 6px 9px; gap: 4px; font-size: .74rem; }
	.trabajo__cotizar svg { width: 12px; height: 12px; }

	.orden__pie { padding-top: 20px; gap: 16px; }
	.orden__pie > p { flex-basis: auto; font-size: .92rem; }
	.orden__acciones { align-items: stretch; width: 100%; }
	.orden__cta { width: 100%; justify-content: center; }
	.orden__llamar { align-self: center; }
}

/* ---------- Proyectos: la placa remachada de cada proyecto ---------- */
.proyecto__fotos { position: relative; }

.placa {
	position: absolute;
	left: -14px;
	top: -18px;
	z-index: 3;
	display: grid;
	gap: 3px;
	padding: 13px 22px 12px;
	border-radius: 6px;
	background:
		radial-gradient(circle at 9px 9px, #7D8896 2.4px, rgba(0, 0, 0, 0) 3.2px),
		radial-gradient(circle at calc(100% - 9px) 9px, #7D8896 2.4px, rgba(0, 0, 0, 0) 3.2px),
		radial-gradient(circle at 9px calc(100% - 9px), #7D8896 2.4px, rgba(0, 0, 0, 0) 3.2px),
		radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #7D8896 2.4px, rgba(0, 0, 0, 0) 3.2px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
		linear-gradient(135deg, #F5F7F9 0%, #C8D0D9 36%, #EDF0F3 52%, #B4BEC9 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 16px 28px -12px rgba(22, 32, 46, .5);
	color: #29323F;
	font-family: var(--titulo);
	transform: rotate(-3deg);
}

.proyecto--al-reves .placa { left: auto; right: -14px; transform: rotate(3deg); }
.placa b { font-size: .64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--azul); }
.placa span { font-size: 1rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, .75); }
.placa i { font-style: normal; font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #5B6B7F; }

/* la placa cae y rebota cuando aparece el proyecto */
.anima .proyecto.aparece .placa { opacity: 0; transform: translateY(-34px) rotate(-14deg); }
.anima .proyecto--al-reves.aparece .placa { transform: translateY(-34px) rotate(14deg); }
.anima .proyecto.aparece.visible .placa {
	opacity: 1;
	transform: rotate(-3deg);
	transition: transform .9s cubic-bezier(.3, 1.6, .5, 1) .35s, opacity .3s ease .35s;
}
.anima .proyecto--al-reves.aparece.visible .placa { transform: rotate(3deg); }

.proyecto__num {
	display: block;
	margin-bottom: 4px;
	font-family: var(--titulo);
	font-size: clamp(3.6rem, 6vw, 5.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(0, 59, 141, .3);
}

.proyecto__foto { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease; }
.proyecto__fotos:hover .proyecto__foto:not(.proyecto__foto--chica) { transform: translateY(-4px); box-shadow: var(--sombra-alta); }

@media (max-width: 900px) {
	.placa { left: 8px; top: -14px; padding: 10px 16px; }
	.proyecto--al-reves .placa { right: 8px; }
	.placa span { font-size: .88rem; }
}

/* ---------- Marcas: cada una lleva a sus catálogos o al cotizador ---------- */
.indice__ir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-family: var(--titulo);
	font-size: .82rem;
	font-weight: 800;
	color: var(--azul);
	text-decoration: none;
	white-space: nowrap;
}

.indice__ir::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease;
}

.indice__ir:hover { text-decoration: underline; text-underline-offset: 3px; }
.indice__fila:hover .indice__ir::after { transform: translateX(4px); }
.indice__texto .indice__ir { display: flex; width: max-content; }

/* ---------- Empresa: visite la tienda ---------- */
.empresa__foto { position: relative; }

.visitenos {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 46px;
	z-index: 2;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 18px 34px -16px rgba(22, 32, 46, .55);
	color: var(--tinta);
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease;
}

.visitenos:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -16px rgba(0, 42, 102, .55); }
.visitenos__pin { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul); }
.visitenos__pin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--azul-vivo); animation: visitenos-ola 2.2s ease-out infinite; }
.visitenos__pin svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
.visitenos__texto { font-size: .82rem; line-height: 1.35; color: var(--gris); }
.visitenos__texto b { display: block; font-family: var(--titulo); font-size: .95rem; color: var(--tinta); }
.visitenos__ir { font-family: var(--titulo); font-size: .8rem; font-weight: 800; color: var(--azul); white-space: nowrap; }

@keyframes visitenos-ola { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }

/* ---------- El pie: la pregunta, los dos caminos y la marca gigante ---------- */
.pie { padding-block: 0 30px; overflow: hidden; }

.pie__cierre {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	padding-top: clamp(64px, 8vw, 110px);
}

.pie__pregunta {
	margin: 0;
	font-family: var(--titulo);
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.03em;
	color: #fff;
	max-width: none;
}

.pie__pregunta em { font-style: normal; color: var(--azul-vivo); }
.pie__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.pie .pie__acciones .btn--blanco { color: var(--azul); }
.pie__llamar { border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; }
.pie .pie__llamar { color: #fff; }
.pie__llamar:hover { background: #fff; color: var(--azul); }
.pie .pie__llamar:hover { color: var(--azul); }

/* la marca, de lado a lado; se llena de azul al llegar */
.pie .pie__marca {
	max-width: none;
	margin: clamp(28px, 4vw, 56px) 0 clamp(18px, 2.4vw, 30px);
	font-family: var(--titulo);
	font-size: 15.5vw;
	font-weight: 800;
	line-height: .82;
	letter-spacing: -.05em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	/* sin contorno (2026-11-10): el trazo de la fuente dibujaba sus piezas
	   internas, y la A salía con un rectángulo y un triángulo por dentro. La
	   marca sin llenar es un blanco tenue debajo del azul que entra. */
	background:
		linear-gradient(90deg, var(--azul-vivo), var(--azul-vivo)) 0 0 / 0% 100% no-repeat,
		linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07));
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-size 2.2s cubic-bezier(.2, .8, .2, 1);
	user-select: none;
}

.pie .pie__marca.llena { background-size: 100% 100%, auto; }
.pie__legal { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) {
	.trabajo__check, .trabajo__check svg, .trabajo__que, .manometro .aguja, .orden__sello { transition: none; }
	.orden--sellada .orden__reloj { animation: none; }
	.anima .proyecto.aparece .placa { transition: none; }
	.visitenos__pin::after { animation: none; }
	.pie .pie__marca { transition: none; }
}


/* =========================================================================
   EL SALTO AL CATÁLOGO (2026-11-08, noche 4)
   Una capa negra fija sobre toda la página (debajo de la cabecera, que se pone
   negra a la vez): sube, la página salta por debajo, baja. El escaparate
   vuelve a hacer su entrada cada vez.
   ========================================================================= */
.fundido {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.fundiendo .fundido { opacity: 1; }
/* durante el salto la página no se desplaza: corta la inercia de un dedo
   rápido que venía subiendo (2026-11-09) */
html.salto-quieto { overflow: hidden; }
.escaparate.sin-transicion,
.escaparate.sin-transicion * { transition: none !important; }

/* =========================================================================
   PROYECTOS v2 (2026-11-10) — Felipe: «¿esta también hay que mejorarla?». La
   v1 era el zigzag foto-texto de plantilla y la cabecera dejaba media pantalla
   vacía. Ahora:
   · la cabecera a dos columnas: el título; y la línea Asesoría → Diseño →
     Construcción (un pulso de aire la recorre una vez) sobre el texto;
   · un ESCENARIO FIJO en el computador: las fotos del proyecto quietas a la
     izquierda; cuando su texto pasa por la derecha, las del siguiente SUBEN
     tapando las anteriores (o bajan, si se vuelve) — nunca queda vacío;
   · los textos van colgados de una línea de aire que se llena al bajar.
   En el teléfono, cada proyecto con sus fotos, uno debajo del otro.
   Las reglas .proyecto* de la v1 quedan en la hoja sin uso.
   ========================================================================= */
.obras__cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px clamp(40px, 6vw, 96px);
	align-items: end;
	margin-bottom: clamp(40px, 5vw, 72px);
}
.obras__cabeza .rotulo { margin-bottom: 18px; }
.obras__intro .entrada { margin-top: 26px; }

/* Asesoría → Diseño → Construcción: tres nudos sobre una línea de aire */
.obras__pasos {
	position: relative;
	display: flex;
	justify-content: space-between;
	max-width: 560px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.obras__pasos::before {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 7px;
	height: 2px;
	background: var(--azul);
	opacity: .22;
}
.obras__pasos::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--azul-vivo);
	box-shadow: 0 0 0 6px rgba(47, 114, 232, .18);
	opacity: 0;
	pointer-events: none;
}
.obras__pasos li {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: 12px;
	font-family: var(--titulo);
	font-size: .78rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--azul);
}
.obras__pasos li:nth-child(2) { justify-items: center; }
.obras__pasos li:last-child { justify-items: end; }
.obras__pasos li::before {
	content: "";
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid var(--azul);
	border-radius: 50%;
	background: var(--azul);
}
/* con animación: los nudos empiezan vacíos y se llenan cuando pasa el pulso */
.anima .obras__cabeza.aparece .obras__pasos li::before { background: var(--nieve); }
.anima .obras__cabeza.aparece.visible .obras__pasos li::before { animation: obras-nudo .35s ease forwards; }
.anima .obras__cabeza.aparece.visible .obras__pasos li:nth-child(1)::before { animation-delay: .6s; }
.anima .obras__cabeza.aparece.visible .obras__pasos li:nth-child(2)::before { animation-delay: 1.5s; }
.anima .obras__cabeza.aparece.visible .obras__pasos li:nth-child(3)::before { animation-delay: 2.4s; }
.anima .obras__cabeza.aparece.visible .obras__pasos::after { animation: obras-pulso 1.8s cubic-bezier(.6, 0, .4, 1) .6s forwards; }
@keyframes obras-nudo { to { background: var(--azul); } }
@keyframes obras-pulso {
	0% { left: 2px; opacity: 1; }
	92% { opacity: 1; }
	100% { left: calc(100% - 14px); opacity: 0; }
}

/* ---- las láminas: las fotos de cada proyecto ---- */
.lamina {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radio-gr);
	background: var(--azul-claro);
}
.lamina__grande { display: block; width: 100%; height: 100%; object-fit: cover; }
.lamina__chica {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	width: 36%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 5px solid var(--papel);
	border-radius: 12px;
	box-shadow: 0 20px 36px -14px rgba(22, 32, 46, .6);
}
.lamina--2 .lamina__chica { right: auto; left: 18px; width: 31%; aspect-ratio: 856 / 764; }
.lamina--par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: var(--nieve); }
.lamina--par img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: var(--radio-gr); }
.lamina .placa { left: 18px; top: 18px; z-index: 3; }
.lamina--2 .placa { left: auto; right: 18px; transform: rotate(3deg); }

/* lo que entra con cada lámina: la foto se asienta, la chica sube, la placa cae */
.obras-js .lamina img { transform: scale(1.1); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.obras-js .lamina--par img { transform: none; }
.obras-js .lamina__chica { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.obras-js .lamina .placa { opacity: 0; transform: translateY(-30px) rotate(-12deg); }
.obras-js .lamina--2 .placa { transform: translateY(-30px) rotate(12deg); }
.obras-js .lamina.encendida img,
.obras-js .lamina.debajo img { transform: none; }
.obras-js .lamina.encendida .lamina__chica { opacity: 1; transform: none; transition-delay: .45s; }
.obras-js .lamina.debajo .lamina__chica { opacity: 1; transform: none; transition: none; }
.obras-js .lamina.encendida .placa,
.obras-js .lamina.debajo .placa { opacity: 1; transform: rotate(-3deg); }
.obras-js .lamina--2.encendida .placa,
.obras-js .lamina--2.debajo .placa { transform: rotate(3deg); }
.obras-js .lamina.encendida .placa { transition: transform .9s cubic-bezier(.3, 1.6, .5, 1) .55s, opacity .3s ease .55s; }

/* ---- el texto de cada proyecto ---- */
.obra { position: relative; }
.obra__num {
	display: block;
	font-family: var(--titulo);
	font-size: clamp(3.2rem, 5vw, 4.8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(0, 59, 141, .35);
	transition: color .5s ease, -webkit-text-stroke-color .5s ease;
}
.obra h3 { margin: 10px 0 0; font-size: clamp(1.45rem, 2.3vw, 2rem); line-height: 1.15; }
.obra p { margin: 12px 0 0; max-width: 42ch; color: var(--gris); }
.obra__piezas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.obra__piezas li {
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--papel);
	box-shadow: inset 0 0 0 1px var(--linea);
	font-family: var(--titulo);
	font-size: .8rem;
	font-weight: 700;
	color: var(--azul);
}

.obras__pie { display: none; }

/* ---------- COMPUTADOR: el escenario fijo ---------- */
@media (min-width: 901px) {
	.obras__cuerpo {
		display: grid;
		grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
		gap: clamp(48px, 6vw, 96px);
		align-items: start;
	}
	.obras__escenario { position: sticky; top: calc(var(--techo) + 28px); }
	.obras__marco { position: relative; height: clamp(380px, calc(100vh - var(--techo) - 150px), 580px); }
	.lamina { position: absolute; inset: 0; }
	.lamina--par { overflow: visible; }

	/* el relevo: la nueva sube tapando a la de antes, que espera debajo */
	.obras-js .lamina { z-index: 0; clip-path: inset(100% 0 0 0 round var(--radio-gr)); }
	.obras-js .lamina.desde-arriba { clip-path: inset(0 0 100% 0 round var(--radio-gr)); }
	.obras-js .lamina.debajo { z-index: 1; clip-path: inset(0 round var(--radio-gr)); }
	.obras-js .lamina.encendida { z-index: 2; clip-path: inset(0 round var(--radio-gr)); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); }

	.obras__pie {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 18px 0 0;
		font-family: var(--titulo);
		font-size: .78rem;
		font-weight: 800;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--gris);
	}
	.obras__pie b { color: var(--azul); font-variant-numeric: tabular-nums; }
	.obras__pie i { display: flex; gap: 6px; margin-left: auto; }
	.obras__pie i span { width: 36px; height: 4px; border-radius: 4px; background: var(--linea); transition: background-color .4s ease; }
	.obras__pie i span.activo { background: var(--azul); }

	/* la línea de aire de la que cuelgan los textos */
	.obras__lista { position: relative; padding-left: 48px; }
	.obras__lista::before,
	.obras__lista::after {
		content: "";
		position: absolute;
		left: 7px;
		top: var(--ini, 0px);
		width: 2px;
		height: var(--largo, 0px);
		border-radius: 2px;
		background: var(--linea);
	}
	.obras__lista::after { background: var(--azul); transform-origin: top; transform: scaleY(var(--avance, 0)); }
	.obra {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: max(56vh, 400px);
		opacity: .3;
		transition: opacity .5s ease;
	}
	.obra::before {
		content: "";
		position: absolute;
		left: -48px;
		top: 50%;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		margin-top: -8px;
		border: 2px solid var(--gris-claro);
		border-radius: 50%;
		background: var(--nieve);
		transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
	}
	.obra.activa { opacity: 1; }
	.obra.activa::before { border-color: var(--azul); background: var(--azul); box-shadow: 0 0 0 6px rgba(0, 59, 141, .12); }
	.obra.activa .obra__num { color: var(--azul); -webkit-text-stroke-color: var(--azul); }
	/* sin JavaScript, todo se lee */
	.obras:not(.obras-js) .obra { opacity: 1; }
}

/* ---------- TELÉFONO: cada proyecto con sus fotos ---------- */
@media (max-width: 900px) {
	.obras__cabeza { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.obras__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); }
	.obras__escenario, .obras__marco, .obras__lista { display: contents; }
	.lamina { position: relative; aspect-ratio: 4 / 3; }
	.lamina--1 { order: 1; } .obra--1 { order: 2; }
	.lamina--2 { order: 3; } .obra--2 { order: 4; }
	.lamina--3 { order: 5; } .obra--3 { order: 6; }
	.lamina--par { gap: 8px; }
	.lamina__chica { right: 10px; bottom: 10px; width: 40%; border-width: 4px; }
	.lamina--2 .lamina__chica { left: 10px; width: 34%; }
	.lamina .placa { left: 10px; top: 10px; }
	.lamina--2 .placa { left: auto; right: 10px; }
	.obras-js .lamina { clip-path: inset(100% 0 0 0 round var(--radio-gr)); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1); }
	.obras-js .lamina.encendida { clip-path: inset(0 round var(--radio-gr)); }
	.obra { margin: 20px 0 52px; }
	.obra--3 { margin-bottom: 0; }
	.obra__num { font-size: 3rem; -webkit-text-stroke-color: rgba(0, 59, 141, .4); }
}

@media (prefers-reduced-motion: reduce) {
	.obras-js .lamina,
	.obras-js .lamina img,
	.obras-js .lamina .placa,
	.obra, .obra::before, .obra__num { transition: none !important; }
	.obras-js .lamina img { transform: none; }
}

/* =========================================================================
   DE LA PORTADA AL CATÁLOGO: SCROLL NORMAL + FUNDIDO DE COLOR (2026-11-10)
   Felipe: «que bajando sea del color de la primera sección y que cuando llegue
   a la segunda vaya cambiando así de color negro, así como cuando sale de la
   segunda a la tercera». Sin salto: la página baja normal. Mientras el borde del
   catálogo no pase del 55 % de la pantalla, el catálogo va en su modo claro con
   el color del estudio de la portada (#E5EFF6, medido en su borde de abajo), así
   que no hay costura. Al pasarlo, el catálogo se funde a negro en 0,9 s (sus
   variables); la portada sigue visible y sube normal. Subiendo, al revés.
   ========================================================================= */
/* (2026-11-11, 3) La entrada clara del catálogo (.catalogo--entrada, #E5EFF6) se quitó: la portada se
   vuelve negra al llegar al cierre y el catálogo entra negro. La capa de abajo sigue. */

/* 2026-11-11 — el FONDO de la portada y la cabecera también se funden a negro (Felipe: «que la
   transición del fondo no sea solo para la segunda sección sino para la primera y el header
   también»). La capa negra va ENCIMA del lienzo y la cuadrícula (z-index 1) pero DEBAJO de las
   letras, botones e índice (z-index 2 a 6): lo de arriba no desaparece («que no desaparezca lo
   de arriba»), solo pasa a claro. */
/* (2026-11-11, 4) El negro ya no es una capa CSS: lo pinta el LIENZO, con el pistón recortado
   encima («que no se desaparezca el pistón»). La cuadrícula de plano se apaga con el estudio. */
.portada-js .portada__plano { transition: opacity .9s ease; }
html.portada-negra.portada-js .portada__plano { opacity: 0; }

.portada-js .parada--cierre .parada__pieza,
.portada-js .parada--cierre .parada__titulo,
.portada-js .parada--cierre .parada__titulo em,
.portada-js .parada--cierre .parada__texto,
.portada-js .parada--cierre .avales,
.portada-js .parada--cierre .avales b { transition: color .9s ease; }
html.portada-negra.portada-js .parada--cierre .parada__pieza { color: rgba(255, 255, 255, .62); }
html.portada-negra.portada-js .parada--cierre .parada__titulo { color: #fff; }
html.portada-negra.portada-js .parada--cierre .parada__titulo em { color: #5B95F5; }
html.portada-negra.portada-js .parada--cierre .parada__texto { color: rgba(255, 255, 255, .72); }
html.portada-negra.portada-js .parada--cierre .avales { color: rgba(255, 255, 255, .62); }
html.portada-negra.portada-js .parada--cierre .avales b { color: #5B95F5; }
html.portada-negra.portada-js .parada--cierre .btn--linea { background: #fff; border-color: #fff; }
html.portada-negra.portada-js .portada__saltar span { background: #fff; }

/* la cabecera cambia al mismo ritmo que el fondo, solo mientras dura el fundido */
html.cab-lenta :is(.barra, .cab, .barra a, .cab__nav a, .cab__cotizar, .hamburguesa, .hamburguesa span) { transition-duration: .9s !important; }

@media (prefers-reduced-motion: reduce) {
	.portada-js .portada__plano { transition: none; }
}

/* =========================================================================
   PORTADA Y CATÁLOGO, LOS DOS CLAROS Y UNIDOS (2026-11-11, 5)
   Felipe: «que esas 2 secciones sean blancas, o sea claras, del color original, pero
   que conecten bien y estén bien estructuradas». El catálogo va claro de punta a
   punta (catalogo--claro en el HTML; el negro quedó apagado por interruptor en el
   guion). La unión: el catálogo arranca con el MISMO azul pálido del estudio de la
   portada (#E5EFF6, medido en su borde de abajo) y se aclara hasta su blanco en
   ~520 px, con la cuadrícula de plano de la portada que sigue y se desvanece. Así
   no hay costura. «Saltar animación» se va en el cierre: ahí la animación ya acabó.
   ========================================================================= */
#catalogo.catalogo--claro {
	background-image: linear-gradient(180deg, #E5EFF6 0, var(--nieve) 520px);
	background-size: 100% 520px;
	background-repeat: no-repeat;
}
/* la cuadrícula de plano de la portada sigue un tramo y se desvanece (detrás del contenido:
   #catalogo ya es un contexto de apilamiento, z-index 1) */
#catalogo.catalogo--claro::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 520px;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(47, 114, 232, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(47, 114, 232, .07) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent);
	mask-image: linear-gradient(180deg, #000, transparent);
}
.portada-js .portada--cierre .portada__saltar { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }

/* =========================================================================
   EL CATÁLOGO A DOS COLUMNAS EN EL COMPUTADOR (2026-11-11, 6)
   Felipe: «¿por qué no ponemos el texto al lado izquierdo y la maqueta al lado
   derecho para que no se vea extraño?». Izquierda: rótulo, título, bajada y las
   6 familias en lista, con su cuenta, como la leyenda del plano. Derecha: el
   plano, reacomodado en 3×2 (LAYOUT «medio» en pagina.js, que el CSS pide con
   --plano-modo). Debajo, a todo el ancho, las líneas de la familia con su
   «Cotizar». La .planta pasa a display: contents para que sus piezas entren en
   la rejilla (los selectores .planta.abierta … siguen valiendo: miran el DOM).
   En tableta y teléfono, igual que antes.
   ========================================================================= */
@media (min-width: 1100px) {
	.escaparate > .caja {
		display: grid;
		grid-template-columns: minmax(0, .74fr) minmax(0, 1.4fr);
		grid-template-areas: "cabeza marco" "chips marco" "lineas lineas";
		grid-template-rows: auto 1fr auto;
		column-gap: clamp(40px, 4.4vw, 76px);
		align-items: start;
	}
	.escaparate .planta { display: contents; }
	.escaparate__cabeza { grid-area: cabeza; display: block; margin-bottom: 26px; }
	.escaparate__titulo { font-size: clamp(3rem, 4.4vw, 4.8rem); }
	.escaparate__bajada { margin-top: 20px; max-width: 34ch; }
	.escaparate .planta__marco { grid-area: marco; align-self: center; --plano-modo: medio; }
	.planta__hud--uno { flex-direction: column; gap: 4px; }
	.escaparate .planta__chips { grid-area: chips; flex-direction: column; gap: 6px; margin-top: 0; overflow: visible; }
	.escaparate .chip-est { flex: none; align-items: center; padding: 8px 16px 10px; }
	.escaparate .chip-est::after {
		content: attr(data-cuenta);
		margin-left: auto;
		font-family: var(--mono);
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--c-tenue);
	}
	.escaparate .planta__lineas { grid-area: lineas; margin-top: clamp(28px, 3vw, 44px); }
}

/* =========================================================================
   SIN CIFRAS ENTRE EL ESCAPARATE Y «LAS 11 LÍNEAS» (2026-11-11, 7)
   Felipe: «no me cuadran estos números». Solo queda la cinta de marcas, con el
   mismo aire arriba que el que deja «Las 11 líneas» debajo.
   ========================================================================= */
.nocturno { padding-top: clamp(64px, 8vw, 150px); }
.cinta--noche { margin-top: 0; }

/* =========================================================================
   LA TILDE DE «QUÉ» (2026-11-11, 8)
   Cada renglón del título sube detrás de su borde (.corte, overflow hidden).
   Con line-height .88 en mayúsculas, la tilde de la É quedaba FUERA de la caja
   y se cortaba: se leía «QUE». Aire arriba dentro de la caja, devuelto con
   margen negativo para que el título no se mueva.
   ========================================================================= */
.escaparate .corte { padding-top: .16em; margin-top: -.16em; }

/* =========================================================================
   EL TÍTULO DEL CATÁLOGO EN 3 RENGLONES PENSADOS (2026-11-11, 9)
   Felipe: «siento que está mal, no sé si queda bien 3 o 2 más grandecitos».
   Medido: entre renglones quedaban 4-5 px (line-height .88 con las mayúsculas
   altas de Big Shoulders) y la cola de la Q tocaba el de abajo; el corte tras
   «LE» era accidental. En 2 renglones no cabe más grande (QUÉ LE HACE FALTA =
   6,83 em en una columna de ~375 px → 55 px de letra). Ahora: tres cortes en el
   HTML (QUÉ LE / HACE FALTA / A SU PLANTA), cada uno con su entrada, interlineado
   .96 en todos los tamaños y, en el computador a dos columnas, un renglón por
   fila con la letra justa para que «A SU PLANTA» (4,68 em) llene la columna.
   En tableta y teléfono los cortes fluyen como antes (QUÉ LE HACE FALTA / A SU
   PLANTA, o en tres si no caben).
   ========================================================================= */
.escaparate__titulo { line-height: .96; }
.corte ~ .corte ~ .corte > span { transition-delay: .18s; }
@media (min-width: 1100px) {
	.escaparate__cabeza { container-type: inline-size; }
	.escaparate__titulo {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		font-size: clamp(3rem, 4.4vw, 4.8rem);
		font-size: calc(100cqi / 4.8);
	}
}

/* =========================================================================
   EL TÍTULO ARRIBA, EN 2 RENGLONES GRANDES (2026-11-11, 10)
   Felipe: «no me gusta cómo queda eso en 3 renglones… como está distribuido no
   me gusta». En su pantalla (1920 a 125 %: ~1536×680 px reales) la columna
   izquierda —título + texto + 6 familias— se salía por abajo y el plano quedaba
   arriba, solo. Ahora, en el computador:
     · arriba, a todo el ancho: QUÉ LE HACE FALTA / A SU PLANTA, grande (la letra
       sale del ancho de la caja: ~95 px en una caja de 1160), y el texto a la
       derecha, al pie del título;
     · debajo, a la misma altura: las 6 familias a la izquierda (llenan el alto
       del plano, como el índice de un plano de taller) y el plano a la derecha;
     · abajo, las líneas con «Cotizar», como antes.
   Sin la clase escaparate--arriba en el HTML vuelve la versión de 3 renglones.
   ========================================================================= */
@media (min-width: 1100px) {
	.escaparate--arriba > .caja {
		grid-template-areas: "cabeza cabeza" "chips marco" "lineas lineas";
		grid-template-rows: auto auto auto;
	}
	.escaparate--arriba .escaparate__cabeza {
		display: grid;
		grid-template-columns: auto minmax(0, 34ch);
		justify-content: space-between;
		align-items: end;
		column-gap: clamp(40px, 4.4vw, 76px);
		margin-bottom: clamp(30px, 3vw, 48px);
	}
	.escaparate--arriba .escaparate__titulo {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: .22em;
		font-size: clamp(4rem, 6.6vw, 6rem);
		font-size: 8.1cqi;
	}
	.escaparate--arriba .escaparate__titulo .corte:nth-child(3) { flex-basis: 100%; }
	.escaparate--arriba .escaparate__bajada { margin: 0 0 .5em; max-width: 34ch; }
	.escaparate--arriba .planta__marco { align-self: start; }
	.escaparate--arriba .planta__chips { align-self: stretch; }
	.escaparate--arriba .chip-est { flex: 1 1 0; min-height: 0; }
	.escaparate--arriba .chip-est__nombre { font-size: 1.4rem; }
}

/* =========================================================================
   EL ESCAPARATE COMPACTO (2026-11-11, 11)
   Felipe: «ya me cuadra un poco más, pero sigue muy arriba el texto… tiene que
   quedar como más compacta esa sección». Meta: en su pantalla (1920 al 125 % →
   1536×730 px reales) cabe la sección ENTERA de una vez. Dos columnas parejas
   de arriba abajo:
     · izquierda: el título en 2 renglones (QUÉ LE HACE FALTA / A SU PLANTA; la
       letra sale del ancho de la columna, con tope de 4,1rem ≈ 66 px) y debajo
       las 6 familias, estiradas al alto del plano;
     · derecha: «Once líneas… Toque una estación del plano…» al pie del título,
       justo encima del plano que describe, y el plano.
   La cabeza pasa a display: contents para que el título y el texto entren cada
   uno en su columna. La versión (10) sigue con la clase escaparate--arriba.
   ========================================================================= */
@media (min-width: 1100px) {
	.escaparate--compacta > .caja {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "titulo bajada" "chips marco" "lineas lineas";
		grid-template-rows: auto auto auto;
		column-gap: clamp(40px, 4vw, 64px);
	}
	.escaparate--compacta .escaparate__cabeza { display: contents; }
	.escaparate--compacta .escaparate__cabeza > div {
		grid-area: titulo;
		container-type: inline-size;
		margin-bottom: 20px;
	}
	.escaparate--compacta .escaparate__titulo {
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: .22em;
		font-size: clamp(3.4rem, 5vw, 4.1rem);
		font-size: min(calc(100cqi / 6.95), 4.1rem);
	}
	.escaparate--compacta .escaparate__titulo .corte:nth-child(3) { flex-basis: 100%; }
	.escaparate--compacta .escaparate__bajada {
		grid-area: bajada;
		align-self: end;
		max-width: 42ch;
		margin: 0 0 calc(20px + .2em);
	}
	.escaparate--compacta .planta__marco { align-self: start; }
	.escaparate--compacta .planta__chips { align-self: stretch; }
	.escaparate--compacta .chip-est { flex: 1 1 0; min-height: 0; }
	.escaparate--compacta .chip-est__nombre { font-size: 1.35rem; }
	/* con el plano a media caja, las etiquetas de arriba (01, 03) pisaban el segundo renglón
	   del rótulo del plano («Línea de producción · circuito…»): fuera; queda «Plano TNV · 01» */
	.escaparate--compacta .planta__hud--uno span:nth-child(2) { display: none; }
	/* la estación abierta, en un plano de ~550 px: la letra del nombre sale del ancho del
	   plano (no de la pantalla: «CILINDR» se cortaba) y «Ver toda la planta» baja a su renglón */
	.escaparate--compacta .planta__marco { container-type: inline-size; }
	.escaparate--compacta .ficha__texto { right: 4%; width: 44%; }
	.escaparate--compacta .ficha__nombre { font-size: 8.2cqi; }
	.escaparate--compacta .ficha__mando { flex-wrap: wrap; margin-top: 18px; }
	.escaparate--compacta .ficha__volver { order: 3; white-space: nowrap; }
	/* menos aire encima: al entrar por «Catálogo» el rótulo queda a ~28 px de la cabecera */
	.catalogo:has(.escaparate--compacta) { padding-top: 28px; }
}

/* =========================================================================
   LA CABEZA DEL CATÁLOGO, UN SOLO BLOQUE (2026-11-11, 12)
   Felipe: «quiero que el título esté acorde con lo de la derecha, o sea que
   quede como un cuadrado unificado. Y así queda como planito». El rótulo
   «Catálogo» sube a la esquina de arriba a la derecha y el texto queda abajo a
   la derecha: el lado derecho ocupa el mismo alto que el título (mismo borde de
   arriba, mismo pie) y la cabeza pierde el renglón del rótulo. Sin la clase
   escaparate--bloque vuelve la (11).
   ========================================================================= */
@media (min-width: 1100px) {
	.escaparate--bloque .escaparate__cabeza > div { display: contents; }
	.escaparate--bloque .escaparate__titulo { grid-area: titulo; margin: 0 0 22px; font-size: 4.1rem; }
	.escaparate--bloque .escaparate__cabeza .rotulo { grid-area: bajada; align-self: start; justify-self: start; margin: 0; }
	.escaparate--bloque .escaparate__bajada { grid-area: bajada; align-self: end; margin: 0 0 22px; font-size: 1.12rem; }
}

/* =========================================================================
   MENOS AIRE ALREDEDOR DE LA CINTA DE MARCAS (2026-11-11, 12)
   Felipe: «que no haya tanto espacio entre la sección de arriba, la de abajo y
   la marquesina». Antes: 123-150 px encima y 194 debajo; ahora ~64 parejos.
   ========================================================================= */
/* encima, menos: el bloque de las líneas ya trae ~32 px vacíos debajo de sus tarjetas */
.nocturno { padding-top: clamp(16px, 2vw, 36px); }
/* en tableta las tarjetas traen aún más hueco debajo; en el teléfono, menos */
@media (max-width: 1099.98px) { .nocturno { padding-top: 0; } }
@media (max-width: 760px) { .nocturno { padding-top: 24px; } }
.catalogo__todas { padding-top: clamp(40px, 4.4vw, 68px); }

/* =========================================================================
   LA CINTA DE MARCAS EN AZUL, CON LETRAS LLENAS (2026-11-11, 13)
   Felipe: «esas letras… aparecen como líneas donde no tienen que ir» y «que
   esa marquesina sea azul… la que sigue es la blanca y la que sigue después es
   azul, entonces hace un equilibrio». Las huecas (text-stroke) dibujaban los
   cruces internos de los contornos (la barra de la A, la cola de la Q): todas
   llenas. Fondo: el azul de plano de Servicio técnico. Letras: blanco y azul
   pálido alternados (el negro no se lee sobre ese azul: ~1,9:1).
   ========================================================================= */
.cinta--noche {
	border-block: 0;
	background-color: #0A3C8C;
	background-image:
		linear-gradient(rgba(255, 255, 255, .085) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .085) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
	background-position: -1px -1px;
	padding-block: clamp(20px, 2.6vw, 34px);
}
.cinta--noche .marca-letra { color: #fff; }
.cinta--noche .marca-letra--hueca { color: #9DBDF6; -webkit-text-stroke: 0; }
.cinta--noche .marca-letra:hover { color: #fff; -webkit-text-stroke: 0; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; }
.cinta--noche .marca-letra::after { background: rgba(255, 255, 255, .55); }
.cinta--noche .cinta__parar { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; }
.cinta--noche .cinta__parar:hover { background: #fff; border-color: #fff; color: #0A3C8C; }
.cinta--noche :focus-visible { outline-color: #fff; }

/* =========================================================================
   LAS SECCIONES DE ABAJO, AL NIVEL DE LAS DE ARRIBA (2026-11-11, 14)
   Felipe: «desde la sección de máquinas a la medida de su proceso, para
   abajo, quiero que mejores todas las secciones». Cada una con su pieza,
   como la orden de servicio o las láminas de Proyectos:
     · Descargas: el ARCHIVO TÉCNICO (visor + registro por marca).
     · Marcas: PLACAS de fabricante remachadas + la placa de la promesa.
     · Empresa: la FICHA de la empresa junto a la fachada real; valores en
       rejilla.
     · Contacto: la cabeza al mismo patrón.  · Pie: columnas.
   ========================================================================= */
:root {
	--mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
	--rotulista: "Big Shoulders Display", "Arial Narrow", "Barlow", sans-serif;
}

/* ---------- la cabeza en dos: título a la izquierda, el texto a su pie, a la derecha ---------- */
.cabeza-par {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: end;
	gap: 16px clamp(32px, 5vw, 80px);
	margin-bottom: clamp(30px, 3.4vw, 52px);
}
.cabeza-par .titulo { margin: 0; text-wrap: balance; }
.cabeza-par .entrada { margin: 0; max-width: 48ch; }
@media (max-width: 860px) {
	.cabeza-par { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* =========================================================================
   EL ARCHIVO TÉCNICO
   ========================================================================= */
.biblioteca { background: var(--papel); }
.archivo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 44px); align-items: start; }

.archivo__visor {
	position: sticky;
	top: calc(var(--techo, 120px) + 20px);
	padding: 18px 20px 22px;
	border: 1px solid var(--linea);
	border-radius: 16px;
	background: var(--nieve);
}
.archivo__rot {
	display: flex;
	justify-content: space-between;
	margin: 0 0 14px;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gris);
}
.archivo__rot span:last-child { color: var(--azul); }
/* la mesa: cuadrícula de plano tenue y la portada encima, con su sombra */
.archivo__tapa {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	background-color: #E9EFF7;
	background-image:
		linear-gradient(rgba(0, 59, 141, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 59, 141, .07) 1px, transparent 1px);
	background-size: 24px 24px;
	overflow: hidden;
}
.archivo__tapa img {
	width: auto;
	height: 86%;
	max-width: 80%;
	object-fit: contain;
	border-radius: 3px;
	background: #fff;
	box-shadow: 0 26px 36px -22px rgba(0, 32, 84, .55), 0 2px 6px rgba(16, 32, 46, .12);
	transition: opacity .18s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.archivo__tapa.apaisada img { width: 86%; height: auto; max-height: 80%; }
.archivo__tapa.cambia img { opacity: 0; transform: translateY(8px) scale(.98); }
.archivo__marca { margin: 18px 0 0; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.archivo__nombre { margin: 6px 0 0; font-family: var(--titulo); font-size: 1.45rem; font-weight: 800; line-height: 1.15; color: var(--tinta); text-wrap: balance; }
.archivo__dato { margin: 6px 0 0; font-family: var(--mono); font-size: 12px; color: var(--gris); }
.archivo__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* las pestañas por marca */
.archivo__filtros { display: flex; flex-wrap: nowrap; gap: 5px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.archivo__filtros::-webkit-scrollbar { display: none; }
.archivo__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 7px 11px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	background: var(--papel);
	font-family: var(--titulo);
	font-size: .84rem;
	font-weight: 700;
	color: var(--tinta);
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.archivo__tab i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--gris); }
.archivo__tab:hover { border-color: var(--azul); color: var(--azul); }
.archivo__tab[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.archivo__tab[aria-pressed="true"] i { color: var(--azul-hielo); }
.archivo__tab:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }

/* el registro */
.archivo__tabla { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: var(--papel); }
.archivo__enc, .doc { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px 82px 52px; align-items: center; column-gap: 12px; padding-inline: 16px 10px; }
.archivo__enc {
	margin: 0;
	padding-block: 11px;
	border-bottom: 1px solid var(--linea);
	background: var(--nieve);
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris);
}
.archivo__enc span:nth-child(3), .archivo__enc span:nth-child(4) { text-align: right; }
.archivo__enc span:last-child { text-align: center; }
.archivo__lista { list-style: none; margin: 0; padding: 0; max-height: 468px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #B6C4D6 transparent; }
.doc-grupo {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 16px 6px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--azul);
}
.doc-grupo i { font-style: normal; color: var(--gris-claro); letter-spacing: .08em; }
.doc-grupo[hidden], .doc[hidden] { display: none; }
.doc { padding-block: 10px; border-top: 1px solid #EEF2F7; transition: background-color .15s ease; }
.doc-grupo + .doc { border-top: 0; }
.doc.es-actual, .doc:hover { background: var(--azul-claro); }
.doc__num { font-family: var(--mono); font-size: 12px; color: var(--gris-claro); }
.doc.es-actual .doc__num { color: var(--azul); font-weight: 600; }
.doc__mini { display: none; }
.doc__abrir { display: grid; gap: 1px; min-width: 0; color: var(--tinta); text-decoration: none; }
.doc__abrir:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 4px; border-radius: 4px; }
.doc__marca, .doc__meta { display: none; }
.doc__nombre { font-family: var(--titulo); font-size: .98rem; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc__abrir:hover .doc__nombre { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.doc__pag, .doc__peso { font-family: var(--mono); font-size: 12px; color: var(--gris); text-align: right; font-variant-numeric: tabular-nums; }
.doc__bajar {
	justify-self: center;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--linea);
	border-radius: 50%;
	color: var(--azul);
	background: var(--papel);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.doc__bajar svg { width: 17px; height: 17px; }
.doc__bajar:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
.doc__bajar:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }

@media (max-width: 999.98px) {
	.archivo { grid-template-columns: minmax(0, 1fr); }
	.archivo__visor, .archivo__enc { display: none; }
	.archivo__filtros { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--margen) * -1); padding: 2px var(--margen) 4px; scrollbar-width: none; }
	.archivo__filtros::-webkit-scrollbar { display: none; }
	.archivo__tab { flex: none; }
	.archivo__lista { max-height: none; overflow: visible; }
	.doc { grid-template-columns: 46px minmax(0, 1fr) 42px; column-gap: 14px; padding: 10px 12px; }
	.doc.es-actual { background: transparent; }
	.doc__num, .doc__pag, .doc__peso { display: none; }
	.doc__mini { display: block; width: 46px; height: 60px; object-fit: cover; object-position: top; border-radius: 3px; border: 1px solid var(--linea); background: #fff; }
	.doc__marca { display: block; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
	.doc__nombre { white-space: normal; }
	.doc__meta { display: block; font-family: var(--mono); font-size: 11px; color: var(--gris); margin-top: 2px; }
	.doc-grupo { padding-inline: 12px; }
}

/* =========================================================================
   LAS PLACAS DE LAS MARCAS
   ========================================================================= */
.fabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.fab {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 300px;
	padding: 22px 22px 18px;
	border: 1px solid #D3DDEA;
	border-radius: 12px;
	background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%);
	box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16, 32, 46, .05);
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* los cuatro remaches */
.fab::before {
	content: "";
	position: absolute;
	inset: 9px;
	pointer-events: none;
	--r: radial-gradient(circle, #B9C6D6 0 2.1px, #E4EAF2 2.6px 3.2px, transparent 3.6px);
	background: var(--r) 0 0 / 8px 8px no-repeat, var(--r) 100% 0 / 8px 8px no-repeat, var(--r) 0 100% / 8px 8px no-repeat, var(--r) 100% 100% / 8px 8px no-repeat;
}
.fab:hover { border-color: #9DB6D8; box-shadow: inset 0 1px 0 #fff, 0 18px 30px -24px rgba(0, 40, 100, .45); transform: translateY(-2px); }
.fab__rep {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 0 4px 12px;
	border-bottom: 1px solid #DCE4EE;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gris);
}
.fab__rep span:first-child { color: var(--azul); }
.fab__marca {
	margin: 18px 4px 0;
	font-family: var(--rotulista);
	font-size: clamp(2.6rem, 3.4vw, 3.4rem);
	font-weight: 900;
	line-height: .9;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--tinta);
	transition: color .25s ease;
}
.fab:hover .fab__marca { color: var(--azul); }
.fab__texto { margin: 12px 4px 0; font-size: .95rem; line-height: 1.5; color: var(--gris); }
.fab__sello {
	align-self: flex-start;
	margin: 14px 4px 0;
	padding: 5px 10px;
	border: 1px solid rgba(0, 59, 141, .35);
	border-radius: 999px;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--azul);
}
.fab__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-top: auto;
	padding: 14px 4px 0;
	border-top: 1px solid #DCE4EE;
}
.fab > .fab__texto + .fab__pie, .fab > .fab__sello + .fab__pie { margin-top: auto; }
.fab__texto { margin-bottom: 18px; }
.fab__cuenta { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gris); }
.fab__cuenta b { color: var(--tinta); font-weight: 600; }
.fab__ir { font-family: var(--titulo); font-size: .9rem; font-weight: 800; color: var(--azul); text-decoration: none; white-space: nowrap; }
.fab__ir::after { content: ""; display: inline-block; width: 14px; height: 10px; margin-left: 6px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.5 12 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5h11M8.5 1.5 12 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; }
.fab__ir:hover::after { transform: translateX(3px); }
.fab__ir:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 3px; border-radius: 4px; }

/* la placa de la promesa, en el azul de plano */
.fab--promesa {
	border-color: #0A3C8C;
	background-color: #0A3C8C;
	background-image:
		linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 28px 28px;
	color: #fff;
}
.fab--promesa::before { --r: radial-gradient(circle, #5D84C2 0 2.1px, #2A5AA6 2.6px 3.2px, transparent 3.6px); }
.fab--promesa:hover { border-color: #0A3C8C; }
.fab--promesa .fab__rep { color: var(--azul-hielo); border-color: rgba(255, 255, 255, .2); }
.fab--promesa .fab__rep span:first-child { color: #fff; }
.fab--promesa .fab__pie { border-color: rgba(255, 255, 255, .2); }
.promesa { list-style: none; margin: 18px 4px 22px; padding: 0; display: grid; gap: 12px; }
.promesa li { position: relative; padding-left: 28px; font-family: var(--titulo); font-size: 1.12rem; font-weight: 800; line-height: 1.25; }
.promesa li::before { content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2 7.8 12 13 6.5' fill='none' stroke='%230A3C8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

@media (max-width: 1099.98px) { .fabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fab { min-height: 0; } }
/* en el teléfono, las placas en carrusel (82 % de ancho: se asoma la siguiente) en vez de 8 apiladas (~2.650 px) */
@media (max-width: 560px) {
	.fabs {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 82%;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--margen);
		margin-inline: calc(var(--margen) * -1);
		padding: 2px var(--margen) 10px;
		scrollbar-width: none;
	}
	.fabs::-webkit-scrollbar { display: none; }
	.fab { scroll-snap-align: start; min-height: 330px; }
	.fab:hover { transform: none; }
	.fab__marca { font-size: 2.6rem; }
}

/* =========================================================================
   LA FICHA DE LA EMPRESA
   ========================================================================= */
.emp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
.emp__foto { position: relative; margin: 0; }
.emp__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 16px; }
.emp__foto figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--gris); }
.emp__foto .visitenos { position: absolute; left: 14px; right: 14px; bottom: 44px; z-index: 1; }
.emp__ficha { margin: 0; border-top: 2px solid var(--tinta); }
.emp__ficha > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.emp__ficha dt { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); padding-top: 3px; }
.emp__ficha dd { margin: 0; font-family: var(--titulo); font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--tinta); }
.emp__ficha dd a { color: var(--azul); text-decoration: none; border-bottom: 1px solid rgba(0, 59, 141, .3); }
.emp__ficha dd a:hover { border-color: var(--azul); }
.emp__mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 30px; }
.emp__mv h3 { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); }
.emp__mv p { margin: 0; font-size: .97rem; line-height: 1.6; color: var(--gris); }

.val { margin-top: clamp(40px, 5vw, 72px); }
.val__rot { margin: 0 0 14px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.val__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.val__lista li { display: grid; gap: 6px; padding: 18px 18px 20px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); font-family: var(--titulo); font-size: 1.08rem; font-weight: 800; color: var(--tinta); }
.val__lista span { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--azul); }

@media (max-width: 999.98px) {
	.emp { grid-template-columns: minmax(0, 1fr); }
	.emp__foto img { aspect-ratio: 4 / 3; }
	.val__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.emp__ficha > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.emp__mv { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.val__lista li { padding: 14px; font-size: 1rem; }
}

/* =========================================================================
   EL PIE, CON COLUMNAS
   ========================================================================= */
.pie .pie__columnas {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: 28px clamp(24px, 4vw, 56px);
	padding-block: clamp(28px, 3vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.pie__col p { margin: 0 0 8px; color: var(--gris-claro); font-size: .95rem; line-height: 1.5; }
.pie__razon { color: #fff !important; font-family: var(--titulo); font-weight: 800; font-size: 1.05rem !important; }
.pie__tit { margin: 0 0 12px !important; font-family: var(--mono); font-size: 11px !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-hielo) !important; }
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie__col a { font-size: .95rem; }
@media (max-width: 860px) { .pie .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie__col--empresa { grid-column: 1 / -1; } }

/* el archivo en el teléfono: 6 filas y «Ver los 27 documentos»; la marca ya va en el encabezado del grupo */
.archivo__mas { display: none; }
@media (max-width: 999.98px) {
	.archivo--corto .doc--extra { display: none; }
	.archivo__mas:not([hidden]) {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 12px;
		padding: 13px 18px;
		border: 1.5px solid #B6C4D6;
		border-radius: 999px;
		background: var(--papel);
		font-family: var(--titulo);
		font-size: .95rem;
		font-weight: 800;
		color: var(--azul);
		cursor: pointer;
	}
	.archivo .doc__marca { display: none; }
}

/* =========================================================================
   LA CINTA DE MARCAS NUNCA PARA (2026-11-11, 15)
   Felipe: «que la marquesina nunca pare». Ni al pasar el ratón ni con botón:
   el «Parar» se esconde. (Quien tiene «menos movimiento» en su sistema la ve
   quieta, como siempre: eso lo pide el propio aparato, no la página.)
   ========================================================================= */
.cinta--noche:hover .cinta__pista,
.cinta--noche.cinta--quieta .cinta__pista { animation-play-state: running; }
.cinta--noche .cinta__parar { display: none !important; }

/* --------------------------------------------------------------------------
   EL CHAT EN LA CABECERA DEL TELÉFONO (2026-11-12)
   Felipe: «el botón del chat está quedando arriba… no sé qué tan viable sea a
   nivel de diseño». Flotando a media portada tapaba el pistón. Mientras la
   portada está quieta a la vista, el guion le pone asistente--arriba y el botón
   va en la cabecera, junto al menú; el globo se abre hacia abajo. Al salir de
   la portada vuelve a su esquina. Solo en teléfono (hasta 560 px).
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
	.asistente.asistente--arriba {
		top: calc(var(--barra) + (var(--cabecera) - 44px) / 2);
		bottom: auto;
		left: auto;
		right: calc(var(--margen) + 44px + 10px);
		flex-direction: column-reverse;
		align-items: flex-end;
		translate: none;
	}
	.asistente--arriba .asistente__boton {
		width: 44px;
		height: 44px;
		box-shadow: 0 4px 12px rgba(0, 42, 102, .28);
		animation: chat-llega .3s ease-out;
	}
	.asistente--arriba .asistente__boton svg { width: 21px; height: 21px; }
	.asistente--arriba .asistente__pulso { display: none; }
	.asistente--arriba .asistente__panel { transform-origin: top right; }
}
/* al cambiar de sitio, aparece en vez de saltar */
.asistente:not(.asistente--arriba) .asistente__boton { animation: chat-baja .3s ease-out; }
@keyframes chat-llega { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes chat-baja { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.asistente:not(.asistente--arriba) .asistente__boton,
	.asistente.asistente--arriba .asistente__boton { animation: none; }
}

/* --------------------------------------------------------------------------
   EL ASISTENTE CON IA, VISTA PREVIA (2026-11-12)
   Dentro del mismo globo de ayuda: la conversación arriba, el campo abajo. Al
   empezar a conversar, las tres opciones fijas se esconden (.conversando).
   -------------------------------------------------------------------------- */
.asistente__panel { width: min(calc(100vw - 32px), 340px); display: flex; flex-direction: column; max-height: calc(100svh - 150px); }
.asistente--arriba .asistente__panel { max-height: calc(100svh - 128px); }
.asistente__panel[hidden] { display: none; }
.asistente__panel.conversando .asistente__opcion,
.asistente__panel.conversando > p { display: none; }
.ia { display: flex; flex-direction: column; gap: 8px; min-height: 0; margin-bottom: 10px; }
.ia[hidden] { display: none; }
.ia__mensajes { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; max-height: 300px; overscroll-behavior: contain; padding: 2px; }
.asistente__panel.conversando .ia { flex: 1 1 auto; }
.asistente__panel.conversando .ia__mensajes { max-height: none; flex: 1 1 auto; min-height: 120px; }
.ia__sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.ia__sug { border: 1px solid var(--azul-hielo); background: var(--azul-claro); color: var(--azul); border-radius: 999px; padding: 7px 12px; font: 600 .82rem/1.2 var(--texto); cursor: pointer; text-align: left; }
.ia__sug:hover { background: #fff; border-color: var(--azul); }
.ia__msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.45; white-space: pre-line; }
.ia__msg--usuario { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; }
.ia__msg--asistente { align-self: flex-start; background: #F3F6FA; color: var(--tinta); border: 1px solid var(--linea); border-bottom-left-radius: 4px; }
.ia__msg--espera { color: var(--gris); }
.ia__msg--espera::after { content: "…"; display: inline-block; margin-left: 2px; animation: ia-parpadeo 1s ease-in-out infinite; }
@keyframes ia-parpadeo { 50% { opacity: .25; } }
.ia__cotiza { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: -2px; padding: 8px 14px; border-radius: 999px; background: var(--azul); color: #fff; font: 800 .82rem/1 var(--titulo); text-decoration: none; }
.ia__cotiza:hover { background: var(--azul-fuerte); }
.ia__escribe { display: flex; gap: 6px; }
.ia__escribe input { flex: 1 1 auto; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; font: 400 16px/1 var(--texto); color: var(--tinta); background: #fff; }
.ia__escribe input:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 1px; border-color: var(--azul-vivo); }
.ia__escribe button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 10px; background: var(--azul); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ia__escribe button svg { width: 18px; height: 18px; }
.ia__escribe button:disabled { opacity: .5; cursor: default; }
.ia__nota { margin: 0; font-size: .74rem; color: var(--gris); }
@media (prefers-reduced-motion: reduce) { .ia__msg--espera::after { animation: none; } }

/* (2026-11-12) En el teléfono, la burbuja un poco más a la izquierda: al ras
   del margen de la página (Felipe: «un poquito más pegado a la izquierda»). */
@media (max-width: 560px) {
	.asistente { left: var(--margen); }
}
/* en la cabecera, el globo se alinea con el borde derecho del menú (no se sale por la izquierda) */
@media (max-width: 560px) {
	.asistente--arriba .asistente__panel { margin-right: -54px; width: min(calc(100vw - 2 * var(--margen)), 340px); }
}

/* (2026-11-12) SOLO EL CHAT. Felipe: «que solamente sea el chat y ya». Con el
   asistente encendido (.con-ia) se esconden las opciones fijas, el saludo de
   texto y el teléfono; el globo tiene un alto fijo y la conversación corre
   dentro. */
.asistente__panel.con-ia > p,
.asistente__panel.con-ia .asistente__opcion,
.asistente__panel.con-ia .asistente__pie { display: none; }
.asistente__panel.con-ia { height: min(480px, calc(100svh - 150px)); max-height: none; }
.asistente--arriba .asistente__panel.con-ia { height: min(520px, calc(100svh - 128px)); }
.asistente__panel.con-ia .asistente__cab { margin-bottom: 10px; }
.asistente__panel.con-ia .ia { flex: 1 1 auto; margin-bottom: 0; }
.asistente__panel.con-ia .ia__mensajes { flex: 1 1 auto; max-height: none; min-height: 0; }
.ia__sugerencias { margin-top: 2px; }