/* ============================================================================
   Momix — Ficha pública de propiedad (/p/[slug]). Rediseño MX-006 (04/09/2026), handoff
   «design_handoff_ficha_propiedad». Todo el estilo vive acá: la CSP no permite style="" inline.
   Tema por variables en body / body.dark (toggle manual, persistido en localStorage 'momix-theme').
   Fuentes Outfit (títulos/cifras/botones) + Manrope (texto) — self-hosted.
   ============================================================================ */

@font-face { font-family:'Outfit';  font-style:normal; font-weight:200 800; font-display:swap; src:url('/assets/fonts/outfit-latin.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:200 800; font-display:swap; src:url('/assets/fonts/manrope-latin.woff2') format('woff2'); }

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.fp {
  margin:0; font-family:'Manrope', -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing:antialiased;
  background:var(--bg); color:var(--txt); transition:background .3s ease; padding-bottom:0;
  /* --mut: el gris de los textos secundarios. Era #94A3B8 y daba 2,45:1 contra el fondo y
     2,56:1 contra las tarjetas — la mitad del 4,5:1 que pide WCAG AA, en 20 elementos de la
     ficha que ve el cliente (rótulos de las cifras, claves de los datos, la nota del precio,
     el legal y los títulos del formulario y del agente). #64748B es el mismo gris un escalón
     más oscuro: 4,82:1 sobre blanco y 4,61:1 sobre el fondo. El tema oscuro ya pasaba y no se
     toca. Medido con axe en Chrome real, no estimado. */
  --bg:#F8FAFC; --bg2:#F8FAFC; --sfc:#FFFFFF; --txt:#0F172A; --sub:#475569; --mut:#64748B; --brd:#E2E8F0;
  --chip:#F1F5F9; --inb:#5E6D82; --tint:#DDFBF5; --tint2:#F6FEFB; --teal:#0B6E63; --glass:rgba(255,255,255,.94);
  --green:#22D3A6; --green-h:#14B8A6; --navy:#0F172A; --on-green:#08111F; --fav:#EF4444;
  --f-title:'Outfit', sans-serif; --f-body:'Manrope', sans-serif;
}
body.fp.dark {
  --bg:#0B1220; --bg2:#141F36; --sfc:#111B2E; --txt:#F1F5F9; --sub:#B8C4D6; --mut:#7C8AA0; --brd:#243149;
  --chip:#1B2942; --inb:#3C4C69; --tint:#0F3A31; --tint2:#0F2C26; --teal:#7CEAD7; --glass:rgba(13,21,38,.92);
}
body.fp.dark img[data-logo] { filter:brightness(0) invert(1); }
body.fp a { color:var(--teal); text-decoration:none; }
body.fp a:hover { color:var(--green-h); }
body.fp ::selection { background:#DDFBF5; color:#08111F; }
body.fp img { max-width:100%; }
body.fp button { font-family:inherit; }
.fp-ico svg, .fp-hero-nav svg, .fp-round svg { display:block; }

@keyframes fp-toastin { from { opacity:0; transform:translate(-50%, 14px); } to { opacity:1; transform:translate(-50%, 0); } }
@keyframes fp-fadein  { from { opacity:0; } to { opacity:1; } }

/* ── Header sticky ── */
.fp-top { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px clamp(14px, 3vw, 28px); background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--brd); }
.fp-top-l, .fp-top-r { display:flex; align-items:center; gap:9px; }
.fp-top-l { gap:12px; }
.fp-back { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px 0 10px; border-radius:999px; border:1px solid var(--brd);
  color:var(--txt) !important; font:600 12px var(--f-title); transition:background .2s; white-space:nowrap; }
.fp-back:hover { background:var(--chip); }
.fp-brand { display:inline-flex; align-items:center; gap:8px; line-height:0; }
.fp-index { display:flex; gap:16px; font:500 12px var(--f-body); color:var(--mut); flex-wrap:wrap; justify-content:center; }
.fp-index a { color:var(--mut); padding-bottom:3px; border-bottom:2px solid transparent; transition:all .2s; white-space:nowrap; }
.fp-index a.is-on { color:var(--teal); font-weight:600; border-bottom-color:var(--green); }
.fp-aglogo { display:inline-flex; align-items:center; height:30px; max-width:120px; }
.fp-aglogo img { height:30px; width:auto; max-width:120px; object-fit:contain; }
.fp-agname { display:inline-flex; align-items:center; height:30px; padding:0 10px; border:1px solid var(--brd); border-radius:7px; color:var(--sub) !important;
  font:600 10px var(--f-body); letter-spacing:.04em; text-transform:uppercase; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Los tres botones del header (tema, sonido, favorito) son los MISMOS que la home y el explorador:
   36px, sin borde, fondo al pasar el mouse. Tenían borde y 38px y parecían de otra familia. */
.fp-ico { width:36px; height:36px; border-radius:999px; border:0; background:transparent; color:var(--txt); display:inline-flex;
  align-items:center; justify-content:center; cursor:pointer; transition:transform .15s, background .2s; padding:0; }
.fp-ico:hover { background:var(--chip); }
.fp-ico:active { transform:scale(.85); }
@media (pointer:coarse) { .fp-ico { width:44px; height:44px; } }
/* Los selectores llevan `.fp-ico` adelante a propósito: `.fp-ico svg { display:block }` (arriba) le
   ganaba por especificidad a un `.fp-sun { display:none }` suelto, y en modo claro se veían el sol Y
   la luna a la vez. Medido en el navegador, no supuesto. */
.fp-ico .fp-sun, .fp-ico .fp-sound-off { display:none; }
body.dark .fp-ico .fp-sun { display:block; }
body.dark .fp-ico .fp-moon { display:none; }
.fp-ico.fp-sound.is-off .fp-sound-off { display:block; }
.fp-ico.fp-sound.is-off .fp-sound-on { display:none; }
.fp-fav.is-on svg { fill:var(--fav); stroke:var(--fav); }
/* Menú del visitante: la forma vive en assets/public-usermenu.css (una sola copia, compartida con la
   home y el explorador). Acá quedan solo los colores, con las variables de tema de esta pantalla. */
.pu-um-panel { background:var(--sfc); border:1px solid var(--brd); }
.pu-um-head { border-bottom:1px solid var(--brd); }
.pu-um-head strong, .pu-um-item { color:var(--txt); }
.pu-um-item:hover, .pu-um-item:focus-visible { background:var(--chip); }
.pu-um-sep { border-top:1px solid var(--brd); }

/* «Ingresar»: el mismo botón verde del explorador (.ex-ingresar), a la altura de este header. */
.fp-ingresar { height:38px; padding:0 16px; border-radius:10px; background:var(--green); color:var(--on-green);
  font:600 13.5px var(--f-title); border:0; cursor:pointer; transition:background .2s; }
.fp-ingresar:hover { background:var(--green-h); }
@media (pointer:coarse) { .fp-ingresar { height:44px; } }

/* ── Contenedor ── */
.fp-wrap { max-width:min(1600px, 96vw); margin:0 auto; padding:16px clamp(14px, 3vw, 34px) 40px; }

/* ── Mosaico ── */
.fp-mosaic { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:clamp(165px, 13.5vw, 235px) clamp(165px, 13.5vw, 235px); gap:6px; user-select:none; -webkit-user-select:none; }
.fp-hero { grid-row:span 2; position:relative; border-radius:12px 0 0 12px; overflow:hidden; min-height:170px; background:var(--chip); }
.fp-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:fp-fadein .4s ease; }
.fp-hero-open { position:absolute; inset:0; background:transparent; border:0; cursor:zoom-in; padding:0; }
.fp-hero-full { position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:11px; border:0; background:rgba(15,23,42,.72); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; padding:0; }
.fp-hero-full:hover { background:rgba(15,23,42,.92); }
/* En táctil, 44px. La regla existía para `.fp-ico` y `.fp-ingresar` y a este botón y a `.fp-round`
   se les había pasado: quedaban en 40, cuatro píxeles por debajo del mínimo de la norma. Medido en
   Chrome con `hasTouch` (sin eso el navegador informa `pointer:fine` aunque el viewport mida 390px
   y la regla coarse no se aplica: así, un control que SÍ crece parece chico y uno que no crece
   pasa desapercibido). Con mouse se quedan en 40, que es la decisión de diseño del handoff. */
@media (pointer:coarse) { .fp-hero-full { width:44px; height:44px; } }
.fp-hero-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:0; background:rgba(255,255,255,.92);
  box-shadow:0 6px 16px rgba(8,17,31,.18); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:transform .15s; }
.fp-hero-nav:active { transform:translateY(-50%) scale(.88); }
.fp-hero-prev { left:10px; } .fp-hero-next { right:10px; }
.fp-hero-count { position:absolute; bottom:10px; left:10px; background:rgba(15,23,42,.8); color:#F1F5F9; font:500 11px var(--f-body); padding:6px 11px; border-radius:999px; pointer-events:none; }
.fp-hero-dots { position:absolute; bottom:14px; right:12px; display:inline-flex; gap:5px; }
.fp-hero-dots i { width:7px; height:7px; border-radius:999px; background:rgba(241,245,249,.65); display:inline-block; transition:all .25s; }
.fp-hero-dots i.is-on { width:18px; background:var(--green); }
.fp-thumb { position:relative; overflow:hidden; border:0; padding:0; cursor:pointer; background:var(--chip); display:block; min-height:0; border-radius:0; }
.fp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.fp-thumb-2 { border-radius:0 12px 0 0; } .fp-thumb-4 { border-radius:0 0 12px 0; }
.fp-thumb-more { position:absolute; inset:0; background:rgba(8,17,31,.55); display:flex; align-items:center; justify-content:center; color:#F1F5F9; font:600 13px var(--f-title); }
.fp-hero-empty { display:flex; align-items:center; justify-content:center; color:var(--mut); font:500 13px var(--f-body); border-radius:12px; grid-column:1 / -1; }

/* ── Cuerpo: 2 columnas ── */
.fp-body { display:grid; grid-template-columns:1.6fr 1fr; gap:28px; margin-top:18px; align-items:start; }
.fp-main { min-width:0; }
.fp-kicker { font:600 11px var(--f-title); letter-spacing:.13em; color:var(--teal); text-transform:uppercase; margin-bottom:6px; }
.fp-h1 { margin:0; font:600 clamp(22px, 2.4vw, 27px)/1.2 var(--f-title); color:var(--txt); letter-spacing:-.015em; text-wrap:balance; }
.fp-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(86px, 1fr)); gap:8px; margin:14px 0; padding:14px 0; border-top:1px solid var(--brd); border-bottom:1px solid var(--brd); }
.fp-stat { display:flex; flex-direction:column; align-items:center; gap:5px; }
.fp-stat-ico { width:46px; height:46px; border-radius:14px; background:var(--sfc); box-shadow:0 6px 16px rgba(8,17,31,.14); color:var(--txt); display:inline-flex; align-items:center; justify-content:center; }
.fp-stat-v { font:600 16px var(--f-title); color:var(--txt); line-height:1; }
.fp-stat-l { font:400 10px var(--f-body); color:var(--mut); text-align:center; }
.fp-desc { font:400 14px/1.75 var(--f-body); color:var(--sub); text-wrap:pretty; }
.fp-leer { display:inline-block; margin-top:8px; font:600 12.5px var(--f-title); color:var(--teal); cursor:pointer; background:none; border:0; padding:0; }
.fp-h2 { font:600 18px var(--f-title); color:var(--txt); margin:26px 0 10px; scroll-margin-top:120px; }
.fp-h2-sub { font:400 13px var(--f-body); color:var(--mut); }
#f-resumen, #f-desc { scroll-margin-top:120px; }
.fp-datos { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:0 26px; border-top:1px solid var(--brd); }
.fp-dato { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--chip); font:500 12.5px var(--f-body); }
.fp-dato-k { color:var(--mut); } .fp-dato-v { color:var(--txt); text-align:right; }
.fp-grupo { margin-top:12px; }
.fp-grupo-t { font:600 10.5px var(--f-title); letter-spacing:.12em; color:var(--mut); text-transform:uppercase; margin-bottom:7px; }
.fp-chips { display:flex; flex-wrap:wrap; gap:5px; }
.fp-chip { padding:5px 11px; border-radius:999px; background:var(--chip); color:var(--sub); font:500 11.5px var(--f-body); }

