/* ==========================================================================
   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%;
}

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;
	place-items: 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
   -------------------------------------------------------------------------- */

.doble {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.doble__foto img { width: 100%; border-radius: var(--radio-gr); box-shadow: var(--sombra); }

.servicios-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.servicios-lista li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	padding: 14px 16px;
	font-size: .93rem;
	color: var(--gris);
}

.servicios-lista li::before {
	content: "✓";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	background: var(--azul-claro);
	color: var(--azul);
	border-radius: 50%;
	font-size: .78rem;
	font-weight: 700;
}

.servicios-lista strong { display: block; font-family: var(--titulo); color: var(--tinta); }

/* --------------------------------------------------------------------------
   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; }

/* 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,
	.doble { 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 — UN PLANO TÉCNICO VIVO (v3, 2026-11-06)
   --------------------------------------------------------------------------
   Felipe: «solo blanco y azul, quiero la animación con el scroll, quiero algo
   más WOW, más moderno». La escena se queda pegada bajo la cabecera y el
   desplazamiento cuenta la historia (ver el guion, sección 7).

   Dos estados, y el que manda es el que NO necesita guion:

   · SIN `html.portada-js` (sin JavaScript, o con «menos movimiento»): todo en
     su sitio y quieto — titular, botones, el cilindro desarmado en imagen, las
     tres piezas, el lema y los avales.
   · CON `html.portada-js` (la pone un guion en línea en <head>, antes de
     pintar): la escena pegada, el lienzo, el plano y los trazos.

   RENDIMIENTO, que ya costó caro una vez (la web de Laura a 6 cps): aquí solo
   se animan `opacity` y `transform`, y un solo dibujo por cuadro en el lienzo.
   Nada de blur, backdrop-filter ni @property animados.
   -------------------------------------------------------------------------- */

.portada {
	--estudio-arriba: #D4DEE6;   /* bordes del primer cuadro (cuadros.json) */
	--estudio-abajo: #E0E5EA;
	--linea-plano: rgba(47, 114, 232, .11);
	--linea-plano-fuerte: rgba(47, 114, 232, .2);
	position: relative;
	background: linear-gradient(180deg, var(--estudio-arriba), #DAE2E8 55%, var(--estudio-abajo));
}

.portada__lienzo,
.portada__plano,
.portada__trazos,
.portada__puntos,
.portada__progreso,
.portada__guia { display: none; }

/* --- El titular --- */

.portada__entrada {
	position: relative;
	z-index: 4;
	padding-top: calc(var(--techo) + clamp(28px, 5vh, 56px));
	text-align: center;
}

.portada .rotulo { background: rgba(255, 255, 255, .78); }

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

/* El azul de marca al azul vivo: es texto grande, ahí sí puede ir. */
.portada h1 em,
.portada__lema em {
	font-style: normal;
	color: var(--azul);
	background: linear-gradient(100deg, var(--azul) 10%, var(--azul-vivo) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.portada__bajada {
	max-width: 56ch;
	margin: 16px auto 0;
	color: #3E4C5E;
	font-size: 1.04rem;
}

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

/* --- La imagen fija (sin guion) --- */

.portada__ventana { margin: 18px 0 0; }

.portada__cartel { width: 100%; max-width: 1400px; margin-inline: auto; }

/* --- Las piezas: etiqueta de plano + el servicio --- */

.portada__piezas {
	list-style: none;
	width: 100%;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 var(--margen);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.pieza {
	position: relative;
	background: var(--papel);
	border: 1px solid #D3DEEE;
	border-radius: var(--radio);
	padding: 12px 16px 14px;
	box-shadow: var(--sombra);
	font-size: .9rem;
	line-height: 1.4;
	color: var(--gris);
}

.pieza__marca {
	display: block;
	margin-bottom: 4px;
	font-family: var(--titulo);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--azul);
}

.pieza strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--titulo);
	font-size: .98rem;
	font-weight: 800;
	color: var(--tinta);
}

.pieza__texto { display: block; }

/* --- El cierre: el lema, los botones y los avales --- */

.portada__cierre {
	position: relative;
	z-index: 4;
	padding-block: 28px clamp(40px, 6vw, 72px);
	text-align: center;
}

.portada__lema {
	margin: 0;
	font-family: var(--titulo);
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--tinta);
}

