/*
 * Merak Propiedades — hoja de estilos.
 *
 * v1.5.0 — SEGUNDO pedido de cambio total de color, esta vez con una
 * dirección concreta elegida por el cliente de antemano (para no repetir el
 * error de v1.3.0, ver más abajo): *"podrias cambiar los colores de toda la
 * pagina, siento que no atrae a la vista, quiero que se vea innovadora y
 * tecnologica con animaciones en el fondo, puedes cambiar los colores pero
 * tenga referencia al nicho"* → se le pidió elegir una dirección concreta
 * ANTES de tocar nada, y eligió textualmente: "Racing / performance — Negro
 * carbón + rojo racing + plateado tipo cromo, con destellos animados tipo
 * líneas de velocidad".
 *
 * LO MÁS IMPORTANTE (para quien lea esto en el futuro): esto sigue siendo
 * un tema OSCURO — se re-tiñe el acento (celeste/azul → rojo racing +
 * cromo) sobre la MISMA base negro-carbón oscura, el fondo (--bg) NO se
 * vuelve blanco. v1.3.0 sí intentó eso (paleta blanco/azul/celeste) y el
 * cliente lo rechazó de forma tajante ("la pagina quedo malisima"),
 * revertido en v1.3.1. No se repite ese error acá.
 *
 * Cambios de este pase (detalle completo en SUMMARY.md, sección v1.5.0):
 *   - ":root": --bg pasa de #06070b (negro con tinte azul) a #0a0a0c (negro
 *     carbón neutro/tibio). Variables nuevas --oro/--oro-2/--oro-dim
 *     (acento primario, reemplaza el rol de --blue/--blue-2/--blue-dim) y
 *     --crema/--crema-2 (acento secundario neutro, plateado). --border-hover
 *     pasa de basarse en el azul viejo a basarse en --oro. --text/-dim/-mute
 *     pasan de grises con tinte azul a grises neutros/tibios (carbón+cromo).
 *     --green/--green-dim/--whatsapp NO se tocan (colores funcionales de
 *     estado, no de marca — mismo criterio ya aplicado en cada pase de color
 *     anterior de este archivo).
 *   - TODO uso de var(--blue)/var(--blue-2)/var(--blue-dim) en este archivo
 *     se repuntó a var(--oro...) o var(--crema...) según el rol real de
 *     cada uso (CTA primario/foco/estado activo → rojo; acento secundario/
 *     decorativo/hover suave → cromo) — no es un find-and-replace literal.
 *   - Categorías de propiedad (merak_prop_color_categoria(), en
 *     category-tiles.php): paleta "arcoíris" de 10 tonos pastel distintos
 *     consolidada a 3 acentos (rojo/cromo/ámbar) para que la grilla se lea
 *     como "un solo producto con marca", no un muestrario de colores.
 *   - Nueva capa decorativa ".merak-prop-lineas-velocidad" (destellos
 *     diagonales tipo "líneas de velocidad", rojo→cromo, ver
 *     merak_prop_fondo_lineas_velocidad() en helpers.php) — se suma al fondo
 *     "aurora" ya existente (recoloreado acá también) en los mismos lugares
 *     donde ya aparecía aurora, para que el pedido de "animaciones en el
 *     fondo" se sienta más presente en todo el sitio.
 *   - ".merak-prop-btn-peligro" (rojo de "peligro"/eliminar) se oscurece y
 *     diferencia del nuevo --oro primario (antes casi idéntico a lo que
 *     hoy es el CTA principal — un botón de "eliminar cuenta" no debería
 *     verse igual que "Publicar mi propiedad").
 *
 * v1.4.0 — pedido de 6 puntos del cliente sobre el sitio real ya en tema
 * oscuro (v1.3.2, la versión que el cliente SÍ aprobó — ver el rechazo
 * explícito de la paleta clara de v1.3.0 más abajo, todavía vigente: NO se
 * repite ese error). Los cambios de color/fondo de este pase son:
 *   - ".section-light" (nueva, verbatim de homepage-actual.html, la
 *     portada real del cliente): sobrescribe LOCALMENTE las variables de
 *     superficie/texto/borde para pintar una sección puntual en blanco,
 *     sin tocar el ":root" oscuro general — el pedido fue "secciones
 *     blancas" (plural, alternadas), no "la página en blanco" (eso ya se
 *     probó en v1.3.0 y el cliente lo rechazó: "la pagina quedo malisima").
 *   - ".merak-prop-tile-categoria-icono/-insignia/-titulo/-subtitulo/-boton"
 *     agrandadas y recentradas (pedido: la sección "Explorá por categoría"
 *     se veía con mucho espacio muerto y texto chico).
 *   - Botones ".merak-prop-btn*": auditoría de contraste + endurecidos con
 *     "!important" en color/background (mismo tipo de arreglo preventivo
 *     que ya hizo falta en v1.1.0 para el fondo y en v1.3.2 para el logo:
 *     un selector de una sola clase puede perder en cascada contra un
 *     estilo por defecto del tema activo si ese estilo se encola después).
 * Ver SUMMARY.md, sección v1.4.0, para el detalle completo de cada punto
 * (incluye la escena/orden de secciones claras elegidas y el resultado real
 * de la auditoría de botones).
 *
 * v1.3.1 — REVERSIÓN DE PALETA: el cliente probó en vivo el pivote a
 * paleta clara de v1.3.0 (blanco/azul oscuro/celeste) y lo rechazó
 * textualmente ("la pagina quedo malisima vuelve a establecer la pagina
 * como estaba el plugin 1.2.0"). Se restauran acá los valores EXACTOS de
 * v1.2.0 (tema oscuro casi negro: --bg:#06070b, superficies translúcidas
 * blancas, acento --blue medio-brillante #3a85ff) — ver el bloque ":root"
 * de abajo. La variable --azul-oscuro (introducida en v1.3.0) se elimina
 * por completo: ya no queda ningún uso suyo en este archivo.
 *
 * IMPORTANTE — esta reversión es SOLO de color/paleta. Tres cosas que se
 * hicieron en la misma ronda de v1.3.0 NO tienen que ver con el color y se
 * mantienen tal cual (pedidas por el cliente por separado, ya confirmadas
 * como arreglos reales):
 *   1. La grilla "Explorá por categoría" pareja (3 columnas × 2 filas,
 *      ver ".merak-prop-grid-categorias-bento"/".merak-prop-tile-categoria"
 *      más abajo) — arregla el reclamo real de "Sedán"/"Pickup"
 *      desproporcionadamente grandes, nada que ver con blanco/azul/celeste.
 *   2. El estado vacío del panel con más contenido (ver
 *      ".merak-prop-resumen-vacio" más abajo) — mejora de estructura/copy,
 *      recoloreada acá para el tema oscuro restaurado (usa únicamente
 *      variables de :root, ningún color claro hardcodeado).
 *   3. El arreglo de detección de shortcodes de Elementor (en
 *      merak-propiculos.php, no en este archivo) que hacía que "ingresar"/
 *      "panel" cargaran sin CSS/JS — no toca este archivo pero se
 *      menciona para que quede claro que sigue vigente.
 * El cambio de logo (imagen real en vez del emoji 🚗, ver navbar.php/
 * auth.php) tampoco se toca en esta reversión — queda pendiente de un
 * archivo de logo real que el cliente va a enviar por separado.
 */

:root{
	--bg:#0d0d0b;
	--surface:rgba(255,255,255,.045);
	--surface-hover:rgba(255,255,255,.075);
	--border:rgba(255,255,255,.1);
	--border-hover:rgba(201,138,44,.55);
	/* Dorado Nidoo — acento PRIMARIO (CTA principal, foco de campos, estados
	   "activo", etc. — mismo rol que --rojo tenía en Merak Vehículos). */
	--oro:#c98a2c;
	--oro-2:#e8b34f;
	--oro-dim:rgba(201,138,44,.15);
	/* Crema cálido — acento SECUNDARIO (resalte/hover suave neutro, sin
	   necesidad de ser "el" color de marca — mismo rol que --cromo tenía en
	   Merak Vehículos). */
	--crema:#cbbfa0;
	--crema-2:#efe8d8;
	--green:#22e08a;
	--green-dim:rgba(34,224,138,.15);
	--text:#f5f6f8;
	--text-dim:#a7abb3;
	--text-mute:#6b6f78;
	--whatsapp:#25D366;
	--radius:16px;
	--shadow-soft:0 24px 60px rgba(0,0,0,.5);
	--mono:'JetBrains Mono', ui-monospace, monospace;
}

/* ------------------------------------------------------------------ */
/* Fondo oscuro forzado de página completa (v1.1.0)                    */
/* ------------------------------------------------------------------ */
/*
 * BUG CONFIRMADO por el cliente en /propiedades/: nuestra barra superior
 * (navbar.php) se ve con el fondo oscuro correcto, pero TODO lo que queda
 * debajo se veía sobre un fondo BLANCO — el tema de bloques activo del
 * sitio (Twenty Twenty-Five) pinta su propio fondo claro en "body",
 * ".wp-site-blocks", "main", ".entry-content" (los envoltorios que WordPress
 * arma automáticamente alrededor del contenido de cualquier página), y
 * nuestro <div class="merak-prop"> (que sí trae el fondo oscuro) no cubre
 * ese espacio de fondo — solo pinta su propio contenido.
 *
 * v1.3.1 — el pivote a paleta clara de v1.3.0 quedó revertido (ver el
 * comentario de arriba); "var(--bg)" vuelve a valer casi negro, así que
 * este mismo bloque de selectores (sin cambios de selectores) vuelve a
 * forzar el fondo OSCURO consistente, igual que hasta v1.2.0.
 *
 * merak.css SOLO se encola en las páginas de este plugin (ver
 * merak_prop_debe_cargar_assets() en merak-propiculos.php: fichas de
 * anunciante/propiedad, las páginas fijas de "vendemos tu propiedad"/
 * "importados", y páginas que traigan alguno de nuestros shortcodes) — así
 * que es seguro apuntar acá a selectores tan amplios como "body" o "html":
 * este archivo nunca se carga en el resto del sitio, por lo que estas
 * reglas jamás pueden "filtrarse" a una página ajena al plugin.
 *
 * Se listan selectores combinados (mayor especificidad real) en vez de
 * apoyarse solo en !important, y se cubren defensivamente los nombres de
 * envoltorio más comunes de temas de bloques (no solo los de Twenty
 * Twenty-Five) por si el sitio cambia de tema en el futuro.
 */
html,
body,
body.wp-site-blocks,
.wp-site-blocks,
body .wp-site-blocks,
main,
body main,
main.wp-block-group,
#page,
body #page,
#content,
body #content,
.site-content,
body .site-content,
.entry-content,
body .entry-content,
.wp-block-post-content,
body .wp-block-post-content {
	background-color: var(--bg) !important;
	background-image: none !important;
}

