/* ============================================================
   BIMM STUDIO — vocabulario de los bloques de sección
   ============================================================

   Aquí vive TODO el estilo de los bloques. Los de `bloques/` son sólo
   marcado, y no es manía de orden: Rank Math analiza el contenido de la
   página, y con el CSS incrustado lo que analiza es código. En la portada de
   Petroleum el 90 % del contenido eran estilos y quedaban 74 palabras reales.

   Un bloque nuevo se escribe con las clases que ya existen aquí. Si necesita
   una nueva, se añade a este archivo —y se sube `BIMM_VER`—, nunca al bloque.
   `comprobar-bloques.py` avisa de toda clase `bm-*` del marcado que no tenga
   regla aquí: es el fallo que en Petroleum costó una ronda entera.

   El sistema de color y las tipografías están en `bimm.css`.
   ============================================================ */

/* ── El filete ───────────────────────────────────────────────
   La banda de 7px con el degradado de cuatro paradas que abre cada hoja de
   los documentos. Aquí abre el sitio, y es lo primero que se ve en los dos
   temas. Va fija: al hacer scroll sigue ahí, como el canto de un cuaderno. */

.bm-filete {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--grad-marca);
	z-index: 100;
}

/* ── Estructura ────────────────────────────────────────────── */

.bm-sec {
	position: relative;
	padding: var(--sec-pad-y) var(--sec-pad-x);
	background: var(--papel);
	overflow: hidden; /* recorta las manchas, que se salen a propósito */
}

.bm-sec--hondo { background: var(--papel-hondo); }

.bm-cont {
	position: relative;
	z-index: 1;
	max-width: var(--cont-max);
	margin-inline: auto;
	width: 100%;
}

/* ── Las manchas ─────────────────────────────────────────────
   Calcadas de `formatos/comun/construir.py`: gradientes radiales que llegan a
   opacidad 0 en el 70 % del radio, colocados en las esquinas y alternando
   reparto hoja con hoja. Allá son `<svg>` porque Chrome no imprime fondos CSS
   al generar el PDF; aquí, en pantalla, un `radial-gradient` hace lo mismo sin
   una sola etiqueta de más — y el bloque se queda limpio de marcado.

   Los cuatro repartos son los mismos de allá, y se alternan sección con
   sección por la misma razón: que dos hojas seguidas no se vean iguales. */

.bm-manchas::before {
	content: '';
	position: absolute;
	inset: -20%;
	z-index: 0;
	pointer-events: none;
	transition: opacity var(--tr-media);
}

.bm-manchas--1::before {
	background:
		radial-gradient(38% 42% at 6% 96%,  rgba(82, 245, 220, var(--mancha-menta)) 0%, rgba(82, 245, 220, 0) 70%),
		radial-gradient(32% 36% at 95% 18%, rgba(251, 239, 183, var(--mancha-crema)) 0%, rgba(251, 239, 183, 0) 70%);
}

.bm-manchas--2::before {
	background:
		radial-gradient(38% 42% at 94% 96%, rgba(7, 171, 170, var(--mancha-teal)) 0%, rgba(7, 171, 170, 0) 70%),
		radial-gradient(32% 36% at 6% 20%,  rgba(251, 239, 183, var(--mancha-crema)) 0%, rgba(251, 239, 183, 0) 70%);
}

.bm-manchas--3::before {
	background:
		radial-gradient(40% 44% at 8% 95%,  rgba(82, 245, 220, var(--mancha-menta)) 0%, rgba(82, 245, 220, 0) 70%),
		radial-gradient(32% 36% at 94% 20%, rgba(7, 171, 170, var(--mancha-teal)) 0%, rgba(7, 171, 170, 0) 70%);
}

.bm-manchas--4::before {
	background:
		radial-gradient(36% 40% at 93% 92%, rgba(251, 239, 183, var(--mancha-crema)) 0%, rgba(251, 239, 183, 0) 70%),
		radial-gradient(34% 38% at 5% 22%,  rgba(82, 245, 220, var(--mancha-menta)) 0%, rgba(82, 245, 220, 0) 70%);
}

/* ── Rejillas ──────────────────────────────────────────────── */

.bm-grid-2,
.bm-grid-3 {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.bm-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bm-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .bm-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .bm-grid-2, .bm-grid-3 { grid-template-columns: 1fr; } }

/* ── Cabecera de sección ─────────────────────────────────────
   El mobiliario del documento: rótulo en versalitas muy espaciadas sobre un
   filete de 2px, y el titular debajo. Es lo que hace que una sección se lea
   como un apartado y no como un bloque suelto de una landing. */

