/* ════════════════════════════════════════════════════════════════════════
   Puyella — las tarjetas de propiedad y lo que las rodea (favoritas,
   comparar). Las usan la portada y el mapa; el resto del mapa está en
   sitio.css.

   🚨 Vive en /sitio/ y NO en /assets/: vercel.json cachea /assets/ un año
   como inmutable, y un cambio acá no le llegaría a nadie.

   Sin reglas globales (body, a, img, .wa): la portada tiene las suyas y
   estas no las pisan. Todo :hover vive dentro de (hover:hover) and
   (pointer:fine): en un teléfono no se pasa por encima de nada.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --rojo:#cd181f;
  --rojo-hover:#a3131a;
  --gris:#6d6e70;             /* gris exacto del logo */
  --tinta:#26272a;
  --tinta-2:#4c4d50;
  --papel:#f6f6f5;
  --papel-2:#f1f1ef;          /* papel hundido: pastillas y fondos de control */
  --blanco:#fff;
  --linea:rgba(38,39,42,.10);
  --linea-2:rgba(38,39,42,.16);
  --wa:#128c4a;
  --curva:cubic-bezier(.22,1,.36,1);
  --sombra-1:0 1px 3px rgba(38,39,42,.09);
  --sombra-2:0 22px 46px -16px rgba(38,39,42,.28);
}

.rotulo{font:700 9.5px/1 "Open Sans",sans-serif;letter-spacing:.28em;text-transform:uppercase;color:var(--gris)}

/* ── Botones ───────────────────────────────────────────────────────────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:54px;padding:0 30px;border-radius:999px;border:1px solid transparent;
  font:600 15px/1 "Open Sans",sans-serif;cursor:pointer;white-space:nowrap;
  transition:background 200ms var(--curva),color 200ms var(--curva),border-color 200ms var(--curva),transform 200ms var(--curva)}
.boton-rojo{background:var(--rojo);color:#fff}
.boton-linea{background:transparent;color:var(--tinta);border-color:rgba(38,39,42,.2)}
.boton-chico{height:42px;padding:0 18px;font-size:14px}
.punto{width:7px;height:7px;border-radius:999px;background:var(--rojo);flex:none}
@media (hover:hover) and (pointer:fine){
  .boton-rojo:hover{background:var(--rojo-hover);transform:translateY(-1px)}
  .boton-linea:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
}

/* ── Pastillas de dato ─────────────────────────────────────────────────── */
.pild{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;
  background:var(--papel-2);font:700 10.5px/1 "Open Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta-2);white-space:nowrap}
.pild-falta{background:transparent;border:1px dashed rgba(38,39,42,.28);color:var(--gris)}
.op{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;background:#fff;
  font:700 10px/1 "Open Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);
  box-shadow:0 2px 6px rgba(38,39,42,.16)}

/* ── La tarjeta de la portada ──────────────────────────────────────────────
   Lo que la sostiene es lo que NUNCA falta: operación, tipo, título y
   dirección. Foto, precio y superficie faltan en una de cada tres fichas, y
   cada hueco tiene su forma: nunca un blanco, nunca un cero. */
.tarjeta{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:28px;
  padding:10px 10px 22px;box-shadow:var(--sombra-1);
  transition:box-shadow 240ms var(--curva),transform 240ms var(--curva)}
.tarjeta-foto{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--papel-2)}
.tarjeta-foto img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--curva)}
.sin-foto{width:100%;height:100%;background:var(--gris);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 16px}
.sin-foto svg{width:44px;height:44px;padding:11px;border:1.5px solid rgba(255,255,255,.55);border-radius:999px}
.sin-foto b{font:700 11px/1.3 "Open Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase}
.sin-foto span{font:400 12px/1 "Open Sans",sans-serif}
.tarjeta .op{position:absolute;top:12px;left:12px;z-index:2}
.acciones{position:absolute;top:12px;right:12px;display:flex;gap:7px;z-index:3}
.accion{width:34px;height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.94);color:var(--tinta);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px rgba(38,39,42,.16);
  transition:background 180ms var(--curva),color 180ms var(--curva),transform 180ms var(--curva)}