/* ------------------------------------------------------------------ */
/* v1.4.0 — Secciones ".section-light" (alternancia blanco/oscuro)      */
/* ------------------------------------------------------------------ */
/*
 * Pedido textual del cliente: "quiero que en la pagina el fondo tenga
 * secciones blancas" — en plural, alternadas, exactamente como ya alterna
 * su propia portada real (homepage-actual.html) al bajar por la página
 * (héroe oscuro → sección clara → carrusel oscuro → ...). Los valores de
 * abajo son un calco EXACTO de la clase ".section-light" que ya usa esa
 * portada — misma marca, mismos números, no una interpretación nueva.
 *
 * Como TODOS los componentes de este plugin ya leen exclusivamente las
 * variables de :root (nunca colores fijos — ver la auditoría de v1.1.0/
 * v1.3.0/v1.3.1 documentada más arriba en este archivo y en SUMMARY.md),
 * alcanza con sobrescribir esas variables DENTRO de ".section-light" para
 * que cualquier tarjeta, texto, botón outline, etc. que caiga adentro se
 * vea correcto en blanco automáticamente — sin tener que recolorear cada
 * selector uno por uno ni tocar el ":root" oscuro general (eso es
 * justamente lo que se probó en v1.3.0 y el cliente rechazó).
 */
.section-light{
	--surface:#ffffff;
	--surface-hover:#f5f7fb;
	--border:#e5e8f0;
	--border-hover:var(--oro);
	--text:#0a0c10;
	--text-dim:#565d6b;
	--text-mute:#888f9c;
	--shadow-soft:0 20px 50px rgba(20,30,50,.08);
	background:#ffffff;
	color:var(--text);
}
/* Envoltorio con el mismo "lenguaje de tarjeta" (radio + padding) que el
   resto del plugin, para que una sección clara se lea como una franja
   blanca intencional dentro del ancho fijo de ".merak-prop-contenedor", no
   como un simple cambio de color de texto plano sin ningún límite visual. */
.merak-prop-seccion-clara { border-radius: var(--radius); padding: 36px 28px; margin: 32px 0; }
@media (max-width: 600px) { .merak-prop-seccion-clara { padding: 26px 18px; } }

/*
 * v1.4.0 — contraste dentro de una sección clara: --tile-acento (el tono
 * CLARO del par por categoría, ver merak_prop_color_categoria() en
 * category-tiles.php) no cumple contraste legible como texto/ícono grande
 * sobre blanco para varias categorías (ej. Motocicleta #ffe07d) — mismo
 * hallazgo que ya hizo la auditoría de v1.3.0 al pivotar a paleta clara
 * (documentado en SUMMARY.md). En vez de tocar el color por defecto (que
 * sigue siendo correcto sobre el fondo oscuro del resto del plugin), se
 * usa --tile-acento-2 (el tono OSCURO del mismo par, ya expuesto como
 * variable CSS por cada tile) para el ícono/insignia, y var(--oro) fijo
 * para el enlace "Explorar" (--oro, a diferencia de --crema, sí cumple
 * contraste legible como texto/ícono sobre blanco) — acotado con el
 * selector ".section-light", nunca global.
 */
.section-light .merak-prop-tile-categoria-icono,
.section-light .merak-prop-tile-categoria-insignia { color: var(--tile-acento-2, var(--oro)); }
.section-light .merak-prop-tile-categoria-boton { color: var(--oro); }
/*
 * v1.5.3 — BUG CONFIRMADO por el cliente ("mejora esta seccion, que las
 * letras se vean"), captura de la grilla real mostrando "Sedán", "SUV",
 * "Pickup", etc. casi invisibles (gris muy claro sobre la tarjeta blanca).
 * El título de cada tile (".merak-prop-tile-categoria-titulo") nunca declaró
 * su propio "color" — dependía por completo de heredar el "color: var(--text)"
 * declarado en el ancestro ".merak-prop-tile-categoria". Esta auditoría de
 * v1.4.0 (bloque de comentario de arriba) sí declaró explícitamente el color
 * de ícono/insignia/botón dentro de ".section-light", pero pasó por alto el
 * título — quedó como el único texto de la tarjeta sin una regla de color
 * PROPIA. Se cierra ese hueco explícitamente, en vez de seguir confiando en
 * la herencia, para que quede tan a prueba de fallos como el resto.
 */
.section-light .merak-prop-tile-categoria-titulo { color: var(--text); }

/*
 * v1.4.0 — fondo "aurora" (merak_prop_fondo_aurora(), ver helpers.php)
 * dentro de una sección clara: por defecto ".merak-prop-aurora" pinta su
 * propio fondo oscuro (var(--bg), reintroducido en la reversión de v1.3.1
 * para poder superponerse a los 3 "hero" navy del plugin) — dentro de una
 * sección blanca ese mismo fondo se vería como una caja oscura rota encima
 * del blanco. Se vuelve transparente y se atenúa un poco la opacidad
 * conjunta de sus 3 manchas (pensadas originalmente para destacar sobre
 * fondo oscuro) para que se lean como un toque de color sutil sobre
 * blanco, nunca "sucio" ni saturado — ver el punto 6 del pedido del
 * cliente ("animaciones de luces o movimientos en el fondo").
 */
.section-light .merak-prop-aurora { background: transparent; opacity: .55; }

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */
.merak-prop {
	--merak-prop-radio: var(--radius);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--text);
	box-sizing: border-box;
	position: relative;
}
.merak-prop *, .merak-prop *::before, .merak-prop *::after { box-sizing: inherit; }
@media (prefers-reduced-motion: reduce) {
	.merak-prop, .merak-prop * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.merak-prop h1, .merak-prop h2, .merak-prop h3 {
	font-family: 'Poppins', 'Inter', sans-serif;
	color: var(--text);
	line-height: 1.25;
	font-weight: 700;
}
.merak-prop h2 { position: relative; padding-bottom: 10px; margin-top: 40px; font-size: 24px; }
.merak-prop h2::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 48px; height: 3px;
	border-radius: 3px;
	/* v1.5.0 — antes mezclaba var(--blue) con var(--green); --green es un
	   color FUNCIONAL de estado (publicado/éxito), no de marca, así que se
	   saca de esta barrita puramente decorativa (--green en sí no se toca en
	   ningún otro lado). Rojo→cromo, los dos acentos nuevos de marca. */
	background: linear-gradient(90deg, var(--oro), var(--crema));
}
/* v1.5.0 — enlaces de texto: cromo (resalte metálico neutro, buen contraste
   sobre el fondo carbón) en reposo, rojo racing al pasar el mouse — mismo
   "look" que antes (celeste con hover azul) pero con la nueva paleta, y el
   hover en rojo le da un toque más "racing" a cualquier enlace del plugin. */
.merak-prop a { color: var(--crema-2); text-decoration: none; transition: color 0.15s ease; }
.merak-prop a:hover { color: var(--oro-2); text-decoration: underline; }
.merak-prop-contenedor { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }

/* Números (precios, estadísticas, kilometraje) en monoespaciada. */
.merak-prop-precio,
.merak-prop-ficha-precio-destacado,
.merak-prop-ficha-stat-numero { font-family: var(--mono); }

/* ------------------------------------------------------------------ */
/* Fondo "aurora" decorativo                                            */
/* ------------------------------------------------------------------ */
/* v1.5.0 — las 3 manchas se re-tiñen a la paleta racing (antes celeste/
   verde/azul): rojo + cromo, más una tercera en rojo más tenue en vez de
   verde (--green NO se toca como variable — se saca del uso puramente
   decorativo de esta mancha, mismo criterio que en ".merak-prop h2::after"
   más arriba, para que ninguna mancha de fondo se lea por accidente como
   una señal de "éxito/publicado"). */
.merak-prop-aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; border-radius: inherit; background: var(--bg); }
.merak-prop-aurora span { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(60px); }
.merak-prop-aurora span:nth-child(1) { background: radial-gradient(circle, var(--crema-2), transparent 72%); top: -18%; left: -10%; opacity: .4; }
.merak-prop-aurora span:nth-child(2) { background: radial-gradient(circle, var(--oro), transparent 72%); bottom: -22%; right: -8%; opacity: .3; width: 300px; height: 300px; }
.merak-prop-aurora span:nth-child(3) { background: radial-gradient(circle, var(--oro-2), transparent 72%); top: 25%; right: 15%; width: 190px; height: 190px; opacity: .28; }
@media (prefers-reduced-motion: no-preference) {
	.merak-prop-aurora span { animation: merak-prop-flotar 16s ease-in-out infinite; }
	.merak-prop-aurora span:nth-child(2) { animation-delay: -4s; animation-duration: 20s; }
	.merak-prop-aurora span:nth-child(3) { animation-delay: -9s; animation-duration: 13s; }
}
@keyframes merak-prop-flotar {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(24px, -18px); }
}

/* ------------------------------------------------------------------ */
/* "Destellos diagonales" — brillos finos tipo motion-blur                */
/* ------------------------------------------------------------------ */
/*
 * Segunda capa decorativa de fondo, en dorado→crema (paleta Nidoo). NO
 * reemplaza a "aurora", se usa JUNTO a ella en los mismos lugares donde ya
 * aparece (ver merak_prop_fondo_lineas_velocidad() en helpers.php y sus
 * puntos de uso) — para que el fondo se sienta más presente/variado en todo
 * el sitio, sin perder el efecto "aurora".
 *
 * Mecanismo: 4 barras diagonales muy finas (gradiente dorado→crema, casi
 * transparentes en los extremos) que entran desde la izquierda, cruzan el
 * contenedor y se desvanecen — como una foto con motion-blur, nunca un
 * parpadeo brusco. Opacidad máxima real ~.5 (ver @keyframes) para que quede
 * de fondo, detrás del contenido (mismo z-index 0 que "aurora") y nunca
 * compita con el texto.
 */
.merak-prop-lineas-velocidad { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; border-radius: inherit; }
.merak-prop-lineas-velocidad span {
	position: absolute;
	left: -30%;
	width: 160%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--oro) 35%, var(--crema-2) 55%, transparent);
	opacity: 0;
	transform: rotate(-10deg) translateX(-60%);
	filter: blur(.5px);
}
.merak-prop-lineas-velocidad span:nth-child(1) { top: 12%; }
.merak-prop-lineas-velocidad span:nth-child(2) { top: 38%; height: 1.5px; }
.merak-prop-lineas-velocidad span:nth-child(3) { top: 64%; }
.merak-prop-lineas-velocidad span:nth-child(4) { top: 86%; height: 1.5px; }
/* Dentro de una sección clara (".section-light") el extremo --crema-2 (casi
   blanco) se volvería invisible sobre el fondo blanco — mismo tipo de
   ajuste ya aplicado a ".merak-prop-aurora" dentro de ".section-light" más
   arriba en este archivo. Se usa un tono crema más oscuro en su lugar. */