.bm-rotulo {
	display: block;
	font-family: var(--fuente-titulo);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--acento);
	margin-bottom: 0.6rem;
}

.bm-cabeza {
	padding-bottom: 0.7rem;
	border-bottom: 2px solid var(--tinta);
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.bm-h2 {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	max-width: 22ch;
}

.bm-h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }

.bm-lead {
	font-size: clamp(1.02rem, 1.4vw, 1.15rem);
	color: var(--tinta-suave);
	max-width: 62ch;
	margin-top: 0.9rem;
}

/* Nota al margen: el texto pequeño que en el documento va bajo una regla. */
.bm-nota {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--tinta-suave);
}

/* ── Tarjetas ────────────────────────────────────────────────
   No son cajas con sombra: son celdas separadas por filetes, como una tabla
   del documento. La sombra es de interfaz; el filete es de papel. */

.bm-card {
	position: relative;
	padding-top: 1.1rem;
	border-top: 2px solid var(--tinta);
	transition: border-color var(--tr-media);
}

.bm-card:hover { border-top-color: var(--acento); }

.bm-card__texto {
	color: var(--tinta-suave);
	font-size: 0.98rem;
	margin-top: 0.4rem;
}

/* La numeración del documento: 01, 02, 03 en cifra tabular y en el acento. */
.bm-card__num {
	font-family: var(--fuente-titulo);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
	color: var(--acento);
	display: block;
	margin-bottom: 0.5rem;
}

/* ── Botones ─────────────────────────────────────────────────
   Rectos, de 3px de radio, como los sellos y las casillas del documento.
   Nada de píldoras: una píldora es de aplicación, no de papel. */

.bm-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.5rem;
	border: 1.5px solid var(--tinta);
	border-radius: var(--radio-sm);
	background: transparent;
	color: var(--tinta);
	font-family: var(--fuente-titulo);
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1;
	/* 44px de alto mínimo: es el objetivo táctil que no se negocia. */
	min-height: 44px;
	transition: background-color var(--tr-rapida), color var(--tr-rapida),
	            border-color var(--tr-rapida);
}

.bm-btn:hover { background: var(--tinta); color: var(--papel); }

/* El empujón al presionar va en `transform` y con la curva de muelle. Es lo
   único del sitio que rebota, y por eso se siente que responde. */
.bm-btn:active { transform: scale(0.975); transition: transform var(--tr-salida); }

/* El principal se invierte: tinta llena y papel encima. Las dos mitades van
   declaradas JUNTAS a propósito — separarlas es como en Petroleum se acabó
   con botones invisibles al enfocarlos. */
.bm-btn--fuerte,
.bm-btn--fuerte:hover,
.bm-btn--fuerte:focus-visible {
	background: var(--tinta);
	color: var(--papel);
	border-color: var(--tinta);
}

.bm-btn--fuerte:hover { opacity: 0.88; }

/* ── Aparecer al asomar ──────────────────────────────────────
   El estado final lo arma el JS al entrar en pantalla. Si el JS no corre
   —error, navegador viejo, bloqueador—, `.bm-up` sin `.is-visible` dejaría la
   sección invisible para siempre: por eso el escondite cuelga de `.js-on`,
   que el propio script le pone al <html> nada más arrancar.

   Sube 14px y no 40: el movimiento tiene que insinuar de dónde viene, no
   protagonizar. */

.js-on .bm-up {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--tr-lenta), transform var(--tr-lenta);
}

.js-on .bm-up.is-visible { opacity: 1; transform: none; }

/* Con movimiento reducido no hay animación NI escondite: el contenido se ve. */
@media (prefers-reduced-motion: reduce) {
	.js-on .bm-up { opacity: 1 !important; transform: none !important; }
}

/* ── Anti-imán e imán ───────────────────────────────────────
   Ganchos de comportamiento. Tienen regla propia y no es por contentar al
   comprobador: los dos se transforman en cada fotograma —el imán entero, las
   letras del anti-imán una por una— y el aviso evita que el navegador repinte
   la capa completa. `contents` en el anti-imán porque lo que cambia ahí es la
   descendencia: el JS sustituye el texto por spans. */

.bm-imanta { will-change: transform; }
.bm-huye   { will-change: contents; }

.bm-huye__palabra { white-space: nowrap; display: inline-block; }
.bm-huye__letra   { display: inline-block; will-change: transform; }

