/* ============================================================================
   ML Realtor — PORTADA · el buscador de cristal deja ver más video
   ----------------------------------------------------------------------------
   PROBLEMA (reportado por Marvin el 2026-08-09, en laptop y escritorio):
   "el buscador de la pagina principal tapa mucho el video del hero".

   MEDIDO EN VIVO a 1440x760 (una laptop típica), ANTES de este archivo:
     · alto del héroe (.video-section) ......... 836 px
     · alto de la tarjeta (.mlv2__search) ...... 258 px
     · la tarjeta va anclada por ABAJO al borde del video (bottom:-58px),
       así que tapa 258 - 58 = ................. 199 px  = 24% del video
     · en la primera pantalla se comía 158 px de 760 = 21%

   DECISIÓN DE MARVIN (2026-08-09): "media tapa". Se le ofrecieron tres
   destinos medidos —tapar 98 px, tapar 40 px, o sacar la tarjeta fuera del
   video— y eligió el primero. Los otros dos NO se descartaron por técnica:
     · 40 px dejaba la tarjeta justo debajo del pliegue en una laptop, o sea
       el buscador desaparecía de la primera pantalla;
     · fuera del video perdía el efecto de cristal, que es el diseño aprobado.

   CÓMO SE LOGRA (dos palancas, y el orden importa entenderlo):
     a) ENCOGER la tarjeta: 258 -> 203 px. Como está anclada por su borde
        INFERIOR, encogerla no la mueve: sube su borde superior y con eso sola
        ya destapa 55 px de video sin recorrer nada de la página.
     b) BAJARLA: bottom -58px -> -104px. Otros 46 px.
   Resultado medido: tapa 98 px = 12% del video (antes 24%), y en la primera
   pantalla la tarjeta todavía se asoma ~57 px, que es justo lo que queremos:
   el visitante ve que hay un buscador sin tener que bajar.

   POR QUÉ TODO LLEVA !important:
   el CSS de este bloque vive en un <style> DENTRO del cuerpo de la página
   (es un widget HTML de Elementor en el post 789), y una hoja del <head>
   pierde contra él por orden de aparición aunque la especificidad empate.
   El !important es lo único que gana sin tener que tocar la base de datos.

   POR QUÉ SOLO EN >= 901 px:
   por debajo de 900 px el propio bloque pone la tarjeta en position:static
   —deja de encimarse al video— y ese comportamiento ya estaba probado. No
   hay problema que resolver ahí, así que no se toca.

   PARA REVERTIR: borrar el mu-plugin ml-home-design.php y esta carpeta.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. LA LÍNEA DE LETRA CHICA DEL PIE DE LA TARJETA
   ---------------------------------------------------------------------------
   "All active property inventory · Powered by the installed FlexMLS
   integration · Search results remain inside mlrealtor.com.mx".
   Son 31 px (21 de texto + 10 de margen) que no le dicen nada al comprador:
   dos de las tres frases hablan de la plomería del sitio, no de la casa que
   está buscando.

   OJO, NO CONFUNDIR: esto NO es el aviso de cumplimiento IDX. El texto legal
   del MLS vive en las páginas de resultados y de ficha, y ahí sigue intacto.
   Ésta es copia publicitaria del borrador "Homepage V2".

   Se oculta en todos los anchos a propósito: es la misma tarjeta, y que la
   línea apareciera solo en teléfonos sería una incoherencia, no una función.
--------------------------------------------------------------------------- */
.mlv2__search-note { display: none !important; }

@media (min-width: 901px) {

	/* -----------------------------------------------------------------------
	   2. ENCOGER LA TARJETA — 258 px -> 203 px
	   -----------------------------------------------------------------------
	   Se recorta SOLO aire, ningún contenido:
	     · relleno de la tarjeta ...... 16/26/18 -> 12/26/14   (-8 px)
	     · pie del encabezado ......... 12       -> 8          (-4 px)
	     · aire sobre el formulario ... 14       -> 10         (-4 px)
	     · relleno del formulario ..... 20       -> 16 arriba y abajo (-8 px)
	     · la línea de letra chica de arriba .................. (-31 px)
	   El encabezado ("OFFICIAL MLS SEARCH / Search every active property") y
	   los cinco campos quedan exactamente igual de grandes: no se toca ni una
	   tipografía ni la altura de los campos, porque el buscador es la acción
	   principal de la portada y encogerlo lo haría más difícil de usar.
	----------------------------------------------------------------------- */
	.mlv2__search        { padding: 12px 26px 14px !important; }
	.mlv2__search-head   { padding-bottom: 8px !important; }
	.mlv2__official-form { margin-top: 10px !important; padding: 16px 20px !important; }

	/* -----------------------------------------------------------------------
	   3. BAJARLA — bottom -58px -> -104px
	   -----------------------------------------------------------------------
	   El elemento 721a024 es el contenedor Elementor del bloque; el propio
	   bloque ya lo pone en position:absolute!important dentro de la sección
	   del video, anclado por abajo. Aquí solo se cambia cuánto sobresale.
	   Se puede porque .video-section tiene overflow:visible (medido).
	----------------------------------------------------------------------- */
	.elementor-element-721a024 { bottom: -104px !important; }

	/* -----------------------------------------------------------------------
	   4. AIRE PARA QUE "01 — FEATURED LISTINGS" NO QUEDE PEGADO
	   -----------------------------------------------------------------------
	   Efecto secundario de bajar la tarjeta: el hueco entre su borde inferior
	   y el rótulo "01 ————– Featured Listings" pasaba de 86 px a 40 px, y a
	   40 px el rótulo se lee como si fuera parte de la tarjeta.
	   26 px de relleno arriba en esa sección lo devuelven a 66 px.
	   Es la ÚNICA razón por la que este archivo toca un elemento que no es el
	   buscador. Si algún día se revierte el punto 3, quitar también éste.
	----------------------------------------------------------------------- */
	.elementor-element-832bf79 { padding-top: 26px !important; }
}