.section-light .merak-prop-lineas-velocidad span { background: linear-gradient(90deg, transparent, var(--oro) 40%, #9a8f72 62%, transparent); }
@media (prefers-reduced-motion: no-preference) {
	.merak-prop-lineas-velocidad span { animation: merak-prop-destello 6.5s ease-in-out infinite; }
	.merak-prop-lineas-velocidad span:nth-child(2) { animation-delay: -1.6s; animation-duration: 7.5s; }
	.merak-prop-lineas-velocidad span:nth-child(3) { animation-delay: -3.3s; animation-duration: 5.8s; }
	.merak-prop-lineas-velocidad span:nth-child(4) { animation-delay: -4.9s; animation-duration: 7s; }
}
@keyframes merak-prop-destello {
	0% { transform: rotate(-10deg) translateX(-60%); opacity: 0; }
	8% { opacity: .5; }
	45% { opacity: .32; }
	55% { opacity: 0; }
	100% { transform: rotate(-10deg) translateX(60%); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* Botones                                                              */
/* ------------------------------------------------------------------ */
/*
 * v1.4.0 — auditoría de contraste pedida por el cliente ("las letras sean
 * blancas o negras en los botones"): se revisaron uno por uno TODOS los
 * botones/enlaces con pinta de botón del plugin (variantes de abajo, más
 * ".merak-prop-btn-icono*", el botón "Explorar" de los tiles de categoría, y
 * los botones de "Guardar borrador"/"Guardar cambios" del panel). Resultado
 * de la auditoría: cada variante YA tenía un color de texto correcto para
 * su propio fondo (blanco puro sobre los fondos sólidos de color —
 * blue/whatsapp/peligro—, y var(--text), que en el tema oscuro de este
 * plugin equivale a un blanco roto #f4f6fa, sobre el fondo translúcido
 * claro de ".merak-prop-btn-outline") — no se encontró ningún botón
 * mostrando texto invisible o con un color "de tema" incorrecto en la
 * captura ni en el código.
 *
 * Aun así, este plugin YA tuvo dos bugs reales de exactamente esta misma
 * familia (v1.1.0: el fondo oscuro perdía en cascada contra el tema activo;
 * v1.3.2: el tamaño del logo perdía en cascada contra el reset de imágenes
 * del tema) — ambos por selectores de una sola clase sin "!important"
 * compitiendo contra un estilo del tema que se encola después. Como
 * PRECAUCIÓN (no porque haya evidencia de que esté pasando hoy con los
 * botones) se endurece "color"/"background" de cada variante con
 * "!important", para que ningún estilo de botón por defecto del tema activo
 * (WordPress/Gutenberg definen reglas genéricas para "button"/
 * "input[type=submit]"/".wp-block-button__link") pueda "ganarle" nunca a
 * estas reglas, pase lo que pase con el orden de encolado de hojas de
 * estilo.
 */
.merak-prop-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	text-decoration: none !important;
}
.merak-prop-btn-sm { padding: 8px 16px; font-size: 13px; }
/* v1.5.0 — CTA principal del plugin ("Publicar mi propiedad", "Entrar",
   "Crear cuenta", etc.): se re-tiñe de azul a rojo racing. Se deja el
   NOMBRE de la clase intacto a propósito (".merak-prop-btn-blue" sigue
   siendo la clase que usan TODOS los archivos PHP del plugin) — renombrarla
   obligaría a tocar cada plantilla que la referencia sin ningún beneficio
   real, ver SUMMARY.md v1.5.0. */
.merak-prop-btn-blue { background: var(--oro) !important; color: #fff !important; }
.merak-prop-btn-blue:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(226,19,31,.4); }
.merak-prop-btn-whatsapp { background: var(--whatsapp) !important; color: #fff !important; }
.merak-prop-btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,.35); }
.merak-prop-btn-outline { background: var(--surface) !important; border-color: var(--border); color: var(--text) !important; }
.merak-prop-btn-outline:hover { background: var(--surface-hover) !important; border-color: var(--border-hover); transform: translateY(-2px); }
/* v1.5.0 — con --oro (#e2131f) como nuevo acento primario, el rojo de
   "peligro" que ya existía (#e5473c) quedó visualmente casi idéntico al CTA
   principal — un botón de "Eliminar cuenta" no debería leerse igual que
   "Publicar mi propiedad". Se oscurece/enmudece (más marrón-rojizo, menos
   saturado) y se le agrega un borde sutil para diferenciarlo a simple
   vista, sin depender solo del matiz. */
.merak-prop-btn-peligro { background: #8f2a22 !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; }
.merak-prop-btn-peligro:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(143,42,34,.45); }
.merak-prop-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.merak-prop-btn-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--surface) !important;
	border: 1px solid var(--border);
	color: var(--text) !important;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.merak-prop-btn-icono:hover { transform: translateY(-2px); border-color: var(--border-hover); text-decoration: none; }
.merak-prop-btn-icono-whatsapp { background: var(--whatsapp) !important; border-color: var(--whatsapp); color: #fff !important; }

/* ------------------------------------------------------------------ */
/* Mensajes / avisos                                                    */
/* ------------------------------------------------------------------ */
.merak-prop-mensaje { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; }
.merak-prop-mensaje-exito { background: var(--green-dim); color: #6fe3a6; }
.merak-prop-mensaje-error { background: rgba(229,71,60,.15); color: #ff9a90; }
.merak-prop-aviso { background: var(--surface); border: 1px solid var(--border); padding: 16px; border-radius: var(--radius); }
/* v1.5.0 — aviso informativo (no es un CTA ni un estado de error/éxito):
   se deja en tono cromo neutro en vez de rojo, para no leerse como una
   alerta. */
.merak-prop-aviso-preview { background: rgba(201,204,210,.14); color: var(--crema-2); }
.merak-prop-nota { color: var(--text-dim); font-size: 13px; }
.merak-prop-nota-inline { color: var(--text-mute); font-weight: 400; font-size: 12px; }

/* ------------------------------------------------------------------ */
/* Insignias (badges)                                                   */
/* ------------------------------------------------------------------ */
.merak-prop-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	margin-right: 6px;
}
.merak-prop-badge-negocio { background: rgba(201,204,210,.14); color: var(--crema-2); border-color: var(--border-hover); }
.merak-prop-badge-particular { background: var(--green-dim); color: var(--green); border-color: rgba(34,224,138,.4); }
.merak-prop-badge-operacion { background: var(--oro-dim); color: var(--oro-2); border-color: var(--border-hover); font-weight: 700; }
.merak-prop-estado-publish { background: var(--green-dim); color: var(--green); }
.merak-prop-estado-draft { background: var(--surface); color: var(--text-dim); }
.merak-prop-estado-pending { background: rgba(255,196,0,.15); color: #ffd666; }
.merak-prop-estado-merak_prop_rechazado, .merak-prop-estado-merak_prop_suspendido { background: rgba(229,71,60,.15); color: #ff9a90; }
.merak-prop-badge-disponibilidad-reservado { background: rgba(255,196,0,.15); color: #ffd666; }
.merak-prop-badge-disponibilidad-vendido { background: rgba(229,71,60,.15); color: #ff9a90; }

.merak-prop-cinta-estado {
	position: absolute;
	top: 12px; right: 12px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
}
.merak-prop-cinta-reservado { background: #b58900; }
.merak-prop-cinta-vendido { background: #e5473c; }

/* ------------------------------------------------------------------ */
/* Barra de navegación superior                                         */
/* ------------------------------------------------------------------ */
.merak-prop-navbar-superior {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9999;
	background: rgba(10,10,12,.88);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}
.merak-prop-navbar-espaciador { height: 76px; }
@media (max-width: 900px) { .merak-prop-navbar-espaciador { height: 64px; } }

.merak-prop-navbar-fila-1 {
	max-width: 1200px;
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.merak-prop-navbar-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; max-height: 40px; overflow: visible; }
/* Logotipo propio de Nidoo: un ícono de casa en un badge circular dorado
   (ver includes/navbar.php) en vez de un <img> apuntando a un archivo de
   marca del cliente — todavía no hay uno subido a su dominio. Si más
   adelante Nidoo sube un logo real, basta con reemplazar este badge por un
   <img> (mismo patrón que ya usan los otros dos plugins de la agencia). */
.merak-prop-navbar-logo-icono {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--oro), var(--oro-2));
	color: #1a1406;
	flex-shrink: 0 !important;
}
.merak-prop-navbar-logo-texto {
	font-family: 'Poppins', sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.3px;
	line-height: 1.05;
	color: #fff;
	display: flex;
	flex-direction: column;
}
/* "Propiedades" en crema, más chico y en mayúsculas — mismo patrón de
   logotipo apilado que usaban los otros dos plugins de la agencia. */
.merak-prop-navbar-logo-texto-sub { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--crema-2); }

.merak-prop-navbar-buscar {
	flex: 1;
	display: flex;
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0 6px 0 16px;
	max-width: 420px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.merak-prop-navbar-buscar:focus-within { border-color: var(--border-hover); background: var(--surface-hover); box-shadow: 0 0 0 3px var(--oro-dim); }
.merak-prop-navbar-buscar input[type=search] { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; padding: 11px 0; color: var(--text); font-family: inherit; }
.merak-prop-navbar-buscar input::placeholder { color: var(--text-mute); }
.merak-prop-navbar-buscar button { border: none; background: var(--oro); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }

.merak-prop-navbar-acciones { display: flex; align-items: center; gap: 18px; flex-shrink: 0; margin-left: auto; }
.merak-prop-navbar-enlace { color: var(--text-dim); font-weight: 600; font-size: 14px; }
.merak-prop-navbar-enlace:hover { color: var(--crema-2) !important; }
.merak-prop-navbar-separador { width: 1px; height: 24px; background: var(--border); }
.merak-prop-navbar-menu-movil { display: none; }

.merak-prop-navbar-hamburguesa {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 38px; height: 38px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--surface);
	cursor: pointer;
}
.merak-prop-navbar-hamburguesa span { display: block; width: 18px; height: 2px; background: var(--text); margin: 0 auto; transition: transform 0.2s ease, opacity 0.2s ease; }
@media (max-width: 720px) {
	.merak-prop-navbar-hamburguesa { display: flex; }
	.merak-prop-navbar-acciones > *:not(.merak-prop-navbar-hamburguesa) { display: none; }
	.merak-prop-navbar-menu-movil {
		display: flex;
		flex-direction: column;
		gap: 10px;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--border);
		padding: 16px 20px 20px;
	}
	.merak-prop-navbar-menu-movil[hidden] { display: none; }
	.merak-prop-navbar-menu-movil-enlace { color: var(--text); font-weight: 600; }
}

/* v1.5.20 — pedido explícito del cliente: "hazme el responsive de ambas
   paginas para que salgan bien en el telefono y tablets". Auditoría de la
   barra superior: con la barra en un solo renglón (logo + buscador +
   hamburguesa), en celulares angostos el buscador quedaba con muy poco
   espacio real — el logo (imagen + "VendeAutos"/"Costa Rica" apilado) y la
   hamburguesa ya ocupan la mayor parte del ancho disponible en una
   pantalla de ~360-400px, dejando el buscador comprimido a una franja casi
   inusable. Se achica el espaciado y se oculta el texto del logo (queda
   solo el ícono) en celulares angostos, para liberarle espacio real al
   buscador sin tener que rearmar el layout en dos filas (que rompería el
   cálculo de altura fija de ".merak-prop-navbar-espaciador"). */
@media (max-width: 480px) {
	.merak-prop-navbar-fila-1 { gap: 10px; padding: 10px 14px; }
	.merak-prop-navbar-logo-texto { display: none; }
}

.merak-prop-navbar-marquee { overflow: hidden; border-top: 1px solid var(--border); background: rgba(255,255,255,.02); padding: 8px 0; }
.merak-prop-navbar-marquee-pista { display: flex; width: max-content; animation: merak-prop-marquee 32s linear infinite; }
.merak-prop-navbar-marquee:hover .merak-prop-navbar-marquee-pista,
.merak-prop-navbar-marquee:focus-within .merak-prop-navbar-marquee-pista { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .merak-prop-navbar-marquee-pista { animation: none; } }
.merak-prop-navbar-marquee-grupo { display: inline-flex; align-items: center; }
.merak-prop-navbar-marquee-enlace {
	color: var(--text-dim);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	padding: 0 18px;
	opacity: .85;
}
.merak-prop-navbar-marquee-enlace:hover { opacity: 1; color: var(--crema-2) !important; }
/* v1.5.0 — mismo criterio que ".merak-prop h2::after"/".merak-prop-aurora" más
   arriba: este "✦" es puramente decorativo (nunca indica un estado), así que
   se saca de --green (reservado a "publicado"/éxito, no se toca como
   variable) y se re-tiñe a rojo. */
.merak-prop-navbar-marquee-enlace::before { content: "✦"; margin-right: 8px; color: var(--oro-2); }
@keyframes merak-prop-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ */
/* Formularios                                                          */
/* ------------------------------------------------------------------ */
/*
 * v1.5.6 — pedido del cliente sobre el formulario de "Vendemos tu
 * propiedad" ("si que agarre todo el ancho de la pagina"): el límite de
 * "max-width:640px" de abajo hacía que CUALQUIER formulario del plugin
 * (este, "Repuestos", "Importados", login/registro, edición de perfil de
 * anunciante, publicar propiedad) se viera angosto y descentrado dentro de
 * contenedores bastante más anchos (".merak-prop-contenedor" llega a
 * 1200px, la columna de contenido de ".merak-prop-panel" a ~830px, la
 * columna de formulario de ".merak-prop-auth-cuerpo" también es fluida)
 * dejando un espacio vacío grande a la derecha en pantallas anchas. Se
 * quita el límite fijo: el formulario ahora ocupa el 100% del contenedor
 * que lo envuelve en cada página — cada uno de esos contenedores YA tiene
 * su propio ancho máximo sensato, así que esto no lo deja "sin límite" de
 * verdad, solo deja de imponerle uno MÁS angosto por encima.
 */
.merak-prop-form { display: flex; flex-direction: column; gap: 16px; max-width: 100%; }
.merak-prop-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text-dim); }
.merak-prop-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .merak-prop-form-fila { grid-template-columns: 1fr; } }
.merak-prop-form input[type=text], .merak-prop-form input[type=email], .merak-prop-form input[type=password],
.merak-prop-form input[type=url], .merak-prop-form input[type=number], .merak-prop-form input[type=search],
.merak-prop-form input[type=file], .merak-prop-form select, .merak-prop-form textarea {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 14px;
	color: var(--text);
	font-family: inherit;
	width: 100%;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.merak-prop-form input::placeholder, .merak-prop-form textarea::placeholder { color: var(--text-mute); }
.merak-prop-form input:focus, .merak-prop-form select:focus, .merak-prop-form textarea:focus {
	outline: none;
	border-color: var(--border-hover);
	background: var(--surface-hover);
	box-shadow: 0 0 0 3px var(--oro-dim);
}
.merak-prop-form-botones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.merak-prop-checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }

.merak-prop-preview-imagen { display: block; max-width: 140px; margin-top: 8px; border-radius: 10px; box-shadow: var(--shadow-soft); }
.merak-prop-preview-actual small { display: block; margin-top: 4px; color: var(--text-mute); font-weight: 400; }
.merak-prop-preview-galeria-nueva { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.merak-prop-preview-galeria-nueva img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-soft); }

.merak-prop-galeria-actual { margin-top: 4px; }
.merak-prop-galeria-miniaturas { display: flex; flex-wrap: wrap; gap: 8px; }
.merak-prop-galeria-miniaturas img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }

.merak-prop-selector-tipo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.merak-prop-selector-tipo-titulo { margin: 0 0 12px; font-weight: 700; color: var(--text); }
.merak-prop-selector-tipo-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .merak-prop-selector-tipo-botones { grid-template-columns: 1fr; } }
.merak-prop-tipo-opcion {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.02);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.merak-prop-tipo-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.merak-prop-tipo-opcion span { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.merak-prop-tipo-opcion small { color: var(--text-dim); font-weight: 400; }
.merak-prop-tipo-opcion:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.merak-prop-tipo-opcion-activa { border-color: var(--oro); background: var(--oro-dim); }
.merak-prop-tipo-opcion-activa span { color: var(--oro-2); }

.merak-prop-campo-icono { position: relative; display: flex; align-items: center; }
.merak-prop-campo-icono svg { position: absolute; left: 14px; color: var(--text-mute); pointer-events: none; }
.merak-prop-campo-icono input { width: 100%; padding-left: 40px !important; }
.merak-prop-campo-icono-clave input { padding-right: 40px !important; }
.merak-prop-toggle-clave {
	position: absolute;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	border-radius: 8px;
	border: none;
	background: transparent;
	color: var(--text-mute);
	cursor: pointer;
}
.merak-prop-campo-icono-clave .merak-prop-toggle-clave svg { position: static; left: auto; color: inherit; pointer-events: none; }
.merak-prop-toggle-clave:hover { color: var(--text); background: var(--surface-hover); }
.merak-prop-icono-ojo-cerrado { display: none; }
.merak-prop-toggle-clave.merak-prop-mostrando .merak-prop-icono-ojo { display: none; }
.merak-prop-toggle-clave.merak-prop-mostrando .merak-prop-icono-ojo-cerrado { display: inline-flex; }

/* ------------------------------------------------------------------ */
/* Tarjetas — patrón compartido de "lift on hover"                      */
/* ------------------------------------------------------------------ */
.merak-prop-tarjeta-propiedad,
.merak-prop-tile-categoria,
.merak-prop-caja-peligro,
.merak-prop-panel-cabecera,
.merak-prop-tarjeta-plan {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

/* ------------------------------------------------------------------ */
/* v1.5.9 — "Plan contratado" (panel privado): grilla de tarjetas de    */
/* servicio, mismo lenguaje visual que .merak-prop-tarjeta-propiedad      */
/* (borde suave + elevación al pasar el mouse), tema oscuro/racing —    */
/* NO se portaron los colores claros del plugin de referencia, solo el  */
/* contenido (ver includes/plan-contratado.php).                       */
/* ------------------------------------------------------------------ */
.merak-prop-grid-planes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: 20px 0; }
.merak-prop-tarjeta-plan { padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.merak-prop-tarjeta-plan:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 20px 40px rgba(226,19,31,.18), var(--shadow-soft); }
.merak-prop-tarjeta-plan-encabezado { display: flex; align-items: center; justify-content: space-between; }
.merak-prop-tarjeta-plan-icono { font-size: 28px; }
.merak-prop-tarjeta-plan h3 { margin: 0; font-size: 18px; color: var(--text); }
.merak-prop-tarjeta-plan-precio { font-size: 16px; font-weight: 700; color: var(--green); margin: 0; }
.merak-prop-tarjeta-plan-resumen { color: var(--text-dim); font-size: 13px; margin: 0; line-height: 1.5; }
.merak-prop-tarjeta-plan-incluye { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.merak-prop-tarjeta-plan-incluye li { color: var(--text-dim); font-size: 13px; padding-left: 20px; position: relative; }
.merak-prop-tarjeta-plan-incluye li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.merak-prop-tarjeta-plan-acciones { margin-top: auto; padding-top: 10px; }
/* v1.5.11 — "Venta en redes" / "Venta + asesoría": precio compuesto
   (monto grande + detalle chico, mismo idioma tipográfico que el resto del
   sitio: mono para el detalle, igual que .merak-prop-tile-categoria-subtitulo)
   y tarjeta "destacada" (borde/insignia con el rojo del sitio — la captura
   de referencia del cliente usaba azul, pero acá se mantiene el acento rojo
   ya establecido en todo el plugin en vez de introducir un color nuevo). */
.merak-prop-tarjeta-plan-precio-monto { font-size: 28px; font-weight: 800; color: var(--green); }
.merak-prop-tarjeta-plan-precio-detalle { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text-dim); }
.merak-prop-tarjeta-plan-destacado { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); position: relative; padding-top: 30px; }
.merak-prop-tarjeta-plan-destacado:hover { box-shadow: 0 0 0 1px var(--oro), 0 20px 40px rgba(226,19,31,.28), var(--shadow-soft); }
.merak-prop-tarjeta-plan-etiqueta-destacado { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--oro); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(226,19,31,.4); }
.merak-prop-tarjeta-propiedad {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.merak-prop-tarjeta-propiedad:hover { transform: translateY(-6px); border-color: var(--border-hover); box-shadow: 0 20px 40px rgba(226,19,31,.18), var(--shadow-soft); }
.merak-prop-tarjeta-propiedad-imagen { position: relative; display: block; aspect-ratio: 4 / 3; background: rgba(255,255,255,.03); overflow: hidden; }
.merak-prop-tarjeta-propiedad-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.merak-prop-tarjeta-propiedad:hover .merak-prop-tarjeta-propiedad-imagen img { transform: scale(1.05); }
.merak-prop-tarjeta-propiedad-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 42px; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
/* Ícono de respaldo (sin foto) de la tarjeta de propiedad: mismo idioma de
   animación que .merak-prop-tile-categoria-icono — un giro+escala sutil al
   pasar el mouse sobre la tarjeta entera. */
.merak-prop-tarjeta-propiedad:hover .merak-prop-tarjeta-propiedad-placeholder { transform: scale(1.12) rotate(-6deg); }
.merak-prop-tarjeta-propiedad-imagen .merak-prop-badge-tipo { position: absolute; top: 12px; left: 12px; margin: 0; }
.merak-prop-tarjeta-propiedad-cuerpo { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.merak-prop-tarjeta-propiedad-cuerpo h3 { margin: 0; font-size: 16px; color: var(--text); }
.merak-prop-precio { font-size: 18px; font-weight: 700; color: var(--green); margin: 0; }
.merak-prop-tarjeta-ubicacion { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 13px; margin: 0; }
.merak-prop-tarjeta-propiedad-acciones { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 8px; }

/* v1.5.16 — pedido explícito del cliente: "quiero que por pagina solo
   aparezcan 3 propiedades por columna y haya 6 rows" — antes la grilla era de
   ancho variable (auto-fill: 3, 4 o hasta 5 columnas según la pantalla).
   Ahora queda fija en 3 columnas en escritorio (3 x 6 filas = los 18
   propiedades que ya paginaba esta grilla), bajando a 2 columnas en tablet y
   1 en celular para que las tarjetas no queden angostas — el pedido de "3
   columnas" es claramente para pantallas de escritorio, no para celular. */
.merak-prop-grid-propiedades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; }
@media (max-width: 900px) { .merak-prop-grid-propiedades { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .merak-prop-grid-propiedades { grid-template-columns: 1fr; } }

/* v1.5.16 — sección "más propiedades y/o negocios" que aparece debajo de la
   grilla principal + paginación (ver
   merak_prop_render_seccion_extendida_directorio() en directory.php). */
.merak-prop-directorio-extendido { display: flex; flex-direction: column; gap: 32px; margin-top: 8px; }
.merak-prop-directorio-extendido-bloque h2 { font-size: 22px; margin: 0 0 16px; color: var(--text); }
.merak-prop-directorio-extendido-bloque > .merak-prop-btn { margin-top: 16px; }
.merak-prop-grid-negocios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .merak-prop-grid-negocios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .merak-prop-grid-negocios { grid-template-columns: 1fr; } }
.merak-prop-tarjeta-negocio-mini {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.merak-prop-tarjeta-negocio-mini:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: 0 20px 40px rgba(226,19,31,.16), var(--shadow-soft); text-decoration: none; }
.merak-prop-tarjeta-negocio-mini-logo { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); font-size: 20px; color: var(--crema-2); }
.merak-prop-tarjeta-negocio-mini-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merak-prop-tarjeta-negocio-mini-cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.merak-prop-tarjeta-negocio-mini-cuerpo strong { color: var(--text); font-family: 'Poppins', sans-serif; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merak-prop-tarjeta-negocio-mini-cuerpo small { color: var(--text-dim); font-size: 12.5px; }

/* ------------------------------------------------------------------ */
/* Directorio                                                           */
/* ------------------------------------------------------------------ */
.merak-prop-directorio-encabezado {
	position: relative;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--bg);
	padding: 48px 32px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.merak-prop-directorio-encabezado-texto { position: relative; z-index: 1; max-width: 620px; }
.merak-prop-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--crema-2); font-weight: 600; }
.merak-prop-titulo-animado { font-size: clamp(30px, 5vw, 48px); margin: 8px 0 12px; background: linear-gradient(90deg, var(--text), var(--oro-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.merak-prop-directorio-subtexto { color: var(--text-dim); font-size: 16px; margin: 0; }
.merak-prop-directorio-botones-cuenta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }

.merak-prop-directorio-cuerpo { display: flex; flex-direction: column; gap: 24px; }
.merak-prop-directorio-filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
}
.merak-prop-directorio-filtros input, .merak-prop-directorio-filtros select {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
	color: var(--text);
	font-size: 13px;
	font-family: inherit;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.merak-prop-directorio-filtros input[type=search] { flex: 1 1 220px; }
.merak-prop-directorio-filtros input[type=number] { width: 130px; }
/* v1.2.0 — antes solo cambiaba el borde al enfocar (sin transición ni
   resplandor), un foco "de navegador por defecto" que se sentía plano
   frente al resto del sistema de diseño (ver el mismo tratamiento ya
   aplicado en ".merak-prop-form input:focus" más abajo). Se agrega la misma
   transición suave + resplandor azul sutil (box-shadow con --blue-dim) a
   los campos de búsqueda/filtro/rango de precio del directorio, para que se
   sientan "premium" igual que cualquier otro campo del plugin. */
.merak-prop-directorio-filtros input:focus, .merak-prop-directorio-filtros select:focus {
	outline: none;
	border-color: var(--border-hover);
	background: rgba(255,255,255,.07);
	box-shadow: 0 0 0 3px var(--oro-dim);
}

.merak-prop-sin-resultados { color: var(--text-dim); padding: 40px 0; text-align: center; }
.merak-prop-paginacion { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.merak-prop-paginacion .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 10px;
	border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.merak-prop-paginacion .page-numbers.current { background: var(--oro); border-color: var(--oro); color: #fff; }
.merak-prop-paginacion .page-numbers:hover { border-color: var(--border-hover); text-decoration: none; }

/* ------------------------------------------------------------------ */
/* Grilla "bento" de categorías                                         */
/* ------------------------------------------------------------------ */
.merak-prop-seccion-categorias { margin: 32px 0; }
.merak-prop-seccion-categorias-titulo { margin-bottom: 16px; }
/*
 * v1.3.0 — pedido textual del cliente: "en el recuadro Sedán y en el
 * recuadro pickup estan muy grandes organiza esa seccion, acomode los
 * recuadros". Con el ciclo "bento" de v1.2.0 (grande/cuadrada/vertical/
 * mediana/horizontal/cuadrada), el tile #1 (Sedán) siempre caía en
 * "grande" (2×2) y el tile #3 (Pickup) en "vertical" (1×2) — con el máximo
 * de 6 categorías fijado también en v1.2.0, esa variedad "editorial" ya no
 * se leía como diseño intencional, se veía como "dos cuadros gigantes al
 * azar" que no combinan con los otros 4. Se simplifica a una grilla
 * PAREJA: los 6 tiles miden todos lo mismo (ver merak_prop_tamano_tile_categoria()
 * en category-tiles.php, que ahora devuelve siempre la misma clase) —
 * 3 columnas × 2 filas en escritorio, 2×3 en tablet, 1×6 en celular,
 * exactamente los mismos 3 breakpoints que ya existían (900px/520px), solo
 * que ahora ningún tile ocupa más de 1 celda.
 */
/*
 * v1.4.0 — pedido textual del cliente: "agrande el texto y posicione bien
 * el texto de los recuadros en la seccion de Explorá por categoría". Antes
 * cada tile media 190px de alto con el texto (11px/17px/12px) apiñado
 * abajo-izquierda (".merak-prop-tile-categoria" con "align-items:flex-end")
 * — mucho espacio muerto arriba, texto chico. Se sube un poco el alto
 * disponible y, más abajo, se centra verticalmente el contenido y se
 * agranda tipografía + insignia/ícono para que la composición se sienta
 * intencional, no un resto perdido en la esquina.
 */
.merak-prop-grid-categorias-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 220px;
	gap: 14px;
}
@media (max-width: 900px) { .merak-prop-grid-categorias-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .merak-prop-grid-categorias-bento { grid-template-columns: 1fr; grid-auto-rows: 190px; } }
/*
 * v1.1.0 — antes, "--tile-claro"/"--tile-oscuro" pintaban un degradado
 * PLANO Y CLARO cubriendo la tarjeta ENTERA (merak-prop-tile-categoria-fondo
 * con inset:0), lo que hacía ver la grilla de categorías como un sistema de
 * diseño "pastel" completamente distinto del resto del sitio. Ahora la
 * superficie de la tarjeta es SIEMPRE var(--surface)/var(--surface-hover)
 * (igual que cualquier otra tarjeta del plugin) y el color por categoría
 * (--tile-acento/--tile-acento-2, ver merak_prop_color_categoria() en
 * category-tiles.php) se usa nada más como ACENTO: borde superior,
 * resplandor sutil en una esquina y el enlace "Explorar" — nunca como
 * relleno grande.
 */
.merak-prop-tile-categoria {
	position: relative;
	overflow: hidden;
	display: flex;
	/* v1.4.0 — antes "flex-end" (contenido pegado abajo) dejaba todo el
	   resto de la tarjeta como espacio muerto — centrado vertical para que
	   el bloque de texto (ahora más grande, ver abajo) se sienta anclado a
	   la mitad de la composición, con la insignia/ícono como fondo detrás. */
	align-items: center;
	padding: 22px 24px;
	color: var(--text);
	background: var(--surface);
	border-top: 3px solid var(--tile-acento, var(--border-hover));
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.merak-prop-tile-categoria:hover {
	transform: translateY(-6px);
	background: var(--surface-hover);
	border-color: var(--tile-acento, var(--border-hover));
	box-shadow: 0 20px 40px rgba(226,19,31,.18), var(--shadow-soft);
	text-decoration: none;
}
/*
 * v1.5.3 — pedido del cliente: "que tenga un diseño racing". El acento por
 * categoría ya existía (borde superior + resplandor + ícono/enlace, ver
 * comentarios de arriba), pero se sentía más "tarjeta con un detalle de
 * color" que "racing" propiamente. Se agrega un par de franjas diagonales
 * (mismo lenguaje visual que ".merak-prop-lineas-velocidad", ya usado en
 * hero/héroes de este plugin) asomando en la esquina inferior izquierda de
 * cada tile, que se "deslizan" un poco hacia afuera al pasar el mouse — un
 * guiño directo a las franjas de un auto de carreras, sin cubrir el
 * contenido ni competir con el texto.
 */
.merak-prop-tile-categoria::after {
	content: '';
	position: absolute;
	left: -14px;
	bottom: 18px;
	width: 52px;
	height: 10px;
	background: repeating-linear-gradient(-35deg, var(--tile-acento, var(--oro)) 0 6px, transparent 6px 13px);
	opacity: .3;
	transform: skewX(-20deg);
	transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
	z-index: 0;
	pointer-events: none;
}
.merak-prop-tile-categoria:hover::after {
	transform: skewX(-20deg) translateX(16px);
	opacity: .55;
}
/* Resplandor de acento: un círculo suave (~14% de opacidad) en la esquina
   superior derecha, detrás de donde cae el ícono/insignia — NO cubre la
   tarjeta completa, es solo un toque de color de fondo, igual espíritu que
   el "aurora" ya usado en el resto del plugin. */
.merak-prop-tile-categoria-fondo {
	position: absolute;
	top: -40px; right: -40px;
	width: 170px; height: 170px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--tile-acento, var(--crema-2)), transparent 70%);
	opacity: .14;
	pointer-events: none;
	z-index: 0;
}
.merak-prop-tile-categoria-brillo {
	position: absolute; inset: 0;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.merak-prop-tile-categoria-foto { position: absolute; inset: 0; z-index: 0; }
.merak-prop-tile-categoria-imagen { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
/* v1.4.0 — insignia/ícono de respaldo (sin foto) agrandada (28px → 46px) y
   con menos opacidad (.9 → .55) para que lea como una "marca de agua"
   grande detrás del texto en vez de un ícono chico perdido en la esquina —
   sigue siendo, a propósito, el elemento que .merak-prop-tile-categoria-icono
   anima (flote/giro, ver más abajo), ahora mucho más notorio. */
.merak-prop-tile-categoria-insignia { position: absolute; top: 12px; right: 12px; font-size: 46px; opacity: .55; color: var(--tile-acento, var(--crema-2)); z-index: 1; }
/*
 * v1.2.0 — animación de íconos pedida por el cliente ("que los iconos
 * tengan animaciones"). En reposo, el ícono de cada categoría hace un
 * flote/bamboleo continuo muy sutil (3px de amplitud, 3.4s por ciclo); al
 * pasar el mouse sobre la TARJETA (no hace falta apuntar justo al ícono),
 * el flote se pausa y el ícono hace un giro+escala más marcado, con la
 * misma curva "resorte" (cubic-bezier(.34,1.56,.64,1)) que ya usan el
 * lift de ".merak-prop-btn" y el resto de las micro-interacciones de este
 * archivo — mismo "idioma" de animación en todo el plugin.
 */
.merak-prop-tile-categoria-icono {
	display: inline-block;
	transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion: no-preference) {
	.merak-prop-tile-categoria-icono { animation: merak-prop-icono-flotar 3.4s ease-in-out infinite; }
}
@keyframes merak-prop-icono-flotar {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-5px) rotate(-3deg); }
}
.merak-prop-tile-categoria:hover .merak-prop-tile-categoria-icono {
	animation-play-state: paused;
	transform: scale(1.22) rotate(-10deg);
}
/* v1.4.0 — texto de cada tile agrandado y con más aire entre líneas (era
   11px/17px/12px con 2px de separación — se leía chico y apretado frente al
   tamaño real de la tarjeta). "max-width" deja lugar a la insignia grande
   de la esquina superior derecha sin que el título largo la choque. */
.merak-prop-tile-categoria-contenido { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; max-width: calc(100% - 54px); }
/*
 * v1.5.3 — "diseño racing" pedido por el cliente: el conteo de propiedades se
 * lee ahora como un dato de tablero/telemetría (fuente monoespaciada
 * var(--mono), la misma que ya usan los números de ".merak-prop-stats-numero"
 * y el valor del slider de presupuesto en este mismo archivo — no una fuente
 * nueva) en vez de texto corrido genérico.
 */
.merak-prop-tile-categoria-subtitulo { font-size: 12px; font-family: var(--mono); font-weight: 600; letter-spacing: .4px; color: var(--text-dim); }
/* Título en mayúsculas + más peso + un poco de tracking — se lee más a
   "marca/cartel" que el texto normal de antes, en línea con el resto del
   rediseño racing (v1.5.0). El color explícito para ".section-light" que
   cierra el bug de contraste está arriba, junto a la auditoría de v1.4.0. */
.merak-prop-tile-categoria-titulo { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 25px; line-height: 1.15; text-transform: uppercase; letter-spacing: .3px; }
.merak-prop-tile-categoria-boton { font-size: 14px; font-weight: 600; color: var(--tile-acento, var(--crema-2)); }

/* ------------------------------------------------------------------ */
/* Ficha de anunciante / propiedad (páginas individuales)                  */
/* ------------------------------------------------------------------ */
.merak-prop-ficha-hero {
	position: relative;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	overflow: hidden;
	padding: 40px 32px 32px;
	background: var(--bg);
}
.merak-prop-ficha-hero-portada { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; filter: blur(2px); }
.merak-prop-ficha-hero-portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.4), rgba(10,10,12,.92)); }
.merak-prop-ficha-volver { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-weight: 600; font-size: 14px; margin-bottom: 20px; }
.merak-prop-ficha-volver:hover { color: var(--crema-2) !important; }
.merak-prop-ficha-hero-cuerpo { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.merak-prop-ficha-hero-principal { display: flex; gap: 20px; align-items: flex-start; flex: 1 1 380px; }
.merak-prop-ficha-hero-logo-marco {
	width: 96px; height: 96px;
	border-radius: 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.merak-prop-ficha-hero-logo { width: 100%; height: 100%; object-fit: cover; }
.merak-prop-ficha-hero-logo-placeholder { font-size: 42px; }
.merak-prop-ficha-hero-texto h1 { margin: 0 0 8px; font-size: clamp(22px, 3vw, 32px); }
.merak-prop-ficha-hero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.merak-prop-ficha-hero-descripcion { color: var(--text-dim); max-width: 520px; margin: 0; }

.merak-prop-ficha-hero-contacto {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	min-width: 260px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.merak-prop-ficha-hero-contacto p { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-dim); font-size: 14px; }
.merak-prop-ficha-precio-destacado { font-size: 26px; font-weight: 700; color: var(--green); margin: 0 0 4px; }
.merak-prop-botones-contacto { display: flex; flex-wrap: wrap; gap: 10px; }
.merak-prop-redes { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }

.merak-prop-ficha-hero-stats {
	position: relative; z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}
.merak-prop-ficha-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--text-dim); }
.merak-prop-ficha-stat-numero { font-size: 20px; font-weight: 700; color: var(--text); }
.merak-prop-ficha-stat-etiqueta { font-size: 12px; }