/* ── Superficie de vidrio ────────────────────────────────────
   La pieza de Liquid Glass. Tres capas, y las tres hacen falta:

     1. `backdrop-filter` desenfoca y SATURA lo que hay detrás. La saturación
        es la mitad del truco: sin ella el vidrio apaga el color de la mancha
        y queda gris.
     2. El BRILLO ESPECULAR: una línea clara de 1px arriba, por dentro. Es lo
        que hace creer que hay un canto biselado atrapando luz.
     3. La SOMBRA corta y baja, que lo separa del fondo sin dramatizar.

   Con sólo transparencia queda un plástico sucio. Y necesita COLOR detrás
   para refractar: las superficies de vidrio van sobre las manchas, nunca
   sobre papel liso.

   🚨 `backdrop-filter` crea contexto de apilamiento y NO desenfoca dos veces:
   un vidrio dentro de otro desenfoca lo que ya estaba compuesto, así que se
   ve plano. No anidar vidrio dentro de vidrio.

   Y hay reserva: sin soporte de `backdrop-filter`, `@supports` sube la
   opacidad a papel opaco. Sin eso, en un navegador viejo queda texto sobre
   casi nada. */

.bm-vidrio {
	background: var(--vidrio);
	border: 1px solid var(--vidrio-borde);
	border-radius: var(--radio-vidrio);
	box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo);
	-webkit-backdrop-filter: var(--vidrio-blur);
	        backdrop-filter: var(--vidrio-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bm-vidrio { background: var(--papel); }
}

/* ── Cabecera: la píldora de vidrio ──────────────────────────
   Portada de la landing (`Navbar.tsx`). Tres estados y una sola pieza:

     reposo     barra transparente a lo ancho
     flotando   píldora de vidrio centrada, a partir de 60px de scroll
     colapsada  sólo el logotipo; se despliega al posar el cursor

   EL RECORTE ES LA ANIMACIÓN: `overflow: hidden` más el ancho animado hacen
   que el contenido se DESCUBRA en vez de aparecer. Los dos anchos los mide el
   JS y los escribe en `--bm-inset`; aquí no hay ni un número mágico, porque si
   cambia un rótulo o la tipografía la píldora tiene que ajustarse sola. */

.bm-cab {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	padding: 1.2rem var(--sec-pad-x);
	border: 1px solid transparent;
	border-radius: 0;
	overflow: hidden;
	transition:
		left var(--tr-pildora),
		right var(--tr-pildora),
		top var(--tr-media),
		padding var(--tr-media),
		background-color var(--tr-media),
		border-radius var(--tr-media),
		border-color var(--tr-media),
		box-shadow var(--tr-media);
}

/* Flotando: aquí entra el vidrio. `left` y `right` los pone el JS. */
.bm-cab.is-flota {
	top: 0.75rem;
	left: var(--bm-inset, 0.75rem);
	right: var(--bm-inset, 0.75rem);
	padding: 0.55rem 1.1rem;
	border-radius: 100px;
	background: var(--vidrio);
	border-color: var(--vidrio-borde);
	box-shadow: var(--vidrio-sombra), inset 0 1px 0 var(--vidrio-brillo);
	-webkit-backdrop-filter: var(--vidrio-blur);
	        backdrop-filter: var(--vidrio-blur);
}

.bm-cab__caja {
	max-width: var(--cont-max);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	transition: gap var(--tr-media);
}

.bm-cab.is-flota .bm-cab__caja { max-width: none; gap: 1rem; }

/* Las tres piezas no se encogen: lo que el JS mide es su ancho natural, y con
   `flex-shrink` la medida cambiaría según lo angosta que esté la píldora. */
.bm-cab__marca,
.bm-cab__nav,
.bm-cab__fin { flex-shrink: 0; display: flex; align-items: center; }

.bm-cab__nav { gap: clamp(0.9rem, 2vw, 1.8rem); }
.bm-cab__fin { gap: 0.8rem; }

.bm-cab__logo { font-size: 1.3rem; line-height: 1; transition: font-size var(--tr-media); }
.bm-cab.is-flota .bm-cab__logo { font-size: 1.12rem; }

.bm-cab__enlace {
	position: relative;
	font-family: var(--fuente-titulo);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--tinta);
	padding: 0.5rem 0;
	white-space: nowrap;
}

/* El subrayado crece desde la izquierda, no aparece de golpe: el movimiento
   dice de dónde viene. Va en `transform` — animar `width` obliga al navegador
   a recalcular la maqueta en cada fotograma. */
