/* ============================================================================
   Casalia — Cards de inmuebles del home (Variante A: "portal vertical").
   Reestiliza el Post Card de Avada (layout 139) SIN reestructurarlo: foto a
   sangre con badges de estado en la esquina, precio grande de marca, specs en
   fila con iconos y CTA a ancho. Acotado a las cards de vivienda con :has().
   Estados: los pinta el shortcode [label] (Nuevo/Rebajado/Reservado…); el precio
   y la rebaja los pinta [casalia_precio].
   ========================================================================== */

/* alcance: solo columnas Post Card que contienen la galería de vivienda
   (los post cards de blog no tienen .cg--card, así que no se ven afectados). */
/* Solo el wrapper EXTERIOR (hijo directo de .post-card) es la "card": borde, radio,
   sombra y position:relative. Así los badges y el corazón (que viven en columnas
   internas) se anclan a la card y quedan SOBRE la foto, no dentro de su columna. */
.post-card:has(.cg--card) > .fusion-column-wrapper {
  position: relative;
  padding: 0 0 14px !important;
  background: #fff;
  border: 1px solid #e6e1d8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.post-card:has(.cg--card) > .fusion-column-wrapper:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}
/* Contenedores internos (fila, columnas, wrappers): sin posicionar (para anclar el
   corazón/badges a la card) y SIN padding/gutter (para que la foto vaya a sangre). */
.post-card:has(.cg--card) .fusion-builder-row-inner,
.post-card:has(.cg--card) .fusion-builder-row-inner .fusion-layout-column,
.post-card:has(.cg--card) .fusion-builder-row-inner .fusion-column-wrapper {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* --- Variante A: APILAR las 2 columnas internas del layout 139 (imagen | detalles)
   para que quede vertical (imagen arriba, datos abajo) en vez de horizontal. --- */
.post-card:has(.cg--card) .fusion-builder-row-inner {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.post-card:has(.cg--card) .fusion-builder-row-inner > .fusion-layout-column {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}
/* Avada fija un ancho (~393px) a la fila/columnas internas que las hace ~13px más
   anchas que la card y descuadra el contenido por la derecha. Se fuerza a 100% con
   un selector de MÁS especificidad (el CSS dinámico de Avada carga después). */
.post-card:has(.cg--card) > .fusion-column-wrapper .fusion-builder-row-inner,
.post-card:has(.cg--card) > .fusion-column-wrapper .fusion-builder-row-inner > .fusion-layout-column,
.post-card:has(.cg--card) > .fusion-column-wrapper .fusion-builder-row-inner > .fusion-layout-column > .fusion-column-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* La columna de DATOS (la que NO tiene galería) lleva padding lateral para que su
   contenido quede DENTRO de la card: la fila interna de Avada trae un margen negativo
   que la hace ~13px más ancha, y sin esto el último spec (m²) se corta. La columna de
   la galería queda a sangre (padding 0). Con box-sizing el 100% incluye el padding. */
.post-card:has(.cg--card) .fusion-builder-row-inner > .fusion-layout-column:not(:has(.cg--card)) > .fusion-column-wrapper {
  /* la columna se desborda ~14px por la DERECHA (ancho fijo de Avada) → padding
     derecho mayor para compensar y que el contenido quede visualmente centrado */
  padding: 2px 30px 6px 16px !important;
  box-sizing: border-box !important;
}

/* --- galería a sangre en la parte superior, foto más contenida (16:10) --- */
.post-card:has(.cg--card) .cg--card { margin: 0 0 12px; }
.post-card:has(.cg--card) .cg--card .cg-track { border-radius: 0; }
.post-card:has(.cg--card) .cg--card .cg-slide { aspect-ratio: 16 / 10 !important; height: auto !important; }

/* --- badges de estado sobre la foto (esquina superior izquierda) --- */
.cg-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.cg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}
.cg-badge--new  { background: #177a4e; }   /* verde: nuevo / disponible */
.cg-badge--cut  { background: #c92d1f; }   /* rojo: rebajado */

/* VENDIDO / RESERVADO. El gris #3a3430 anterior se camuflaba: es un tono medio
   sobre fotos de interiores que suelen ser oscuras, y encima la propia card
   atenúa la imagen, lo que rebajaba aún más el contraste. Ahora va en negro
   sólido con anillo blanco: el anillo es lo que garantiza que se recorte contra
   CUALQUIER foto, clara u oscura, sin depender del color del fondo. */
.cg-badge--busy {
  background: #12100f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 2px 8px rgba(0, 0, 0, .45);
  font-size: 12.5px;
  padding: 6px 13px;
}

/* atenúa la foto cuando el inmueble no está disponible.
   Subido de grayscale .4 / brightness .9 → .7 / .85: el estado "ya no está
   disponible" debe leerse de un vistazo en la parrilla, no solo por el badge. */
.post-card:has(.cg-badge--busy) .cg--card .cg-img {
  filter: grayscale(.7) brightness(.85);
}

/* --- favorito (corazón): OCULTO. No hay usuarios que gestionen favoritos, así que
   no aporta nada. Se retira de las cards. --- */
.post-card:has(.cg--card) .fontawesome-icon.fa-heart { display: none !important; }

/* --- caja "Compartir" por card: se oculta (el compartir vive en la ficha) --- */
.post-card:has(.cg--card) .btn_wrap { display: none !important; }

/* --- título (zona / tipo) --- */
.post-card:has(.cg--card) .fusion-title.title { margin: 4px 0 0 !important; padding: 0 !important; }
.post-card:has(.cg--card) .fusion-title.title .fusion-title-heading {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #201b17 !important;
}

/* --- precio (shortcode [casalia_precio], dentro de un .fusion-text) ---
   OJO: las clases numeradas de Avada (fusion-text-1, button-1…) son por PÁGINA,
   no por card → se usan selectores estructurales con :has() para estilar TODAS. */
.post-card:has(.cg--card) .fusion-text:has(.cg-price-wrap) { padding: 0 !important; margin: 10px 0 0 !important; width: 100%; }
.cg-price-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; }
.cg-price      { color: #c33c00; font-weight: 800; font-size: 23px; line-height: 1; }
.cg-price--cut { color: #c33c00; }
.cg-price-old  { color: #8a8177; text-decoration: line-through; font-weight: 600; font-size: 15px; }
.cg-drop {
  color: #c92d1f;
  font-weight: 700;
  font-size: 12.5px;
  background: #fbe9e7;
  padding: 2px 7px;
  border-radius: 6px;
}
.cg-pm2 { color: #8a8177; font-size: 12.5px; font-weight: 500; }

/* --- specs: habitaciones / baños / m² en fila con iconos suaves ---
   Los specs son los .fusion-text que llevan icono (<i>); el precio no lleva. --- */
.post-card:has(.cg--card) .fusion-text:has(i) {
  display: inline-flex !important;
  align-items: center;
  font-size: 11px;
  color: #5f574e;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  white-space: nowrap;   /* cada spec entero; se reparten con space-between */
}
.post-card:has(.cg--card) .fusion-text:has(i) i {
  color: #b0a89d;
  margin-right: 4px;
  font-size: 11.5px;
}

/* --- CTA a ancho completo ---
   El botón de Avada va dentro de un wrapper estrecho (flex-item ~100px) → hay que
   estirar el wrapper a 100% y el propio botón, o el texto se corta. --- */
.post-card:has(.cg--card) .fusion-column-wrapper > :has(> .fusion-button) {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  flex: 0 0 auto !important;
  margin: 14px 0 0 !important;
}
.post-card:has(.cg--card) .fusion-button {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 11px 0 !important;
  text-align: center;
  background: #c33c00 !important;
  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
.post-card:has(.cg--card) .fusion-button:hover { background: #a63300 !important; }
.post-card:has(.cg--card) .fusion-button .fusion-button-text {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}

/* --- Precio en la FICHA de detalle: más grande que en las cards, con la misma
   lógica de rebaja (anterior tachado + %). --- */
.single-compra_de_viviendas .cg-price-wrap { margin: 0; gap: 6px 10px; }
.single-compra_de_viviendas .cg-pm2 { display: none; } /* la ficha ya muestra su propio €/m² */
.single-compra_de_viviendas .cg-price { font-size: 30px; }
.single-compra_de_viviendas .cg-price-old { font-size: 19px; }
.single-compra_de_viviendas .cg-drop { font-size: 14px; }

/* --- móvil --- */
@media (max-width: 640px) {
  .cg-price { font-size: 21px; }
  .single-compra_de_viviendas .cg-price { font-size: 26px; }
  .post-card:has(.cg--card) .fusion-title.title .fusion-title-heading { font-size: 15px !important; }
}

/* respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .post-card:has(.cg--card) .fusion-column-wrapper,
  .post-card:has(.cg--card) .fontawesome-icon.fa-heart { transition: none; }
}

/* ============================================================================
   Estado vacío de los listados de inmuebles (/alquilar/, /comprar/).
   Lo pinta el filtro awb_post_cards_placeholder_message del functions.php del
   tema hijo: Avada solo enseña "No posts found." a administradores y al
   visitante le deja un hueco bajo el título. Mismo lenguaje que las cards
   (blanco, borde #e6e1d8, radio 14px, sombra suave) y el mismo CTA en píldora
   que el estado vacío del buscador (.cbs-empty / .cbs-card-cta).
   ========================================================================== */
.casalia-vacio {
  --cv-accent: #C33C00;
  --cv-accent-dark: #A63300;
  width: 100%;
  padding: 8px 0 4px;
}
.casalia-vacio-caja {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid #e6e1d8;
  border-radius: 14px;
  padding: 44px 28px 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.casalia-vacio-icono {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  color: var(--cv-accent);
}
/* Mismo motivo que en el párrafo: Avada impone su margen a los <p>. Se fija el
   valor real (20px) en vez de declarar uno que la cascada iba a descartar. */
.casalia-vacio .casalia-vacio-titulo {
  margin: 0 0 20px !important;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 600;
  color: #222;
}
/* Los márgenes van con !important y selector doble porque Avada fuerza
   `margin: 0` en los <p> del contenido: sin esto el auto se pierde y el
   párrafo, al estar limitado por max-width, se queda pegado a la izquierda. */
.casalia-vacio .casalia-vacio-texto {
  margin: 0 auto 22px !important;
  /* Sin límite en ch: la caja ya acota a ~504px (unos 56 caracteres, dentro del
     rango legible). Un max-width menor partía el texto dejando una palabra sola
     en la segunda línea. `balance` reparte las líneas si el texto vuelve a crecer. */
  max-width: 100%;
  text-wrap: balance;
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}
.casalia-vacio .casalia-vacio-texto:last-child { margin-bottom: 0 !important; }
.casalia-vacio-cta {
  display: inline-block;
  background: var(--cv-accent);
  color: #fff !important;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 14px;
  transition: background .2s ease;
}
.casalia-vacio-cta:hover,
.casalia-vacio-cta:focus { background: var(--cv-accent-dark); color: #fff !important; }
.casalia-vacio-cta:focus-visible { outline: 2px solid var(--cv-accent-dark); outline-offset: 3px; }

@media (max-width: 640px) {
  .casalia-vacio-caja { padding: 34px 20px 32px; border-radius: 12px; }
  .casalia-vacio-titulo { font-size: 19px; }
  .casalia-vacio-texto { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .casalia-vacio-cta { transition: none; }
}

/* ============================================================================
   VENDIDO / RESERVADO sobre la foto (elegido por el cliente el 24/09/2026).
   Queja de origen: la gente no distinguía un piso vendido de uno disponible,
   porque el único indicador era el badge pequeño de la esquina.
   La galería de la tarjeta (casalia_render_gallery) lleva .cg--vendido o
   .cg--reservado y el texto del estado en data-estado; el badge pequeño se
   oculta porque la banda lo sustituye.
   Son estados distintos a propósito: un VENDIDO ya no se puede comprar (foto en
   B/N, precio tachado, botón gris); un RESERVADO todavía puede caerse, así que
   conserva el precio, la rebaja y el botón de marca.
   ========================================================================== */
.post-card:has(.cg--vendido) .cg-badges,
.post-card:has(.cg--reservado) .cg-badges { display: none; }

.post-card .cg--card.cg--vendido,
.post-card .cg--card.cg--reservado { position: relative; overflow: hidden; }

/* --- VENDIDO (también Adjudicado / Alquilado): banda horizontal que cruza la foto.
   padding-left compensa el letter-spacing, que si no descentra el texto (el
   espacio extra va detrás de la última letra y empuja el bloque a la izquierda). */
.post-card .cg--card.cg--vendido .cg-img { filter: grayscale(.85) brightness(.86); }
.post-card .cg--card.cg--vendido::after {
  content: attr(data-estado);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 46px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: .3em;
  background: rgba(18, 16, 15, .92);
  color: #fff;
  font-size: clamp(13px, 3.6vw, 17px);
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  z-index: 6;
  pointer-events: none;
}
.post-card:has(.cg--vendido) .cg-price,
.post-card:has(.cg--vendido) .cg-price--cut {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: #6b645b !important;
  opacity: .85;
}
.post-card:has(.cg--vendido) .cg-drop,
.post-card:has(.cg--vendido) .cg-price-old { display: none; }
.post-card:has(.cg--vendido) .fusion-button {
  background: #6b645b !important;
  border-color: #6b645b !important;
}
.post-card:has(.cg--vendido) .fusion-button:hover { background: #57514a !important; }

/* --- RESERVADO: barra a todo el ancho en la parte baja de la foto. La foto
   conserva la atenuación general de "no disponible" y el resto de la tarjeta
   (precio, rebaja, botón) se queda como en uno disponible. */
.post-card .cg--card.cg--reservado::after {
  content: attr(data-estado);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(18, 16, 15, .86), #12100f);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  z-index: 6;
  pointer-events: none;
}

/* ============================================================================
   VENDIDO / RESERVADO en la FICHA del inmueble (24/09/2026).
   Hasta ahora la ficha de un vendido no lo mencionaba en ningún sitio: fotos a
   color, precio en naranja y formulario de contacto, como uno disponible. Ahora
   lleva el mismo lenguaje que la tarjeta —banda para VENDIDO, barra para
   RESERVADO— sobre la foto grande (no sobre las miniaturas), y debajo un aviso
   que lo explica (casalia_aviso_estado_ficha en functions.php).
   Las flechas y el contador quedan POR ENCIMA de la banda: en la ficha sí se
   navega por las fotos, a diferencia de la tarjeta.
   ========================================================================== */
.cg--detail.cg--vendido .cg-stage::after,
.cg--detail.cg--reservado .cg-stage::after {
  content: attr(data-estado);
  position: absolute;
  left: 0;
  right: 0;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;
}
.cg--detail.cg--vendido .cg-nav,
.cg--detail.cg--vendido .cg-counter,
.cg--detail.cg--reservado .cg-nav,
.cg--detail.cg--reservado .cg-counter { z-index: 4; }

/* VENDIDO: banda horizontal a media altura, como en la tarjeta pero a escala */
.cg--detail.cg--vendido .cg-stage::after {
  top: 50%;
  height: 58px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: .35em;               /* compensa el letter-spacing (ver tarjeta) */
  background: rgba(18, 16, 15, .92);
  font-size: clamp(16px, 2.4vw, 24px);
  font-weight: 900;
  letter-spacing: .35em;
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

/* RESERVADO: barra en la parte baja de la foto, con las esquinas de la foto */
.cg--detail.cg--reservado .cg-stage::after {
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(18, 16, 15, .86), #12100f);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .14em;
  border-radius: 0 0 var(--cg-radius) var(--cg-radius);
}

/* Precio de la ficha de un VENDIDO: tachado y en gris, sin la rebaja (igual que
   en la tarjeta). Un RESERVADO conserva el precio intacto. */
body:has(.cg--detail.cg--vendido) .cg-price-wrap .cg-price,
body:has(.cg--detail.cg--vendido) .cg-price-wrap .cg-price--cut {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: #6b645b !important;
  opacity: .85;
}
body:has(.cg--detail.cg--vendido) .cg-price-wrap .cg-price-old,
body:has(.cg--detail.cg--vendido) .cg-price-wrap .cg-drop { display: none; }

/* Fotos de la ficha apagadas con el mismo filtro que la tarjeta: quien entra
   viene de verla en gris y no debe reencontrarse el piso a todo color. El filtro
   va en el carril de fotos y en las miniaturas (no en .cg-stage), para que la
   banda y la barra —que viven en .cg-stage::after— sigan nítidas, y en la
   imagen de la miniatura (no en el botón) para no apagar su marco naranja. */
.cg--detail.cg--vendido .cg-track,
.cg--detail.cg--vendido .cg-thumb-img { filter: grayscale(.85) brightness(.86); }
.cg--detail.cg--reservado .cg-track,
.cg--detail.cg--reservado .cg-thumb-img { filter: grayscale(.7) brightness(.85); }

/* Aviso bajo la galería. Caja clara en los dos estados, con la paleta de las
   tarjetas: la banda de la foto ya da el golpe visual y el aviso solo lo explica.
   Un bloque negro justo debajo de la banda negra repetía el mensaje y pesaba
   como un error. La etiqueta en negro es el único acento. */
.casalia-aviso-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 16px 0 0;
  padding: 16px 20px;
  border-radius: 12px;
  background: #f6f3ee;
  border: 1px solid #e6e1d8;
  color: #201b17;
}
.casalia-aviso-estado-etiqueta {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}
.casalia-aviso-estado .casalia-aviso-estado-etiqueta { background: #12100f; color: #fff; }
.casalia-aviso-estado-cuerpo { flex: 1 1 260px; min-width: 0; }
/* Avada impone margen y color a los <p>: se fijan aquí con !important */
.casalia-aviso-estado .casalia-aviso-estado-titulo {
  margin: 0 !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: inherit !important;
}
.casalia-aviso-estado .casalia-aviso-estado-texto {
  margin: 3px 0 0 !important;
  font-size: 14px;
  line-height: 1.5;
  color: inherit !important;
  opacity: .85;
}
.casalia-aviso-estado .casalia-aviso-estado-cta {
  flex: 0 0 auto;
  padding: 11px 20px;
  border-radius: 999px;
  background: #c33c00;
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s ease;
}
.casalia-aviso-estado .casalia-aviso-estado-cta:hover { background: #a63300; }
.casalia-aviso-estado .casalia-aviso-estado-cta:focus-visible { outline: 2px solid #a63300; outline-offset: 3px; }

/* Ficha de un NO disponible: sin formulario de contacto (se quita su columna en
   functions.php, casalia_ficha_sin_formulario). La columna de datos (2/3) se
   centra para que no quede un hueco a la derecha donde estaba el formulario; no
   se estira a todo el ancho para no alargar las líneas de la descripción. */
.casalia-ficha-no-disponible .fusion-builder-row:has(> .fusion_builder_column_2_3):not(:has(> .fusion_builder_column_1_3)) {
  justify-content: center;
}