/* ============================================================================
   Galería de inmuebles Casalia — componente propio (sustituye a flexslider)
   Fotos "recortadas": object-fit cover, altura uniforme, sin hueco.
   ========================================================================== */
.cg {
  --cg-h: clamp(420px, 60vh, 640px);       /* alto por defecto (detalle, horizontales) */
  --cg-accent: #C33C00;                    /* naranja de marca */
  --cg-radius: 8px;
  width: 100%;
  margin: 0 0 1.25rem;
}

/* Ficha de inmueble (con miniaturas): caja ADAPTATIVA.
   - Por defecto (horizontales): compacta → más aire.
   - Cuando la foto actual es VERTICAL, el JS añade .cg--portrait-active y la caja
     se hace más alta para apreciar la vertical grande. La transición del .cg-slide
     suaviza el cambio de alto al navegar. */
.cg--detail { --cg-h: clamp(440px, 66vh, 720px); }
.cg--detail.cg--portrait-active { --cg-h: clamp(480px, 82vh, 860px); }

/* Tarjeta del listado (sin miniaturas): proporción fija 4:3 que escala con el
   ancho de la tarjeta — nunca la altura del viewport. */
.cg--card .cg-slide {
  height: auto;
  aspect-ratio: 4 / 3;
}
.cg--card .cg-nav { width: 38px; height: 38px; font-size: 22px; }
.cg--card { margin: 0; }

/* --- Escenario (foto principal) --- */
.cg-stage {
  position: relative;
}

.cg-track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                   /* Firefox */
  border-radius: var(--cg-radius);
  background: #000;
}
.cg-track::-webkit-scrollbar { display: none; }   /* WebKit */
.cg-track:focus-visible { outline: 2px solid var(--cg-accent); outline-offset: 2px; }

.cg-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  height: var(--cg-h);
  transition: height .35s ease;            /* suaviza el cambio de alto (caja adaptativa) */
}
@media (prefers-reduced-motion: reduce) {
  .cg-slide { transition: none; }
}

.cg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;                       /* recortado: rellena la caja */
  display: block;
}

/* --- FICHA: TODAS las fotos completas, sin recorte ---
   object-fit:cover recortaría cualquier foto que no encaje en la caja (horizontales,
   cuadradas, panorámicas…). En la ficha mostramos CADA foto ENTERA (contain) sobre un
   fondo difuminado de la propia foto (--cg-bg lo pone functions.php en cada slide). Da
   igual el tamaño/orientación/calidad con que la suban: nunca se corta. La banda que
   sobra se rellena con la versión borrosa (elegante, no una banda negra).
   Solo aplica al detalle (.cg--detail); las tarjetas del listado siguen con cover. */
.cg--detail .cg-slide {
  position: relative;
  overflow: hidden;
}
.cg--detail .cg-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cg-bg);
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(.68);
  transform: scale(1.25);                   /* tapa los bordes que el blur aclara */
  z-index: 0;
}
.cg--detail .cg-img {
  position: relative;
  z-index: 1;
  object-fit: contain;                      /* foto completa, sin recorte */
}

/* --- Flechas --- */
.cg-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
  transition: background .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cg-nav:hover  { background: rgba(0, 0, 0, .72); }
.cg-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cg-nav[hidden] { display: none; }
.cg-nav--prev { left: 12px; }
.cg-nav--next { right: 12px; }

/* --- Contador --- */
.cg-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 20px;
  pointer-events: none;
}

/* --- Miniaturas --- */
.cg-thumbs {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 2px 0 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.cg-thumb { flex: 0 0 auto; }
.cg-thumb-btn {
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: block;
  width: 98px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  opacity: .55;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: opacity .2s ease, outline-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cg-thumb-btn:hover { opacity: .85; }
.cg-thumb-btn.is-active { opacity: 1; outline-color: var(--cg-accent); }
.cg-thumb-btn:focus-visible { outline-color: var(--cg-accent); }
.cg-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================================
   FICHA DE INMUEBLE — "más aire" (EN PRUEBAS en staging, iterando con el cliente)
   Acotado a .single-compra_de_viviendas para no afectar a otras páginas. El layout
   base es del theme builder de Avada; esto solo aligera tamaños y ritmo vertical.
   ========================================================================== */
/* Títulos de sección (Características, Interiores…): eran 28px con mucho hueco. */
.single-compra_de_viviendas .fusion-title.title {
  font-size: 21px !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}
/* Cards blancas menos "bloque": menos padding. Con :has() tocamos cada una por
   separado (galería / datos) sin afectar al formulario naranja ni a otras páginas. */
.single-compra_de_viviendas .fusion-column-has-shadow:has(.cg--detail) {
  padding: 10px !important;
}
.single-compra_de_viviendas .fusion-column-has-shadow:has(.fusion-title.title) {
  padding: 22px 26px !important;
}
/* Precio menos gigante: Avada lo fija con --awb-font-size:32px en .fusion-text-1. */
.single-compra_de_viviendas .fusion-text-1 { --awb-font-size: 26px !important; }
.single-compra_de_viviendas .fusion-text-1 p { font-size: 26px !important; line-height: 1.15 !important; }

/* Formulario de la ficha (Formidable): más compacto y menos alto. */
.single-compra_de_viviendas .frm_form_field { margin-bottom: 12px !important; }
.single-compra_de_viviendas .frm_form_field input[type="text"],
.single-compra_de_viviendas .frm_form_field input[type="email"],
.single-compra_de_viviendas .frm_form_field input[type="tel"],
.single-compra_de_viviendas .frm_form_field input:not([type]) {
  height: 44px !important;
}
/* Columna naranja del formulario: menos padding (era un bloque muy grande). */
.single-compra_de_viviendas .fusion-column-wrapper:has(form),
.single-compra_de_viviendas .fusion-column-wrapper:has(.frm_forms) {
  padding: 22px 24px !important;
}

/* Fila de m²/hab/baño: menos hueco vertical arriba y abajo. */
.single-compra_de_viviendas .fusion-text-1 + * { margin-top: 4px !important; }

/* Dos tonos de naranja en el formulario: el fieldset de Formidable trae el naranja
   VIEJO (#F54C01) fijado por su cuenta, así que no se oscureció con el cambio de
   contraste de la marca (#C33C00) y quedó más claro que la columna. Lo unificamos
   dejándolo transparente → se ve un único naranja (#C33C00) en toda la caja. */
.single-compra_de_viviendas .frm_forms fieldset,
.single-compra_de_viviendas form fieldset {
  background: transparent !important;
  border: 0 !important;
}

/* --- Móvil --- */
@media (max-width: 640px) {
  .cg { --cg-h: clamp(360px, 66vh, 580px); }
  .cg-nav { width: 40px; height: 40px; font-size: 24px; }
  .cg-thumb-btn { width: 74px; height: 54px; }
  .cg-counter { font-size: 12px; padding: 2px 8px; }
}

/* --- Respeta prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .cg-track { scroll-behavior: auto; }
}