/*
 * Estilos de ESQUELETO (Fase 1): solo estructura y usabilidad.
 * El diseño final se define en la Fase 2 ("piel") desde el tema.
 */
:root {
	--ll-venta: #c2410c;
	--ll-renta: #2563eb;
	--ll-wa: #16a34a;
	--ll-border: #d4d4d8;
	--ll-muted: #52525b;
	--ll-radius: 8px;
}

/* Botones */
.llavin-btn { display: inline-block; padding: .7em 1.2em; border: 0; border-radius: var(--ll-radius); background: #18181b; color: #fff !important; text-decoration: none; font: inherit; font-weight: 600; cursor: pointer; }
.llavin-btn--wa { background: var(--ll-wa); }
.llavin-btn--ghost { background: transparent; color: #18181b !important; border: 1px solid #18181b; }

/* Pestañas Comprar / Rentar */
.llavin-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; }
.llavin-tab { padding: .5em 1em; border: 1px solid var(--ll-border); border-radius: 999px; cursor: pointer; }
.llavin-tab:has(input:checked) { background: #18181b; color: #fff; border-color: #18181b; }
.llavin-tab input { position: absolute; opacity: 0; pointer-events: none; }

/* Buscador y filtros */
.llavin-buscador, .llavin-filters { padding: 1.25rem; border: 1px solid var(--ll-border); border-radius: var(--ll-radius); margin-bottom: 1.5rem; }
.llavin-buscador-fields, .llavin-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; align-items: end; }
.llavin-filters .llavin-tabs { grid-column: 1 / -1; margin: 0; }
.llavin-buscador label, .llavin-filters label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.llavin-buscador select, .llavin-buscador input, .llavin-filters select, .llavin-filters input[type=number] { padding: .55em; border: 1px solid var(--ll-border); border-radius: 6px; font: inherit; }
.llavin-buscador-alt { margin: .75rem 0 0; }
.llavin-count { color: var(--ll-muted); }

/* Tarjetas */
.llavin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin: 1rem 0; }
.llavin-card { border: 1px solid var(--ll-border); border-radius: var(--ll-radius); overflow: hidden; background: #fff; }
.llavin-card-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #f4f4f5; }
.llavin-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.llavin-card-noimg { display: grid; place-items: center; height: 100%; color: var(--ll-muted); }
.llavin-card-body { padding: .9rem 1rem 1rem; }
.llavin-card-body h3 { font-size: 1rem; margin: .25rem 0; }
.llavin-card-body p { margin: .2rem 0; }
.llavin-price { font-weight: 700; font-size: 1.15rem; margin: 0; }
.llavin-place, .llavin-specs, .llavin-ref { color: var(--ll-muted); font-size: .9rem; }
.llavin-badge { display: inline-block; padding: .2em .6em; border-radius: 4px; color: #fff; font-size: .8rem; font-weight: 600; text-transform: uppercase; }
.llavin-card .llavin-badge { position: absolute; top: .6rem; left: .6rem; }
.llavin-badge--venta { background: var(--ll-venta); }
.llavin-badge--renta { background: var(--ll-renta); }
.llavin-pagination { display: flex; gap: .5rem; flex-wrap: wrap; }
.llavin-pagination a, .llavin-pagination span { padding: .3em .7em; border: 1px solid var(--ll-border); border-radius: 4px; }
.llavin-pagination span { background: #18181b; color: #fff; }

/* Mapa */
.llavin-map { margin: 1rem 0 1.5rem; }
.llavin-map-canvas { width: 100%; border-radius: var(--ll-radius); z-index: 0; }
.llavin-map-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: .75rem; }
.llavin-map-controls label { display: flex; flex-direction: column; gap: .25rem; }
.llavin-map-controls select { padding: .55em; min-width: 260px; }
.llavin-radius { border: 0; padding: 0; margin: 0; display: flex; gap: .75rem; align-items: center; }
.llavin-radius legend { font-size: .9rem; margin-bottom: .25rem; }
.llavin-map-results { margin-top: .75rem; }
.llavin-near { padding-left: 1.2rem; }
.llavin-dist { color: var(--ll-muted); font-size: .9rem; }
/* Etiquetas de precio de las propiedades (protagonistas del mapa) */
.llavin-pin-wrap { background: none; border: 0; }
.llavin-pin { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 8px)); display: inline-block; padding: .35em .7em; border-radius: 999px; background: var(--ll-venta); color: #fff; font: 700 13px/1.2 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.35); border: 2px solid #fff; cursor: pointer; transition: transform .15s, opacity .15s; }
.llavin-pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }
.llavin-pin::before { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: inherit; z-index: 1; }
/* Un color por tipo de propiedad (mapa y leyenda). */
:root { --ll-tipo-casa: #166534; --ll-tipo-departamento: #2563eb; --ll-tipo-bodega: #d97706; --ll-tipo-terreno: #7c3aed; --ll-tipo-comercial: #db2777; }
.llavin-pin--casa { background: var(--ll-tipo-casa); }
.llavin-pin--departamento { background: var(--ll-tipo-departamento); }
.llavin-pin--bodega { background: var(--ll-tipo-bodega); }
.llavin-pin--terreno { background: var(--ll-tipo-terreno); }
.llavin-pin--comercial { background: var(--ll-tipo-comercial); }
.llavin-pin-wrap.is-dim .llavin-pin { opacity: .3; }
.llavin-pin-wrap.is-near .llavin-pin, .llavin-pin-wrap.is-hover .llavin-pin, .llavin-pin:hover { transform: translate(-50%, calc(-100% - 8px)) scale(1.15); }
.llavin-pin-wrap.is-hover .llavin-pin { box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 4px 14px rgba(0,0,0,.4); }
.llavin-poi { opacity: .9; }
.llavin-pin--mini { position: static; transform: none !important; display: inline-block; width: 14px; height: 14px; padding: 0; border-width: 2px; box-shadow: 0 0 0 1px rgba(15,23,42,.15); cursor: default; vertical-align: -2px; }
.llavin-pin--mini::before, .llavin-pin--mini::after { display: none; }
.llavin-poi span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); font-size: 14px; }

