/* ==================================================================
   COMPREPROP - capa propia sobre estilo.css (vyse)
   ------------------------------------------------------------------
   Se carga DESPUES de estilo.css y solo pisa: tokens de color, header,
   banners, listado estilo MELI inmuebles y la ficha. estilo.css queda
   igual al de vyse, asi se puede comparar o traer arreglos de alla.

   Paleta: el azul del boton de los banners (#2d3192) como marca.
   ================================================================== */

/* ---------- TOKENS: modo dia ---------- */
:root {
  --maxw:      1240px;
  --bg:        #eef0f4;
  --surface:   #ffffff;
  --surface-2: #f5f6f9;
  --text:      #1b1f2a;
  --text-2:    #555d6e;
  --text-3:    #8a91a0;
  --border:    rgba(20,30,60,.10);
  --shadow:    0 1px 2px rgba(20,30,60,.10);
  --shadow-h:  0 8px 24px rgba(20,30,60,.14);

  --cp-azul:   #2d3192;
  --cp-azul-h: #23277a;
  --hd-bg:     var(--cp-azul);
  --hd-ink:    #ffffff;
  --action:    #2f5bd6;
  --action-h:  #2449b3;
  --action-sf: rgba(47,91,214,.10);
  --ok:        #00a650;
  --cp-badge-bg: #e8edff;
  --cp-badge-ink: #2d3192;
}

/* ---------- TOKENS: modo noche ---------- */
:root[data-theme="dark"] {
  --bg:        #0f1219;
  --surface:   #181c26;
  --surface-2: #202533;
  --text:      #eef0f5;
  --text-2:    #b4bac7;
  --text-3:    #838a99;
  --border:    rgba(255,255,255,.10);
  --shadow:    0 1px 2px rgba(0,0,0,.5);
  --shadow-h:  0 8px 24px rgba(0,0,0,.55);

  --hd-bg:     #161a2e;
  --hd-ink:    #eef0f5;
  --action:    #8ea6ff;
  --action-h:  #b0c0ff;
  --action-sf: rgba(142,166,255,.14);
  --cp-badge-bg: rgba(142,166,255,.16);
  --cp-badge-ink: #c3cfff;
  /* el azul de marca es muy oscuro sobre fondo oscuro: en noche se aclara */
  --marca:       #5a63e0;
  --marca-rgb:   90,99,224;
  --marca-ink:   #ffffff;
  --marca-hover: #6d75ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0f1219; --surface:#181c26; --surface-2:#202533;
    --text:#eef0f5; --text-2:#b4bac7; --text-3:#838a99;
    --border:rgba(255,255,255,.10); --shadow:0 1px 2px rgba(0,0,0,.5);
    --shadow-h:0 8px 24px rgba(0,0,0,.55);
    --hd-bg:#161a2e; --hd-ink:#eef0f5;
    --action:#8ea6ff; --action-h:#b0c0ff; --action-sf:rgba(142,166,255,.14);
    --cp-badge-bg:rgba(142,166,255,.16); --cp-badge-ink:#c3cfff;
    --marca:#5a63e0; --marca-rgb:90,99,224; --marca-ink:#fff; --marca-hover:#6d75ec;
  }
}

/* ==================================================================
   HEADER: barra de marca + buscador blanco grande (como MELI)
   ================================================================== */
.hd { box-shadow: none; }
.hd-in { height: 64px; gap: 22px; }
/* logo en blanco sobre la barra azul (el original es azul) */
.hd-logo img,
:root[data-theme="dark"] .hd-logo img { height: 38px; filter: brightness(0) invert(1); }