.bm-cab__enlace::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.25rem;
	height: 1.5px;
	background: var(--acento);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--tr-media);
}

.bm-cab__enlace:hover::after,
.bm-cab__enlace:focus-visible::after { transform: scaleX(1); }

.bm-cab__cta { padding: 0.6rem 1.1rem; min-height: 38px; font-size: 0.86rem; }

/* Colapsada: las piezas de los lados se apagan. Al ABRIR entran en cascada
   —el retraso lo pone `--i`, 22ms entre una y otra, que es el límite por
   debajo del cual no se percibe y por encima se hace lento—. Al CERRAR salen
   todas a la vez: la cascada es adorno de entrada y en la salida estorba. */
.bm-cab.is-colapsada .bm-cab__nav,
.bm-cab.is-colapsada .bm-cab__fin {
	opacity: 0;
	transform: translateX(-8px);
	pointer-events: none;
	transition: opacity var(--tr-salida), transform var(--tr-salida);
}

.bm-cab.is-flota .bm-cab__nav,
.bm-cab.is-flota .bm-cab__fin {
	transition: opacity var(--tr-media) calc(var(--i, 0) * 22ms),
	            transform var(--tr-media) calc(var(--i, 0) * 22ms);
}

.bm-cab__nav { --i: 1; }
.bm-cab__fin { --i: 3; }

/* En móvil la píldora no se colapsa nunca —el logotipo solo no tendría con qué
   competir— y los enlaces se esconden: el menú de móvil llega cuando existan
   las páginas a las que llevaría. Hoy sólo hay portada. */
@media (max-width: 860px) {
	.bm-cab__nav { display: none; }
	.bm-cab.is-colapsada .bm-cab__fin {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* ── El conmutador de tema ───────────────────────────────────
   Un interruptor de verdad, no un icono que cambia: la pastilla se desliza y
   se ve en qué posición está sin tener que interpretar un símbolo. */

.bm-tema {
	position: relative;
	width: 52px;
	height: 28px;
	flex: none;
	padding: 0;
	border: 1.5px solid var(--linea-fuerte);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: border-color var(--tr-rapida);
}

.bm-tema:hover { border-color: var(--acento); }

.bm-tema__bola {
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--tinta);
	transition: transform var(--muelle), background-color var(--tr-media);
}

[data-tema='oscuro'] .bm-tema__bola { transform: translateX(24px); }

@media (prefers-color-scheme: dark) {
	:root:not([data-tema='claro']) .bm-tema__bola { transform: translateX(24px); }
}

/* El área táctil se estira más allá del dibujo: el interruptor mide 28px de
   alto y el mínimo son 44. */
.bm-tema::after {
	content: '';
	position: absolute;
	inset: -8px;
}

/* ── Hero ───────────────────────────────────────────────────── */

.bm-hero { padding-top: clamp(4rem, 9vw, 7rem); }

.bm-hero__titular {
	font-size: clamp(2.5rem, 6.6vw, 4.6rem);
	max-width: 17ch;
	margin-bottom: 1.4rem;
}

.bm-hero__entrada { margin-bottom: 2.4rem; font-size: clamp(1.05rem, 1.5vw, 1.22rem); }

.bm-hero__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Las cifras del pie del hero, como las de la portada de la cotización:
   separadas por un filete y con el número en grande. */
.bm-cifras {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	margin-top: clamp(2.5rem, 6vw, 4rem);
	padding-top: 1.4rem;
	border-top: 1px solid var(--linea);
}

.bm-cifra { display: flex; flex-direction: column; gap: 2px; }

.bm-cifra__n {
	font-family: var(--fuente-titulo);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
}

.bm-cifra__q {
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--tinta-suave);
	max-width: 22ch;
}

/* ── Casos ───────────────────────────────────────────────────
   El color de cada tarjeta es el de LA MARCA DEL CLIENTE, no el de Bimm:
   salen del login de su app (Gorillax), del favicon (Petroleum) y de sus
   logotipos. Viven aquí y no en un `style=` del bloque, porque el bloque es
   sólo marcado — y porque un color suelto en el marcado se queda atrás el día
   que la marca del cliente cambie.

   El logo va como MÁSCARA: del PNG sólo importa el canal alfa y el color lo
   pone el fondo. Así un logotipo pensado para fondo claro no llega aquí como
   una mancha. */

.bm-caso { display: flex; flex-direction: column; gap: 0.5rem; }