/* Sin guion los botones ya están arriba, junto al titular: no se repiten. */
.portada__botones--cierre { display: none; }

.portada .avales {
	justify-content: center;
	margin-top: 16px;
	color: var(--gris);
}

.portada .avales b { color: var(--azul); font-variant-numeric: tabular-nums; }

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

/* Pista larga: el último tramo (casi la mitad) es para LEER con todo quieto. */
.portada-js .portada__pista { height: 380vh; height: 380svh; }

/* La escena ocupa TODA la pantalla, también por debajo de la cabecera, que es
   transparente encima de ella: el plano sigue por detrás del logo y del menú.
   Lo que se lee empieza por debajo de la cabecera (padding con --techo). */
.portada-js .portada__escena {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

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

/* La cuadrícula del plano: líneas finas cada 24 px y más marcadas cada 120.
   Se ve en la pared y en el suelo, no encima de las piezas (la máscara deja
   esa franja libre; su altura la pone el guion al medir). Solo cambia su
   opacidad, que es barata. */
.portada-js .portada__plano {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: .35;
	pointer-events: none;
	will-change: opacity;     /* capa propia: cambiar su opacidad no repinta nada */
	background-image:
		linear-gradient(var(--linea-plano-fuerte) 1px, transparent 1px),
		linear-gradient(90deg, var(--linea-plano-fuerte) 1px, transparent 1px),
		linear-gradient(var(--linea-plano) 1px, transparent 1px),
		linear-gradient(90deg, var(--linea-plano) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position: center center;
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 var(--plano-a, 30%), transparent calc(var(--plano-a, 30%) + 70px), transparent calc(var(--plano-b, 70%) - 70px), #000 var(--plano-b, 70%), #000 100%);
	mask-image: linear-gradient(180deg, #000 0, #000 var(--plano-a, 30%), transparent calc(var(--plano-a, 30%) + 70px), transparent calc(var(--plano-b, 70%) - 70px), #000 var(--plano-b, 70%), #000 100%);
}

.portada-js .portada__trazos {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.trazo {
	fill: none;
	stroke: var(--azul-vivo);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.trazo--fino { stroke-width: 1; opacity: .7; }

.cota-texto {
	font-family: var(--titulo);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	fill: var(--azul);
}

.portada-js .portada__puntos {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.punto {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	opacity: 0;
}

.punto::before {
	content: "";
	position: absolute;
	left: -6px;
	top: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--azul);
	box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(47, 114, 232, .22);
}

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

.portada-js .portada__entrada,
.portada-js .portada__cierre,
.portada-js .portada__piezas {
	position: absolute;
	left: 0;
	right: 0;
}

.portada-js .portada__entrada {
	top: 0;
	padding-top: calc(var(--techo) + clamp(22px, 4.5vh, 48px));
	will-change: transform, opacity;
}

.portada-js .portada__cierre {
	top: 0;
	padding: calc(var(--techo) + clamp(18px, 3.4vh, 36px)) var(--margen) 0;
	pointer-events: none;      /* cada parte se activa sola cuando se ve */
}

/* Cada parte del cierre (lema, botones, avales) aparece por su cuenta: el
   guion les pone opacidad y visibilidad; hasta entonces, ocultas. */
.portada-js .portada__cierre > * {
	opacity: 0;
	visibility: hidden;
	will-change: transform, opacity;
}

.portada-js .portada__botones--cierre { display: flex; margin-top: 16px; }

/* El cierre en el computador: el lema y, debajo, botones y avales en una fila. */
.portada-js .portada__cierre .avales { margin-top: 14px; }

.portada-js .portada__piezas {
	top: 0;
	bottom: 0;
	z-index: 4;
	max-width: none;
	margin: 0;
	padding: 0;
	pointer-events: none;
}

.portada-js .pieza {
	position: absolute;
	left: 0;
	top: 0;
	width: 250px;
	opacity: 0;
	pointer-events: auto;
	will-change: transform, opacity;
}

/* --- La guía «Desplácese» --- */

.portada-js .portada__guia {
	display: flex;
	align-items: center;
	gap: 10px;
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 5;
	margin: 0;
	transform: translateX(-50%);
	font-family: var(--titulo);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--azul);
}

/* Un riel con una bolita que baja: solo `transform`, nada que repintar. */
.portada__guia i {
	position: relative;
	width: 2px;
	height: 26px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(0, 59, 141, .18);
}

.portada__guia i::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 9px;
	border-radius: 2px;
	background: var(--azul);
	animation: guia-baja 1.6s cubic-bezier(.6, 0, .4, 1) infinite;
}

@keyframes guia-baja {
	from { transform: translateY(-10px); }
	to   { transform: translateY(28px); }
}

/* --- El indicador de avance: un riel vertical con tres marcas --- */

.portada-js .portada__progreso {
	display: block;
	position: absolute;
	right: clamp(16px, 2.2vw, 32px);
	top: calc(50% + var(--techo) / 2);
	z-index: 5;
	height: 180px;
	transform: translateY(-50%);
}

.portada__riel {
	position: absolute;
	right: 4px;
	top: 0;
	width: 2px;
	height: 100%;
	border-radius: 2px;
	background: rgba(0, 59, 141, .16);
	overflow: hidden;
}

.portada__llenado {
	position: absolute;
	inset: 0;
	background: var(--azul-vivo);
	transform: scaleY(0);
	transform-origin: 50% 0;
}

.paso {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	transform: translateY(-50%);
	font-family: var(--titulo);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris);
	white-space: nowrap;
}

.paso:nth-of-type(2) { top: 0; }
.paso:nth-of-type(3) { top: 50%; }
.paso:nth-of-type(4) { top: 100%; }

.paso span { order: -1; transition: color .25s ease; }

.paso i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid rgba(0, 59, 141, .3);
	transition: background .25s ease, border-color .25s ease;
}

.paso.es-activo span { color: var(--azul); }
.paso.es-activo i { background: var(--azul-vivo); border-color: var(--azul-vivo); }

/* Mientras la escena está a la vista, el botón de ayuda se aparta: en una
   escena pegada no hay forma de quitarlo de encima del contenido. */
.asistente { transition: opacity .3s ease, visibility 0s linear 0s; }

.portada-en-escena .asistente {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

/* --- Tablet y teléfono --- */

@media (max-width: 999.98px) {
	.portada-js .portada__pista { height: 360vh; height: 360svh; }

	.portada h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); max-width: 17ch; }
	.portada__bajada { font-size: .94rem; }
	.portada__botones .btn { flex: 1 1 0; max-width: 220px; }

	.portada-js .portada__entrada { padding-top: calc(var(--techo) + 18px); }

	/* Las piezas: tres fichas pequeñas abajo, con el número de su punto. */
	.portada-js .portada__piezas {
		top: auto;
		bottom: 22px;
		left: var(--margen);
		right: var(--margen);
		width: auto;          /* con width 100 % y left/right a la vez, la tercera se salía */
		padding: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.portada-js .pieza {
		position: relative;
		width: auto;
		padding: 9px 8px 10px;
		text-align: center;
	}

	.portada-js .pieza__marca { font-size: .6rem; letter-spacing: .1em; }
	.portada-js .pieza strong { font-size: .76rem; line-height: 1.2; margin: 0; }
	.portada-js .pieza__texto { display: none; }

	.punto::before {
		left: -11px;
		top: -11px;
		width: 22px;
		height: 22px;
		box-shadow: 0 0 0 3px #fff;
	}

	.punto::after {
		content: attr(data-n);
		position: absolute;
		left: -11px;
		top: -11px;
		width: 22px;
		height: 22px;
		display: grid;
		place-items: center;
		color: #fff;
		font-family: var(--titulo);
		font-size: .62rem;
		font-weight: 800;
	}

	.portada-js .portada__lema { font-size: clamp(1.5rem, 6.4vw, 2rem); }

	/* En el teléfono el cierre ocupa la escena entera: el lema arriba y, en la
	   última etapa, los avales y los botones abajo, donde estaban las fichas. */
	.portada-js .portada__cierre {
		bottom: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 18px;
	}

	.portada-js .portada__cierre .avales { order: 2; margin-top: auto; }
	.portada-js .portada__botones--cierre { order: 3; margin-top: 14px; }

	.portada-js .portada__cierre .avales {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		font-size: .74rem;
		line-height: 1.25;
	}

	.portada-js .portada__cierre .avales li { flex-direction: column; align-items: center; gap: 2px; }
	.portada-js .portada__cierre .avales b { font-size: 1.35rem; }

	/* El avance, en el teléfono: una barra fina arriba, sin rótulos. */
	.portada-js .portada__progreso {
		left: 0;
		right: 0;
		top: var(--techo);
		height: 3px;
		transform: none;
	}

	.portada__riel { right: 0; left: 0; width: 100%; height: 3px; }
	.portada__llenado { transform: scaleX(0); transform-origin: 0 50%; }
	.paso { display: none; }

	.portada-js .portada__guia { bottom: 14px; font-size: .66rem; }
}

@media (max-width: 700px) {
	.portada .avales { gap: 6px 18px; font-size: .86rem; }

	/* En el teléfono el rótulo con la razón social sobra: es lo que dice el logo
	   de la cabecera, justo encima. Así el titular y el cilindro respiran. */
	.portada-js .portada__entrada .rotulo { display: none; }
}

/* Teléfonos bajos (iPhone SE: 563 px de escena): la bajada y los márgenes, más
   apretados. */
@media (max-width: 999.98px) and (max-height: 720px) {
	.portada h1 { font-size: 1.62rem; }
	.portada-js .portada__entrada { padding-top: calc(var(--techo) + 10px); }
	.portada-js .portada__bajada { font-size: .86rem; line-height: 1.45; margin-top: 10px; }
	.portada-js .portada__botones { margin-top: 14px; }
	.portada-js .portada__lema { font-size: 1.42rem; }
}

/* Teléfono apaisado (844x390): poquísima altura bajo la cabecera. Titular en
   dos líneas, sin la bajada, y todo más compacto. */
@media (max-width: 999.98px) and (max-height: 500px) {
	.portada-js .portada__pista { height: 320vh; height: 320svh; }
	.portada-js .portada__entrada { padding-top: calc(var(--techo) + 8px); }
	.portada-js .portada h1 { font-size: 1.3rem; max-width: none; }
	.portada-js .portada__bajada { display: none; }
	.portada-js .portada__botones { margin-top: 10px; }
	.portada-js .portada__botones .btn { padding-block: 9px; }
	.portada-js .portada__cierre { padding-top: calc(var(--techo) + 8px); padding-bottom: 10px; }
	.portada-js .portada__lema { font-size: 1.2rem; }
	.portada-js .portada__cierre .avales { font-size: .68rem; }
	.portada-js .portada__cierre .avales b { font-size: 1.05rem; }
	.portada-js .portada__botones--cierre { margin-top: 8px; }
	.portada-js .portada__piezas { bottom: 20px; }
	.portada-js .pieza { padding: 6px 8px 7px; }
	.portada-js .portada__guia { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.portada__guia i::after { animation: 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); }