/* ── Mapa ── */
/* El fondo sigue al tema: es lo que se ve el instante antes de que pinte el mapa, y en modo claro un
   navy fijo era un rectángulo negro (Máximo, 04/09). El mapa SIN coordenadas —la tarjeta decorativa
   de más abajo— sí queda navy siempre: ahí el fondo es el dibujo, no un placeholder. */
.fp-map { position:relative; height:230px; border-radius:14px; overflow:hidden; background:var(--chip); }
.fp-map-sin { background:#0F172A; }
/* MapLibre le pone `position:relative` a su contenedor (clase maplibregl-map) y el `inset:0` dejaba
   de medir: el mapa quedaba con 0 px de alto — navy liso, sin calles ni pin (visto en PRD el 04/09).
   El !important gana a la hoja de la librería; el 100% no depende de inset. */
.fp-map-canvas { position:absolute !important; inset:0; width:100%; height:100%; }
.fp-map-canvas .maplibregl-ctrl-attrib { font-size:9px; }
.fp-map-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px); background-size:46px 46px; }
.fp-map-pin, .fp-pin { width:48px; height:48px; border-radius:999px; background:var(--green); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 11px rgba(34,211,166,.18), 0 10px 24px rgba(8,17,31,.35); }
.fp-map-pin { position:absolute; top:40%; left:45%; }
.fp-map-pin::after, .fp-pin::after { content:''; width:16px; height:14px; background:#08111F; clip-path:polygon(50% 0, 100% 45%, 85% 45%, 85% 100%, 15% 100%, 15% 45%, 0 45%); }
.fp-pin-aprox { width:120px; height:120px; border-radius:999px; background:rgba(34,211,166,.18); border:2px solid rgba(34,211,166,.55); }
.fp-map-chip { position:absolute; top:12px; left:12px; background:rgba(15,23,42,.85); color:#F1F5F9; font:500 11px var(--f-body); padding:6px 11px; border-radius:999px; pointer-events:none; }
.fp-map-open { position:absolute; bottom:12px; right:12px; background:rgba(241,245,249,.92); color:#0F172A !important; font:600 11.5px var(--f-title); padding:8px 14px; border-radius:999px; }
.fp-map-open:hover { background:#fff; }
.fp-map .maplibregl-ctrl-bottom-left { display:none; }

/* ── Panel derecho ── */
.fp-panel-wrap { position:sticky; top:76px; }
.fp-panel { background:var(--sfc); border:1px solid var(--brd); border-radius:16px; padding:18px; box-shadow:0 10px 24px rgba(8,17,31,.06); }
.fp-ops { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.fp-op { display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:12px; border:1px solid var(--brd); background:var(--sfc); cursor:pointer; text-align:left; transition:all .2s; width:100%; }
.fp-op.is-sel { border:1.5px solid var(--green); background:var(--tint2); }
.fp-op-dot { width:16px; height:16px; border-radius:999px; border:2px solid #CBD5E1; background:var(--sfc); flex:none; transition:all .2s; }
.fp-op.is-sel .fp-op-dot { border:5px solid var(--green); }
.fp-op-txt { flex:1; min-width:0; display:flex; flex-direction:column; }
.fp-op-l { font:500 13px var(--f-body); color:var(--txt); }
.fp-op.is-sel .fp-op-l { font:600 13px var(--f-title); }
.fp-op-n { font:400 10.5px var(--f-body); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-op-p { font:600 13px var(--f-title); color:var(--inb); flex:none; transition:all .2s; }
.fp-op.is-sel .fp-op-p { font-size:15px; color:var(--txt); }
.fp-badge { display:inline-block; font:600 11px var(--f-title); color:var(--teal); background:var(--tint); padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.fp-price-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.fp-price { font:600 27px var(--f-title); color:var(--txt); }
.fp-price-nota { font:400 11.5px var(--f-body); color:var(--mut); margin:3px 0 14px; }
.fp-form { margin-top:4px; }
.fp-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fp-form-t { font:600 10.5px var(--f-title); letter-spacing:.12em; color:var(--mut); text-transform:uppercase; margin:8px 0 7px; }
.fp-in { width:100%; height:42px; border:1px solid var(--inb); border-radius:10px; padding:0 13px; font:400 13px var(--f-body); color:var(--txt); background:var(--sfc); margin-bottom:7px; outline:none; }
.fp-in:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(34,211,166,.18); }
.fp-in.is-err { border-color:#EF4444; }
.fp-in::placeholder { color:var(--mut); }
.fp-in-row { display:flex; gap:7px; }
.fp-in-row .fp-in { flex:1; min-width:0; }
.fp-ta { height:64px; padding:10px 13px; resize:vertical; min-height:44px; }
.fp-btns { display:flex; gap:8px; }
.fp-btn { flex:1; height:72px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:13px; border:0; font:600 12.5px var(--f-title); cursor:pointer; transition:background .2s, opacity .2s, transform .1s; }
.fp-btn:active { transform:scale(.97); }
.fp-btn-wa { background:var(--green); color:var(--on-green); }
.fp-btn-wa:hover { background:var(--green-h); }
.fp-btn-mail { background:var(--navy); color:#F1F5F9; }
.fp-btn-mail:hover { opacity:.88; }
.fp-btn[disabled] { opacity:.6; cursor:progress; }
.fp-legal { font:400 10.5px var(--f-body); color:var(--mut); margin-top:8px; text-align:center; }
.fp-agent { display:flex; gap:9px; align-items:center; margin-top:13px; padding-top:13px; border-top:1px solid var(--chip); }
.fp-avatar { width:34px; height:34px; border-radius:999px; background:var(--navy); color:var(--green); display:inline-flex; align-items:center; justify-content:center; font:600 12px var(--f-title); flex:none; }
.fp-agent-t { font:400 11px var(--f-body); color:var(--mut); }
.fp-agent-t b { color:var(--txt); }
.fp-meta { background:var(--chip); border-radius:12px; padding:12px 15px; margin-top:10px; font:500 11.5px var(--f-body); color:var(--sub); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.fp-meta-ok { color:var(--teal); font-weight:600; }

/* ── Carrusel «cerca» ── */
.fp-near { margin-top:44px; padding-top:30px; border-top:1px solid var(--brd); }
.fp-near-h { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.fp-near-t { font:600 20px var(--f-title); color:var(--txt); letter-spacing:-.01em; }
.fp-near-nav { display:flex; gap:8px; }
.fp-round { width:40px; height:40px; border-radius:999px; border:1px solid var(--brd); background:var(--sfc); color:var(--txt); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; padding:0; }
.fp-round:hover { background:var(--chip); }
/* Las flechas del carrusel, igual que `.fp-hero-full`: 44px en táctil (ver el comentario de allá). */
@media (pointer:coarse) { .fp-round { width:44px; height:44px; } }
.fp-carr { display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; padding:2px 2px 10px; scrollbar-width:none; }
.fp-carr::-webkit-scrollbar { display:none; }
.fp-card { flex:none; width:252px; background:var(--sfc); border:1px solid var(--brd); border-radius:14px; overflow:hidden; color:var(--txt) !important; transition:transform .2s, box-shadow .2s; }
.fp-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(8,17,31,.12); }
.fp-card-img { position:relative; height:148px; background:var(--chip); }
.fp-card-img img { width:100%; height:148px; object-fit:cover; display:block; }
.fp-card-op { position:absolute; top:9px; left:9px; background:rgba(15,23,42,.82); color:#F1F5F9; font:600 10px var(--f-title); letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; }
.fp-card-b { padding:12px 14px 14px; }
.fp-card-p { font:600 16px var(--f-title); color:var(--txt); }
.fp-card-t { font:500 12.5px var(--f-body); color:var(--txt); margin:3px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-card-d { font:400 11px var(--f-body); color:var(--mut); }

/* ── Barra inferior (mobile) ── */
.fp-bottombar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:30; gap:8px; align-items:center; background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--brd); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
.fp-bb-txt { min-width:0; }
.fp-bb-p { font:600 17px var(--f-title); color:var(--txt); white-space:nowrap; }
.fp-bb-op { font:400 10.5px var(--f-body); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-bb-btn { flex:1; height:46px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:11px; border:0; background:var(--green); color:var(--on-green) !important; font:600 13px var(--f-title); cursor:pointer; }
.fp-bb-btn:active { transform:scale(.98); }

/* ── Footer ── */
.fp-foot { text-align:center; padding:24px 16px 32px; font:400 12px var(--f-body); color:var(--mut); }

/* ── Visor pantalla completa ── */
.fp-lb { position:fixed; inset:0; z-index:80; background:rgb(4,9,18); animation:fp-fadein .2s ease; user-select:none; -webkit-user-select:none; overflow:hidden; }
.fp-lb-bg { position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(32px) brightness(.45); transform:scale(1.12); }
.fp-lb-stage { position:absolute; inset:0; overflow:hidden; cursor:zoom-in; touch-action:none; }
.fp-lb-stage.is-zoom { cursor:grab; }
.fp-lb-stage.is-drag { cursor:grabbing; }
.fp-lb-img { width:100%; height:100%; object-fit:contain; transform:translate(0, 0) scale(1); transition:transform .18s ease; pointer-events:none; display:block; }
.fp-lb-stage.is-drag .fp-lb-img { transition:none; }
.fp-lb-frame { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); pointer-events:none; }
.fp-lb-frame[hidden] { display:none; }
.fp-lb-c { position:absolute; width:26px; height:26px; }
.fp-lb-c1 { top:12px; left:12px; border-top:3px solid var(--green); border-left:3px solid var(--green); border-radius:8px 0 0 0; }
.fp-lb-c2 { top:12px; right:12px; border-top:3px solid #fff; border-right:3px solid #fff; border-radius:0 8px 0 0; }
.fp-lb-c3 { bottom:12px; left:12px; border-bottom:3px solid #fff; border-left:3px solid #fff; border-radius:0 0 0 8px; }
.fp-lb-c4 { bottom:12px; right:12px; border-bottom:3px solid var(--green); border-right:3px solid var(--green); border-radius:0 0 8px 0; }
.fp-lb-top { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 16px; background:linear-gradient(rgba(4,9,18,.65), transparent); pointer-events:none; }
.fp-lb-cap { color:#F1F5F9; font:500 13px var(--f-body); text-shadow:0 1px 6px rgba(0,0,0,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fp-lb-x { pointer-events:auto; width:44px; height:44px; border-radius:999px; border:0; background:rgba(241,245,249,.14); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; flex:none; padding:0; }
.fp-lb-x:hover { background:rgba(241,245,249,.28); }
.fp-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:999px; border:0; background:rgba(4,9,18,.45); backdrop-filter:blur(4px); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.fp-lb-prev { left:14px; } .fp-lb-next { right:14px; }
.fp-lb-strip { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:8px; padding:38px 12px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(4,9,18,.7)); overflow-x:auto; scrollbar-width:none; }
.fp-lb-strip img { width:62px; height:44px; object-fit:cover; border-radius:7px; cursor:pointer; opacity:.45; outline:2px solid transparent; outline-offset:2px; transition:opacity .2s; flex:none; }
.fp-lb-strip img.is-on { opacity:1; outline-color:var(--green); }
body.fp.lb-open { overflow:hidden; }

/* ── Toast ── */
.fp-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background:#0F172A; color:#F1F5F9; font:500 13px var(--f-body); padding:11px 20px; border-radius:999px;
  box-shadow:0 10px 24px rgba(8,17,31,.35); animation:fp-toastin .25s ease; z-index:90; display:flex; align-items:center; gap:9px; max-width:min(92vw, 520px); text-align:center; }
.fp-toast::before { content:''; width:8px; height:8px; border-radius:999px; background:var(--green); flex:none; }

/* ── Velo de resaltado de sección (índice) ── */
.fp-velo { position:absolute; z-index:5; pointer-events:none; border-radius:14px; background:rgba(34,211,166,.10); box-shadow:inset 0 0 0 1.5px rgba(34,211,166,.45); }

/* ── Login (misma pieza que la home/explorador) ── */
.mx-login-scrim { position:fixed; inset:0; z-index:85; background:rgba(8,17,31,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.mx-login-pop { position:relative; width:min(460px, 100%); height:min(640px, 92vh); background:var(--sfc); border-radius:18px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.mx-login-frame { width:100%; height:100%; border:0; display:block; }
.mx-login-x { position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:999px; border:0; background:var(--chip); color:var(--txt); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }

/* ── Responsive ── */
@media (min-width:1400px) { .fp-body { grid-template-columns:1.9fr minmax(360px, 1fr); gap:40px; } }
@media (max-width:1100px) { .fp-index { gap:12px; } }
@media (max-width:859px) {
  body.fp { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .fp-index, .fp-aglogo, .fp-agname { display:none; }
  .fp-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:250px 104px; gap:5px; }
  .fp-hero { grid-column:span 2; grid-row:auto; border-radius:12px; min-height:220px; }
  .fp-hero-nav { display:none; }
  .fp-thumb { border-radius:10px !important; }
  .fp-thumb-3, .fp-thumb-4 { display:none; }
  .fp-body { display:flex; flex-direction:column; gap:20px; margin-top:16px; }
  .fp-panel-wrap { position:static; }
  .fp-bottombar { display:flex; }
  .fp-toast { bottom:calc(96px + env(safe-area-inset-bottom)); }
  .fp-wrap { padding-bottom:16px; }
}
@media (max-width:420px) { .fp-back span { display:none; } .fp-top { padding:8px 12px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .fp-hero-img, .fp-lb, .fp-toast { animation:none; } .fp-lb-img { transition:none; } }

/* ── Vista previa «Ver como cliente» (D-02, 06/09/2026) ──────────────────────────────────────────
   La ficha del modo cliente es LA MISMA de /p/[slug]: lo único que se agrega es esta banda, que dice
   que es una vista previa y devuelve al modo trabajo. Es sticky y no fixed a propósito — con fixed
   taparía el header de la ficha, que también es sticky. */
.fp-prevbar { position:sticky; top:0; z-index:60; display:flex; flex-wrap:wrap; gap:10px 16px;
  align-items:center; justify-content:center; padding:9px 16px; font-size:13px; font-weight:600;
  color:#0F172A; background:#FDE68A; border-bottom:1px solid rgba(15,23,42,.14); }
/* `body.fp a` (0-1-2) le ganaba por especificidad a `.fp-prevbar-back` (0-1-0) y el botón salía
   con el verde de los links —#0B6E63 sobre #0F172A, 2,91:1— en vez del blanco que dice acá.
   Se escribe el selector con el elemento para que gane, en vez de subir un !important. */
body.fp a.fp-prevbar-back { display:inline-flex; align-items:center; min-height:28px; padding:0 12px;
  border-radius:999px; background:#0F172A; color:#F8FAFC; text-decoration:none; font-weight:700; }
body.fp a.fp-prevbar-back:hover { background:#1E293B; color:#F8FAFC; }
body.fp-preview .fp-top { top:0; }
@media (max-width:640px) { .fp-prevbar { font-size:12px; padding:8px 12px; } }
/* [hidden] siempre gana (guarda global del proyecto, ver CLAUDE.md) */
[hidden] { display:none !important; }