/* ═══════════════════════════════════════════════════════════════════════════
   La barra de la portada: filtros plegados · comparador · asistente.

   javi (07-sep): «esto tiene que ser un desplegable en móvil y web; una vez
   seleccionan sus filtros se esconden otra vez para no molestar». Los tres
   botones ocupan una línea; lo que abren cae debajo y no empuja el mapa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* `z-index:1100` y no 5: al ser `position:relative` con z-index, esta caja crea
   su propia capa y TODO lo de dentro queda encerrado en ella —por alto que sea
   su z-index—. Con 5, la leyenda del mapa se ponía encima de los filtros
   abiertos en el móvil y no se podían tocar. 1100 la deja por debajo de la
   barra de navegación (1200) y por encima del mapa. */
.barra-portada{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;
  margin:-34px 0 26px;position:relative;z-index:1100}

/* Cada desplegable es un <details>: abre y cierra sin JavaScript. */
.barra-dd{position:relative}
.barra-dd > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  background:var(--roca);border-color:var(--linea2);box-shadow:0 10px 26px -18px var(--sombra-f)}
.barra-dd > summary::-webkit-details-marker{display:none}
.barra-dd > summary:hover{border-color:var(--tinta)}
.barra-dd[open] > summary{border-color:var(--tinta);background:var(--roca)}
.bd-boton{background:var(--roca);border-color:var(--linea2);gap:9px;
  box-shadow:0 10px 26px -18px var(--sombra-f)}
.bd-boton:hover{border-color:var(--tinta);background:var(--roca)}

.bd-flecha{width:8px;height:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:.25s var(--e);opacity:.6}
.barra-dd[open] > summary .bd-flecha{transform:translateY(2px) rotate(-135deg);opacity:1}
.bd-n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;background:var(--marca);color:#fff;font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* Los iconos, como máscaras: heredan el color y no son ficheros aparte. */
.bd-ico{width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.bd-filtros{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M4 6h16M7 12h10M10 18h4'/></svg>")}
.bd-comparar{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h11l-3-3M20 17H9l3 3'/></svg>")}
.bd-chispa{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.8 4.7L18.5 9.5 13.8 11.3 12 16l-1.8-4.7L5.5 9.5l4.7-1.8z'/><path d='M18 15l.8 2.2 2.2.8-2.2.8L18 21l-.8-2.2-2.2-.8 2.2-.8z'/></svg>")}

/* Lo que se abre: cae encima del contenido, no lo empuja. */
.bd-cuerpo{position:absolute;top:calc(100% + 10px);left:0;z-index:20;
  background:var(--roca);border:1px solid var(--linea);border-radius:20px;
  padding:20px;box-shadow:0 26px 60px -26px var(--sombra-f);
  width:max-content;max-width:min(940px,calc(100vw - 48px))}
.bd-cuerpo .barra-filtros{margin:0;padding:0;background:transparent;border:0;box-shadow:none}

/* El asistente */
.bd-asistente .bd-cuerpo{width:min(560px,calc(100vw - 48px))}
#form-asistente{display:flex;gap:8px}
#form-asistente input[name="q"]{flex:1;min-width:0;padding:12px 16px;border-radius:13px;
  border:1px solid var(--linea2);background:var(--noche);color:var(--tinta);
  font-family:var(--d);font-size:15px}
#form-asistente input[name="q"]:focus{outline:2px solid var(--lima);outline-offset:1px}
.bl-ejemplos{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:12px}
.bl-ejemplos > span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);font-weight:700}
.bl-ej{border:1px solid var(--linea);background:transparent;border-radius:999px;
  padding:7px 13px;font-family:var(--d);font-size:13px;color:var(--mudo);cursor:pointer;
  text-align:left;transition:.22s var(--e)}
.bl-ej:hover{border-color:var(--lima);color:var(--tinta);background:var(--lav1)}

/* ── Lo que contesta el asistente, en la misma portada ─────────────────── */
/* `.rejilla` es `display:grid` y eso GANA al atributo `hidden` del HTML: sin
   esto, al contestar el asistente la lista de siempre seguía debajo y salían
   los proyectos dos veces. */
.rejilla[hidden],.cab-resultados[hidden]{display:none !important}
.bl-res{margin:0 0 30px}
.bl-aviso{font-size:15px;color:var(--mudo);background:var(--roca);border:1px solid var(--linea);
  border-radius:16px;padding:16px 20px;margin:0 0 14px}
.bl-lista{display:flex;flex-direction:column;gap:10px}
.bl-item{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:center;
  background:var(--roca);border:1px solid var(--linea);border-radius:18px;padding:14px;
  transition:.25s var(--e)}
.bl-item:hover{border-color:var(--linea2);transform:translateY(-2px);
  box-shadow:0 18px 40px -26px var(--sombra-f)}
.bl-item > img,.bl-sinfoto{width:150px;height:104px;object-fit:cover;border-radius:13px;
  background:var(--roca2);display:block}
.bl-zona{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tenue);font-weight:700}
.bl-item h3{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2;
  margin:5px 0 6px;letter-spacing:-.01em}
.bl-precio{font-family:var(--serif);font-size:19px;font-weight:600}
.bl-precio i{font-style:normal;font-size:12px;color:var(--tenue);font-family:var(--d)}
.bl-motivos{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.bl-motivo{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--lav1);
  color:var(--lima2);border:1px solid var(--lav2)}
.bl-motivo.resta{background:var(--brasa-lav);color:var(--brasa);border-color:var(--brasa-bor)}
/* El porcentaje, con su aro: se lee de un vistazo cuál encaja más. */
.bl-pct{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;flex:none;
  background:conic-gradient(var(--marca) calc(var(--p) * 1%),var(--roca2) 0);position:relative}
.bl-pct::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--roca)}
.bl-pct b,.bl-pct span{position:relative;z-index:1;text-align:center}
.bl-pct b{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1}
.bl-pct b small{font-size:13px;font-weight:500}
.bl-pct span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);
  font-weight:700;margin-top:2px}
.bl-volver{margin-top:16px}

@media (max-width:760px){
  .barra-portada{margin:-18px 0 20px;gap:8px}
  .barra-dd,.bd-boton{flex:1 1 auto}
  .barra-dd > summary,.bd-boton{width:100%;justify-content:center;padding:11px 14px;font-size:13.5px}
  /* En móvil se abre como una hoja anclada ABAJO, no colgando del botón.
     Con `top:auto` el panel se quedaba en su sitio estático y la barra fija
     de arriba (z-index 1200) se le ponía encima: no se podía ni tocar.
     Anclado abajo siempre cae donde el pulgar, y por encima de todo. */
  .bd-cuerpo{position:fixed;inset:auto 10px 10px 10px;width:auto;max-width:none;
    max-height:76vh;overflow-y:auto;padding:18px;z-index:1400;border-radius:22px;
    box-shadow:0 -10px 60px -20px var(--sombra-f)}
  .bd-asistente .bd-cuerpo{width:auto}
  #form-asistente{flex-direction:column}
  .bl-item{grid-template-columns:1fr;gap:12px}
  .bl-item > img,.bl-sinfoto{width:100%;height:180px}
  .bl-pct{width:74px;height:74px;justify-self:start}
}