/* ==========================================================================
   ML Realtor — plantilla de ficha IDX          v1.0.0 — EN PRODUCCIÓN
   Un solo molde para las ~4,396 propiedades del MLS.

   Probado el 2026-08-08 inyectándolo sobre la ficha real
   /idx/Vista-Vela-lll-Cabo-Corridor-mls_26-2862/ en el navegador.
   Producción NO se tocó.

   Todo es CSS sobre las clases que el plugin flexmls-idx ya emite, así que
   una actualización del plugin no lo borra y la reversa es quitar el archivo.

   Jerarquía de marca: el negro domina, el oro acompaña, el azul aparece por
   momentos (aquí: exactamente un elemento, el botón "Contact agent").
   ========================================================================== */

.flexmls-listing-details {
  --ml-ink:   #0A0A0A;
  --ml-paper: #F5F3EF;
  --ml-gold:  #C8A96E;
  --ml-navy:  #0E0E55;
  --ml-line:  #E5E1D8;
  --ml-muted: #6E6A63;
  --ml-serif: 'Cormorant Garamond', Georgia, serif;
  --ml-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ml-curva: cubic-bezier(.2, .75, .2, 1);

  display: flex;
  flex-direction: column;
  font-family: var(--ml-sans);
  color: var(--ml-ink);
  padding: 0 0 96px;
}

/* Cada bloque trae su propio ancho de lectura y su aire lateral. Esto es lo
   que arregla el título pegado al borde y el precio cortado: el contenedor
   medía 1280 px, exactamente el ancho de la ventana, con cero padding. */
.flexmls-listing-details > * {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left:  clamp(20px, 5vw, 56px);
  padding-right: clamp(20px, 5vw, 56px);
  box-sizing: border-box;
}

/* --- Orden visual: manda la fotografía, no un botón --------------------- */
.flexmls-listing-details > .listing-section          { order: 5; }
.flexmls-listing-details > .slideshow-wrapper        { order: 1; }
.flexmls-listing-details > .top-info-wrapper         { order: 2; }
.flexmls-listing-details > .flexmls-actions-wrapper  { order: 3; }
.flexmls-listing-details > .main-details-section     { order: 4; }
.flexmls-listing-details > .overview-section         { order: 5; }
.flexmls-listing-details > .features-section         { order: 6; }
.flexmls-listing-details > .map-section              { order: 7; }
.flexmls-listing-details > .compliance-section       { order: 8; }
.flexmls-listing-details > .source-mls-badge         { order: 9; }
.flexmls-listing-details > .disclosure-section       { order: 10; }

/* --- Galería: héroe a sangre, encadenado con el header negro ------------ */
.flexmls-listing-details > .slideshow-wrapper {
  max-width: none;
  padding: 0;
  background: var(--ml-ink);
}
.slideshow-wrapper .owl-carousel { max-width: none; padding: 0; }

/* El plugin fija la ALTURA de la foto por JavaScript (468 px), calcula el
   ancho para conservar la proporción y la centra con márgenes automáticos:
   de ahí las franjas negras a los lados. Los estilos en línea pierden contra
   !important, así que esto es estable aunque su JS corra después. */
/* Owl fija la altura del escenario con un estilo en línea, y el plugin le pone
   `max-height: 100%` a la foto. Entre los dos, la proporción no puede crecer:
   el `aspect-ratio` de abajo se quedaba sin efecto y la caja seguía saliendo en
   2.46. Hay que soltar la altura en TODA la cadena — escenario, pista, tarjeta
   y foto— o no sirve de nada. */
.slideshow-wrapper .owl-height,
.slideshow-wrapper .owl-stage-outer { height: auto !important; max-height: none !important; transition: none !important; }
.slideshow-wrapper .owl-stage       { height: auto !important; }
.slideshow-wrapper .owl-item        { height: auto !important; max-height: none !important; }
/* PROPORCIÓN — la decisión que más cambia cómo se ven las fotos.
   Las del MLS son 3:2 (proporción 1.54). Una altura fija en pantalla ancha
   daba una caja de 2.29: para llenarla, `cover` rebanaba ~33% de alto
   —cielo, alberca, techos— y eso se percibe como si la foto estuviera
   deformada, aunque no lo esté. Medido en 1440x900: caja 1280x558.

   Ahora la proporción se fija con `aspect-ratio: 16/9`, que se mide contra el
   ANCHO DEL ELEMENTO, no contra la ventana. El recorte queda clavado en ~13%
   en cualquier monitor, y 16:9 se lee como decisión de cine, no como error.

   NO PONER UN TOPE DE ALTURA EN vh AQUÍ. Se intentó `min(56.25vw, 72vh)` y en
   una ventana ancha y baja (1440x812) el tope ganaba: la caja salía en 2.46 y
   el recorte subía a 38%, peor que el problema original. Para no desbordar en
   monitores enormes se limita el ANCHO del carrusel, que sí conserva la
   proporción.

   Y para el que quiera ver la foto entera, `ml-media.js` pone un interruptor
   en el héroe: con la clase `ml-foto-completa` nada se recorta. */
