/* Ficha de cada inmueble (la genera el panel en /inmuebles/<referencia>/): mismos colores y tipos
   que la web. Sin JavaScript: la galería se desliza con CSS. Funciona en los dos sentidos (árabe). */
:root { color-scheme: dark; --fondo: #0B1C38; --tarjeta: #0E2142; --texto: #ece6da; --suave: #b9b2a4; --oro: #c9a06a;
  --oro-claro: #e3c495; --linea: rgba(201,160,106,.18); --serif: 'Cormorant Garamond', 'Amiri', serif;
  --sans: 'Jost', 'Amiri', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); font-weight: 300; line-height: 1.7;
  -webkit-font-smoothing: antialiased; }
a { color: var(--oro); } a:hover { color: var(--oro-claro); }
a:focus-visible, .tira:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; }
.cab { padding: 22px clamp(16px, 5vw, 60px); border-bottom: 1px solid var(--linea); }
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; font-family: var(--serif);
  font-size: 20px; letter-spacing: .3em; text-transform: uppercase; }
main { max-width: 1120px; margin: 0 auto; padding: 28px clamp(16px, 5vw, 40px) 72px; }
.volver { margin: 0 0 22px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.volver a { text-decoration: none; }
.volver a::before { content: "← "; }
[dir="rtl"] .volver a::before { content: "→ "; }

.galeria { position: relative; margin: 0 0 34px; }
.tira { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--oro) transparent; }
.tira li { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3 / 2; background: var(--tarjeta); }
.tira:has(li + li) li { flex-basis: 88%; }
.tira img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cuenta { margin: 10px 0 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--suave); }
.sin-fotos { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; color: rgba(236,230,218,.4);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  background: radial-gradient(circle at 30% 25%, rgba(201,160,106,.22), transparent 60%), linear-gradient(150deg, #1C3564, #122750); }
.cartel { position: absolute; top: 16px; inset-inline-end: 16px; padding: 6px 14px; font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 500; background: var(--oro); color: var(--fondo); }
.cartel-vendido, .cartel-alquilado { background: var(--texto); }

.titulo { margin: 0 0 28px; }
.antetitulo { margin: 0 0 10px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 5vw, 54px); line-height: 1.1; margin: 0 0 14px; }
.precio { margin: 0; font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); color: var(--oro-claro); }
.precio.cerrado { color: var(--suave); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: 0 0 40px;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.datos div { padding: 18px 4px; }
.datos dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--suave); }
.datos dd { margin: 4px 0 0; font-family: var(--serif); font-size: 24px; }

.texto { max-width: 760px; margin: 0 0 40px; }
h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; color: var(--oro-claro); margin: 0 0 12px; }
.texto p { margin: 0 0 14px; font-size: 17px; color: #d6cfc2; white-space: pre-line; }
.extras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.extras li { position: relative; padding-inline-start: 18px; font-size: 16px; color: #d6cfc2; }
.extras li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 6px; height: 6px; background: var(--oro);
  transform: rotate(45deg); }

.contacto { max-width: 760px; padding: 28px clamp(20px, 4vw, 36px); background: var(--tarjeta); border: 1px solid var(--linea); }
.contacto p { margin: 0 0 18px; color: #d6cfc2; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.boton { display: inline-block; padding: 14px 24px; background: var(--oro); color: var(--fondo); text-decoration: none; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.boton:hover { background: var(--oro-claro); color: var(--fondo); }
.boton.claro { background: transparent; color: var(--oro); border: 1px solid var(--oro); }
.boton.claro:hover { color: var(--oro-claro); border-color: var(--oro-claro); }

footer { border-top: 1px solid var(--linea); padding: 28px clamp(16px, 5vw, 60px); font-size: 14px; color: #9fabc4; text-align: center; }

@media (prefers-reduced-motion: no-preference) { .tira { scroll-behavior: smooth; } }