/* ═══════════════════════════════════════════════════════════════════════════
BL · PRÓXIMAMENTE · marcar algo como aún no disponible, coherente en todo el
sitio, sin que se pueda pulsar ni con ratón ni con teclado.
---------------------------------------------------------------------------
Se carga en todas las páginas:
En el marcado:
· tarjetas → class="… prox" + No disponible
(la tarjeta se apaga en blanco y negro y la etiqueta va arriba)
· menú → class="… prox" + Próximamente
· botón → class="… prox"
Añadir siempre aria-disabled="true" tabindex="-1".
═══════════════════════════════════════════════════════════════════════════ */
/* no se puede pulsar y el ratón no cambia */
.prox{pointer-events:none!important;cursor:default!important;position:relative}
/* ── TARJETAS ──────────────────────────────────────────────────────────────
La tarjeta se queda solo con la foto, apagada y en blanco y negro, y una
etiqueta arriba diciendo que no está disponible. Nombre, precio, descuento
y descripción se van: si no se puede pulsar, esos datos no ayudan y ensucian.
OJO CON EL ALCANCE: la clase .prox también la llevan los enlaces del menú y
algún botón. Todo lo de aquí va acotado con :has(> .prox-badge), que es lo
que distingue a una tarjeta: sin eso, el filete salía en el menú y el
«Próximamente» de los enlaces se apagaba al 20%.
--prox-op es el único número que hay que tocar para que la foto quede más o
menos apagada. */
.prox{--prox-op:.2}
/* solo la foto: el resto del contenido de la tarjeta desaparece */
/* Con :not(a,b,c) en vez de tres :not() encadenados la regla pesa menos en la
cascada, y la variante legible de abajo puede ganarle sin trucos. */
.prox:has(> .prox-badge) > *:not(.prox-badge,img,.pv){display:none!important}
.prox:has(> .prox-badge) > img,
.prox:has(> .prox-badge) > .pv{filter:grayscale(1);opacity:var(--prox-op)}
/* Un filete fino que dibuja la tarjeta: con la foto tan apagada, sin él la
tarjeta se deshace y no se entiende que ahí hay algo. Va por dentro (inset)
para respetar el redondeo y no mover el maquetado. */
.prox:has(> .prox-badge){box-shadow:inset 0 0 0 1px var(--line,#dcdcdc)}
/* ── VARIANTE LEGIBLE ──────────────────────────────────────────────────────
Para tarjetas donde el contenido es el motivo de la tarjeta: el catalogo
entero son fichas con filtros por nombre, metros y gama, y en la home hay
dos tarjetas que se comparan entre si. Dejarlas con la foto y nada mas las
vuelve indistinguibles.
Se apagan igual y siguen sin poder pulsarse; lo unico que cambia es que la
ficha se lee. Uso: class="… prox prox-legible" */
.prox.prox-legible:has(> .prox-badge) > *:not(.prox-badge){display:revert!important}
.prox.prox-legible:has(> .prox-badge) > *:not(.prox-badge,img,.pv){
filter:grayscale(1);opacity:.66}
/* la llamada a la accion sobra: es justo lo que no esta disponible */
.prox.prox-legible:has(> .prox-badge) .cta-solid,
.prox.prox-legible:has(> .prox-badge) .mov-row,
.prox.prox-legible:has(> .prox-badge) .save{display:none!important}
/* Las tarjetas llevan un degradado negro en ::after para que se lea el texto
sobre la foto. Ese degradado es de la tarjeta, no de sus hijos, así que no
se apagaba con ellos y quedaba una mancha negra sobre una foto ya desvaída.
Sin texto que leer, ya no pinta nada. */
.prox:has(> .prox-badge)::after{background:none!important}
/* La etiqueta va arriba a la derecha, en blanco con filete: sobre una foto
casi blanca, una píldora negra maciza cantaba como una pegatina.
VA CON `.prox >` A PROPÓSITO, no suelta. La etiqueta es un dentro de
la tarjeta, así que cualquier regla del tipo `.mega-card span` (peso 20) le
ganaba a `.prox-badge` (peso 10) y le imponía SU color y SU tipografía: en la
tarjeta del menú salía blanca sobre blanco, ilegible. Con `.prox >` empata a
20 y manda esta, porque bl-prox.css se carga el último en todas las páginas
(comprobado). Si algún día una tarjeta pesa más, subir aquí, no poner
!important suelto: la etiqueta tiene que verse siempre igual en todo el sitio. */
.prox > .prox-badge{position:absolute;top:clamp(12px,1.3vw,18px);right:clamp(12px,1.3vw,18px);z-index:9;
display:inline-flex;align-items:center;gap:7px;
padding:7px 13px 7px 11px;border-radius:999px;
background:#fff;color:var(--ink,#101010);border:1px solid var(--line,#dcdcdc);
font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
line-height:1;white-space:nowrap;pointer-events:none;
margin:0;max-width:none;text-align:left}
.prox > .prox-badge::before{content:"";width:6px;height:6px;border-radius:50%;
background:currentColor;flex-shrink:0}
/* ── MENÚ · el título se apaga MÁS que los ítems activos (para que se vea que
está deshabilitado) y «Próximamente» va debajo en oscuro y negrita, para que
resalte. Sin caja (el pill saturaba el header). ── */
/* El ítem no disponible tiene que cantar frente a los activos: el título se
apaga MUCHO (los activos van al 66% de tinta, este al 30%), no reacciona al
hover y no se desplaza. Debajo, «Próximamente» con un punto delante y en
verde de marca, que es lo único con color en todo el menú. */
.mega-col a.prox,.mm-sub a.prox{color:rgba(16,16,16,.3)!important;opacity:1}
.mega-col a.prox:hover,.mm-sub a.prox:hover{color:rgba(16,16,16,.3)!important;transform:none!important}
.prox-sub{display:flex!important;align-items:center;gap:7px;width:auto!important;margin:6px 0 0!important;
font-size:11px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;
color:var(--accent-deep,#8C9A00)!important;background:none!important;border:0!important;padding:0!important}
.prox-sub::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
/* ── BOTÓN · pierde el fondo oscuro y queda claramente deshabilitado ── */
a.prox.cta-solid,a.prox.sc-btn{background:var(--paper-2,#ededed)!important;color:var(--gray,#616161)!important;
border:1px solid var(--line,#dcdcdc)!important;box-shadow:none!important;transform:none!important}
a.prox.cta-solid svg,a.prox.sc-btn svg{opacity:.5}
/* ── BOTÓN DEL HERO · sobre foto, así que no puede apagarse a gris claro ────
Es una de las tres vías de entrada de la home y la ruta existe de verdad,
solo que todavía no. Se mantiene legible (decir que la vía existe es parte
del mensaje) pero deja de reaccionar al ratón y lleva el aviso al lado. */
a.prox.btn-hero{background:rgba(14,14,14,.28)!important;border-color:rgba(255,255,255,.2)!important;
color:rgba(255,255,255,.62)!important;transform:none!important;box-shadow:none!important}
a.prox.btn-hero .prox-min{color:rgba(255,255,255,.62)}
/* ── MARCA MÍNIMA · para sitios donde no cabe nada más: un botón, una línea
del pie. Solo el punto y la palabra, heredando el color de alrededor. ── */
/* 11px y no 10: en mayúsculas y con tracking, 10px era el tamaño más pequeño
de todo el sitio y en un móvil se lee mal. */
.prox-min{display:inline-flex;align-items:center;gap:6px;margin-left:8px;
font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
white-space:nowrap;opacity:.85}
.prox-min::before{content:"";width:5px;height:5px;border-radius:50%;
background:currentColor;flex-shrink:0}
/* ── PIE · fondo negro, así que se apaga hacia abajo, no hacia el gris ── */
.foot a.prox{color:rgba(255,255,255,.28)!important}
.foot a.prox:hover{color:rgba(255,255,255,.28)!important;transform:none!important}
.foot a.prox .prox-min{color:var(--accent-bright,#C7D92B);opacity:1}
/* ── TARJETA DEL MENÚ · la foto se apaga sobre el negro de la propia tarjeta,
así que el rótulo se sigue leyendo en blanco. Se queda el texto (en un menú,
una foto gris sin nombre no se entiende) y se va la flecha, que prometía
que al pulsar pasaba algo. ── */
/* OJO: la regla de prox-legible que devuelve los hijos (display:revert) pesa 40.
Hay que igualarla o esta no se aplica, aunque lleve !important. */
.mega-card.prox.prox-legible:has(> .prox-badge) > i{display:none!important}
/* ── CTA DE LA CABECERA ─────────────────────────────────────────────────────
«Solicita tu presupuesto» en el verde de la marca, para que sea lo primero
que se ve en la barra de todas las páginas. El verde no es plano ni lineal:
dos manchas difuminadas (degradados radiales), más clara arriba a la
izquierda y más honda abajo a la derecha, con un volumen suave: luz por
dentro arriba y una sombra corta. Texto en tinta: sobre el verde da más de
8:1. Al pasar se rellena de tinta, como el resto de botones de la web. Va
aquí y no en cada página porque esta hoja la cargan todas.
(El 17-09 se probó tallado en gema con destello y se descartó.) ── */
header.top a.btn-pill{
background:radial-gradient(130% 160% at 18% 0%,#D6E76A 0%,rgba(214,231,106,0) 58%),
radial-gradient(110% 150% at 88% 115%,#87A300 0%,rgba(135,163,0,0) 62%),
var(--accent,#A8B800);
border-color:#9CAF00;color:var(--ink,#101010);font-weight:600;
box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -2px 4px rgba(56,84,0,.18),0 3px 10px -4px rgba(72,110,0,.45);
transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
header.top a.btn-pill svg{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
header.top a.btn-pill:hover,header.top a.btn-pill:focus-visible{background:var(--ink,#101010);
border-color:var(--ink,#101010);color:#fff;box-shadow:none}
header.top a.btn-pill:hover svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){header.top a.btn-pill,header.top a.btn-pill svg{transition:none}}
/* ── MENÚ CON LOS RÓTULOS DEL INFORME SEO ──────────────────────────────────
«Casas prefabricadas», «Método BuildLovers» y el enlace directo a Contacto
ocupan más que los rótulos de antes. Entre 1241 px (donde aparece el menú de
escritorio) y 1480 px se aprietan el hueco y la letra para que el menú no
toque el logo ni los botones de la derecha. */
@media (min-width:1241px) and (max-width:1480px){
.top .nav{gap:14px}
.top .nav a.lnk,.top .mega-btn{font-size:14px}
.top .nav-actions{gap:14px}
.top .nav-actions a.lnk,header.top a.btn-pill{font-size:14px}
header.top a.btn-pill{padding-inline:16px}
}
/* ── MENÚ DE ESCRITORIO: CADA DESPLEGABLE, DEBAJO DE SU BOTÓN ──────────────
Antes el panel era una franja blanca a todo lo ancho, con el contenido
siempre a la izquierda. Ahora es una caja del tamaño de lo que lleva,
colgada del botón que la abre (assets/bl-menu.js le pone --mega-x).
De canto fijo y pegada al header: sin esquinas redondeadas, sin hueco y por
encima de la sombra de la barra, así barra y panel se leen como una pieza.
Sin velo gris sobre la página. */
@media (min-width:1241px){
body .mega{z-index:71;left:var(--mega-x,24px);right:auto;top:var(--hdr-h,62px);
width:max-content;max-width:calc(100vw - 32px);max-height:calc(100vh - var(--hdr-h,62px) - 16px);
overflow:auto;padding-top:0;border:1px solid var(--line);border-top:0;border-radius:0;
box-shadow:0 26px 50px -30px rgba(16,16,16,.42);transform:none}
body .mega.open{transform:none}
body .mega .mega-panel{padding:22px 26px 24px}
body .mega .wrap.mega-in{width:auto;max-width:none;margin:0;padding-inline:0}
body .mega .mega-cols{flex-wrap:nowrap;gap:clamp(28px,3vw,44px)}
body.mega-open::before{opacity:0;visibility:hidden}
body.mega-open header.top{box-shadow:0 1px 0 rgba(16,16,16,.05),0 10px 28px -18px rgba(16,16,16,.30)}
/* «Casas prefabricadas»: dos columnas de cuatro, con el rótulo encima de las dos */
body .mega .mega-cols.dos{display:grid;grid-template-columns:repeat(2,minmax(200px,auto));
column-gap:clamp(32px,3.2vw,48px);align-items:start}
body .mega .mega-cols.dos>.mega-h{grid-column:1/-1}
/* las tarjetas con foto: más directas, solo el título */
body .mega .mega-card{min-height:84px;margin-top:20px;justify-content:center;border-radius:0}
body .mega .mega-card span{display:none}
body .mega .mega-card i{top:50%;transform:translateY(-50%)}
body .mega .mega-card:hover i{transform:translate(3px,-50%)}
}
/* ── «SOLICITA TU PRESUPUESTO»: UN BRILLO DE VEZ EN CUANDO ─────────────────
Cada 7 s cruza un reflejo por la píldora y ella late apenas (3%). Sutil a
propósito: llama la vista sin molestar. Se para al pasar el ratón y con
«reducir movimiento». */
header.top a.btn-pill{position:relative;overflow:hidden;isolation:isolate;
animation:bl-latido 7s ease-in-out 2.4s infinite}
header.top a.btn-pill::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;
pointer-events:none;z-index:1;
background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 100%);
transform:translateX(-160%) skewX(-18deg);animation:bl-brillo 7s ease-in-out 2.4s infinite}
@keyframes bl-brillo{0%{transform:translateX(-160%) skewX(-18deg)}16%,100%{transform:translateX(330%) skewX(-18deg)}}
@keyframes bl-latido{0%,20%,100%{transform:none}8%{transform:scale(1.03)}}
header.top a.btn-pill:hover,header.top a.btn-pill:focus-visible{animation:none}
header.top a.btn-pill:hover::after,header.top a.btn-pill:focus-visible::after{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){
header.top a.btn-pill,header.top a.btn-pill::after{animation:none}
header.top a.btn-pill::after{display:none}
}