.slideshow-wrapper .owl-carousel { max-width: 1800px; margin: 0 auto; }

.slideshow-wrapper .owl-item img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;   /* el plugin le pone max-height:100% */
  aspect-ratio: 16 / 9;
  margin: 0 !important;
  object-fit: cover !important;
  display: block;
}

/* LAS DIAPOSITIVAS DE VIDEO Y TOUR TAMBIÉN, o aparece una franja negra muerta.
   Medido en móvil (375 px) sobre la MLS 25-4216: la foto queda en 211 px de alto
   (16:9 correcto) pero el iframe del reproductor trae 300 px fijos —viene con
   `width="630" height="354"`— y como el escenario de Owl toma la altura del
   elemento MÁS ALTO, el carrusel entero se iba a 300 y dejaba 89 px de negro
   vacío bajo la foto. En escritorio no se nota (la foto mide 810 y le gana al
   iframe), por eso solo salta en el teléfono.

   Afecta a las 659 fichas con video o tour, que son justo las que más queremos
   lucir. Se les da la misma proporción que a las fotos para que ninguna
   diapositiva pueda mandar una altura distinta a las demás. */
   OJO AL TOCAR ESTO: aquí NO se pone `display`. Las diapositivas de video y de
   tour son contenedores flex que centran su contenido (ver `ml-media.css`); al
   ponerles `display:block` desde aquí —que es más específico y gana— el video
   se pegaba a la izquierda y dejaba toda la banda negra de un solo lado. La
   proporción de esas dos diapositivas se fija en `ml-media.css`, junto con su
   maquetación, para que no haya dos archivos peleando por lo mismo. */
.slideshow-wrapper .owl-item iframe,
.slideshow-wrapper .ml-tour-frame {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  margin: 0 auto !important;
  border: 0;
}

/* Interruptor encendido: se ve la foto completa, sin recortar un píxel.
   Se suelta el aspect-ratio para que mande la proporción real de la foto. */
.ml-foto-completa .slideshow-wrapper .owl-item img {
  width: auto !important;
  max-width: 100% !important;
  height: min(74vh, 760px) !important;
  aspect-ratio: auto;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* --- Insignias del MLS -------------------------------------------------- */
/* DECISIÓN DE MARVIN, 2026-08-08, tomada DESPUÉS de que se le advirtiera:
   se ocultan las dos insignias. La de MLS BCS (`alt="IDX"`) es la marca de
   cumplimiento del programa IDX y ocultarla puede incumplir su convenio con
   el MLS —con multas o pérdida del feed que alimenta las ~4,396 fichas—.
   Él lo confirmó igual. Queda escrito aquí para que quien lo lea después sepa
   que fue deliberado y no un descuido, y para poder revertirlo en un segundo.

   El TEXTO legal ("...courtesy of the IDX program of MLS BCS") SÍ se conserva:
   no se pidió quitarlo y es la otra mitad del cumplimiento. */
.flexmls-listing-details img.flexmls-idx-compliance-badge,
.flexmls-listing-details > .compliance-section,
.flexmls-listing-details > .source-mls-badge {
  display: none !important;
}
.slideshow-wrapper .owl-nav button.owl-prev,
.slideshow-wrapper .owl-nav button.owl-next {
  background: rgba(10, 10, 10, .45) !important;
  color: var(--ml-paper) !important;
  border-radius: 0 !important;
  width: 52px; height: 64px;
  transition: background .45s var(--ml-curva);
}
.slideshow-wrapper .owl-nav button:hover {
  background: var(--ml-gold) !important;
  color: var(--ml-ink) !important;
}

/* --- Título y precio ---------------------------------------------------- */
.flexmls-listing-details > .top-info-wrapper { padding-top: clamp(30px, 4vw, 52px); }

.title-and-details-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--ml-gold);
  padding-top: 24px;
}

.flexmls-listing-details h1.property-title {
  font-family: var(--ml-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(2rem, 4.4vw, 3.5rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.018em !important;
  color: var(--ml-ink) !important;
  margin: 0 !important;
}

.flexmls-listing-details .flexmls-price {
  font-family: var(--ml-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.5rem, 2.8vw, 2.35rem) !important;
  letter-spacing: -.01em;
  color: var(--ml-ink) !important;
  white-space: nowrap;
}

/* El tan de fábrica del plugin (#BCAC93) daba 2.2:1 sobre blanco y reprueba
   WCAG. Todo lo que lo usaba pasa a negro. */
.flexmls-listing-details .flexmls-primary-color-font { color: var(--ml-ink) !important; }

.price-and-actions-wrapper { display: flex; align-items: baseline; gap: 18px; }
.actions-wrapper .flexmls_portal_cart_handle {
  color: var(--ml-muted);
  transition: color .45s var(--ml-curva);
}
.actions-wrapper .flexmls_portal_cart_handle:hover { color: var(--ml-gold); }

@media (max-width: 700px) {
  .title-and-details-wrapper { grid-template-columns: 1fr; }
  .price-and-actions-wrapper { justify-content: space-between; }
}

/* --- Botón de contacto: el único azul de la página ---------------------- */
.flexmls-listing-details > .flexmls-actions-wrapper { padding-top: 30px; padding-bottom: 6px; }

.flexmls-listing-details .flexmls-btn-primary,
.flexmls-listing-details .flexmls-primary-color-background {
  background: var(--ml-navy) !important;
  color: #FFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--ml-sans) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .16em;
  padding: 17px 36px !important;
  cursor: pointer;
  transition: background .45s var(--ml-curva), color .45s var(--ml-curva);
}
.flexmls-listing-details .flexmls-btn-primary:hover {
  background: var(--ml-gold) !important;
  color: var(--ml-ink) !important;
}

/* --- Los 59 datos: de lista plana a rejilla editorial ------------------- */
.flexmls-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}

.flexmls-listing-details span.flexmls-detail {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 20px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--ml-line);
}

