/* ════════════════════════════════════════════════════════════════════════
   Puyella — la base de la página del mapa. Las tarjetas están en
   tarjetas.css, que se carga antes.

   🚨 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.
   ════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cab-h) + 12px)}
body{margin:0;font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;color:var(--tinta);background:var(--papel);
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;border-radius:8px}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Pastilla segmentada (Venta / Alquiler, Lista / Mapa) ──────────────── */
.seg{display:inline-flex;gap:6px;padding:6px;background:var(--papel-2);border-radius:999px}
.seg button{height:56px;padding:0 30px;border:0;border-radius:999px;background:transparent;
  font:600 15px/1 "Open Sans",sans-serif;color:var(--tinta-2);cursor:pointer;
  transition:background 200ms var(--curva),color 200ms var(--curva),box-shadow 200ms var(--curva)}
.seg button[aria-pressed="true"]{background:var(--tinta);color:#fff;box-shadow:0 2px 8px rgba(38,39,42,.26)}
.seg-chica button{height:40px;padding:0 22px;font-size:14px}
.seg-caps button{height:36px;padding:0 20px;font:700 10px/1 "Open Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){
  .seg button[aria-pressed="false"]:hover{color:var(--tinta);background:rgba(38,39,42,.05)}
}

/* ── Desplegable del mapa ── */
.despl{position:relative}
.despl-flecha{font-size:11px;color:var(--gris);transition:transform 200ms var(--curva);flex:none}
.despl[data-abierto] .despl-flecha{transform:rotate(180deg)}

/* ── WhatsApp flotante (el de siempre) ─────────────────────────────────── */
.wa{position:fixed;z-index:55;right:20px;bottom:24px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.42);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity 320ms var(--curva),transform 320ms var(--curva),background-color 200ms var(--curva)}
.wa[data-show]{opacity:1;transform:none;pointer-events:auto}
.wa:active{transform:scale(.94)}
.wa svg{width:33px;height:33px}
/* El latido va en un halo detrás, no en el botón: si escala el botón, el
   blanco al que apuntan se mueve justo cuando lo van a tocar. */
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;opacity:0}
.wa[data-show]::after{animation:latir 2.6s var(--curva) infinite}
@keyframes latir{0%{transform:scale(1);opacity:.5}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}
@media (hover:hover) and (pointer:fine){ .wa:hover{background:#1eb655} }
@media (max-width:560px){ .wa{right:14px;bottom:18px;width:57px;height:57px} }
.sin-flotantes .wa{opacity:0 !important;pointer-events:none !important}
.con-bandeja .wa{transform:translateY(-78px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}