.bm-caso:hover { border-top-color: var(--marca); }

.bm-caso__logo {
	display: block;
	width: 100%;
	height: 30px;
	margin-bottom: 0.5rem;
	background: var(--marca, var(--tinta));
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	        mask-position: left center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.bm-caso--gorillax   { --marca: #2f9e5c; }
.bm-caso--petroleum  { --marca: #a08404; }
.bm-caso--consulting { --marca: #5f8a1e; }
.bm-caso--arcotechos { --marca: #2263a4; }
.bm-caso--veta-fina  { --marca: #8a6f45; }

/* Los tonos de arriba son los de cliente AJUSTADOS para que se lean sobre
   papel: los originales —#4ade80, #cba705, #7aae26, #b8996e— dan menos de
   3:1 sobre blanco. Sobre el tema oscuro se usan los originales, que ahí sí
   contrastan y son los de su manual de marca. */
[data-tema='oscuro'] .bm-caso--gorillax   { --marca: #4ade80; }
[data-tema='oscuro'] .bm-caso--petroleum  { --marca: #cba705; }
[data-tema='oscuro'] .bm-caso--consulting { --marca: #7aae26; }
[data-tema='oscuro'] .bm-caso--veta-fina  { --marca: #b8996e; }

@media (prefers-color-scheme: dark) {
	:root:not([data-tema='claro']) .bm-caso--gorillax   { --marca: #4ade80; }
	:root:not([data-tema='claro']) .bm-caso--petroleum  { --marca: #cba705; }
	:root:not([data-tema='claro']) .bm-caso--consulting { --marca: #7aae26; }
	:root:not([data-tema='claro']) .bm-caso--veta-fina  { --marca: #b8996e; }
}

.bm-caso--gorillax   .bm-caso__logo { -webkit-mask-image: url(/wp-content/uploads/clientes/gorillax.png);   mask-image: url(/wp-content/uploads/clientes/gorillax.png); }
.bm-caso--petroleum  .bm-caso__logo { -webkit-mask-image: url(/wp-content/uploads/clientes/petroleum.png);  mask-image: url(/wp-content/uploads/clientes/petroleum.png); }
.bm-caso--consulting .bm-caso__logo { -webkit-mask-image: url(/wp-content/uploads/clientes/consulting.png); mask-image: url(/wp-content/uploads/clientes/consulting.png); }
.bm-caso--arcotechos .bm-caso__logo { -webkit-mask-image: url(/wp-content/uploads/clientes/arcotechos.png); mask-image: url(/wp-content/uploads/clientes/arcotechos.png); }
.bm-caso--veta-fina  .bm-caso__logo { -webkit-mask-image: url(/wp-content/uploads/clientes/veta-fina.png);  mask-image: url(/wp-content/uploads/clientes/veta-fina.png); }

.bm-caso__rubro {
	font-family: var(--fuente-titulo);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--marca, var(--tinta-suave));
}

/* Las etiquetas no son enlaces ni filtros: son una línea de texto que dice de
   un vistazo qué se hizo. Un chip por etiqueta prometería un filtro que no
   existe. */
.bm-caso__tags {
	font-size: 0.8rem;
	color: var(--tinta-suave);
	margin-top: auto;
	padding-top: 0.6rem;
}

.bm-caso__enlace {
	font-family: var(--fuente-titulo);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--tinta);
	align-self: flex-start;
	border-bottom: 1.5px solid var(--marca, var(--acento));
	padding-bottom: 1px;
	transition: color var(--tr-rapida);
}

.bm-caso__enlace:hover { color: var(--marca, var(--acento)); }

.bm-caso--mas { justify-content: center; }
.bm-caso--mas .bm-btn { align-self: flex-start; margin-top: 0.9rem; }

/* ── Fases y servicios ─────────────────────────────────────── */

.bm-fase { display: flex; flex-direction: column; gap: 0.4rem; }

/* La mascota se menciona al PIE y en pequeño: es un emblema, no lo que se
   contrata. Si subiera de tamaño volvería a leerse como un equipo. */
.bm-fase__emblema {
	margin-top: auto;
	padding-top: 1rem;
	font-size: 0.82rem;
	color: var(--tinta-suave);
}

.bm-fase__emblema strong { color: var(--acento); font-weight: 600; }

/* Rótulo que parte el catálogo en «por proyecto» y «por mes». No es un h3: no
   titula un contenido, etiqueta un grupo. */
.bm-sub {
	margin: clamp(2.25rem, 5vw, 3.25rem) 0 1.25rem;
	font-family: var(--fuente-titulo);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--tinta-suave);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--linea);
}

/* La tarjeta de servicio ES el enlace y no lleva uno dentro: un <a> dentro de
   otro el parser lo desanida y parte la tarjeta en trozos. Así, además, el
   área de toque es la tarjeta entera. */
.bm-serv { display: flex; flex-direction: column; gap: 0.4rem; color: inherit; }

.bm-serv__mas {
	margin-top: auto;
	padding-top: 1rem;
	font-family: var(--fuente-titulo);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--acento);
}

/* La flecha se adelanta al pasar el cursor: dice a dónde va sin decirlo. */
.bm-serv__mas::after {
	content: '→';
	display: inline-block;
	margin-left: 0.4rem;
	transition: transform var(--tr-media);
}

.bm-serv:hover .bm-serv__mas::after { transform: translateX(4px); }

/* ── Bimm App y cierre ─────────────────────────────────────── */

.bm-app__fecha {
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
	padding-top: 1.1rem;
	border-top: 1px solid var(--linea);
	color: var(--tinta-suave);
}

.bm-app__fecha strong { color: var(--tinta); font-weight: 600; }

.bm-cierre { padding-block: clamp(4.5rem, 10vw, 7.5rem); }

.bm-cierre__caja { max-width: 660px; }

.bm-cierre__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* ── Pie ─────────────────────────────────────────────────────
   Vive en `bloques/pie/pie.html` y lo imprime el tema. Es la única sección
   que no se publica como contenido de una página: sale en todas. */

.bm-pie { padding-block: clamp(3rem, 6vw, 4.5rem); }

.bm-pie__alto {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--linea);
}

/* La columna de marca se estrecha a propósito: es un párrafo de tres líneas y
   a todo el ancho de su celda se leería como un bloque de texto más. */
.bm-pie__marca { max-width: 34ch; }

.bm-pie__nombre { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 0.7rem; }

.bm-pie__nav {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2rem);
}

/* Los enlaces del pie son de bloque: en columna, uno por renglón. En línea
   quedarían pegados y con el área de toque de una sola palabra. */
.bm-pie__enlace {
	display: block;
	padding: 0.3rem 0;
	color: var(--tinta-suave);
	font-size: 0.92rem;
	transition: color var(--tr-rapida);
}

.bm-pie__enlace:hover { color: var(--acento); }

.bm-pie__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 1.5rem;
	font-size: 0.88rem;
	color: var(--tinta-suave);
}

@media (max-width: 860px) { .bm-pie__alto { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bm-pie__nav  { grid-template-columns: 1fr 1fr; } }

/* ── Cursor propio ───────────────────────────────────────────
   Sólo con puntero fino. En táctil se restaura el del sistema: un cursor
   dibujado que no sigue a ningún dedo es un adorno que estorba. */

@media (pointer: fine) {
	*, *::before, *::after { cursor: none !important; }
}

@media (pointer: coarse) {
	.bm-cursor, .bm-cursor__anillo { display: none !important; }
}

.bm-cursor,
.bm-cursor__anillo {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9999;
}

.bm-cursor {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--acento);
	transition: width var(--tr-rapida), height var(--tr-rapida),
	            background-color var(--tr-rapida);
}

/* Sobre lo interactivo el punto crece y el anillo se cierra sobre él: el
   cursor «se prepara» antes del clic. */
.bm-cursor.is-activo { width: 11px; height: 11px; }

.bm-cursor__anillo {
	width: 30px;
	height: 30px;
	border: 1px solid var(--tinta-suave);
	border-radius: 50%;
	transition: width var(--tr-media), height var(--tr-media),
	            opacity var(--tr-rapida);
}

.bm-cursor__anillo.is-activo { width: 20px; height: 20px; }

/* ── Red de seguridad: la cabecera del padre ─────────────────
   `functions.php` la retira con `remove_action`. Pero el nombre de la funcion
   enganchada cambia entre versiones de GeneratePress y `remove_action` con un
   nombre que no existe NO falla: no hace nada, y en silencio. Sin esta linea,
   una actualizacion del padre nos dejaria dos cabeceras en produccion. */
.site-header { display: none; }

/* Separacion entre la entradilla de una seccion y su rejilla. */
.bm-casos,
.bm-fases,
.bm-servicios,
.bm-app { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.bm-cierre__texto { margin-inline: 0; }