/* Ficha de proyecto. Estructura de la ficha de propiedad de luxury-places.ch
   (medida el 11-nov-2026): galería a pantalla completa con miniaturas y
   contador abajo a la izquierda; tarjeta blanca de datos que asoma sobre el
   borde de la galería y sigue con el contacto; título y texto a la izquierda;
   especificaciones con icono, nombre y valor en filas de línea fina; bloque
   blanco «¿te interesa?» con foto, y la selección de otros proyectos. */

/* --- Galería --- */
/* pan-y: el deslizamiento horizontal se lo queda la galería (cambia de foto)
   y el vertical sigue siendo scroll de la página. */
.galeria { position: relative; height: var(--alto); background: #111; overflow: hidden; color: var(--blanco); touch-action: pan-y; }
.galeria-fotos { position: absolute; inset: 0; }
.galeria-foto {
  position: absolute; inset: 0; margin: 0; overflow: hidden; z-index: 1;
  clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--curva);
}
.galeria-foto.desde-izq { clip-path: inset(0 100% 0 0); }
.galeria-foto.activa { clip-path: inset(0); z-index: 3; }
.galeria-foto.previa { clip-path: inset(0); z-index: 2; }
.galeria-foto img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.08);
  transition: transform 1.6s var(--curva);
}
.galeria-foto.activa img { transform: none; }
/* En pantalla vertical (celular, tableta parada) «cover» dejaba ver menos de
   la mitad de una foto horizontal. Ahí la foto va completa, sobre una copia
   desenfocada de sí misma (la miniatura, que ya está bajada) en lugar de
   franjas negras. */
.galeria-fondo { display: none; }
@media (orientation: portrait) {
  .galeria-foto img { position: relative; z-index: 1; object-fit: contain; }
  .galeria-foto .galeria-fondo, .galeria-foto.activa .galeria-fondo {
    display: block; position: absolute; inset: 0; z-index: 0; object-fit: cover;
    filter: blur(24px) brightness(.6); transform: scale(1.2); transition: none;
  }
}
/* Velo arriba (cabecera) y abajo (miniaturas). */
.galeria::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 72%, rgba(0,0,0,.38));
}
.galeria-mitad { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; }
.galeria-mitad--izq { left: 0; }
.galeria-mitad--der { right: 0; }
.galeria-pie {
  position: absolute; left: 0; bottom: calc(22px + var(--barra)); z-index: 6;
  display: flex; align-items: center; gap: 12px; width: min(100%, 56vw);
}
.galeria-miniaturas { display: flex; gap: 4px; min-width: 0; overflow: hidden; }
.galeria-miniaturas button {
  display: block; width: 44px; height: 30px; border: 1px solid rgba(255,255,255,.55); padding: 0; overflow: hidden;
  opacity: .55; transition: opacity .4s var(--curva), border-color .4s var(--curva);
}
.galeria-miniaturas button:hover { opacity: .9; }
.galeria-miniaturas button[aria-current="true"] { opacity: 1; border-color: var(--blanco); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }

/* --- Cuerpo: texto a la izquierda, tarjeta a la derecha --- */
.ficha-cuerpo {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start;
  padding-bottom: clamp(80px, 13vh, 150px);
}
.ficha-tarjeta {
  grid-column: 8 / 13; grid-row: 1 / 3; position: relative; z-index: 7;
  margin-top: -92px; background: var(--blanco);
}
/* Tres columnas cuando caben; en tabletas verticales (la tarjeta mide ~310 px
   a 800 de ancho) «Construcción» con su ícono no cabía y la tarjeta se salía
   5 px de la página: ahí la tercera baja de renglón. */
.ficha-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--linea); }
.ficha-datos dt { display: flex; align-items: center; gap: 6px; color: var(--gris); }
.ficha-datos dd { margin-top: 6px; text-transform: none; font-size: 13px; }
.ficha-datos svg, .specs svg { width: 16px; height: 16px; flex: none; }
.ficha-contacto { padding: 28px 24px 26px; }
.ficha-persona { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.ficha-persona img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.ficha-persona p { display: grid; gap: 2px; }
.ficha-persona-rol { font-size: 12px; color: var(--gris); }
.ficha-persona-nombre { font-size: 15px; font-weight: 500; }
.ficha-canales { display: grid; gap: 8px; margin: 22px 0 26px; }
.ficha-canales a { display: flex; align-items: center; gap: 12px; transition: opacity .4s var(--curva); }
.ficha-canales a:hover { opacity: .55; }
.ficha-canales a[href^="mailto"] { text-transform: none; font-size: 13px; }
.ficha-icono { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 2px; }
.ficha-icono svg { width: 14px; height: 14px; }

.ficha-texto { grid-column: 1 / 7; grid-row: 1; padding-top: clamp(56px, 9vh, 104px); }
.ficha-estado { color: var(--gris); margin-bottom: 18px; }
.ficha-parrafos { display: grid; grid-template-columns: 1fr 4fr; column-gap: 20px; margin-top: clamp(40px, 7vh, 72px); }
.ficha-parrafos .cruz { margin-top: 4px; }
.ficha-parrafos p { font-size: 13px; line-height: 1.65; color: var(--gris); max-width: 58ch; }
.ficha-parrafos p + p { margin-top: 14px; }

.ficha-specs { grid-column: 1 / 6; grid-row: 2; margin-top: clamp(72px, 12vh, 130px); }
.specs { margin-top: 26px; }
.specs > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linea); }
.specs dt { display: flex; align-items: center; gap: 14px; color: var(--gris); }
.specs dt svg { color: var(--tinta); }
.specs dd { text-transform: none; font-size: 13px; }