.flexmls-listing-details .detail-label {
  font-family: var(--ml-sans) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ml-muted) !important;
  line-height: 1.5;
}

.flexmls-listing-details .detail-value {
  font-size: .94rem;
  font-weight: 500;
  text-align: right;
  color: var(--ml-ink);
}

/* La franja de precio y fechas venía en gris #DFDFDF de fábrica. */
.flexmls-listing-details .price-and-dates {
  background: var(--ml-paper) !important;
  border-top: 1px solid var(--ml-gold);
  padding: 20px clamp(16px, 2vw, 26px) !important;
  margin-top: 22px;
}

/* --- Encabezados: una sola voz tipográfica ------------------------------ */
/* La ficha traía SEIS familias conviviendo. Todos los encabezados del bloque
   pasan a la serif; el cuerpo y los rótulos se quedan en Montserrat. */
.flexmls-listing-details h2,
.flexmls-listing-details h3,
.flexmls-listing-details h4 {
  font-family: var(--ml-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: var(--ml-ink) !important;
}
.flexmls-listing-details h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important; }
.flexmls-listing-details .overview-subhead { font-size: 1.35rem !important; }

.flexmls-listing-details h3.detail-section-header,
.flexmls-listing-details .detail-subsection-header {
  font-size: clamp(1.3rem, 2vw, 1.65rem) !important;
  margin: 0 !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid var(--ml-line);
}

/* El filete de oro va como degradado del fondo, NO como pseudo-elemento.
   POR QUÉ IMPORTA: el plugin ya usa `h3.detail-section-header::after` para su
   flecha de desplegar, y la rota 90°. Un `::after` propio caía en ese mismo
   elemento, heredaba la rotación y aparecía como una raya vertical encima del
   texto — y de paso le borraba la flecha al plugin. Con el degradado no se
   toca ningún pseudo-elemento y la flecha sigue siendo suya. */
.flexmls-listing-details h3.detail-section-header {
  background-image: linear-gradient(to right, var(--ml-gold) 0 56px, transparent 56px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}
.flexmls-listing-details .details-section { margin-top: clamp(26px, 3.5vw, 44px); }

/* --- La descripción larga, siempre sobre claro -------------------------- */
.flexmls-supplement-wrapper {
  background: var(--ml-paper);
  border-left: 2px solid var(--ml-gold);
  padding: clamp(24px, 3.5vw, 40px);
  margin-top: clamp(26px, 3.5vw, 40px);
}
.flexmls-listing-details .flexmls-supplement {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #2A2A2A;
  margin: 0;
}
.flexmls-listing-details .flexmls-supplement strong {
  display: block;
  font-family: var(--ml-sans);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ml-muted);
  margin-bottom: 12px;
}

/* --- Letra chica: presente, pero que no compita ------------------------- */
.flexmls-listing-details > .compliance-section,
.flexmls-listing-details > .disclosure-section,
.flexmls-listing-details > .source-mls-badge {
  font-size: .74rem;
  line-height: 1.6;
  color: var(--ml-muted);
  margin-top: 26px;
}

/* --- El botón verde flotante de WhatsApp, fuera SOLO de las fichas ------
   Es del plugin QLWApp, no de esta plantilla: `position:fixed` centrado a la
   derecha con `z-index:9999999`, así que va montado sobre el contenido a
   cualquier altura de scroll. En un teléfono de 375 px caía encima del `<h1>`
   —en la MLS 25-4216 escondía la palabra "Punta"— y más abajo tapaba el valor
   de "List date".

   Se quita solo aquí porque la ficha ya tiene DOS entradas propias a WhatsApp
   —el botón negro "Message me on WhatsApp" y el círculo de la barra de
   compartir—, las dos dentro del flujo y en la paleta. El flotante era la
   tercera, y la única que tapaba texto.

   El gancho es `body.flexmls_connect__listing_details_page`, que el plugin IDX
   pone únicamente en las páginas de propiedad: en la portada, el buscador y
   contacto el botón sigue igual que hoy.

   Revertir = borrar este bloque. */
body.flexmls_connect__listing_details_page .qlwapp__container {
  display: none !important;
}