/* La Tierra (T12, 2026-10-02): los estilos del mapa de proyectos, los
   mismos en el sitio de cada inmobiliaria (public/js/tierra.css) y en
   moderniva.pe/mapa (assets/tierra/tierra.css); copia vigilada por
   scripts/verificar-tierra.mjs.
   Rediseño 2026-10-02: el MISMO lenguaje que el visor del plano (D1-D5,
   public/plano.html): buscador flotante, panel pegado al borde en el
   escritorio, hoja en el celular, ficha con precio héroe y muelle. Solo
   claro en las superficies; el espacio detrás del planeta es negro #000.
   Cada página puede pisar --acento (la marca de la cápsula). */
:root{
  --acento: #37352F;          /* ← color de la marca en la cápsula (edita aquí) */
  --fondo: #F7F6F3; --sfc: #FFFFFF; --tinta: #37352F;
  --suave: #6F6D66; --linea: rgba(55,53,47,.12);
  --sombra: 0 2px 6px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.10);
  --tarjeta: #FFFFFF;          /* listas agrupadas (sobre papel, con la marca) */
  --relleno-hover: #EFEDE8;    /* relleno de botones al pasar el mouse */
  --vidrio: #FFFFFF;           /* buscador, chips y controles sobre el mapa */
  --tinta-hover: #4A4740;      /* botón lleno al pasar el mouse */
  /* Colores de estado (mismos significados que el panel y el visor) */
  --e-disp: #3F7D4E; --e-res: #C77E1D; --e-vend: #B5473B;
  --e-disp-texto: #2F6B3E;    /* el verde como letra sobre blanco (≥ 4,5:1) */
  /* Movimiento (mismos resortes que admin/css/tokens.css) */
  --resorte-suave: cubic-bezier(.32, .72, 0, 1);
  --resorte-rebote: cubic-bezier(.34, 1.36, .64, 1);
  --resorte-pulso: cubic-bezier(.3, 1.6, .5, 1);
  --dur-hoja: .45s;           /* panel y hoja (edita aquí) */
  --dur-presion: .1s;         /* hundirse al tocar */
  /* Medidas (edita aquí) */
  --gutter: 12px;             /* margen de lo que flota en el celular */
  --panel-ancho: 408px;       /* panel del escritorio, pegado al borde como Google Maps */
  --control: 44px;            /* botones redondos del mapa (objetivo táctil de 44 px) */
  --asomo: 150px;             /* lo que asoma la hoja del celular: el resumen, sin cortar una fila */
  --arriba: env(safe-area-inset-top, 0px);
  --abajo: env(safe-area-inset-bottom, 0px);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; overflow:hidden; }