/* Dos fotos verticales del interior, a distinta altura. */
.ficha-par { grid-column: 1 / 13; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; margin-top: clamp(90px, 15vh, 170px); }
.ficha-par figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.ficha-par figure:first-child { grid-column: 2 / 7; }
.ficha-par figure:last-child { grid-column: 8 / 12; margin-top: clamp(90px, 18vh, 200px); }
.ficha-par img { width: 100%; height: 100%; object-fit: cover; }

/* --- ¿Tienes un terreno? --- */
.ficha-empuje-caja { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; background: var(--blanco); padding: 24px; }
.ficha-empuje-texto { grid-column: 1 / 8; display: flex; flex-direction: column; align-items: flex-start; }
.ficha-empuje-par { margin-top: 24px; max-width: 46ch; font-size: 13px; line-height: 1.65; color: var(--gris); }
.ficha-empuje-texto .boton { margin-top: auto; }
.ficha-empuje-foto { grid-column: 9 / 13; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; }
.ficha-empuje-foto img { width: 100%; height: 100%; object-fit: cover; }

/* --- El despacho a cargo (como «L'agence en charge de l'annonce») --- */
.ficha-despacho {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start;
  margin-top: clamp(100px, 16vh, 180px);
}
.ficha-despacho h2 { grid-column: 1 / 5; }
.ficha-despacho-caja {
  grid-column: 5 / 13; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; column-gap: 24px;
  align-items: start; padding: 20px; border: 1px solid var(--linea);
}
.ficha-despacho-caja img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ficha-despacho-datos { padding-top: 4px; }
.ficha-despacho-nombre { font-size: 17px; }
.ficha-despacho-dir { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.ficha-despacho-mapa { display: flex; align-items: center; gap: 12px; white-space: nowrap; transition: opacity .4s var(--curva); }
.ficha-despacho-mapa:hover { opacity: .55; }
.ficha-despacho-mapa .ficha-icono { background: var(--blanco); }

.ficha-mas { padding-top: clamp(100px, 16vh, 180px); }

@media (max-width: 760px) {
  .galeria-pie { width: 100%; }
  .galeria-miniaturas button { width: 34px; height: 24px; }
  .ficha-cuerpo, .ficha-par, .ficha-empuje-caja { grid-template-columns: 1fr; }
  .ficha-tarjeta, .ficha-texto, .ficha-specs, .ficha-par, .ficha-par figure, .ficha-empuje-texto, .ficha-empuje-foto { grid-column: 1 !important; grid-row: auto; }
  .ficha-tarjeta { order: 2; margin-top: 40px; }
  .ficha-texto { order: 1; }
  .ficha-parrafos { grid-template-columns: 1fr; row-gap: 18px; }
  .ficha-specs { order: 3; }
  .ficha-par { order: 4; row-gap: 20px; }
  .ficha-par figure:last-child { margin-top: 0; width: 72%; justify-self: end; }
  .ficha-datos { padding: 18px; }
  .ficha-contacto { padding: 24px 18px; }
  .ficha-empuje-texto .boton { margin-top: 28px; }
  .ficha-empuje-foto { margin-top: 28px; }
  .ficha-despacho, .ficha-despacho-caja { grid-template-columns: 1fr; }
  .ficha-despacho h2, .ficha-despacho-caja { grid-column: 1; }
  .ficha-despacho-caja { margin-top: 24px; row-gap: 18px; padding: 16px; }
}

/* Sin ratón no hay cursor que diga «Anterior / Siguiente» sobre las mitades
   de la galería: en tacto, una flecha visible en cada lado. Deslizar también
   cambia de foto. */
@media (hover: none) {
  .galeria-mitad::after {
    content: ""; position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
    background: rgba(0, 0, 0, .3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='1.1'%3E%3Cpath d='M1 6h10M7 2l4 4-4 4'/%3E%3C/svg%3E") center / 14px no-repeat;
  }
  .galeria-mitad--izq::after { left: var(--margen); transform: scaleX(-1); }
  .galeria-mitad--der::after { right: var(--margen); }
}