/* ═══════════════════════════════════════════════════════════════════════════
   La ficha, segunda capa (07-sep): galería a pantalla completa, «La casa de un
   vistazo» (números grandes con iconos sobre bloque oscuro, con la foto
   montada encima) y «Propiedad · detalles» (listas de visto bueno por
   estancia). Referencias: inmobiliarias de Bali que mandó javi. Solo lo carga
   proyecto.html. Usa las variables de estilo.css/tema.css (dirección B).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Galería a pantalla completa ─────────────────────────────────────────── */
/* `touch-action:pan-y`: el navegador decide QUÉ hace con un gesto en el primer
   toque, y si no se le dice nada se queda el horizontal para él —cancela el
   puntero a mitad y el `pointerup` del deslizamiento no llega nunca—. Con
   `pan-y` se queda solo el vertical (desplazar la página) y el horizontal es
   nuestro: pasar de foto. No se puede arreglar desde JavaScript después. */
.galeria-capa{position:fixed;inset:0;z-index:2000;background:rgba(18,17,14,.94);
  display:grid;place-items:center;padding:56px 72px;touch-action:pan-y}
.galeria-capa[hidden]{display:none}
body.gal-abierta{overflow:hidden}
.gal-marco{max-width:1400px;width:100%;height:100%;display:grid;place-items:center}
.gal-marco img{max-width:100%;max-height:100%;object-fit:contain;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);background:#000}
.gal-x,.gal-flecha{position:absolute;border:0;cursor:pointer;color:#fff;font-family:var(--serif);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);transition:.25s var(--e)}
.gal-x{top:18px;right:22px;width:48px;height:48px;border-radius:50%;font-size:30px;line-height:1}
.gal-flecha{top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  font-size:38px;line-height:1;padding-bottom:6px}
.gal-ant{left:16px}.gal-sig{right:16px}
.gal-x:hover,.gal-flecha:hover{background:rgba(255,255,255,.22)}
.gal-x:focus-visible,.gal-flecha:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* `pointer-events:none`: la franja del contador va a todo el ancho y, sin
   esto, se ponía encima de la X y de las flechas y se comía sus clics
   (lo cazó la prueba: «gal-n intercepts pointer events»). */
.gal-n{position:absolute;top:30px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);
  font-size:12px;letter-spacing:.18em;font-weight:600;pointer-events:none}