.merak-prop-descripcion { color: var(--text-dim); line-height: 1.7; }

.merak-prop-galeria-propiedad { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; }
.merak-prop-galeria-propiedad a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.merak-prop-galeria-propiedad img { width: 100%; height: 140px; object-fit: cover; display: block; transition: transform 0.3s ease; }
.merak-prop-galeria-propiedad a:hover img { transform: scale(1.06); }

/* Lightbox de galería */
.merak-prop-lightbox-overlay {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(10,10,12,.92);
	display: none;
	align-items: center; justify-content: center;
}
.merak-prop-lightbox-overlay.merak-prop-lightbox-abierto { display: flex; }
.merak-prop-lightbox-imagen { max-width: 90vw; max-height: 88vh; border-radius: 12px; box-shadow: var(--shadow-soft); }
.merak-prop-lightbox-cerrar {
	position: absolute; top: 20px; right: 24px;
	background: var(--surface); border: 1px solid var(--border); color: var(--text);
	width: 42px; height: 42px; border-radius: 50%;
	font-size: 24px; line-height: 1; cursor: pointer;
}
body.merak-prop-lightbox-bloqueado { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* Auth (login / registro / recuperar / restablecer)                   */
/* ------------------------------------------------------------------ */
/* v1.5.1 — OJO, bug real encontrado al revisar el pedido "no atrae a la
   vista": a ".merak-prop-auth-pagina" (donde includes/auth.php coloca
   merak_prop_fondo_aurora()/merak_prop_fondo_lineas_velocidad(), ambos
   "position:absolute; inset:0") le faltaba "position: relative" — a
   diferencia de TODAS las demás secciones que usan este mismo par de
   fondos decorativos (".merak-prop-directorio-encabezado",
   ".merak-prop-servicio-hero", ".merak-prop-resumen-vacio", todas con
   "position: relative" ya puesto). Sin eso, los dos fondos absolutos se
   posicionaban contra el ancestro posicionado más cercano hacia arriba en
   el DOM (o el viewport si no hay ninguno) en vez de contra esta tarjeta
   — en la práctica, invisibles o fuera de lugar. Por eso esta página en
   particular se sentía "vacía" comparada con el resto del sitio: era la
   única sin este efecto funcionando de verdad. */
.merak-prop-auth-pagina { position: relative; min-height: 70vh; display: flex; align-items: center; padding: 40px 20px; overflow: hidden; }
.merak-prop-auth { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
/* v1.5.1 — el fondo casi-invisible (2% de blanco) contribuía a la
   sensación de "vacío"; una tarjeta con superficie propia (var(--surface),
   igual que cualquier otra tarjeta del plugin) se distingue mejor del
   fondo con animaciones detrás. */
.merak-prop-auth-cuerpo { display: grid; grid-template-columns: 1fr 300px; background: var(--surface); }
@media (max-width: 780px) { .merak-prop-auth-cuerpo { grid-template-columns: 1fr; } }
.merak-prop-auth-principal { padding: clamp(28px, 4vw, 44px); }
.merak-prop-auth-principal h2 { margin-top: 0; }
/* v1.5.1 — título propio de la columna izquierda (includes/auth.php),
   para que no arranque directo en las pestañas — le da jerarquía, a tono
   con el título que ya tiene la columna derecha. */
.merak-prop-auth-titulo { font-family: 'Poppins', sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin: 0 0 18px; color: var(--text); }
/* v1.5.1 — pestañas con más peso visual (antes solo texto con un
   subrayado fino) — ahora leen como un selector de pestañas real, no como
   3 enlaces sueltos. */
.merak-prop-auth-tabs { display: flex; gap: 6px; margin-bottom: 24px; padding: 4px; background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 999px; flex-wrap: wrap; }
.merak-prop-auth-tabs a { padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-mute); border-bottom: none; transition: background .2s ease, color .2s ease; }
.merak-prop-auth-tabs a:hover { text-decoration: none; color: var(--text); }
.merak-prop-auth-tabs a.activo { color: #fff; background: var(--oro); box-shadow: 0 6px 16px rgba(226,19,31,.35); }
/* v1.5.1 — divisor "o continuá con tu correo" entre los botones sociales y
   el formulario (includes/auth.php) — antes el salto de los botones de
   Google/Facebook directo a los campos de usuario/contraseña se sentía
   como dos bloques sueltos sin relación; el divisor los conecta como un
   solo flujo ("elegí una forma de entrar"), patrón estándar en pantallas
   de login con más de un método. */
.merak-prop-auth-divisor { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--text-mute); font-size: 13px; }
.merak-prop-auth-divisor::before, .merak-prop-auth-divisor::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* v1.4.2 — botones "Continuar con Google/Facebook" (includes/auth.php,
   pintados por el plugin Nextend Social Login), calcado de
   ".merak-auth-social"/".merak-auth-social-botones" de Merak Empresas y
   Productos (merakmd.com), adaptado a las variables de este plugin. */
.merak-prop-auth-social { margin: 0 0 20px; text-align: left; animation: merak-prop-social-entrada .5s ease both; animation-delay: .1s; }
.merak-prop-auth-social p { color: var(--text); margin: 0 0 12px; text-align: left; }
/* "Continuar con:" queda a la izquierda (alineado con el resto del
   formulario); los botones de Nextend van en su propio envoltorio con su
   propio ancho y centrado — mismo motivo que en la referencia. */
.merak-prop-auth-social-botones { max-width: 420px; margin: 0 auto; text-align: center; }
/* OJO — igual que en la referencia: NO se toca el ancho de nada por
   DENTRO del botón (un selector por substring como [class*="nsl-button"]
   también agarra el ícono interno, cuya clase real es
   "nsl-button-svg-container" — contiene la substring "nsl-button" sin ser
   el botón en sí — y forzarle 100% de ancho empuja el texto "Continue with
   Facebook/Google" fuera de la vista). Solo se limita el ancho del
   CONTENEDOR y se deja que Nextend calcule el suyo. El hover/la animación
   sí usan selectores de clase EXACTA (.nsl-button), no substring. */
.merak-prop-auth-social .nsl-container { margin: 0 auto !important; }
.merak-prop-auth-social .nsl-button,
.merak-prop-auth-social a.nsl-button,
.merak-prop-auth-social button.nsl-button {
	transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, filter .2s ease !important;
}
.merak-prop-auth-social .nsl-button:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 10px 24px rgba(0,0,0,.4);
	filter: brightness(1.06);
}
.merak-prop-auth-social .nsl-button:active { transform: translateY(-1px) scale(1); }
@keyframes merak-prop-social-entrada {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.merak-prop-auth-social { animation: none; }
	.merak-prop-auth-social .nsl-button { transition: none !important; }
}