/* Ficha */
.llavin-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; margin-bottom: 1.5rem; }
.llavin-gallery--5 { grid-template-columns: 2fr 1fr 1fr; }
.llavin-gallery--1 { grid-template-columns: 1fr; }
.llavin-gallery a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; }
.llavin-gallery a.is-main { grid-row: span 2; aspect-ratio: auto; }
.llavin-gallery--1 a.is-main { grid-row: auto; aspect-ratio: 16 / 9; }
.llavin-gallery--2 { grid-template-columns: 1fr 1fr; }
.llavin-gallery--2 a.is-main { grid-row: auto; aspect-ratio: 4 / 3; }
.llavin-gallery a.is-extra { display: none; }
.llavin-more-photos { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 23, 42, .55); color: #fff; font-weight: 700; font-size: 1.1rem; }
.llavin-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.llavin-ficha-head { margin-bottom: 1.5rem; }
.llavin-ficha-head .llavin-price { font-size: 1.8rem; margin: .4rem 0; }
.llavin-facts dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin: 0 0 1.5rem; }
.llavin-facts dl div { padding: .75rem; border: 1px solid var(--ll-border); border-radius: 6px; }
.llavin-facts dt { color: var(--ll-muted); font-size: .85rem; }
.llavin-facts dd { margin: 0; font-weight: 700; }
.llavin-amenities ul { columns: 2; }
.llavin-embed { position: relative; aspect-ratio: 16 / 9; }
.llavin-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }
.llavin-ficha section { margin-bottom: 2rem; }
.llavin-sticky { position: sticky; bottom: 0; display: flex; gap: .5rem; justify-content: flex-end; padding: .75rem 0; background: linear-gradient(transparent, #fff 35%); z-index: 10; }
@media (max-width: 700px) {
	.llavin-gallery { grid-template-columns: 1fr 1fr; }
	.llavin-gallery a.is-main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
	.llavin-sticky { position: fixed; left: 0; right: 0; padding: .6rem; background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,.12); }
	.llavin-sticky .llavin-btn { flex: 1; text-align: center; }
	.llavin-amenities ul { columns: 1; }
}

/* Formularios */
.llavin-form fieldset { border: 1px solid var(--ll-border); border-radius: var(--ll-radius); margin: 0 0 1rem; padding: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.llavin-form legend { font-weight: 700; padding: 0 .4rem; }
.llavin-input label { display: block; }
.llavin-input input, .llavin-input select, .llavin-input textarea { width: 100%; padding: .55em; border: 1px solid var(--ll-border); border-radius: 6px; font: inherit; box-sizing: border-box; }
.llavin-hp { position: absolute; left: -9999px; }
.llavin-error { padding: .75rem 1rem; border-radius: 6px; background: #fee2e2; color: #991b1b; }
.llavin-note { color: var(--ll-muted); font-size: .9rem; }

/* Bloques de portada */
.llavin-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.llavin-accesos ul { list-style: none; padding: 0; }
.llavin-accesos span { color: var(--ll-muted); }
.llavin-cta-owners { display: grid; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--ll-border); border-radius: var(--ll-radius); }
.llavin-cta-owners h2 { margin: .25rem 0 .75rem; }
.llavin-cta-owners-art { display: none; }

/* WhatsApp flotante */
.llavin-wa-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; padding: .8em 1.1em; border-radius: 999px; background: var(--ll-wa); color: #fff !important; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.25); }