.gal-x,.gal-flecha{z-index:2}
.btn-galeria{position:absolute;right:14px;bottom:14px;z-index:3;background:rgba(255,255,255,.9);
  color:var(--tinta);border:0;font-weight:600;font-size:13px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.btn-galeria:hover{background:#fff;border-color:transparent}
/* `touch-action:pan-y` por lo mismo que la capa: sin esto, deslizar el dedo
   sobre la foto grande no pasa de foto, solo mueve la página. */
.hero-media{position:relative;touch-action:pan-y}
@media (max-width:760px){
  .galeria-capa{padding:64px 8px 40px}
  .gal-flecha{width:44px;height:44px;font-size:30px}
  .gal-ant{left:6px}.gal-sig{right:6px}
  .gal-marco img{border-radius:10px}
}

/* ── La casa de un vistazo ───────────────────────────────────────────────── */
.casa{margin-top:40px;display:grid;grid-template-columns:minmax(260px,46%) 1fr;align-items:center}
.casa-foto{position:relative;z-index:2;margin-right:-56px;border-radius:24px;overflow:hidden;
  aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(23,21,18,.5)}
.casa-foto img{width:100%;height:100%;object-fit:cover;display:block}
.casa-panel{background:var(--marca);color:#fff;border-radius:26px;padding:48px 48px 44px 104px;
  min-height:360px;display:flex;flex-direction:column;justify-content:center;gap:34px}
.casa-t{font-family:var(--serif);font-weight:500;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.66);margin:0}
.casa-t b{display:block;font-family:var(--d);font-size:22px;letter-spacing:-.01em;
  text-transform:none;color:#fff;font-weight:700;margin-top:2px}
.casa-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
.casa-cifras div b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(40px,4.4vw,60px);
  line-height:.95;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.casa-cifras div b sup{font-size:.42em;vertical-align:top;margin-left:2px;font-family:var(--d);font-weight:500}
.casa-cifras div span{display:block;margin-top:8px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.86)}
.casa-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.casa-lista div{display:flex;gap:14px;align-items:flex-start}
.casa-lista .ico{width:30px;height:30px;flex:none;background:rgba(255,255,255,.92);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.casa-lista div span{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.9)}
.casa-lista div b{display:block;font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.15;
  color:#fff;margin-top:3px}
@media (max-width:900px){
  .casa{grid-template-columns:1fr;margin-top:30px}
  .casa-foto{margin:0 16px -34px;aspect-ratio:16/10;border-radius:20px}
  .casa-panel{padding:64px 24px 34px;border-radius:22px;gap:26px}
  .casa-cifras{gap:20px 18px}
  .casa-lista{grid-template-columns:1fr;gap:14px}
}

/* ── Propiedad · detalles ────────────────────────────────────────────────── */
.detalles{margin-top:44px;background:var(--roca);border-radius:24px;padding:40px 44px 34px;
  box-shadow:0 1px 0 var(--linea)}
.titulo-dos{margin:0 0 30px;line-height:1.02}
.titulo-dos em{display:block;font-style:normal;font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.2vw,44px);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.titulo-dos b{display:block;font-family:var(--d);font-weight:700;font-size:clamp(28px,3.2vw,44px);
  letter-spacing:-.02em;text-transform:uppercase;color:var(--tinta)}
.detalles-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:30px 24px}
.detalles-g h4{margin:0 0 12px;font-family:var(--d);font-weight:700;font-size:16px;letter-spacing:.02em;
  text-transform:uppercase}
.detalles-g ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.detalles-g li{display:flex;align-items:center;gap:10px;color:var(--mudo);font-size:15px}
.detalles-g li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;
  border:1.5px solid var(--tenue);
  background:var(--check) center/10px no-repeat}
@media (max-width:760px){
  .detalles{padding:28px 20px 22px;border-radius:18px}
  .detalles-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
}

/* ── Iconos (máscaras SVG en línea: heredan el color, sin ficheros) ──────── */
.casa-lista .ico-salon{--ico: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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11V8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3'/><path d='M2 11h20v6H2z'/><path d='M4 17v2M20 17v2'/></svg>")}
.casa-lista .ico-anio{--ico: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.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='17' rx='2'/><path d='M3 9h18M8 2v4M16 2v4'/><path d='M9 17l3-3 3 3M12 14v5'/></svg>")}
.casa-lista .ico-amueblado{--ico: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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4'/><path d='M2 12h20v5H2z'/><path d='M4 17v2M20 17v2'/></svg>")}
.casa-lista .ico-titulo{--ico: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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2h9l5 5v15H6z'/><path d='M14 2v6h6'/><path d='M9 13h6M9 17h4'/></svg>")}
.casa-lista .ico-piscina{--ico: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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 18c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5 2-1.5 4-1.5'/><path d='M7 15V5a2 2 0 0 1 4 0M13 15V5a2 2 0 0 1 4 0'/><path d='M7 9h6M7 12h6'/></svg>")}
.casa-lista .ico-zonif{--ico: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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/><path d='M9 4v14M15 6v14'/></svg>")}
.casa-lista .ico-fachada{--ico: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.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20h18'/><path d='M5 20V9l7-5 7 5v11'/><path d='M3 16h18'/></svg>")}
.detalles-g li::before{--check:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6255' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>")}

/* Las miniaturas que no caben en la tira: siguen en el HTML para que el visor
   grande las tenga (galeria.js se construye leyéndolas), pero no se ven ni se
   descargan — una imagen con loading=lazy y display:none no se pide nunca.
   Sin esto, un proyecto con 20 fotos abría el visor con 8. */
.tiras-foto .miniatura.oculta{display:none}