.merak-prop-auth-lateral { position: relative; background: linear-gradient(160deg, var(--oro-dim), rgba(201,204,210,.10)); display: flex; align-items: center; justify-content: center; padding: 32px; }
.merak-prop-auth-lateral-cuerpo { position: relative; z-index: 1; text-align: center; }
/* Logotipo propio de Nidoo (ícono de casa en un badge circular dorado) —
   mismo criterio que ".merak-prop-navbar-logo-icono" más arriba: no hay
   todavía un archivo de marca real subido por el cliente para este panel. */
.merak-prop-auth-lateral-logo {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 64px !important;
	height: 64px !important;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--oro), var(--oro-2));
	color: #1a1406;
	margin: 0 auto 14px !important;
}
.merak-prop-auth-lateral-cuerpo h3 { margin: 0 0 8px; }
.merak-prop-auth-lateral-cuerpo p { color: var(--text-dim); font-size: 14px; margin: 0; }

/* ------------------------------------------------------------------ */
/* Panel privado                                                        */
/* ------------------------------------------------------------------ */
.merak-prop-panel { display: grid; grid-template-columns: 220px 1fr; gap: 28px; margin: 24px auto; max-width: 1100px; padding: 0 20px 60px; }
@media (max-width: 900px) { .merak-prop-panel { grid-template-columns: 1fr; } }