body{ font-family:'DM Sans', system-ui, sans-serif; background:#000; color:var(--tinta);
      font-size:15px; -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
button{ font:inherit; font-size:15px; color:inherit; }
[hidden]{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* El espacio detrás del planeta: el cielo real (js/tierra-cielo.js) en un
   lienzo debajo del mapa; el negro queda de respaldo si no hay WebGL */
.tierra{ position:fixed; inset:0; background:#000; }
.cielo{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* ── Arriba: el buscador con la marca (celular: flota; escritorio: dentro del panel) ── */
.cima{ position:fixed; z-index:30; left:var(--gutter); right:var(--gutter); top:calc(var(--gutter) + var(--arriba)); }
.buscador{ display:flex; align-items:center; gap:4px; height:52px; padding:0 6px; background:var(--sfc);
           border-radius:26px; box-shadow:var(--sombra); transition:box-shadow .25s ease; }
.buscador:focus-within{ box-shadow:0 0 0 2px var(--tinta), var(--sombra); }
/* La casa del celular: el logo de la página (o una casa), nunca una letra */
.buscador__casa{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--tinta);
                 transition:transform var(--dur-presion) ease, background-color .15s ease; }
.buscador__casa:hover{ background:var(--fondo); }
.buscador__casa:active{ transform:scale(.9); }
.logo{ display:block; width:32px; height:32px; border-radius:9px; object-fit:cover; }
.logo--casa{ display:grid; place-items:center; border-radius:50%; }
.buscador .buscador__lado{ display:none; }
.buscador__lupa svg{ transition:transform .3s var(--resorte-rebote); }
.buscador:focus-within .buscador__lupa svg, .buscador:hover .buscador__lupa svg{ transform:rotate(-8deg) scale(1.06); }
.buscador input{ flex:1; min-width:0; height:100%; border:0; background:none; outline:none; font:inherit;
                 font-size:15px; color:var(--tinta); padding:0 8px; }
.buscador input::placeholder{ color:var(--suave); }
.buscador input::-webkit-search-cancel-button{ display:none; }
.buscador__boton, .buscador__lupa{ flex:none; width:40px; height:40px; border:0; background:none; border-radius:50%;
                  display:grid; place-items:center; color:var(--suave); }
.buscador__boton{ cursor:pointer; transition:transform var(--dur-presion) ease, background-color .15s ease; }
.buscador__boton:hover{ background:var(--fondo); color:var(--tinta); }
.buscador__boton:active{ transform:scale(.9); }
.buscador__boton:not([hidden]) + .buscador__lupa{ display:none; }
.buscador__atras{ display:none; color:var(--tinta); }
.resultados{ margin-top:8px; background:var(--sfc); border-radius:18px; box-shadow:var(--sombra);
             padding:6px; max-height:min(60vh, 440px); overflow:auto; scrollbar-width:thin; scrollbar-color:#D3D1CB transparent;
             animation:cae .22s var(--resorte-suave); }
@keyframes cae{ from{ opacity:0; transform:translateY(-6px); } }
.resultado{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; text-align:left;
            padding:8px 10px; border-radius:12px; cursor:pointer; }
.resultado:hover, .resultado[aria-selected="true"]{ background:var(--fondo); }
.resultado{ transition:transform var(--dur-presion) ease, background-color .15s ease; }
.resultado:active{ transform:scale(.98); }
.resultado .foto{ border-radius:10px; }
.resultado__txt{ min-width:0; }
.resultado__txt b{ display:block; font-size:15px; font-weight:600; line-height:1.3; }
.resultado__txt small{ display:block; font-size:13px; color:var(--suave); margin-top:1px; }
.resultados__grupo{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--suave); padding:8px 10px 4px; }
.resultados__vacio{ padding:12px 10px; font-size:13px; color:var(--suave); line-height:1.45; }
/* Búsqueda a pantalla completa en el celular (como Google Maps y el visor) */
@media (max-width:899px){
  body.buscando .cima{ inset:0; padding:calc(var(--gutter) + var(--arriba)) var(--gutter) 0; background:var(--sfc);
                       display:flex; flex-direction:column; animation:aparece .18s ease; }
  body.buscando .buscador{ box-shadow:0 0 0 1px var(--linea); flex:none; }
  body.buscando .buscador__casa, body.buscando .chips{ display:none; }
  body.buscando .buscador__atras{ display:grid; }
  body.buscando .resultados{ box-shadow:none; border-radius:0; max-height:none; flex:1; margin:8px calc(-1 * var(--gutter)) 0;
                             padding:0 calc(var(--gutter) - 10px) calc(16px + var(--abajo)); animation:none; overscroll-behavior:contain; }
  @keyframes aparece{ from{ opacity:0; } }
}

/* ── Qué hay cerca: chips como los de Google Maps (celular: bajo el buscador,
   se deslizan de lado; escritorio: al costado del panel) ── */
.chips{ position:fixed; z-index:26; left:0; right:0; top:calc(var(--gutter) + var(--arriba) + 52px + 10px);
        display:flex; gap:8px; padding:2px var(--gutter) 6px; overflow-x:auto; scrollbar-width:none;
        overscroll-behavior-x:contain; transition:opacity .2s ease; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 11px; border:0; border-radius:99px;
       background:var(--sfc); color:var(--tinta); font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap;
       box-shadow:0 1px 3px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.12);
       transition:transform var(--dur-presion) ease, background-color .2s ease, color .2s ease; }
.chip svg{ color:var(--c); transition:color .2s ease, transform .3s var(--resorte-rebote); }
.chip:hover svg{ transform:rotate(-8deg) scale(1.1); }
.chip:active{ transform:scale(.94); }
.chip[aria-pressed="true"]{ background:var(--tinta); color:#fff; }
.chip[aria-pressed="true"] svg{ color:#fff; }
.chip svg.salta{ animation:salta .47s var(--resorte-pulso); }
/* El contador del chip elegido: cuántos hay (salta al cambiar) */
.chip__n{ min-width:22px; height:22px; padding:0 6px; margin-right:-6px; border-radius:99px; display:grid; place-items:center;
          background:#fff; color:var(--tinta); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; }
.chip__n.salta{ animation:salta .47s var(--resorte-pulso); }
body.hoja-arriba .chips{ opacity:0; pointer-events:none; }

/* ── Controles redondos a la derecha ── */
.controles{ position:fixed; z-index:25; right:var(--gutter); top:calc(var(--gutter) + var(--arriba) + 52px + 58px);
            display:flex; flex-direction:column; gap:10px; transition:opacity .2s ease; }
.control{ width:var(--control); height:var(--control); border-radius:50%; border:0; background:var(--sfc); color:var(--tinta);
          box-shadow:var(--sombra); display:grid; place-items:center; cursor:pointer;
          transition:transform var(--dur-presion) ease, background-color .15s ease; }
.control:hover{ background:#FBFAF8; }
.control:active{ transform:scale(.9); }
.control svg{ transition:transform .35s var(--resorte-rebote); }
#c-peru:hover svg{ transform:rotate(-24deg); }
.control--zoom button:hover svg{ transform:scale(1.12); }
.control--zoom{ border-radius:22px; height:auto; display:flex; flex-direction:column; overflow:hidden; }
.control--zoom:active{ transform:none; }
.control--zoom button{ width:var(--control); height:var(--control); border:0; background:none; display:grid; place-items:center; cursor:pointer; color:var(--tinta); }
.control--zoom button:active svg{ transform:scale(.88); }
.control--zoom button + button{ border-top:1px solid var(--linea); }
.brujula__aguja{ transform-origin:12px 12px; transition:transform .12s linear; }
/* Casas de ejemplo de la maqueta del mapa: entra cuando hay casas a la vista;
   prendido va en tinta (como un chip elegido) */
.control--casas{ opacity:0; transform:scale(.6); pointer-events:none;
                 transition:opacity .2s ease, transform .35s var(--resorte-rebote), background-color .15s ease, color .15s ease; }
.control--casas.control--ve{ opacity:1; transform:none; pointer-events:auto; }
.control--casas.control--ve:active{ transform:scale(.9); }
.control--casas[aria-pressed="true"]{ background:var(--tinta); color:#fff; }
.control--casas[aria-pressed="true"]:hover{ background:#4A4740; }
.control--casas svg.salta{ animation:salta .47s var(--resorte-pulso); }
body.hoja-arriba .controles{ opacity:0; pointer-events:none; }

/* ── El contenido: panel (escritorio) u hoja (celular); es el MISMO nodo ── */
bottom-sheet{ --sheet-max-height:calc(100dvh - var(--arriba) - 74px); --sheet-background:var(--sfc); --sheet-border-radius:22px; z-index:20; }
bottom-sheet::part(sheet){ box-shadow:0 -4px 24px rgba(0,0,0,.18); }
bottom-sheet::part(handle){ background:#D3D1CB; }
.panel{ display:none; }
.contenido{ padding:4px 20px calc(24px + var(--abajo)); }
.contenido--entra{ animation:entra .3s var(--resorte-suave); }
@keyframes entra{ from{ opacity:0; transform:translateY(6px); } }
body.entrando .contenido{ opacity:.5; transition:opacity .3s ease; }

/* Esqueleto mientras llegan los proyectos: la forma de lo que viene */
.esq{ display:grid; gap:10px; padding-top:8px; }
.esq i{ display:block; height:14px; border-radius:7px; background:var(--fondo); position:relative; overflow:hidden; }
.esq i::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
               transform:translateX(-100%); animation:barrido 1.3s ease-in-out infinite; }
.esq .esq__titulo{ height:26px; width:68%; border-radius:8px; }
.esq .esq__corta{ width:44%; }
.esq .esq__fila{ height:84px; border-radius:14px; margin-top:6px; }
@keyframes barrido{ to{ transform:translateX(100%); } }

/* ── Explorar: el resumen y la lista ── */
.resumen{ padding-top:4px; }
.resumen__titulo{ font-size:26px; font-weight:700; letter-spacing:-.015em; line-height:1.15; }
.resumen__sub{ font-size:13px; color:var(--suave); margin-top:4px; line-height:1.45; font-variant-numeric:tabular-nums; }
/* Las cifras de valor: fichas que cuentan al llegar */
.cifras{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:8px; margin-top:14px; }
.cifra{ background:var(--fondo); border-radius:16px; padding:12px 12px 11px; }
.cifra b{ display:block; font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.1; font-variant-numeric:tabular-nums; }
.cifra > span{ display:block; font-size:12px; font-weight:500; color:var(--suave); margin-top:3px; }
.cifra--disp b{ color:var(--e-disp-texto); }
.seccion{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:24px 0 4px; }
.seccion h2{ font-size:17px; font-weight:600; }
.seccion small{ font-size:13px; color:var(--suave); font-variant-numeric:tabular-nums; }
.filas{ display:flex; flex-direction:column; margin:0 -10px; }
/* Filas en escalera (30 ms, tope 8) solo en la primera pintura */
.filas--entra .fila{ animation:fila-entra .4s var(--resorte-suave) backwards; animation-delay:calc(var(--i, 0) * 30ms + 60ms); }
@keyframes fila-entra{ from{ opacity:0; transform:translateY(8px); } }
/* Al mover el mapa: lo que sigue se desliza (JS) y solo lo nuevo aparece */
.cerca__lista--quieta .cerca__fila{ animation:none; }
.pieza--nueva, .cerca__lista--quieta .pieza--nueva{ animation:fila-entra .35s var(--resorte-suave) backwards; }
.seccion small.salta{ display:inline-block; animation:salta .47s var(--resorte-pulso); }
/* Con un chip abierto, mientras el mapa se mueve el cuerpo espera atenuado y
   asoma la rueda de la app (solo si tarda más de .25 s, para no parpadear) */
.chip__cuerpo{ transition:opacity .25s ease; }
.cargando .chip__cuerpo{ opacity:.45; }
.resumen__sub .rueda{ --rueda:14px; margin-left:8px; vertical-align:-2px; opacity:0; transition:opacity .15s ease; }
.cargando .resumen__sub .rueda{ opacity:1; transition-delay:.25s; }
.rueda{ --rueda:22px; position:relative; display:inline-block; width:var(--rueda); height:var(--rueda); color:var(--suave); flex:none; }
.rueda i{ position:absolute; left:50%; top:0; width:calc(var(--rueda) * .1); height:calc(var(--rueda) * .29); margin-left:calc(var(--rueda) * -.05);
          border-radius:99px; background:currentColor; transform-origin:50% calc(var(--rueda) / 2); transform:rotate(calc(var(--i) * 45deg));
          animation:rueda-rayo .8s linear infinite; animation-delay:calc(var(--i) * .1s - .8s); }
.rueda i:nth-child(1){ --i:0; } .rueda i:nth-child(2){ --i:1; } .rueda i:nth-child(3){ --i:2; } .rueda i:nth-child(4){ --i:3; }
.rueda i:nth-child(5){ --i:4; } .rueda i:nth-child(6){ --i:5; } .rueda i:nth-child(7){ --i:6; } .rueda i:nth-child(8){ --i:7; }
@keyframes rueda-rayo{ from{ opacity:1; } to{ opacity:.16; } }
.fila{ display:flex; align-items:center; gap:14px; width:100%; border:0; background:none; text-align:left; cursor:pointer;
       padding:12px 10px; border-radius:16px; transition:transform var(--dur-presion) ease, background-color .15s ease; }
.fila + .fila{ position:relative; }
.fila + .fila::before{ content:''; position:absolute; left:10px; right:10px; top:0; height:1px; background:var(--linea); }
.fila:hover{ background:var(--fondo); }
.fila:hover::before, .fila:hover + .fila::before{ opacity:0; }
.fila:active{ transform:scale(.98); transition-timing-function:var(--resorte-rebote); }
.fila__txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fila__titulo{ font-size:15px; font-weight:600; line-height:1.3; }
.fila__meta{ font-size:13px; color:var(--suave); margin-top:2px; line-height:1.35; }
.fila__valor{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-top:6px; font-size:13px; font-variant-numeric:tabular-nums; }
.fila__valor b{ font-weight:600; color:var(--tinta); }
.fila__disp{ font-weight:500; color:var(--e-disp-texto); display:inline-flex; align-items:center; gap:5px; }
.fila__disp::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--e-disp); }
.fila__disp--no{ color:var(--suave); }
.fila__disp--no::before{ background:#B9B7B0; }
.fila .foto{ flex:none; border-radius:14px; transition:transform .3s var(--resorte-suave); }
.fila:hover .foto{ transform:scale(1.04); }
.foto__demo{ position:absolute; z-index:1; left:6px; bottom:6px; font-size:12px; font-weight:600; line-height:1;
             background:rgba(255,255,255,.94); color:var(--tinta); border-radius:99px; padding:4px 7px; box-shadow:0 1px 3px rgba(0,0,0,.2); }

/* La barra de desplazamiento del panel y de los resultados: la del panel de
   app.moderniva.pe (panel.css), fina, redonda y SIN flechas. Chrome ignora
   ::-webkit-scrollbar si hay scrollbar-width/color, por eso van separadas */
@supports selector(::-webkit-scrollbar){
  .panel, .resultados{ scrollbar-width:auto !important; scrollbar-color:auto !important; }
  .panel::-webkit-scrollbar, .resultados::-webkit-scrollbar{ width:10px; }
  .panel::-webkit-scrollbar-thumb, .resultados::-webkit-scrollbar-thumb{ background:rgba(60,60,67,.22); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
  .panel::-webkit-scrollbar-thumb:hover, .resultados::-webkit-scrollbar-thumb:hover{ background-color:rgba(60,60,67,.38); }
  .panel::-webkit-scrollbar-track, .resultados::-webkit-scrollbar-track{ background:transparent; margin:20px 0; }
  .panel::-webkit-scrollbar-button, .resultados::-webkit-scrollbar-button,
  .panel::-webkit-scrollbar-button:single-button, .resultados::-webkit-scrollbar-button:single-button,
  .panel::-webkit-scrollbar-button:vertical:decrement, .panel::-webkit-scrollbar-button:vertical:increment,
  .resultados::-webkit-scrollbar-button:vertical:decrement, .resultados::-webkit-scrollbar-button:vertical:increment{ display:none; width:0; height:0; }
}

/* La foto de un proyecto: el satélite de su lugar con sus lotes encima */
.foto{ position:relative; overflow:hidden; border-radius:12px; background:#E4E1DA; flex:none; isolation:isolate; }
.foto img{ position:absolute; display:block; max-width:none; user-select:none; -webkit-user-drag:none; }
.foto svg{ position:absolute; inset:0; width:100%; height:100%; }
.foto__img{ position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; }
.foto polygon{ fill-opacity:.62; stroke:#fff; stroke-opacity:.9; stroke-width:.8; stroke-linejoin:round; }
.foto::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); pointer-events:none; }
.foto__punto{ filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)); }
.foto--sin{ display:grid; place-items:center; color:var(--suave); background:var(--fondo); }

/* ── La ficha del proyecto (como la del lote en el visor) ── */
.ficha__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-top:4px; }
.ficha__cab > div{ min-width:0; }
.icono{ flex:none; width:var(--control); height:var(--control); border-radius:50%; border:0; background:var(--fondo); color:var(--tinta);
        display:grid; place-items:center; cursor:pointer; transition:transform var(--dur-presion) ease, background-color .15s ease; }
.icono:hover{ background:#EFEDE8; }
.icono:active{ transform:scale(.9); }
.ficha__heroe{ margin-top:14px; }
.ficha__desde{ font-size:13px; color:var(--suave); }
.ficha__precio{ font-size:28px; font-weight:600; letter-spacing:-.01em; line-height:1.15; font-variant-numeric:tabular-nums; }
.ficha__disp{ font-size:15px; font-weight:500; color:var(--suave); margin-top:4px; font-variant-numeric:tabular-nums; }
.barra-estados{ display:flex; gap:2px; height:8px; margin-top:16px; border-radius:99px; overflow:hidden;
                 transform-origin:left center; animation:crece .7s var(--resorte-suave) .15s backwards; }
@keyframes crece{ from{ transform:scaleX(0); } }
.barra-estados i{ flex:0 1 0; min-width:4px; }
.estados{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; font-size:13px; }
.estados span{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.estados i{ width:9px; height:9px; border-radius:50%; }
/* ── La ficha del proyecto como la de Google Maps (tanda 5, 2026-10-03) ── */
/* Galería: las fotos de la inmobiliaria se deslizan de lado (scroll-snap) */
.galeria{ position:relative; margin:4px -8px 0; border-radius:20px; overflow:hidden; background:#E4E1DA; isolation:isolate;
          animation:galeria-entra .45s var(--resorte-suave); }
@keyframes galeria-entra{ from{ opacity:0; transform:scale(.98); } }
.galeria__pista{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.galeria__pista::-webkit-scrollbar{ display:none; }
.galeria__foto{ position:relative; flex:0 0 100%; height:230px; margin:0; scroll-snap-align:start; background:#E4E1DA; }
.galeria__foto img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.03);
                    transition:opacity .4s ease, transform .6s var(--resorte-suave); }
.galeria__foto--lista img{ opacity:1; transform:none; }
.galeria__sat{ width:100% !important; height:230px !important; border-radius:0; }
.galeria__chip{ position:absolute; left:12px; bottom:12px; font-size:12px; font-weight:600; background:rgba(255,255,255,.95);
                color:var(--tinta); border-radius:99px; padding:5px 10px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.galeria__chip--fijo{ top:12px; bottom:auto; }
.galeria__n{ position:absolute; right:12px; bottom:12px; font-size:12px; font-weight:600; color:#fff; background:rgba(0,0,0,.55);
             border-radius:99px; padding:4px 9px; font-variant-numeric:tabular-nums; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.galeria__cerrar{ position:absolute; top:10px; right:10px; z-index:2; background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(0,0,0,.2); }
.galeria__cerrar:hover{ background:#fff; }
.galeria__flecha{ position:absolute; top:50%; z-index:2; width:36px; height:36px; margin-top:-18px; border:0; border-radius:50%;
                  display:grid; place-items:center; background:rgba(255,255,255,.94); color:var(--tinta); cursor:pointer;
                  box-shadow:0 2px 8px rgba(0,0,0,.2); opacity:0; transition:opacity .2s ease, transform var(--dur-presion) ease; }
.galeria__flecha--izq{ left:10px; } .galeria__flecha--der{ right:10px; }
.galeria:hover .galeria__flecha, .galeria__flecha:focus-visible{ opacity:1; }
.galeria__flecha:active{ transform:scale(.9); }
@media (hover:none){ .galeria__flecha{ display:none; } }
.ficha .ficha__cab{ margin-top:16px; }
.ficha--sin-fotos .ficha__cab{ margin-top:4px; }
.chip__anillos{ font-size:14px; font-weight:500; margin-top:12px; font-variant-numeric:tabular-nums; }
.ficha__de{ font-size:13px; font-weight:500; color:var(--tinta); margin-top:2px; }
/* Sellos de confianza */
.sellos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.sello{ display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; padding:5px 10px 5px 8px; border-radius:99px;
        background:var(--fondo); color:var(--tinta); }
.sello--ok{ background:#E7F2EA; color:var(--e-disp-texto); }
.sello--demo{ background:#FBF0DD; color:#7A4A0B; }
.sello__punto{ width:8px; height:8px; border-radius:50%; background:var(--e-disp); box-shadow:0 0 0 0 rgba(63,125,78,.5); animation:vivo 1.8s ease-out infinite; }
@keyframes vivo{ to{ box-shadow:0 0 0 7px rgba(63,125,78,0); } }
/* Acciones redondas (como Google Maps); la primera, llena, es LA acción */
.acciones{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:4px; margin:18px -6px 0; }
.accion{ display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; color:var(--tinta); text-decoration:none;
         cursor:pointer; padding:2px 0; }
.accion__ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--fondo);
              transition:transform var(--dur-presion) ease, background-color .15s ease; }
.accion__ico svg{ transition:transform .3s var(--resorte-rebote); }
.accion:hover .accion__ico{ background:#EFEDE8; }
.accion:hover .accion__ico svg{ transform:translateY(-1px) rotate(-8deg); }
.accion:active .accion__ico{ transform:scale(.9); }
.accion--llena .accion__ico{ background:var(--tinta); color:#fff; }
.accion--llena:hover .accion__ico{ background:#4A4740; }
.accion__txt{ font-size:12px; font-weight:600; line-height:1.2; text-align:center; }
/* Pestañas: una pastilla que se desliza a la elegida */
.pestanas{ position:sticky; top:0; z-index:2; display:flex; margin:20px -20px 0; padding:0 20px; background:var(--sfc);
           border-bottom:1px solid var(--linea); overflow-x:auto; scrollbar-width:none; }
.pestanas::-webkit-scrollbar{ display:none; }
.pestanas__btn{ flex:1 0 auto; border:0; background:none; padding:13px 10px 12px; font-size:15px; font-weight:600; color:var(--suave);
                cursor:pointer; transition:color .2s ease; white-space:nowrap; }
.pestanas__btn[aria-selected="true"]{ color:var(--tinta); }
.pestanas__btn:hover{ color:var(--tinta); }
.pestanas__indicador{ position:absolute; left:0; bottom:-1px; height:3px; width:0; border-radius:3px 3px 0 0; background:var(--tinta);
                      transition:transform .45s var(--resorte-suave), width .45s var(--resorte-suave); }
.pestana{ padding-top:6px; }
.pestana--entra{ animation:entra .3s var(--resorte-suave); }
.ficha__h2{ font-size:17px; font-weight:600; margin:24px 0 8px; }
.ficha__texto{ font-size:15px; line-height:1.6; color:var(--tinta); white-space:pre-line; margin-top:10px; }
/* El pulso: lo que pasa de verdad */
.pulso{ margin-top:18px; padding:14px 16px; border-radius:16px; background:#F1F7F2; }
.pulso__cab{ font-size:13px; font-weight:600; color:var(--e-disp-texto); }
.pulso__linea{ font-size:15px; font-weight:500; margin-top:6px; line-height:1.4; }
/* Calcula tu cuota */
.cuota{ margin-top:6px; }
.cuota__lbl{ display:block; font-size:13px; color:var(--suave); margin-bottom:6px; }
.cuota__lote{ width:100%; height:44px; border:1px solid var(--linea); border-radius:12px; padding:0 12px; font:inherit; font-size:15px;
              color:var(--tinta); background:var(--sfc); }
.cuota__lote:focus-visible{ outline:2px solid var(--tinta); outline-offset:1px; }
.cuota__plazos, .form__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.cuota__chip{ border:0; height:36px; padding:0 14px; border-radius:99px; background:var(--fondo); color:var(--tinta); font-size:14px; font-weight:600;
              cursor:pointer; transition:background-color .2s ease, color .2s ease, transform var(--dur-presion) ease; }
.cuota__chip:hover{ background:#EFEDE8; }
.cuota__chip:active{ transform:scale(.94); }
.cuota__chip[aria-checked="true"]{ background:var(--tinta); color:#fff; }
.cuota__chip--salta{ animation:salta .47s var(--resorte-pulso); }
.cuota__res{ margin-top:14px; padding:16px; border-radius:16px; background:var(--fondo); }
.cuota__monto{ font-size:28px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.1; }
.cuota__por{ font-size:13px; color:var(--suave); margin-top:2px; }
.cuota__desg{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:12px; padding-top:12px; border-top:1px solid var(--linea); }
.cuota__desg small{ display:block; font-size:12px; color:var(--suave); }
.cuota__desg b{ font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.cuota__nota{ font-size:13px; color:var(--suave); margin-top:8px; line-height:1.45; }
/* Avance de obra: línea de tiempo */
.obra{ list-style:none; display:flex; flex-direction:column; }
.obra__etapa{ position:relative; display:flex; gap:12px; padding:0 0 14px; }
.obra__etapa::before{ content:''; position:absolute; left:6px; top:16px; bottom:0; width:2px; background:var(--linea); }
.obra__etapa:last-child::before{ display:none; }
.obra__punto{ flex:none; width:14px; height:14px; border-radius:50%; margin-top:3px; background:#D3D1CB; box-shadow:0 0 0 3px var(--sfc); }
.obra__etapa--listo .obra__punto{ background:var(--e-disp); }
.obra__etapa--en_curso .obra__punto{ background:var(--e-res); animation:vivo-ambar 1.8s ease-out infinite; }
@keyframes vivo-ambar{ from{ box-shadow:0 0 0 3px var(--sfc), 0 0 0 3px rgba(199,126,29,.5); } to{ box-shadow:0 0 0 3px var(--sfc), 0 0 0 9px rgba(199,126,29,0); } }
.obra__etapa b{ display:block; font-size:15px; font-weight:600; }
.obra__etapa small{ display:block; font-size:13px; color:var(--suave); margin-top:1px; }
/* Lotes: histograma y los de mejor precio */
.histo__caja{ margin-top:14px; }
.histo{ display:flex; align-items:flex-end; gap:4px; height:64px; }
.histo i{ flex:1; height:100%; border-radius:6px 6px 2px 2px; background:var(--e-disp); opacity:.85; transform-origin:bottom;
          transform:scaleY(max(var(--h), .04)); animation:histo-crece .6s var(--resorte-suave) backwards; animation-delay:calc(var(--i, 0) * 40ms); }
@keyframes histo-crece{ from{ transform:scaleY(0); } }
.histo__eje{ display:flex; justify-content:space-between; font-size:12px; color:var(--suave); margin-top:6px; font-variant-numeric:tabular-nums; }
.lotes .cerca__fila{ text-decoration:none; color:var(--tinta); }
.lotes__cod{ flex:none; min-width:52px; height:34px; padding:0 8px; border-radius:10px; display:grid; place-items:center; background:#E7F2EA;
             color:var(--e-disp-texto); font-size:13px; font-weight:700; }
.lotes .cerca__txt{ flex:1; }
.lotes__3d{ flex:none; display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--suave); transition:color .15s ease, transform .2s var(--resorte-suave); }
.lotes__3d svg{ width:16px; height:16px; }
.lotes .cerca__fila:hover .lotes__3d{ color:var(--tinta); transform:translateX(-2px); }
.boton-ancho{ display:flex; align-items:center; justify-content:center; width:100%; height:48px; margin-top:16px; border:0; border-radius:14px;
              background:var(--fondo); color:var(--tinta); font:inherit; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
              transition:background-color .15s ease, transform var(--dur-presion) ease; }
.boton-ancho:hover{ background:#EFEDE8; }
.boton-ancho:active{ transform:scale(.98); }
.boton-ancho--lleno{ background:var(--tinta); color:#fff; }
.boton-ancho--lleno:hover{ background:#4A4740; }
.boton-ancho:disabled{ opacity:.6; cursor:default; }
/* Cerca: una ficha por clase de lugar */
.cerca__clases{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-top:8px; }
.cerca__clase{ display:flex; flex-direction:column; align-items:center; gap:4px; border:0; border-radius:14px; background:var(--fondo); padding:10px 4px 9px;
               cursor:pointer; color:var(--tinta); transition:transform var(--dur-presion) ease, background-color .15s ease; }
.cerca__clase:hover{ background:#EFEDE8; }
.cerca__clase:active{ transform:scale(.95); }
.cerca__clase .cerca__ico{ width:30px; height:30px; }
.cerca__clase b{ font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; }
.cerca__clase > span:last-child{ font-size:12px; font-weight:500; color:var(--suave); text-align:center; line-height:1.2; }
/* Información */
.cerca__nota{ font-size:13px; color:var(--suave); line-height:1.5; margin-top:16px; }
.info{ display:flex; flex-direction:column; margin:0 -4px; }
.info__fila{ display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid var(--linea); }
.info__ico{ flex:none; color:var(--tinta); display:grid; place-items:center; width:24px; }
.info__txt{ flex:1; min-width:0; }
.info__txt small{ display:block; font-size:12px; color:var(--suave); }
.info__txt b, .info__txt a{ display:block; font-size:15px; font-weight:500; color:var(--tinta); line-height:1.35; overflow-wrap:anywhere; }
.info__txt a{ text-decoration:none; }
.info__txt a:hover{ text-decoration:underline; }
.info__nota{ display:block; font-size:12px; color:var(--suave); margin-top:2px; }
.info__copiar{ width:40px; height:40px; background:none; }
.info__copiar.salta{ animation:salta .47s var(--resorte-pulso); }
.info + .enlace{ margin-top:16px; }
/* Formulario de contacto y visita */
.form__cab{ display:flex; align-items:flex-start; gap:10px; padding-top:4px; }
.form__cab > div{ min-width:0; }
.form__campo{ margin-top:16px; }
.form__campo label, .form__lbl{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form__campo input, .form__campo textarea{ width:100%; border:1px solid var(--linea); border-radius:12px; padding:11px 12px; font:inherit;
                                           font-size:16px; color:var(--tinta); background:var(--sfc); transition:border-color .15s ease, box-shadow .15s ease; }
.form__campo input:focus, .form__campo textarea:focus{ outline:none; border-color:var(--tinta); box-shadow:0 0 0 3px rgba(55,53,47,.12); }
.form__campo textarea{ resize:vertical; min-height:84px; }
.form__aviso{ min-height:20px; margin-top:12px; font-size:13px; font-weight:600; color:#A33A2F; }
.form__aviso.salta{ animation:salta .47s var(--resorte-pulso); }
.form .boton-ancho{ margin-top:4px; }
.form__legal{ font-size:12px; color:var(--suave); margin-top:10px; line-height:1.5; }
.form__legal a{ color:var(--suave); }
/* Listo: el check se TRAZA */
.listo{ padding-top:36px; }
.listo__check svg{ width:72px; height:72px; }
.listo__check circle{ fill:#E7F2EA; stroke:var(--e-disp); stroke-width:2; animation:salta .5s var(--resorte-pulso); }
.listo__check path{ fill:none; stroke:var(--e-disp); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
                    stroke-dasharray:36; stroke-dashoffset:36; animation:trazo .5s var(--resorte-suave) .25s forwards; }
@keyframes trazo{ to{ stroke-dashoffset:0; } }
.listo .boton-ancho{ max-width:280px; }

.enlace{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:12px 14px;
         border-radius:14px; background:var(--fondo); color:var(--tinta); text-decoration:none;
         transition:transform var(--dur-presion) ease, background-color .15s ease; }
.enlace:hover{ background:#EFEDE8; }
.enlace:hover svg{ transform:translateX(3px); }
.enlace:active{ transform:scale(.98); }
.enlace svg{ flex:none; color:var(--suave); transition:transform .2s var(--resorte-suave); }
.enlace__txt{ min-width:0; }
.enlace__txt small{ display:block; font-size:12px; color:var(--suave); }
.enlace__txt b{ display:block; font-size:15px; font-weight:600; line-height:1.3; }

/* Vacío y error (arte de audit/FLATDESIGN.md) */
.vacio{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 12px 8px; }
.vacio h2{ font-size:17px; font-weight:600; margin-top:12px; }
.vacio p{ font-size:13px; color:var(--suave); margin-top:4px; line-height:1.5; max-width:30ch; }
.arte svg{ display:block; width:160px; height:120px; }
.arte{ animation:arte-entra .45s var(--resorte-suave); }
@keyframes arte-entra{ from{ opacity:0; transform:scale(.96); } }

/* "Cerca de aquí" en la ficha: lo que rodea al proyecto, de OpenStreetMap */
.esq .esq__fila--baja{ height:52px; margin-top:0; }
.cerca{ margin-top:6px; }
.cerca__lista{ display:flex; flex-direction:column; margin:0 -10px; }
.cerca__fila{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; text-align:left; cursor:pointer;
              padding:9px 10px; border-radius:14px; animation:fila-entra .4s var(--resorte-suave) backwards;
              animation-delay:calc(var(--i, 0) * 30ms); transition:transform var(--dur-presion) ease, background-color .15s ease; }
.cerca__fila:hover{ background:var(--fondo); }
.cerca__fila:active{ transform:scale(.98); }
.cerca__ico{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff;
             box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); transition:transform .3s var(--resorte-rebote); }
.cerca__fila:hover .cerca__ico{ transform:scale(1.08) rotate(-6deg); }
.cerca__ico--grande{ width:48px; height:48px; animation:salta .47s var(--resorte-pulso); }
.chipvista{ display:flex; align-items:center; gap:14px; min-width:0; }
.chipvista > div{ min-width:0; }
.cerca__txt{ min-width:0; }
.cerca__txt b{ display:block; font-size:15px; font-weight:600; line-height:1.3; }
.cerca__txt small{ display:block; font-size:13px; color:var(--suave); margin-top:1px; font-variant-numeric:tabular-nums; }

/* El pie: una tarjeta que se lee (no letra gris suelta) y los enlaces legales */
.tierra-pie{ margin-top:28px; }
.tierra-pie__aviso{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; background:var(--fondo); }
.tierra-pie__aviso > svg{ flex:none; color:var(--tinta); margin-top:1px; }
.tierra-pie__aviso b{ display:block; font-size:15px; font-weight:600; line-height:1.3; }
.tierra-pie__aviso p{ font-size:13px; color:var(--tinta); line-height:1.5; margin-top:3px; }
.tierra-pie__enlaces{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:14px; padding:0 4px; font-size:13px; font-weight:500; }
.tierra-pie__enlaces a{ color:var(--suave); text-decoration:none; padding:6px 0; }
.tierra-pie__enlaces a:hover{ color:var(--tinta); text-decoration:underline; }

/* ── El aviso de abajo ("Enlace copiado") ── */
.aviso{ position:fixed; z-index:40; left:50%; bottom:calc(var(--asomo) + 16px); transform:translateX(-50%);
        background:var(--tinta); color:#fff; font-size:13px; font-weight:600; padding:10px 16px; border-radius:99px;
        box-shadow:var(--sombra); white-space:nowrap; }
.aviso--entra{ animation:entra .3s var(--resorte-suave); }

.riel{ display:none; }

/* ── Escritorio: el panel FLOTA a 12 px del borde con esquinas redondas y el
   buscador dentro (como Google Maps en la web). Al ocultarlo entra el riel
   por la izquierda: la lista vuelve de un toque. ── */
@media (min-width:900px){
  :root{ --gutter:16px; --asomo:0px;
         --borde:12px;              /* aire entre el panel y el borde de la ventana (edita aquí) */
         --riel:76px; }             /* ancho del riel (edita aquí) */
  .cima{ right:auto; left:calc(var(--borde) + 12px); top:calc(var(--borde) + 12px); width:calc(var(--panel-ancho) - 24px);
         transition:transform var(--dur-hoja) var(--resorte-suave); }
  .buscador{ box-shadow:0 1px 3px rgba(0,0,0,.10), 0 0 0 1px var(--linea); }
  .buscador:focus-within{ box-shadow:0 0 0 2px var(--tinta); }
  .buscador .buscador__lado{ display:grid; color:var(--tinta); }
  .buscador__lado svg{ transition:transform .3s var(--resorte-rebote); }
  .buscador__lado:hover svg{ transform:translateX(-2px); }
  .buscador__casa{ display:none; }
  .controles{ top:16px; }
  .chips{ left:calc(var(--borde) * 2 + var(--panel-ancho)); right:76px; top:calc(var(--borde) + 20px); padding:2px 4px 8px; }
  body.pliegue-usado .chips{ animation:chips-izq var(--dur-hoja) var(--resorte-suave); }
  .panel{ display:block; position:fixed; z-index:20; left:var(--borde); top:var(--borde); bottom:var(--borde); width:var(--panel-ancho);
          background:var(--sfc); overflow:auto; overscroll-behavior:contain; border-radius:24px;
          box-shadow:0 0 0 1px var(--linea), 0 12px 40px rgba(0,0,0,.30);
          scrollbar-width:thin; scrollbar-color:#D3D1CB transparent;
          transition:transform var(--dur-hoja) var(--resorte-suave), opacity .3s ease; }
  /* El buscador flota sobre el tope del panel: lo que se desplaza pasa por debajo */
  .panel::before{ content:''; position:sticky; top:0; z-index:3; display:block; height:76px; background:var(--sfc); }
  .contenido{ padding:0 24px 24px; }
  /* Las pestañas se pegan bajo el buscador, que flota en el tope del panel */
  .pestanas{ top:76px; margin:20px -24px 0; padding:0 24px; }
  body.panel-plegado .panel{ transform:translateX(calc(-100% - var(--borde) - 24px)); opacity:0; pointer-events:none; }
  /* Con la lista oculta, el buscador queda a la derecha del riel y los chips a
     su lado (el salto de lugar se anima con transform, nunca con left) */
  body.panel-plegado .cima{ transform:translateX(var(--riel)); }
  body.panel-plegado .buscador{ box-shadow:var(--sombra); }
  body.panel-plegado .buscador .buscador__lado{ display:none; }
  body.panel-plegado .chips{ left:calc(var(--borde) * 3 + var(--riel) + var(--panel-ancho) - 24px); }
  body.pliegue-usado.panel-plegado .chips{ animation-name:chips-der; }
  @keyframes chips-izq{ from{ transform:translateX(64px); } }
  @keyframes chips-der{ from{ transform:translateX(-64px); } }
  /* El riel: atajos a la izquierda (lista, buscar, Perú, recientes y la casa) */
  .riel{ display:flex; flex-direction:column; align-items:center; gap:2px; position:fixed; z-index:22;
         left:var(--borde); top:var(--borde); bottom:var(--borde); width:var(--riel); padding:10px 0 12px;
         border-radius:24px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
         box-shadow:0 0 0 1px var(--linea), 0 12px 40px rgba(0,0,0,.30);
         transform:translateX(calc(-100% - var(--borde) - 24px)); opacity:0; pointer-events:none;
         transition:transform var(--dur-hoja) var(--resorte-suave), opacity .25s ease; }
  body.panel-plegado .riel{ transform:none; opacity:1; pointer-events:auto; }
  .riel__item{ display:flex; flex-direction:column; align-items:center; gap:4px; width:64px; padding:6px 0; border:0; background:none;
               color:var(--tinta); text-decoration:none; cursor:pointer; border-radius:14px; }
  .riel__ico{ display:grid; place-items:center; width:44px; height:32px; border-radius:99px;
              transition:background-color .15s ease, transform var(--dur-presion) ease; }
  .riel__ico svg{ transition:transform .3s var(--resorte-rebote); }
  .riel__item:hover .riel__ico{ background:var(--fondo); }
  .riel__item:hover .riel__ico svg{ transform:scale(1.1); }
  .riel__item:active .riel__ico{ transform:scale(.9); }
  .riel__txt{ font-size:12px; font-weight:500; line-height:1.2; text-align:center; }
  .riel__recientes{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:10px; padding-top:12px; border-top:1px solid var(--linea); width:52px; }
  .riel__recientes:empty{ display:none; }
  .riel__titulo{ font-size:12px; font-weight:500; color:var(--suave); }
  .riel__reciente{ padding:2px 0; }
  .riel__reciente .foto{ border-radius:12px; transition:transform .3s var(--resorte-rebote), box-shadow .2s ease; }
  .riel__reciente:hover .foto{ transform:scale(1.06); box-shadow:0 4px 12px rgba(0,0,0,.2); }
  .riel__reciente:active .foto{ transform:scale(.92); transition-duration:var(--dur-presion); }
  .riel__casa{ margin-top:auto; }
  .riel__casa .riel__ico{ height:40px; }
  bottom-sheet{ display:none; }
  .aviso{ bottom:28px; left:calc(50% + var(--panel-ancho) / 2); }
  body.panel-plegado .aviso{ left:50%; }
  .resultados{ max-height:min(70vh, 520px); }
}

/* ── Marcadores ──
   OJO: el elemento .marcador es de MapLibre (position:absolute + transform
   para ubicarlo). Aquí no se le pone position, transform ni transition: todo
   va en su hijo (.pastilla o .racimo). Con `position:relative` en el
   marcador, cada pastilla caía debajo de la anterior y flotaba en el mar. */
.marcador{ cursor:pointer; }
.marcador--entra{ animation:marcador-entra .3s var(--resorte-suave); }
@keyframes marcador-entra{ from{ opacity:0; transform:translateY(4px) scale(.94); } }
.pastilla{ position:relative; display:flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 10px; margin-bottom:9px;
           border:0; border-radius:99px; background:var(--sfc); color:var(--tinta); cursor:pointer; white-space:nowrap;
           font-size:13px; font-weight:600; line-height:1;
           box-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04);
           transform-origin:50% calc(100% + 9px);
           transition:transform .2s var(--resorte-suave), background-color .15s ease, color .15s ease, box-shadow .2s ease; }
.pastilla::after{ content:''; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:inherit;
                  transform:translateX(-50%) rotate(45deg); border-radius:0 0 2px 0; z-index:-1; }
.pastilla:active{ transform:scale(.95); transition-duration:var(--dur-presion); }
.pastilla__punto{ width:8px; height:8px; border-radius:50%; flex:none; }
.pastilla b{ font-weight:600; }
.pastilla__precio{ color:var(--suave); font-weight:600; font-variant-numeric:tabular-nums; padding-left:8px; border-left:1px solid var(--linea); }
.pastilla--hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 6px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.04); }
.pastilla--sel{ background:var(--tinta); color:#fff; animation:salta .47s var(--resorte-pulso); }
.pastilla--sel .pastilla__precio{ color:rgba(255,255,255,.75); border-left-color:rgba(255,255,255,.22); }
@keyframes salta{ from{ transform:scale(.8); } }
.racimo{ display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; cursor:pointer; }
.racimo__n{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--sfc); color:var(--tinta);
            font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;
            box-shadow:0 0 0 5px rgba(255,255,255,.28), 0 3px 10px rgba(0,0,0,.4);
            transition:transform .2s var(--resorte-suave); }
.racimo:hover .racimo__n{ transform:scale(1.06); }
.racimo:active .racimo__n{ transform:scale(.92); transition-duration:var(--dur-presion); }
.racimo__pie{ font-size:12px; font-weight:600; white-space:nowrap; background:var(--sfc); color:var(--tinta);
              border-radius:99px; padding:4px 10px; box-shadow:0 2px 6px rgba(0,0,0,.3); font-variant-numeric:tabular-nums; }

/* El latido sobre el lugar que se señala en la lista (estilos en el hijo:
   el elemento del marcador es de MapLibre) */
.foco{ pointer-events:none; }
.foco__anillo{ display:block; width:44px; height:44px; border-radius:50%; border:3px solid #fff; background:var(--c);
               opacity:.55; box-shadow:0 0 0 2px var(--c); animation:foco-late 1.2s ease-out infinite; }
@keyframes foco-late{ from{ transform:scale(.5); opacity:.8; } to{ transform:scale(1.25); opacity:0; } }
/* ── El globo de un lote ── */
.maplibregl-popup-content{ border-radius:16px; padding:14px 16px 16px; box-shadow:var(--sombra); font-family:'DM Sans', system-ui, sans-serif; color:var(--tinta); }
.maplibregl-popup-close-button{ font-size:20px; width:32px; height:32px; border-radius:50%; right:6px; top:6px; color:var(--suave); }
.maplibregl-popup-close-button:hover{ background:var(--fondo); color:var(--tinta); }
.globo__cab{ display:flex; align-items:center; gap:8px; padding-right:28px; }
.globo__cab b{ font-size:15px; font-weight:600; }
.globo__estado{ font-size:12px; font-weight:600; color:#fff; border-radius:99px; padding:3px 9px; }
.globo__cat{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--suave); margin-top:4px; }
.globo__cat i{ width:9px; height:9px; border-radius:50%; flex:none; }
.globo__dist{ font-size:13px; color:var(--tinta); margin-top:6px; line-height:1.4; font-variant-numeric:tabular-nums; }
.globo__precio{ font-size:22px; font-weight:600; margin-top:6px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.globo__ir{ display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; margin-top:12px; border-radius:99px;
            background:var(--tinta); color:#fff; font-size:13px; font-weight:600; text-decoration:none;
            transition:transform var(--dur-presion) ease; }
.globo__ir svg{ width:16px; height:16px; }
.globo__ir:active{ transform:scale(.96); }
.maplibregl-ctrl-attrib{ font-size:11px; }
/* En el celular la hoja tapa la esquina de abajo: los créditos suben bajo el buscador */
@media (max-width:899px){
  .maplibregl-ctrl-bottom-right{ top:calc(var(--gutter) + var(--arriba) + 52px + 56px); bottom:auto; left:var(--gutter); right:auto; }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl{ margin:0; }
  body.hoja-arriba .maplibregl-ctrl-bottom-right{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .contenido--entra, .resultados, .marcador--entra, .pastilla--sel, .arte, .aviso--entra,
  .galeria, .sello, .sello__punto, .accion, .pestana--entra, .pulso__linea, .cuota__chip--salta, .obra__etapa, .obra__punto, .histo i, .cerca__clase,
  .info__fila, .info__copiar.salta, .form__chips .cuota__chip, .form__aviso.salta, .listo__check circle,
  .chip, .chip svg.salta, .chip__n.salta, .control--casas svg.salta, .cerca__ico--grande, .foco__anillo, .chips, .resultado, .cifra, .filas--entra .fila, .barra-estados, .cerca__fila, .riel__item, .pieza--nueva, .seccion small.salta, .rueda i{ animation:none !important; }
  .esq i::after{ animation:none; }
  .control, .fila, .icono, .enlace, .pastilla, .racimo__n, .buscador__casa, .buscador__boton,
  .panel, .cima, .controles, .control--casas, .brujula__aguja, .globo__ir, .buscador, .chip, .chip svg, .control svg, .fila .foto,
  .cerca__fila, .cerca__ico, .galeria__foto img, .galeria__flecha, .accion__ico, .accion__ico svg, .pestanas__indicador, .cuota__chip, .lotes__3d, .boton-ancho, .cerca__clase, .riel, .riel__ico, .riel__ico svg, .riel__reciente .foto, .buscador__lupa svg, .buscador__lado svg{ transition:none; }
}
@media (prefers-reduced-motion: reduce){
  .listo__check path{ animation:none; stroke-dashoffset:0; }
  .galeria__foto img{ opacity:1; transform:none; }
}

/* ════════════════ La marca de Moderniva (mapa.moderniva.pe, 2026-10-08) ════════════════
   audit/MARCA.md §18 (la biblia) y §18.12: "mismos tokens en su interfaz".
   Solo con <html data-marca="moderniva"> (lo pone montarTierra con la opción
   marca): la web de cada inmobiliaria sigue neutra. Papel de fondo, tinta en
   el texto y en el botón principal, vino solo en detalles (racimos, firma,
   búho), rosa en la pestaña elegida y salmón en lo suave. Los colores de
   estado de los lotes (disponible, separado, vendido) son los del visor: un
   dato, no la marca. Contraste medido en audit/MARCA.md §17-nonies. */
:root[data-marca="moderniva"]{
  --acento:#A3122A; --vino:#A3122A; --rosa:#FF9EAE; --salmon:#FFD9D2;
  --sfc:#FFF8F6;               /* papel: panel, hoja y resultados */
  --tarjeta:#FFFFFF;           /* listas agrupadas sobre el papel */
  --fondo:#F6ECE9;             /* relleno de botones, chips y esqueletos */
  --relleno-hover:#EFE1DD;
  --tinta:#2A0A10; --tinta-hover:#4A2A30;
  --suave:#6E5459;             /* tinta ~70 % (texto secundario) */
  --linea:rgba(42,10,16,.11);
  --sombra:0 2px 6px rgba(42,10,16,.10), 0 10px 28px rgba(42,10,16,.16);
  --vidrio:rgba(255,248,246,.92);
}
[data-marca="moderniva"] .buscador, [data-marca="moderniva"] .chip:not([aria-pressed="true"]), [data-marca="moderniva"] .control:not([aria-pressed="true"]){
  background:var(--vidrio); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); }
[data-marca="moderniva"] .control:hover, [data-marca="moderniva"] .chip:not([aria-pressed="true"]):hover{ background:var(--sfc); }
[data-marca="moderniva"] .chip{ box-shadow:0 1px 2px rgba(42,10,16,.16), 0 4px 14px rgba(42,10,16,.14); }
[data-marca="moderniva"] .chip svg{ color:var(--tinta); }
[data-marca="moderniva"] .chip[aria-pressed="true"] svg{ color:#fff; }
[data-marca="moderniva"] .resultados__grupo{ text-transform:none; letter-spacing:0; font-size:13px; }
[data-marca="moderniva"] .control--casas[aria-pressed="true"]:hover{ background:var(--tinta-hover); }
[data-marca="moderniva"] .buscador:focus-within{ box-shadow:0 0 0 2px var(--tinta), var(--sombra); }
[data-marca="moderniva"] .buscador__boton:hover, [data-marca="moderniva"] .resultado:hover, [data-marca="moderniva"] .resultado[aria-selected="true"]{ background:var(--fondo); }
/* Títulos: 700 con interletrado negativo (MARCA §18.4) */
[data-marca="moderniva"] .resumen__titulo{ font-size:28px; letter-spacing:-.03em; line-height:1.08; text-wrap:balance; }
[data-marca="moderniva"] .resumen__sub{ font-size:14px; margin-top:6px; }
[data-marca="moderniva"] .seccion{ margin:26px 0 8px; }
[data-marca="moderniva"] .seccion h2{ font-size:17px; letter-spacing:-.01em; }
/* La lista: un grupo blanco sobre el papel (la lista agrupada de iOS, §18.7) */
[data-marca="moderniva"] .filas{ margin:0; background:var(--tarjeta); border-radius:22px; box-shadow:0 0 0 1px var(--linea); overflow:hidden; }
[data-marca="moderniva"] .fila{ border-radius:0; padding:12px 14px 12px 16px; }
[data-marca="moderniva"] .fila + .fila::before{ left:16px; right:0; }
[data-marca="moderniva"] .fila:hover{ background:var(--fondo); }
[data-marca="moderniva"] .fila .foto{ border-radius:14px; }
[data-marca="moderniva"] .foto__demo{ background:rgba(255,248,246,.95); }
/* La ficha */
[data-marca="moderniva"] .icono{ background:var(--tarjeta); box-shadow:0 0 0 1px var(--linea); }
[data-marca="moderniva"] .icono:hover{ background:var(--fondo); }
[data-marca="moderniva"] .galeria{ border-radius:24px; }
[data-marca="moderniva"] .galeria__cerrar{ background:rgba(255,248,246,.94); }
[data-marca="moderniva"] .ficha__precio{ font-size:30px; font-weight:700; letter-spacing:-.03em; }
[data-marca="moderniva"] .sello{ background:var(--tarjeta); box-shadow:0 0 0 1px var(--linea); }
[data-marca="moderniva"] .sello--ok{ color:var(--tinta); }
[data-marca="moderniva"] .sello--ok svg{ color:var(--vino); }
[data-marca="moderniva"] .sello--demo{ background:var(--salmon); box-shadow:none; color:var(--tinta); }
[data-marca="moderniva"] .accion__ico{ background:var(--tarjeta); box-shadow:0 0 0 1px var(--linea); }
[data-marca="moderniva"] .accion:hover .accion__ico{ background:var(--fondo); }
[data-marca="moderniva"] .accion--llena .accion__ico{ background:var(--tinta); box-shadow:none; }
[data-marca="moderniva"] .accion--llena:hover .accion__ico{ background:var(--tinta-hover); }
/* Pestañas: la elegida sobre una pastilla rosa que se desliza (como la barra del panel) */
[data-marca="moderniva"] .pestanas{ gap:2px; padding:8px 20px; border-bottom:1px solid var(--linea); }
[data-marca="moderniva"] .pestanas__btn{ position:relative; z-index:1; flex:0 0 auto; padding:9px 14px; border-radius:99px; color:var(--suave); }
[data-marca="moderniva"] .pestanas__btn[aria-selected="true"]{ color:var(--tinta); }
[data-marca="moderniva"] .pestanas__indicador{ top:8px; bottom:8px; height:auto; border-radius:99px; background:var(--rosa); }
[data-marca="moderniva"] .pulso{ background:var(--salmon); border-radius:22px; }
[data-marca="moderniva"] .pulso__cab{ color:var(--tinta); opacity:.72; }
[data-marca="moderniva"] .cuota__lote, [data-marca="moderniva"] .form__campo input, [data-marca="moderniva"] .form__campo textarea{ background:var(--tarjeta); }
[data-marca="moderniva"] .cuota__chip{ background:var(--tarjeta); box-shadow:0 0 0 1px var(--linea); }
[data-marca="moderniva"] .cuota__chip:hover{ background:var(--fondo); }
[data-marca="moderniva"] .cuota__chip[aria-checked="true"]{ background:var(--tinta); box-shadow:none; }
[data-marca="moderniva"] .cuota__res{ background:var(--tarjeta); border-radius:22px; box-shadow:0 0 0 1px var(--linea); }
[data-marca="moderniva"] .histo i{ background:var(--tinta); opacity:.82; }
/* Rango de precios y tamaños: una lista agrupada, rótulo a la izquierda y dato a la derecha */
[data-marca="moderniva"] .cifras{ grid-auto-flow:row; gap:0; background:var(--tarjeta); border-radius:22px; box-shadow:0 0 0 1px var(--linea); overflow:hidden; }
[data-marca="moderniva"] .cifra{ display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:baseline; gap:12px; background:none; border-radius:0; padding:13px 16px; }
[data-marca="moderniva"] .cifra + .cifra{ border-top:1px solid var(--linea); }
[data-marca="moderniva"] .cifra b{ font-size:15px; text-align:right; }
[data-marca="moderniva"] .cifra > span{ font-size:14px; margin:0; color:var(--suave); }
[data-marca="moderniva"] .lotes__cod{ background:var(--fondo); color:var(--tinta); }
[data-marca="moderniva"] .cerca__clase{ background:var(--tarjeta); box-shadow:0 0 0 1px var(--linea); border-radius:18px; }
[data-marca="moderniva"] .cerca__clase:hover{ background:var(--fondo); }
[data-marca="moderniva"] .cerca__fila:hover{ background:var(--fondo); }
[data-marca="moderniva"] .info{ margin:0; background:var(--tarjeta); border-radius:22px; box-shadow:0 0 0 1px var(--linea); overflow:hidden; }
[data-marca="moderniva"] .info__fila{ padding:12px 12px 12px 16px; }
[data-marca="moderniva"] .info__fila:last-child{ border-bottom:0; }
[data-marca="moderniva"] .enlace{ background:var(--tarjeta); box-shadow:0 0 0 1px var(--linea); border-radius:22px; padding:14px 16px; }
[data-marca="moderniva"] .enlace:hover{ background:var(--fondo); }
/* Botones: píldoras (MARCA §18.7); la principal en tinta, la otra con borde */
[data-marca="moderniva"] .boton-ancho{ height:50px; border-radius:99px; background:transparent; box-shadow:inset 0 0 0 1.5px var(--tinta); }
[data-marca="moderniva"] .boton-ancho:hover{ background:var(--fondo); }
[data-marca="moderniva"] .boton-ancho--lleno{ background:var(--tinta); box-shadow:none; }
[data-marca="moderniva"] .boton-ancho--lleno:hover{ background:var(--tinta-hover); }
[data-marca="moderniva"] .form__campo input:focus, [data-marca="moderniva"] .form__campo textarea:focus{ box-shadow:0 0 0 3px rgba(42,10,16,.12); }
[data-marca="moderniva"] .form__aviso{ color:#A3122A; }
[data-marca="moderniva"] .listo__check circle{ fill:var(--salmon); stroke:var(--tinta); }
[data-marca="moderniva"] .listo__check path{ stroke:var(--tinta); }
/* El pie: una línea, sin tarjeta (MARCA §19) */
[data-marca="moderniva"] .tierra-pie__nota{ font-size:13px; color:var(--suave); line-height:1.5; }
/* Marcadores: pastillas de papel; el racimo, blanco con el número en tinta (Mateo, 2026-10-08: el vino no) */
[data-marca="moderniva"] .pastilla{ background:var(--sfc); box-shadow:0 2px 8px rgba(42,10,16,.38), 0 0 0 1px rgba(42,10,16,.05); }
[data-marca="moderniva"] .pastilla--sel{ background:var(--tinta); }
[data-marca="moderniva"] .racimo__n{ background:#fff; color:var(--tinta); box-shadow:0 0 0 5px rgba(255,255,255,.3), 0 3px 10px rgba(42,10,16,.45); }
[data-marca="moderniva"] .racimo__pie{ background:var(--sfc); }
/* El globo de un lote */
[data-marca="moderniva"] .maplibregl-popup-content{ background:var(--sfc); border-radius:22px; }
[data-marca="moderniva"] .maplibregl-popup-anchor-top .maplibregl-popup-tip, [data-marca="moderniva"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, [data-marca="moderniva"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip{ border-bottom-color:var(--sfc); }
[data-marca="moderniva"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, [data-marca="moderniva"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, [data-marca="moderniva"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{ border-top-color:var(--sfc); }
[data-marca="moderniva"] .maplibregl-popup-anchor-left .maplibregl-popup-tip{ border-right-color:var(--sfc); }
[data-marca="moderniva"] .maplibregl-popup-anchor-right .maplibregl-popup-tip{ border-left-color:var(--sfc); }
[data-marca="moderniva"] .maplibregl-popup-close-button:hover{ background:var(--fondo); }
[data-marca="moderniva"] bottom-sheet::part(handle){ background:rgba(42,10,16,.22); }
@supports selector(::-webkit-scrollbar){
  [data-marca="moderniva"] .panel::-webkit-scrollbar-thumb, [data-marca="moderniva"] .resultados::-webkit-scrollbar-thumb{ background-color:rgba(42,10,16,.2); }
  [data-marca="moderniva"] .panel::-webkit-scrollbar-thumb:hover, [data-marca="moderniva"] .resultados::-webkit-scrollbar-thumb:hover{ background-color:rgba(42,10,16,.34); }
}
/* La firma: la palabra de Moderniva sobre el mapa, abajo a la izquierda */
.firma{ display:none; }
@media (min-width:900px){
  [data-marca="moderniva"] .panel{ box-shadow:0 0 0 1px var(--linea), 0 12px 40px rgba(42,10,16,.32); }
  [data-marca="moderniva"] .riel{ background:var(--vidrio); box-shadow:0 0 0 1px var(--linea), 0 12px 40px rgba(42,10,16,.32); }
  [data-marca="moderniva"] .riel__item:hover .riel__ico{ background:var(--fondo); }
  .firma{ display:block; position:fixed; z-index:15; bottom:42px;   /* sobre la línea de créditos del mapa */
          left:calc(var(--borde) * 2 + var(--panel-ancho) + 6px);
          transition:transform var(--dur-hoja) var(--resorte-suave), opacity .2s ease; opacity:.92; }
  .firma:hover{ opacity:1; }
  .firma img{ display:block; height:22px; width:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
  body.panel-plegado .firma{ transform:translateX(calc(var(--riel) - var(--panel-ancho))); }
}