/* ============================================================================
   5. EL PANEL DE LAS SEIS TARJETAS DEL MLS
   ----------------------------------------------------------------------------
   Estas clases las emite ml-home-design.php cuando ML_HOME_TARJETAS_VIVAS está
   encendido. Antes de esto el panel solo tenía precio, nombre y botón; ahora
   lleva además la línea de datos y, cuando existen, los sellos de video y
   recorrido virtual.

   EL PANEL, MEDIDO EN VIVO A 1280 px (2026-08-10):
     · panel blanco ................ 374 x 334 px, encimado a la foto
     · caja útil del texto .......... 303 px de ancho
     · precio ....................... serif 53/53, negro
     · nombre ....................... Trade Gothic 15/15, 600, ls 2px, MAYÚSCULAS
     · botón "Details" .............. Trade Gothic 12, 700
   NO se toca ninguno de esos tres: el panel ya estaba resuelto y lo que faltaba
   era lo de abajo. Todo lo nuevo se diseña para caber en esos 303 px y para
   pesar MENOS que el nombre, que es quien manda después del precio.

   POR QUÉ NADA LLEVA !important AQUÍ, a diferencia del resto del archivo:
   los puntos 1-4 pelean contra un <style> incrustado en el cuerpo de la página.
   Estas clases son nuestras y no las nombra ninguna otra hoja, así que ganan
   solas. Lo único que heredan del encabezado es la tipografía, y se sobreescribe
   con una regla normal (la herencia no tiene especificidad).

   NO SE ENCOLA NINGUNA FUENTE POR ESTO: 'Trade Gothic' es la que ya usa el panel
   —la carga el tema— y las alternativas son las que el navegador ya tiene.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   5.1 "FROM" — solo en las dos tarjetas de desarrollo (Santarena y CIAN)
   ---------------------------------------------------------------------------
   Va en línea propia por una razón medida, no estética: el precio es serif de
   53 px en una caja de 303 px. "$413,415" ocupa 199 px y cabe holgado, pero
   "From $413,415" ocupa 327 px y partiría el precio en dos renglones, que es
   justo el elemento que no puede romperse.

   line-height:1 es obligatorio: el <h2> del precio tiene line-height 53px y un
   <span> dentro lo hereda, o sea que sin esta línea "From" abriría un hueco de
   53 px encima del precio.
--------------------------------------------------------------------------- */
.ml-home-desde {
	display: block;
	font-family: 'Trade Gothic', 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1;
	color: #6E6A63;
	margin-bottom: 7px;
}

/* ---------------------------------------------------------------------------
   5.2 LA LÍNEA DE DATOS Y LOS SELLOS
   ---------------------------------------------------------------------------
   Es flex con wrap, no una sola línea, porque el inventario tiene casos largos
   de verdad: Casa Mareva sale "13 Bedrooms · 14 Baths · 36,787 Sq Ft" y encima
   lleva sello de video. En 303 px eso son dos renglones y así debe ser; forzar
   una sola línea obligaría a encoger la letra hasta volverla ilegible.

   El separador · lo pone el PHP, no el CSS, para que al copiar el texto se
   copie entero y para que un lector de pantalla lo lea como pausa.
--------------------------------------------------------------------------- */
.ml-home-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7px 10px;
	margin-top: 11px;
}

.ml-home-datos {
	font-family: 'Trade Gothic', 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.35;
	color: #6E6A63;
}