.merak-prop-panel-menu-hamburguesa { display: none; }
/* v1.4.1 — mismo patrón "mobile-first, oculto por defecto" que la línea de
   arriba: el botón "✕ Cerrar menú" (includes/dashboard.php) es parte del
   menú móvil tipo "cajón" a pantalla completa y solo tiene sentido ahí
   (ver merak.js:148, que lo usa para cerrar ese cajón). En escritorio
   ".merak-prop-panel-menu" es la barra lateral fija normal, no un cajón que
   se pueda cerrar — el botón seguía en el HTML pero no tenía ninguna regla
   que lo ocultara en escritorio, así que el navegador lo mostraba con su
   apariencia por defecto (sin estilo, gris claro con texto negro) en vez
   de desaparecer. Se oculta acá por defecto; el "display: inline-flex" que
   se le agrega dentro del "@media (max-width: 900px)" de abajo (mismo
   selector, ya existía el resto de sus propiedades) lo vuelve a mostrar
   solo en pantallas angostas. */
.merak-prop-panel-menu-cerrar { display: none; }
@media (max-width: 900px) {
	.merak-prop-panel-menu-hamburguesa {
		display: flex; align-items: center; gap: 10px;
		width: 100%; padding: 12px 16px;
		background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
		color: var(--text); font-weight: 600; cursor: pointer;
	}
	.merak-prop-panel-menu-hamburguesa-icono { display: flex; flex-direction: column; gap: 4px; }
	.merak-prop-panel-menu-hamburguesa-icono span { width: 18px; height: 2px; background: var(--text); }
	.merak-prop-panel-menu {
		position: fixed; inset: 0; z-index: 99999;
		background: var(--bg);
		padding: 20px;
		display: flex; flex-direction: column; gap: 4px;
		overflow-y: auto;
	}
	.merak-prop-panel-menu[hidden] { display: none; }
	.merak-prop-panel-menu-cerrar { display: inline-flex; align-self: flex-end; background: none; border: none; color: var(--text); font-weight: 600; cursor: pointer; margin-bottom: 12px; }
}
.merak-prop-panel-menu {
	display: flex; flex-direction: column; gap: 4px;
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 14px;
	height: max-content;
}
.merak-prop-panel-menu a { color: var(--text-dim); font-weight: 600; padding: 9px 12px; border-radius: 8px; }
.merak-prop-panel-menu a:hover { background: var(--surface-hover); text-decoration: none; }
.merak-prop-panel-menu a.activo { background: var(--oro-dim); color: var(--oro-2); }
.merak-prop-cerrar-sesion { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 12px !important; color: #ff9a90 !important; }

.merak-prop-panel-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; margin-bottom: 20px; }
.merak-prop-panel-cabecera-etiqueta { color: var(--text-dim); font-size: 13px; font-weight: 600; }

/* v1.3.0 — estado vacío del panel ("Todavía no has creado tu perfil de
   anunciante") rediseñado: pedido explícito del cliente de mejorar "la
   seccion del panel", y el screenshot que mandó mostraba esta pantalla
   como el punto más flojo (solo un ícono, una línea de texto y un botón
   perdidos en mucho espacio vacío). Ahora es una tarjeta centrada propia
   (mismo patrón .merak-prop-tarjeta-* de borde+sombra que el resto del
   plugin, no una sección "pelada"), con un ícono más grande en un círculo
   de acento, un texto de 2-3 líneas que explica qué se desbloquea (no solo
   "creá tu perfil") y un botón primario bien visible. */
.merak-prop-resumen-vacio {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 56px 32px;
	max-width: 480px;
	margin: 20px auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}
/* v1.4.0 — esta tarjeta ahora lleva ".section-light" + el fondo animado
   "aurora" detrás (ver includes/dashboard.php) — el fondo "aurora" es
   position:absolute (ver ".merak-prop-aurora" más arriba en este archivo),
   así que su contenido real necesita su propia capa "position:relative;
   z-index:1" para quedar SIEMPRE por encima de las manchas de color,
   mismo patrón ya usado en ".merak-prop-auth-lateral-cuerpo"/
   ".merak-prop-directorio-encabezado-texto". */
.merak-prop-resumen-vacio-cuerpo { position: relative; z-index: 1; }
.merak-prop-resumen-vacio-icono {
	width: 84px; height: 84px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--oro-dim);
	display: flex; align-items: center; justify-content: center;
	font-size: 40px;
}
/* La regla genérica ".merak-prop h2::after" pinta una barrita de acento
   pegada al borde IZQUIERDO (pensada para títulos de sección a ancho
   completo) — dentro de esta tarjeta centrada (texto centrado, ícono
   centrado) esa barrita quedaría descentrada respecto al título. Se oculta
   acá nada más; el resto de los "h2" del plugin la conservan. */
.merak-prop-resumen-vacio h2 { margin: 0 0 10px; padding-bottom: 0; }
.merak-prop-resumen-vacio h2::after { display: none; }
.merak-prop-resumen-vacio p { color: var(--text-dim); line-height: 1.6; margin: 0 auto 22px; max-width: 380px; }
.merak-prop-resumen-anunciante { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.merak-prop-resumen-avatar { width: 90px; height: 90px; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.merak-prop-resumen-avatar img { width: 100%; height: 100%; object-fit: cover; }
.merak-prop-resumen-avatar-placeholder { font-size: 38px; }
.merak-prop-resumen-etiqueta { color: var(--text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.merak-prop-resumen-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

.merak-prop-tabla { width: 100%; border-collapse: collapse; margin-top: 16px; }
.merak-prop-tabla th, .merak-prop-tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; white-space: nowrap; }
.merak-prop-tabla th { color: var(--text-mute); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.merak-prop-acciones-tabla a { font-size: 13px; }
/* v1.5.20 — pedido explícito del cliente: responsive de celular/tablet.
   Las tablas del panel (Mis propiedades, Historial de cobros, Historial de
   pagos) tienen varias columnas — en celular, comprimirlas para que "quepan"
   las volvía ilegibles (texto amontonado, columna de Acciones con 5-6
   enlaces pegados). En vez de eso, se envuelven en un contenedor con
   scroll horizontal propio: la tabla mantiene un ancho legible
   (white-space:nowrap arriba evita que el texto se parta en cualquier
   lado) y el usuario desliza el dedo para ver las columnas de más a la
   derecha, sin que la página entera se desborde. */
.merak-prop-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.merak-prop-tabla-scroll .merak-prop-tabla { width: max-content; min-width: 100%; margin-top: 0; }
.merak-prop-link-peligro { color: #ff9a90 !important; }
.merak-prop-lista-simple { list-style: disc; margin-left: 20px; color: var(--text-dim); }
.merak-prop-lista-amenidades { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 20px; }
.merak-prop-lista-amenidades li { display: flex; align-items: center; gap: 8px; color: var(--text-dim); }
.merak-prop-lista-amenidades li i { color: var(--oro-2); }
.merak-prop-form-amenidades { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; margin: 10px 0 18px; }
.merak-prop-form-amenidades legend { padding: 0 8px; font-weight: 700; color: var(--text); }
.merak-prop-form-amenidades .merak-prop-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; }

.merak-prop-caja-peligro { padding: 20px; margin-top: 24px; }
.merak-prop-caja-peligro h3 { color: #ff9a90; margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Fase 2 — Publicidad (campanas.php, campanas-panel.php, carrusel.php,   */
/* metodos-pago.php, campanas-estadisticas.php). Reutiliza las variables  */
/* de :root y los patrones ya definidos arriba (tarjetas, botones,        */
/* badges, formularios) en vez de inventar un lenguaje visual aparte.     */
/* ------------------------------------------------------------------ */

.merak-prop-panel-menu-grupo { color: var(--text-mute); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 14px 12px 2px; }
.merak-prop-panel-submenu-item { padding-left: 20px !important; font-weight: 500 !important; }
.merak-prop-badge-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; vertical-align: middle; }

.merak-prop-caja-plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; }
.merak-prop-caja-plan h3, .merak-prop-caja-plan h4 { margin-top: 0; }
.merak-prop-campana-resumen-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.merak-prop-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 16px 0; }
.merak-prop-stats-grid > div { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
.merak-prop-stats-numero { display: block; font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; color: var(--text); }
.merak-prop-stats-etiqueta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-mute); }

.merak-prop-form-seccion { border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 18px; background: rgba(255,255,255,.02); }
.merak-prop-form-seccion-encabezado { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.merak-prop-form-seccion-encabezado h4 { margin: 0; }
.merak-prop-form-seccion-numero { width: 24px; height: 24px; border-radius: 50%; background: rgba(201,204,210,.14); color: var(--crema-2); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.merak-prop-form-seccion-icono { font-size: 18px; }
.merak-prop-form-subtitulo { font-weight: 600; margin: 14px 0 6px; font-size: 13px; color: var(--text-dim); }
.merak-prop-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .merak-prop-form-grid-2 { grid-template-columns: 1fr; } }

.merak-prop-chips-seleccion { display: flex; flex-wrap: wrap; gap: 8px; }
.merak-prop-chip-checkbox { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); }
.merak-prop-chip-checkbox:has(input:checked) { background: var(--oro-dim); border-color: var(--border-hover); color: var(--oro-2); }

.merak-prop-slider-presupuesto-envoltorio { margin: 10px 0; }
.merak-prop-slider-presupuesto-valor { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: var(--crema-2); margin-bottom: 8px; }
.merak-prop-slider-presupuesto-envoltorio input[type=range] { width: 100%; --merak-prop-slider-pct: 0%; accent-color: var(--oro); }
.merak-prop-slider-presupuesto-limites { display: flex; justify-content: space-between; color: var(--text-mute); font-size: 12px; margin-top: 4px; }

.merak-prop-caja-metodo-pago summary { cursor: pointer; color: var(--crema-2); font-size: 13px; margin-top: 10px; }
.merak-prop-editar-campana summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }

/* Insignia "Patrocinado" sobre una tarjeta de propiedad (ver
   merak_prop_render_tarjeta_propiedad() en single-template.php) — mismo
   patrón visual que el resto de badges, con un tono dorado propio para
   distinguirla de un vistazo de las insignias de tipo de anunciante. */
