/* ═══════════════════════════════════════════════════════════════════════════
   CVDL 2027 · venta de espacios (venta.cvdlpanama.com)
   Hereda los tokens y los componentes del sitio público: misma marca, mismo
   sistema. Solo se añade lo propio de una pieza comercial — tarjetas de precio,
   el plano en modo venta y el formulario de reserva.
   Marca y tipografía: MARCA-CVDL-2027.md (logo por archivo · Teko + Rubik).
   ═══════════════════════════════════════════════════════════════════════════ */
@import url("../web/styles.css");

/* ── hero: más bajo que el del sitio público; aquí manda la oferta, no el ave ── */
.hero{min-height:auto;padding:clamp(80px,14vh,140px) 20px clamp(56px,9vh,96px);align-items:center}
.hero::after{background:linear-gradient(180deg,rgba(12,16,40,.62) 0%,rgba(12,16,40,.42) 45%,rgba(12,16,40,.88) 100%)}
.hero-wrap{text-align:left;max-width:1120px;padding-bottom:0}
.hero h1{font-family:var(--tit);font-weight:700;text-transform:uppercase;font-size:clamp(34px,5.6vw,72px);line-height:.95;letter-spacing:.02em;margin:6px 0 10px;text-shadow:0 2px 22px rgba(0,0,0,.6)}
.hero h1 em{color:#ffb3b6}
.hero .lead{color:#dde5ff;margin:12px 0 0;max-width:62ch}
.hero .acts{justify-content:flex-start}
.hero .chapkick{color:#8fd0ff}

/* ── rejillas ── */
.g4{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
h3.sub{font-size:clamp(24px,3.2vw,34px);color:var(--ink)}
.dark h3.sub{color:#fff}

/* ── tarjetas de precio ── */
.precio-card{display:flex;flex-direction:column}
.precio-card .precio{font-family:var(--tit);font-weight:700;font-size:clamp(40px,5vw,60px);line-height:1;color:var(--rojo);margin:6px 0 4px}
.precio-card .precio small,.card .precio small{display:block;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-top:4px}
.card .precio{font-family:var(--tit);font-weight:700;font-size:clamp(36px,4.4vw,52px);line-height:1;color:var(--rojo);margin:6px 0 4px}
.precio-card.destacado{border-color:var(--rojo);box-shadow:0 18px 50px rgba(194,49,55,.22)}
.badge{align-self:flex-start;font-family:var(--tit);font-size:14px;letter-spacing:.16em;text-transform:uppercase;background:var(--rojo);color:#fff;padding:3px 10px;border-radius:999px;margin-bottom:8px}
ul.inc{list-style:none;padding:0;margin:14px 0 18px;font-size:15px}
ul.inc li{position:relative;padding:5px 0 5px 20px;color:var(--gris)}
ul.inc li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--rojo)}
.dark ul.inc li{color:#c9d3ef}.dark ul.inc li::before{background:var(--cian)}
.precio-card .btn,.activos .btn{margin-top:auto;align-self:flex-start}
.ref{display:inline-block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--rojo-osc);background:rgba(194,49,55,.1);padding:6px 14px;border-radius:999px}

/* ── el plano en modo venta ── */
.dispo{font-family:var(--tit);font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--azul);margin-top:6px}
.dispo b{color:var(--rojo);font-size:1.25em}
.mapa-wrap{position:relative;margin-top:22px;border-radius:20px;overflow:hidden;box-shadow:var(--sombra);background:#1f1d45;aspect-ratio:16/10;min-height:440px}
.mapa-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){.mapa-wrap{aspect-ratio:auto;height:76svh;min-height:0}}
.leyenda{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--gris)}
.leyenda span{display:inline-flex;align-items:center;gap:7px}
.leyenda i{width:14px;height:14px;border-radius:4px;display:inline-block}

/* ── formulario ── */
#leadform{margin-top:26px;display:grid;gap:14px}
.frow{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.frow{grid-template-columns:1fr}}
#leadform label{display:grid;gap:6px}
.lbl{font-size:13px;font-weight:600;letter-spacing:.04em;color:#c9d3ef}
.req{color:#ff9a9e;font-style:normal}
#leadform input,#leadform textarea{font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:12px 14px;width:100%}
#leadform input::placeholder,#leadform textarea::placeholder{color:#93a0c8}
#leadform input:focus,#leadform textarea:focus{outline:2px solid var(--cian);outline-offset:1px;background:rgba(255,255,255,.12)}
.picker{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:8px 8px 8px 10px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.picker input{border:0!important;background:transparent!important;flex:1;min-width:180px;padding:5px 4px!important}
.picker input:focus{outline:none!important}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--rojo);color:#fff;border-radius:999px;padding:5px 6px 5px 12px;font-size:14px;font-weight:600}
.chip button{border:0;background:rgba(0,0,0,.25);color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
.facc{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px}
#f-msg{margin:0;color:#c9d3ef}
#f-msg.bien{color:#8fe3b0}
#f-msg.mal{color:#ff9a9e}
#f-msg a{color:inherit;text-decoration:underline}

/* ── lo que ya no se vende ──────────────────────────────────────────────────
   Se muestra, no se esconde: que un espacio esté tomado es argumento de venta
   para el que queda. Pero sin botón — ofrecer apartar lo vendido es prometer
   lo que no existe, y eso lo paga el organizador delante del cliente. */
.agotado{opacity:.72}
.agotado .precio,.agotado h3{color:var(--gris)}
.dark .agotado .precio,.dark .agotado h3{color:#9aa6c9}
.agotado ul.inc li::before{background:var(--gris)}
.badge-off{background:var(--gris);color:#fff}
.agotado .fine{margin-top:auto;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}

/* ── el visor del stand ─────────────────────────────────────────────────────
   El canvas dibuja con fondo transparente, así que se apoya en el fondo de la
   sección en vez de traer un lienzo propio que rompa la página. La imagen del
   panel queda debajo como respaldo y se retira sola cuando el visor arranca. */
.vistas{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.vbtn{font:inherit;font-size:14px;font-weight:600;color:var(--azul-osc);background:#fff;
  border:1px solid rgba(57,54,104,.22);border-radius:999px;padding:9px 18px;cursor:pointer;min-height:44px}
.vbtn:hover{border-color:var(--rojo);color:var(--rojo)}
.vbtn.on{background:var(--rojo);border-color:var(--rojo);color:#fff}
.stand-wrap{position:relative;margin-top:18px;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #eef2ff 0%, #dfe6f7 70%, #d3dcf2 100%);
  aspect-ratio:16/10;min-height:380px}
.stand-fallback{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(58%,420px);height:auto;border-radius:12px;box-shadow:0 18px 50px rgba(20,30,70,.28)}
#stand-3d{position:absolute;inset:0}
#stand-3d canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#stand-3d canvas:active{cursor:grabbing}
/* el respaldo se apaga cuando el visor avisa que está vivo (lo hace stand.js:
   depender de un selector de hermanos aquí era frágil — la imagen va ANTES) */
.stand-fallback{transition:opacity .4s ease}
.stand-fallback[hidden]{display:none}
@media (max-width:760px){.stand-wrap{aspect-ratio:4/5;min-height:0}}
.vvar{font-weight:700}