.accion svg{width:16px;height:16px}
.accion[aria-pressed="true"]{background:var(--rojo);color:#fff}
.accion:active{transform:scale(.92)}
/* La portada tiene un :focus-visible con radio de 4px que le ganaba a estos. */
.accion:focus-visible,.ver-mapa:focus-visible,.boton:focus-visible,.bandeja-x:focus-visible,.cerrar:focus-visible{border-radius:999px}
.tarjeta-cuerpo{padding:20px 12px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.linea-precio{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:30px}
.precio{font:600 25px/1 "Open Sans",sans-serif;letter-spacing:-.024em;white-space:nowrap}
.consultar{display:inline-flex;align-items:center;gap:8px;font:600 17px/1 "Open Sans",sans-serif;letter-spacing:-.01em;white-space:nowrap}
.consultar::after{content:"";width:6px;height:6px;border-radius:999px;background:var(--rojo)}
.tarjeta h3{font:600 16.5px/1.32 "Open Sans",sans-serif;letter-spacing:-.018em;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta .dir{font:400 13.5px/1.4 "Open Sans",sans-serif;color:var(--gris)}
/* Toda la tarjeta es un enlace: el <a> del título se estira por encima, y lo
   que tiene que seguir siendo clickeable aparte sube de capa. */
.tarjeta h3 a::after{content:"";position:absolute;inset:0;border-radius:28px;z-index:1}
.tarjeta-pie{margin-top:auto;padding-top:4px;display:flex;align-items:center;gap:8px;position:relative;z-index:2}
.ver-mapa{height:34px;padding:0 15px 0 12px;display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--linea-2);border-radius:999px;background:#fff;
  font:700 10px/1 "Open Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);
  transition:background 200ms var(--curva),color 200ms var(--curva),border-color 200ms var(--curva)}
.tarjeta[data-vista] .tarjeta-foto img{opacity:.72}
.vista-marca{font:700 9px/1 "Open Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
@media (hover:hover) and (pointer:fine){
  .tarjeta:hover{box-shadow:var(--sombra-2);transform:translateY(-3px)}
  .tarjeta:hover .tarjeta-foto img{transform:scale(1.035)}
  .accion:hover{background:var(--tinta);color:#fff}
  .accion[aria-pressed="true"]:hover{background:var(--rojo-hover)}
  .ver-mapa:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
}

/* ── La tarjeta de la lista del mapa ───────────────────────────────────────
   Hermana de la de portada: mismo idioma, otro formato. Horizontal, porque
   la columna mide 460px y tiene que entrar media docena sin scroll. */
.tlista{position:relative;min-width:0;display:flex;gap:14px;padding:10px;background:#fff;border-radius:20px;cursor:pointer;
  box-shadow:var(--sombra-1);outline:1px solid rgba(38,39,42,.08);outline-offset:-1px;
  transition:box-shadow 220ms var(--curva),outline-color 220ms var(--curva)}
.tlista-foto{position:relative;flex:0 0 116px;height:116px;border-radius:14px;overflow:hidden;background:var(--papel-2)}
.tlista-foto img{width:100%;height:100%;object-fit:cover}
.tlista-foto .sin-foto{gap:6px;padding:0 8px}
.tlista-foto .sin-foto svg{width:26px;height:26px;padding:6px;border-width:1px}
.tlista-foto .sin-foto b{font-size:9px;letter-spacing:.16em}
.tlista-foto .sin-foto span{font-size:9.5px}
.tlista .op{position:absolute;top:8px;left:8px;height:22px;padding:0 9px;font-size:9px;letter-spacing:.14em;z-index:2}
.tlista-cuerpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:2px 2px 0 0}
.tlista .linea-precio{min-height:0;gap:9px}
.tlista .precio{font-size:20px}
.tlista .consultar{font-size:15px}
.tlista h3{font:600 14.5px/1.32 "Open Sans",sans-serif;letter-spacing:-.018em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tlista h3 a::after{content:"";position:absolute;inset:0;border-radius:20px;z-index:1}
.tlista .dir{display:flex;align-items:center;gap:7px;font:400 12.5px/1.35 "Open Sans",sans-serif;color:var(--gris);min-width:0}
.tlista .dir span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dir-zona{color:var(--tinta)}
.dir-zona b{font-weight:600;white-space:nowrap}
.marca-exacta{width:7px;height:7px;border-radius:999px;background:var(--rojo);flex:none}
.marca-zona{width:11px;height:11px;border-radius:999px;border:1.5px dashed var(--rojo);flex:none}
.tlista-pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}
.tlista-pie .pilds{display:flex;gap:7px;min-width:0;overflow:hidden}
.tlista .pild{height:24px;padding:0 10px;font-size:9.5px}
.tlista .acciones{position:static;gap:6px}
.tlista .accion{width:30px;height:30px;background:transparent;box-shadow:none;border:1px solid rgba(38,39,42,.14)}
.tlista .accion svg{width:14px;height:14px}
.tlista .accion[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo)}
.tlista[data-resaltada]{outline:2px solid var(--rojo);box-shadow:0 18px 38px -14px rgba(205,24,31,.36)}
.tlista[data-vista] .tlista-foto img{opacity:.72}
@media (hover:hover) and (pointer:fine){
  .tlista:hover{box-shadow:0 16px 34px -14px rgba(38,39,42,.3)}
  .tlista[data-resaltada]:hover{box-shadow:0 18px 38px -14px rgba(205,24,31,.42)}
}

/* ── Comparar: bandeja y ventana ───────────────────────────────────────── */
.bandeja{position:fixed;left:50%;bottom:22px;z-index:1100;display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 16px;background:var(--tinta);color:#fff;border-radius:999px;
  box-shadow:0 22px 50px -14px rgba(38,39,42,.55);
  /* 🚨 Se esconde por una distancia fija y con visibility: vacía mide 26px, y
     el 140 % de su propia altura la dejaba asomando como una mancha. */
  transform:translate(-50%,calc(100% + 60px));visibility:hidden;
  transition:transform 380ms var(--curva),visibility 0s linear 380ms}
.bandeja[data-visible]{transform:translate(-50%,0);visibility:visible;transition:transform 380ms var(--curva),visibility 0s}
.bandeja-fotos{display:flex}
.bandeja-fotos span{width:38px;height:38px;border-radius:999px;border:2px solid var(--tinta);overflow:hidden;
  background:var(--gris);margin-left:-10px}
.bandeja-fotos span:first-child{margin-left:0}
.bandeja-fotos img{width:100%;height:100%;object-fit:cover}
.bandeja p{font:600 14px/1.2 "Open Sans",sans-serif;white-space:nowrap}
.bandeja p small{display:block;font:400 11.5px/1.3 "Open Sans",sans-serif;color:#fff;opacity:.8}
.bandeja .boton{height:44px;padding:0 20px;font-size:14px}
.bandeja-x{width:34px;height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
/* En teléfonos chicos la pila de fotos no entra: la cantidad ya está en el texto. */
@media (max-width:400px){ .bandeja{gap:8px;padding-left:14px} .bandeja-fotos{display:none} .bandeja .boton{padding:0 16px} .bandeja-x{flex:none} }
@media (max-width:600px){ .bandeja{left:12px;right:12px;transform:translateY(calc(100% + 60px));border-radius:24px}
  .bandeja[data-visible]{transform:none} .bandeja p small{display:none} }

.ventana{width:min(1180px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:28px;
  background:var(--papel);color:var(--tinta);box-shadow:0 40px 90px -20px rgba(38,39,42,.55)}
.ventana::backdrop{background:rgba(38,39,42,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ventana-cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 28px;background:var(--papel);border-bottom:1px solid var(--linea)}
.ventana-cab h2{font:600 24px/1.1 "Open Sans",sans-serif;letter-spacing:-.024em}
.cerrar{width:44px;height:44px;border:0;border-radius:999px;background:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--sombra-1)}
.cerrar svg{width:16px;height:16px}
.comparativa{padding:22px 28px 28px;overflow-x:auto}
.comparativa table{border-collapse:separate;border-spacing:12px 0;min-width:640px;width:100%;table-layout:fixed}
.comparativa th,.comparativa td{text-align:left;vertical-align:top;padding:12px 4px;border-bottom:1px solid var(--linea)}
.comparativa th{width:130px;font:700 9.5px/1.4 "Open Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.comparativa td{font:400 14.5px/1.45 "Open Sans",sans-serif}
.comparativa .cfoto{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--papel-2)}
.comparativa .cfoto img{width:100%;height:100%;object-fit:cover}
.comparativa .ctit{margin-top:12px;font:600 15px/1.3 "Open Sans",sans-serif;letter-spacing:-.018em}
.comparativa .cmejor{color:#0d6b37;font-weight:600}
.comparativa .cmejor::after{content:" ✓"}
.comparativa .csacar{margin-top:10px;border:0;background:transparent;color:var(--gris);cursor:pointer;
  font:700 9.5px/1 "Open Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:6px 0}