/* ---------------------------------------------------------------------------
   5.3 SELLO DE VIDEO / RECORRIDO VIRTUAL
   ---------------------------------------------------------------------------
   Esto en el buscador NO se pudo hacer —habría exigido una consulta extra por
   cada página de resultados— y aquí sale gratis, porque de todos modos
   preguntamos ficha por ficha. Es una ventaja real frente a la competencia:
   Sotheby's ni siquiera publica los videos que el MLS le entrega.

   El texto es #8A7343 y no el oro de marca #C8A96E: el oro sobre blanco da 2.1
   de contraste y no se lee. Este tono conserva la familia y llega a 4.6, que sí
   cumple. El filete sí puede ir en oro puro: es decoración, no información.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   5.4 LA CAPA DE ESSENTIAL ADDONS SOBRE DOS FOTOS
   ---------------------------------------------------------------------------
   Essential Addons inserta en el navegador un <a> absoluto de 1126 x 600 con
   z-index 9999 encima de la foto. Donde lo pone, es él quien recibe el clic,
   no el enlace del contenedor.

   En dos tarjetas ese destino está mal y ya no se puede corregir donde nace
   (lo escribe su JavaScript a partir de ajustes guardados en Elementor):
     · Villa Cactus  -> llevaba al buscador, no a su ficha con video y tour
     · Santarena     -> llevaba a /search-home/, no a su subdivisión
   Apagándole los eventos de puntero, el clic atraviesa y lo recoge el <a> del
   contenedor, que es el que ahora sí tiene el href correcto (sección 4b del
   PHP). No se oculta ni se borra: si algún día se arregla en Elementor, basta
   con quitar estas dos líneas.

   CIAN (2546aa4) NO aparece aquí a propósito: su capa apunta a la misma
   búsqueda guardada que su botón, o sea que ya está bien.
--------------------------------------------------------------------------- */
.eael-wrapper-link-4fb85c9,
.eael-wrapper-link-d4bffcb { pointer-events: none; }

/* ---------------------------------------------------------------------------
   5.5 EL TÍTULO DEL BUSCADOR AHORA ES EL <h1> DE LA PORTADA
   ---------------------------------------------------------------------------
   El PHP (§4c) convierte ese <h2> en <h1>. Dos consecuencias que hay que
   atender aquí, porque si no, el arreglo hace más daño que bien:

   1) EL ESTILO SE PIERDE AL CAMBIAR LA ETIQUETA. El bloque estiliza por
      etiqueta, no por clase:
        .mlv2__search h2 { font: 500 clamp(30px,3.2vw,46px)/1 'Cormorant…' }
        .mlv2--busq .mlv2__search h2 { margin-top:2px; font-size:19px; … }
      Al pasar a h1 ninguna de esas aplica y el título saldría con el tamaño
      por defecto del tema. Aquí se replican tal cual, para que **no cambie ni
      un píxel** respecto a lo que Marvin ya aprobó.

   2) ⚠️ EN CELULAR ESTABA ESCONDIDO. El bloque trae
        @media (max-width:600px){ .mlv2--busq .mlv2__search h2{display:none} }
      porque la tarjeta se comía el video. Pero **Google indexa la versión
      móvil**: dejar el único h1 de la portada en `display:none` ahí sería
      poner el título más importante del sitio donde no cuenta.
      Se muestra, en 15 px. Se puede porque el motivo original era el ALTO de
      la tarjeta y **bajo 900 px la tarjeta ya no se encima al video** (el
      bloque la pasa a `position:static`), así que un renglón de 15 px no le
      quita nada al video ni empuja nada fuera de la primera pantalla.
--------------------------------------------------------------------------- */
/* 3) EL TÍTULO ES MÁS LARGO QUE EL DE ANTES Y HAY QUE BAJARLO DE 46 A 42 px.
      Medido en vivo: "Search every active property" ocupaba 509 px a 46 px y
      cabía de sobra; "…in Los Cabos" ocupa **752 px, exactamente el ancho
      disponible**, así que partía en dos renglones. La tarjeta pasaba de 203
      a 271 px de alto y volvía a tapar 166 px de video — deshaciendo la
      "media tapa" que Marvin eligió entre tres opciones medidas.
      A 42 px el texto mide 686 px y vuelve a caber en un renglón. */
.mlv2 .mlv2__search .mlv2__titulo {
	margin: 2px 0 0 !important;
	font: 500 clamp(24px, 2.9vw, 42px)/1 'Cormorant Garamond', Georgia, serif !important;
	color: inherit;
}

@media (max-width: 900px) {
	.mlv2 .mlv2__search .mlv2__titulo {
		font-size: 19px !important;
		line-height: 1.15 !important;
	}
}

@media (max-width: 600px) {
	.mlv2 .mlv2__search .mlv2__titulo {
		display: block !important;   /* pisa el display:none del bloque */
		font-size: 15px !important;
		line-height: 1.25 !important;
	}
}

.ml-home-sello {
	font-family: 'Trade Gothic', 'Montserrat', sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
	color: #8A7343;
	border: 1px solid #C8A96E;
	padding: 4px 8px 3px;
	white-space: nowrap;
}