.hd-search { max-width: 640px; }
.hd-search input {
  height: 42px; border: 0; border-radius: 6px;
  background: #fff; color: #1b1f2a;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  font-size: 15px; padding-left: 16px;
}
.hd-search input:hover { background: #fff; }
.hd-search input::placeholder { color: #8a91a0; }
.hd-search input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.35); outline: none; }
.hd-search button { color: #555d6e; }
.hd-search button:hover { color: var(--cp-azul); }
:root[data-theme="dark"] .hd-search input { background: #232838; color: #eef0f5; box-shadow: none; }
:root[data-theme="dark"] .hd-search input::placeholder { color: #8b93a6; }
:root[data-theme="dark"] .hd-search button { color: #b4bac7; }

.hd .ico-btn { color: var(--hd-ink); }
.hd .ico-btn:hover { background: rgba(255,255,255,.14); }

/* tira de tipos de inmueble */
.hd-nav { background: var(--hd-bg); border-top: 1px solid rgba(255,255,255,.14); }
:root[data-theme="dark"] .hd-nav { border-top-color: rgba(255,255,255,.07); }
.hd-nav-in a { color: rgba(255,255,255,.88); opacity: 1; font-size: 14px; }
.hd-nav-in a:hover { color: #fff; }
.hd-nav-in a.on { color: #fff; }
.hd-nav-in a.hd-nav-home,
.hd-nav-in a.hd-nav-mas { color: #fff; font-weight: 600; }
.hd-nav-in a.hd-nav-home { border-right-color: rgba(255,255,255,.22); }
.hd-nav-in a.hd-nav-mas  { border-left-color:  rgba(255,255,255,.22); }

/* ==================================================================
   BANNERS 2 x 2 (los 4 del siteconfig)
   ================================================================== */
.coms { max-width: var(--maxw); margin: 22px auto 6px; gap: 18px; padding: 0 16px; }
.coms-cl .com {
  background: var(--surface); color: var(--text);
  border: 0; box-shadow: var(--shadow); border-radius: 10px; min-height: 190px;
}
.coms-cl .com:hover { box-shadow: var(--shadow-h); }
.com-t { padding: 26px 26px; gap: 8px; }
.com-t b { font-size: 21px; font-weight: 800; letter-spacing: -.2px; color: var(--text); }
.coms-cl .com-t i { color: var(--text-2); font-size: 14px; }
.coms-cl .com-b { background: var(--cp-azul); color: #fff; padding: 10px 20px; font-size: 14px; border-radius: 7px; margin-top: 10px; }
.coms-cl .com:hover .com-b { background: var(--cp-azul-h); }
:root[data-theme="dark"] .coms-cl .com-b { background: var(--marca); }
.com-f { flex: 0 0 45%; }

/* ==================================================================
   LISTADO: lateral de filtros + grilla (MELI inmuebles)
   ================================================================== */
.cp-lay {
  max-width: var(--maxw); margin: 26px auto 10px; padding: 0 16px;
  display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px;
  align-items: start;
}
.cp-side { padding-top: 4px; }
.cp-side-h { margin-bottom: 18px; }
.cp-crumb { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.cp-side-h h1 { font-size: 24px; font-weight: 600; color: var(--text); line-height: 1.2; }
.cp-n { display: block; margin-top: 6px; font-size: 14px; color: var(--text-2); }

.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.cp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 5px 10px; border-radius: 16px; font-size: 13px;
}
.cp-chip span { color: var(--text-3); font-size: 16px; line-height: 1; }
.cp-chip:hover { border-color: var(--action); text-decoration: none; }
.cp-limpiar { font-size: 13px; align-self: center; }

.cp-fc { margin-bottom: 26px; }
.cp-fc h2 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.cp-fc h2 small { font-weight: 400; color: var(--text-3); font-size: 13px; }
.cp-fc ul { list-style: none; margin: 0; padding: 0; }
.cp-fc li { margin: 0 0 9px; }
.cp-fc li a { font-size: 14px; color: var(--text-2); }
.cp-fc li a span { color: var(--text-3); }
.cp-fc li a:hover { color: var(--action); text-decoration: none; }
.cp-fc li.cp-mas { display: none; }
.cp-mas-ck { position: absolute; opacity: 0; pointer-events: none; }
.cp-mas-ck:checked + ul li.cp-mas { display: list-item; }
.cp-mas-ck:checked ~ .cp-mas-lbl { display: none; }
.cp-mas-lbl { font-size: 14px; color: var(--action); cursor: pointer; }

.cp-rango { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cp-rango input {
  width: 0; flex: 1 1 0; height: 34px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.cp-rango input:focus { outline: 2px solid var(--action-sf); border-color: var(--action); }
.cp-rango span { color: var(--text-3); }
.cp-rango button {
  flex: 0 0 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--action-sf); color: var(--action); font-size: 20px; line-height: 1;
}
.cp-rango button:hover { background: var(--action); color: #fff; }

.cp-top { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 14px; min-height: 36px; }
.cp-orden { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.cp-orden label { font-weight: 600; }
.cp-orden select {
  border: 0; background: transparent; color: var(--action); font: inherit; font-size: 14px;
  padding: 4px 2px; cursor: pointer;
}
.cp-orden select option { color: #1b1f2a; }
.cp-btn-filtros, .cp-cerrar, .cp-n-m { display: none; }

.cp-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* ---------- tarjeta de propiedad ---------- */
.pc {
  background: var(--surface); border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: box-shadow .16s, transform .16s;
}
.pc:hover { box-shadow: var(--shadow-h); transform: translateY(-2px); }
.pc-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.pc-img .ph-img { height: 100%; }
.pc-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--cp-badge-bg); color: var(--cp-badge-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px;
}
.pc-img .pc-badge { background: #fff; color: var(--cp-azul); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.pc-b { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pc-tipo { font-size: 13px; color: var(--text-2); }
.pc-old { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.pc-precio { font-size: 24px; font-weight: 400; color: var(--text); letter-spacing: -.3px; line-height: 1.2; margin-top: 2px; }
.pc-precio.sm { font-size: 17px; color: var(--text-2); }
.pc-attr { font-size: 14px; color: var(--text); margin-top: 2px; }
.pc-h { margin: 6px 0 0; font-size: 14px; font-weight: 400; line-height: 1.35; }
.pc-h a {
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-h a:hover { color: var(--action); text-decoration: none; }
.pc-ubi { font-size: 13px; color: var(--text-2); }

/* las tarjetas en sliders (relacionados) usan el mismo ancho que la grilla */
.slider-t > .pc { flex: 0 0 260px; width: 260px; scroll-snap-align: start; }
@media (max-width: 520px) { .slider-t > .pc { flex-basis: 78vw; width: 78vw; } }

.cp-vacio {
  background: var(--surface); border-radius: 8px; box-shadow: var(--shadow);
  padding: 40px 24px; text-align: center;
}
.cp-vacio h2 { font-size: 20px; margin-bottom: 8px; }
.cp-vacio p { color: var(--text-2); margin: 0 0 18px; }
.cp-vacio .btn { display: inline-flex; width: auto; }

.pager .on { background: var(--cp-azul); }
:root[data-theme="dark"] .pager .on { background: var(--marca); }

/* ==================================================================
   FICHA
   ================================================================== */
.pdp-cp-tipo { display: block; font-size: 14px; color: var(--text-2); margin-bottom: 4px; }
.pdp-cp-attr { font-size: 16px; color: var(--text); margin-top: 10px; }
.pdp-cp-ubi { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; }
.pdp-cp-ubi svg { flex: 0 0 auto; }
.pdp-desc h2 { margin-top: 26px; }
.pdp-desc h2:first-child { margin-top: 0; }
.pdp-video { position: relative; aspect-ratio: 16 / 9; margin-top: 12px; border-radius: 8px; overflow: hidden; background: #000; }
.pdp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.btn-1 { background: var(--cp-azul); }
.btn-1:hover { background: var(--cp-azul-h); }
:root[data-theme="dark"] .btn-1 { background: var(--marca); }
:root[data-theme="dark"] .btn-1:hover { background: var(--marca-hover); }
.pdp-precio { font-weight: 400; }

/* ==================================================================
   MOBILE
   ================================================================== */
@media (max-width: 900px) {
  .cp-lay { grid-template-columns: 1fr; gap: 0; margin-top: 14px; }

  /* el lateral pasa a ser un panel que se abre con "Filtrar" (#filtros) */
  .cp-side {
    display: none;
    position: fixed; inset: 0; z-index: 80; overflow-y: auto;
    background: var(--bg); padding: 0 18px 40px;
  }
  .cp-side:target { display: block; }
  .cp-cerrar {
    display: block; position: sticky; top: 0; z-index: 2; margin: 0 -18px 16px;
    padding: 14px 18px; background: var(--cp-azul); color: #fff; font-weight: 600; text-align: center;
  }
  .cp-cerrar:hover { text-decoration: none; color: #fff; }
  .cp-btn-filtros {
    display: inline-flex; align-items: center; gap: 6px; margin-right: auto;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    padding: 7px 14px; border-radius: 18px; font-size: 14px; font-weight: 600;
  }
  .cp-btn-filtros:hover { text-decoration: none; }
  .cp-n-m { display: inline; font-size: 13px; color: var(--text-2); margin-right: auto; margin-left: -4px; }
  .cp-btn-filtros { margin-right: 0; }
  .cp-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
}
@media (max-width: 780px) {
  /* En el celular los 4 banners apilados empujaban las propiedades una
     pantalla y media para abajo: pasan a ser un carrusel que se desliza
     de costado, con el borde del siguiente asomando para que se note. */
  .coms {
    display: flex; gap: 10px; margin: 12px 0 4px; padding: 2px 16px 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .coms::-webkit-scrollbar { display: none; }
  .coms-cl .com { flex: 0 0 86%; min-height: 150px; scroll-snap-align: start; }
  .coms-cl .com:hover { transform: none; }
  .com-t { flex: 1 1 58%; padding: 14px 14px; gap: 4px; }
  .com-t b { font-size: 16px; line-height: 1.2; }
  .coms-cl .com-t i { font-size: 12.5px; -webkit-line-clamp: 2; }
  .coms-cl .com-b { padding: 7px 13px; font-size: 13px; margin-top: 6px; }
  .com-f { flex: 0 0 42%; }
}
@media (max-width: 520px) {
  .cp-grid { grid-template-columns: 1fr; }
  .hd-in { height: 58px; gap: 10px; }
  .hd-logo img, :root[data-theme="dark"] .hd-logo img { height: 30px; }
}

/* ==================================================================
   GALERIA DE LA FICHA: la foto llena el cuadro (sin marco blanco)
   ------------------------------------------------------------------
   estilo.css viene de vyse, donde las fotos son productos recortados
   sobre blanco: caja de alto fijo + 26px de aire + object-fit:contain.
   Las fotos de propiedades son 4:3 apaisadas: van a sangre en un cuadro
   4:3, sin aire, y el fondo oscuro solo se ve si alguna foto es vertical.
   ================================================================== */
.gal-mw { position: relative; order: 1; min-width: 0; }
@media (min-width: 640px) { .gal-mw { order: 2; } }
.gal-m { background: #111; border-radius: 8px; }
.gal-m > div,
.gal-m > div[id] { height: auto; aspect-ratio: 4 / 3; padding: 0; }
@media (max-width: 639px) { .gal-m > div { aspect-ratio: 4 / 3; padding: 0; } }
.gal-m img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
/* Video: el reproductor de YouTube es 16:9. Estirado a la caja 4:3 de
   las fotos, YouTube recorta la portada por los costados y los titulos
   de la miniatura salian cortados. Va a 16:9 centrado, con franjas
   negras arriba y abajo, igual que cuando el video ya arranco. */
.gal-m #gv { background: #000; }
.gal-m #gv iframe { width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; }
.gal-th { max-height: none; }
@media (min-width: 640px) { .gal-th { max-height: 520px; } }
.gal-th a { padding: 0; background: var(--surface-2); }
.gal-th img { object-fit: cover; }

.gal-ar {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: #1b1f2a; font-size: 18px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); display: grid; place-items: center;
  opacity: .9; transition: opacity .15s, transform .15s;
}
.gal-ar:hover { opacity: 1; transform: translateY(-50%) scale(1.06); }
.gal-ar-prev { left: 12px; }
.gal-ar-next { right: 12px; }
.gal-cont {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 12px; pointer-events: none;
}
.gal-cont:empty { display: none; }
@media (max-width: 639px) { .gal-ar { width: 36px; height: 36px; font-size: 15px; } }

/* ---- banners: la descripcion entera (3 renglones) ---- */
.coms-cl .com-t i { -webkit-line-clamp: 3; }
/* los 2 de abajo, despues del listado */
.cp-lay + .coms { margin-top: 30px; }

/* ==================================================================
   PIE: "Contactanos 3515947548" en una linea
   ================================================================== */
.ft-cont a.ft-tel { font-size: 16px; }
.ft-cont a.ft-tel em { display: inline; font-size: 14px; font-weight: 400; color: var(--text-2); }
.ft-marca strong { font-size: 16px; }

/* estilo.css ata la fila de la foto a 460px (--gal-h). Con la foto 4:3
   a todo el ancho mide mas, y se montaba sobre la descripcion: la fila
   va al alto real de la galeria (min-content evita el hueco que esa
   regla de vyse queria evitar). */
@media (min-width: 900px) {
  .pdp-box { grid-template-rows: min-content auto; }
}