.merak-prop-tarjeta-patrocinada { border-color: rgba(240,180,41,.5); }
.merak-prop-badge-patrocinado { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(240,180,41,.16); color: #f0b429; border-color: rgba(240,180,41,.4); }

/* Carrusel de anuncios multimedia del directorio (ver carrusel.php) —
   pista horizontal con scroll-snap, sin depender de ninguna librería de
   carrusel de JavaScript. */
.merak-prop-carrusel-anuncios { position: relative; margin: 20px 0 28px; }
.merak-prop-carrusel-etiqueta { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(0,0,0,.55); color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }
.merak-prop-carrusel-pista { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.merak-prop-carrusel-slide { position: relative; flex: 0 0 min(720px, 92vw); aspect-ratio: 1920 / 700; border-radius: var(--radius); overflow: hidden; scroll-snap-align: start; display: block; }
.merak-prop-carrusel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merak-prop-carrusel-slide-texto { position: absolute; inset: auto 0 0 0; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.merak-prop-carrusel-slide-texto span:first-child { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ */
/* Fase 3 y 4 — páginas de servicio ("Vendemos tu propiedad" e            */
/* "Importados", ver includes/vendemos-tu-propiedad.php e                 */
/* includes/propiedades-importados.php) y la franja que las promociona en  */
/* el directorio (includes/directory.php). Reutiliza el mismo hero       */
/* oscuro + aurora, la misma tipografía y las mismas variables de        */
/* :root que el resto del plugin — ningún color nuevo.                   */
/* ------------------------------------------------------------------ */
.merak-prop-pagina-servicio { padding-top: 24px; }
.merak-prop-servicio-hero {
	position: relative;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--bg);
	padding: 48px 32px;
	overflow: hidden;
	margin-bottom: 12px;
}
.merak-prop-servicio-hero-texto { position: relative; z-index: 1; max-width: 760px; }
.merak-prop-servicio-hero-texto p { font-size: 16px; }
.merak-prop-servicio-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.merak-prop-servicio-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; }
@media (max-width: 820px) { .merak-prop-servicio-pasos { grid-template-columns: 1fr; } }
.merak-prop-servicio-paso {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px;
	position: relative;
	/* v1.2.0 — esta tarjeta no tenía NINGÚN estado de hover (a diferencia de
	   toda otra tarjeta del plugin: propiedad, categoría, servicio-mini) —
	   se agrega el mismo lenguaje de "lift" para que el pase de pulido sea
	   consistente en todas las tarjetas que toca. */
	transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.merak-prop-servicio-paso:hover {
	transform: translateY(-8px);
	border-color: var(--border-hover);
	background: var(--surface-hover);
	box-shadow: 0 22px 45px rgba(226,19,31,.16), var(--shadow-soft);
}
.merak-prop-servicio-paso h3 { margin: 10px 0 8px; font-size: 17px; }
.merak-prop-servicio-paso p { color: var(--text-dim); margin: 0; font-size: 14px; }
.merak-prop-servicio-paso-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--oro), var(--oro-2));
	color: #fff;
	font-family: var(--mono);
	font-weight: 700;
	/* Mismo giro+escala "resorte" que .why-icon de homepage-actual.html
	   (cubic-bezier(.34,1.56,.64,1)) al pasar el mouse sobre la tarjeta. */
	transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.merak-prop-servicio-paso:hover .merak-prop-servicio-paso-numero { transform: rotate(-12deg) scale(1.15); }

/* Franja "Vendemos tu propiedad / Importados" del directorio. */
.merak-prop-servicios-franja { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 760px) { .merak-prop-servicios-franja { grid-template-columns: 1fr; } }
.merak-prop-servicio-tarjeta-mini {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.merak-prop-servicio-tarjeta-mini:hover { transform: translateY(-4px); border-color: var(--border-hover); box-shadow: 0 20px 40px rgba(226,19,31,.16), var(--shadow-soft); text-decoration: none; }
/* v1.2.0 — mismo giro+escala del ícono que ".trust-item i:hover" de
   homepage-actual.html, aplicado acá porque esta franja es el equivalente
   más cercano de este plugin a esa franja de confianza. */
.merak-prop-servicio-tarjeta-mini i { font-size: 22px; color: var(--crema-2); flex-shrink: 0; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.merak-prop-servicio-tarjeta-mini:hover i { transform: scale(1.25) rotate(-8deg); }
.merak-prop-servicio-tarjeta-mini span { display: flex; flex-direction: column; gap: 2px; }
.merak-prop-servicio-tarjeta-mini strong { color: var(--text); font-family: 'Poppins', sans-serif; font-size: 15px; }
.merak-prop-servicio-tarjeta-mini small { color: var(--text-dim); font-size: 12.5px; }

/* ------------------------------------------------------------------ */
/* v1.1.0 — Scroll-reveal, ripple + lift de botones, parallax del "aurora" */
/* Portado tal cual del mismo mecanismo que ya usa la portada real de      */
/* ventadecarrosadomiciliocr.com (homepage-actual.html, archivo estático   */
/* separado de este plugin), para que el scroll se sienta igual en todo   */
/* el sitio. Ver assets/js/merak.js para el IntersectionObserver, el       */
/* listener de click del ripple y el parallax del fondo "aurora".         */
/* ------------------------------------------------------------------ */

/* Scroll-reveal con stagger: un elemento arranca invisible/desplazado y
   assets/js/merak.js le agrega ".visible" cuando entra en pantalla (una
   sola vez, con IntersectionObserver).
   v1.5.13 — pedido explícito del cliente ("quiero que todas las secciones
   no aparezcan tan lento" en /propiedades/): tiempos acortados de .7s a .4s
   acá, más el stagger y el umbral del IntersectionObserver en merak.js —
   ver ese archivo para el detalle completo del ajuste. Antes eran los
   mismos tiempos/curva exactos que la portada de referencia (.7s); ya no
   se mantiene esa paridad a propósito, porque el pedido fue puntual para
   este plugin. */
.merak-prop .reveal { opacity: 0; transform: translateY(34px) scale(.96); transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.merak-prop .reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.merak-prop .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.merak-prop .reveal-left.visible { opacity: 1; transform: translateX(0); }
.merak-prop .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.merak-prop .reveal-right.visible { opacity: 1; transform: translateX(0); }
/* OJO: la regla ya existente en la sección "Base" de este archivo
   (".merak-prop, .merak-prop *" con transition-duration/animation-duration
   0.01ms bajo prefers-reduced-motion) ya cubre estas clases — a quien pide
   menos movimiento se le sigue mostrando el contenido (IntersectionObserver
   agrega ".visible" igual), solo que sin la animación de entrada.        */

/* Botones: lift + brillo barrido en hover, ripple al hacer clic (JS agrega
   y quita un <span class="merak-prop-ripple">). Se aplica a ".merak-prop-btn"
   — la clase base real que ya llevan TODOS los botones de este plugin
   (merak-prop-btn-blue/whatsapp/outline/peligro/sm, ver navbar.php,
   directory.php, dashboard.php, auth.php, etc.) — no se renombra ninguna
   clase existente, solo se conecta el mecanismo compartido encima de ellas. */
.merak-prop .merak-prop-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .2s ease, border-color .2s ease;
}
.merak-prop .merak-prop-btn::before {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 45%, transparent 60%);
	transform: translateX(-120%);
	transition: transform .7s ease;
}
.merak-prop .merak-prop-btn:hover { transform: translateY(-3px) scale(1.035); }
.merak-prop .merak-prop-btn:hover::before { transform: translateX(120%); }
.merak-prop .merak-prop-btn:active { transform: translateY(-1px) scale(.97); transition-duration: .1s; }
.merak-prop .merak-prop-btn:disabled { transform: none !important; }
.merak-prop .merak-prop-btn .merak-prop-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	transform: scale(0);
	animation: merak-prop-ripple .6s ease-out forwards;
	pointer-events: none;
}
@keyframes merak-prop-ripple { to { transform: scale(1); opacity: 0; } }

/* Parallax del fondo "aurora" (encabezado del directorio, fichas de
   anunciante/propiedad, páginas de servicio): assets/js/merak.js mueve
   ".merak-prop-aurora" con un translateY() sutil ligado al scroll — esta
   regla solo declara la transición para que ese desplazamiento (aplicado
   directo en el atributo style por JS) se vea suave en vez de "saltar". */
.merak-prop-aurora { transition: transform .05s linear; will-change: transform; }

/* ------------------------------------------------------------------ */
/* v1.2.0 — Pulido de diseño: textura "tech-grid" de fondo + entrada       */
/* escalonada de héroes, calcadas de homepage-actual.html (misma técnica   */
/* EXACTA: líneas de grilla con "mask-image" radial, y @keyframes con una   */
/* variable CSS "--d" por elemento para escalonar el retraso) — para que    */
/* el encabezado del directorio y los héroes de "Vendemos tu propiedad"/     */
/* "Importados" se sientan la MISMA marca que la portada real del sitio.   */
/* ------------------------------------------------------------------ */

/* Textura de fondo: líneas de grilla casi invisibles (5% de opacidad),
   recortadas con una máscara radial para que se noten más cerca del centro
   y se desvanezcan hacia los bordes — puramente decorativo (aria-hidden),
   ".merak-prop-directorio-encabezado" y ".merak-prop-servicio-hero" ya son
   "position:relative;overflow:hidden", así que solo hace falta agregar
   este <span> detrás del texto (z-index:0, igual que el fondo "aurora"). */
.merak-prop-tech-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 15%, black 30%, transparent 85%);
	mask-image: radial-gradient(ellipse 75% 60% at 50% 15%, black 30%, transparent 85%);
	pointer-events: none;
	z-index: 0;
}

/* Entrada escalonada de héroe: a diferencia de ".reveal" (pensado para
   contenido que arranca FUERA de pantalla y se revela al hacer scroll),
   estos dos héroes están siempre visibles desde el primer fotograma (van
   arriba de todo), así que en vez de depender del IntersectionObserver se
   anima cada elemento apenas carga la página, con un pequeño retraso propio
   por elemento (variable CSS "--d", en el atributo style de cada elemento,
   ver includes/directory.php, includes/vendemos-tu-propiedad.php e
   includes/propiedades-importados.php) — mismos tiempos/curva exactos que
   ".hero-enter"/".hero-enter-scale" de homepage-actual.html. */
@keyframes merak-prop-hero-enter { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes merak-prop-hero-enter-escala { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* v1.5.13 — acortado de .8s/.9s a .45s/.5s (ver el mismo pedido explicado
   arriba, en el comentario de ".reveal"); los "--d" (retraso por elemento,
   en el atributo style de cada uno — ver includes/directory.php,
   vendemos-tu-propiedad.php, propiedades-importados.php y repuestos.php)
   también se acortaron a la mitad en esos 4 archivos. */
.merak-prop .merak-prop-hero-enter { opacity: 0; animation: merak-prop-hero-enter .45s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
.merak-prop .merak-prop-hero-enter-escala { opacity: 0; animation: merak-prop-hero-enter-escala .5s cubic-bezier(.22,1,.36,1) forwards; animation-delay: var(--d, 0s); }
/* OJO: igual que ".reveal" (ver comentario más arriba), la regla ya
   existente en "Base" (".merak-prop, .merak-prop *" con animation-duration
   0.01ms bajo prefers-reduced-motion) ya hace que esta animación de entrada
   sea, en la práctica, instantánea para quien pida menos movimiento — el
   contenido siempre queda visible (fill-mode: forwards). */