:root{
    --bosque:#1F3D2B;
    --oliva:#5E6F64;
    --topo:#7A7A75;
    --piedra:#EAE6DC;
    --blanco:#FFFFFF;
    --carta:#FBFAF6;        /* fondo de tarjetas, ligeramente más claro que el beige */
    --linea:#D8D2C4;
    --bosque-10:rgba(31,61,43,.07);
  }

  *{box-sizing:border-box;margin:0;padding:0}

  body{
    font-family:'Montserrat',sans-serif;
    background:var(--piedra);
    color:var(--bosque);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{max-width:1180px;margin:0 auto;padding:26px 24px 64px}

  /* ---------- Encabezado ---------- */
  .head{position:relative;overflow:hidden;text-align:center;margin-bottom:26px}
  .head .contours{
    position:absolute;inset:-40px 0 auto 0;height:160px;width:100%;
    opacity:.16;pointer-events:none;z-index:0;
  }
  .head > *{position:relative;z-index:1}
  .kicker{
    font-size:12px;letter-spacing:.32em;text-transform:uppercase;
    color:var(--oliva);font-weight:600;margin-bottom:10px;
  }
  .head h1{
    font-family:'Playfair Display',serif;font-weight:600;
    font-size:clamp(30px,5vw,46px);color:var(--bosque);line-height:1.08;
  }
  .head p{color:var(--topo);max-width:520px;margin:12px auto 0;font-weight:300;font-size:15px}

  /* ---------- Filtros ---------- */
  .filtros{
    display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
    background:var(--carta);border:1px solid var(--linea);border-radius:14px;
    padding:18px 20px;margin-bottom:24px;
  }
  .campo{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}
  .campo label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--oliva);font-weight:600}
  .campo select{
    font-family:inherit;font-size:14px;color:var(--bosque);
    padding:10px 12px;border:1px solid var(--linea);border-radius:9px;
    background:var(--blanco);cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6F64' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;
  }
  .campo select:focus{outline:2px solid var(--bosque);outline-offset:1px}
  .reset{
    background:none;border:none;color:var(--oliva);font-family:inherit;font-size:13px;
    font-weight:600;cursor:pointer;padding:10px 4px;text-decoration:underline;text-underline-offset:3px;
  }
  .reset:hover{color:var(--bosque)}

  /* ---------- Layout principal ---------- */
  .main{display:grid;grid-template-columns:380px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"edif detalle" "info detalle";column-gap:28px;row-gap:20px;align-items:start}
  #edificios{grid-area:edif}
  .panel-info{grid-area:info}
  .detalle{grid-area:detalle}

  /* Lista de unidades */
  .lista{display:flex;flex-direction:column;gap:18px;max-height:660px;overflow-y:auto;padding-right:6px}
  .lista::-webkit-scrollbar{width:6px}
  .lista::-webkit-scrollbar-thumb{background:var(--linea);border-radius:6px}
  .grupo-tit{
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oliva);
    font-weight:700;padding:4px 2px;border-bottom:1px solid var(--linea);
  }
  .card{
    text-align:left;width:100%;background:var(--carta);border:1px solid var(--linea);
    border-radius:13px;padding:16px;cursor:pointer;font-family:inherit;
    transition:border-color .18s ease, transform .18s ease, background .18s ease;
  }
  .card:hover{border-color:var(--oliva);transform:translateY(-2px)}
  .card:focus-visible{outline:2px solid var(--bosque);outline-offset:2px}
  .card .fila1{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .card .codigo{font-size:12px;font-weight:600;color:var(--topo);letter-spacing:.04em}
  .card .badge{
    font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    background:var(--bosque-10);color:var(--bosque);padding:4px 9px;border-radius:20px;
  }
  .card .modelo{font-family:'Playfair Display',serif;font-size:19px;font-weight:600;margin-bottom:10px}
  .card .specs{display:flex;gap:14px;font-size:12.5px;color:var(--topo)}
  .card .specs b{color:var(--bosque);font-weight:600}
  .card.activa{background:var(--bosque);border-color:var(--bosque)}
  .card.activa .codigo,.card.activa .specs{color:rgba(255,255,255,.72)}
  .card.activa .modelo{color:#fff}
  .card.activa .specs b{color:#fff}
  .card.activa .badge{background:rgba(255,255,255,.16);color:#fff}

  /* Panel de detalle */
  .detalle{background:var(--carta);border:1px solid var(--linea);border-radius:16px;overflow:hidden}
  .det-render{background:#EDE8DC;border-bottom:1px solid var(--linea);padding:16px;position:relative}
  .det-render .nota{position:absolute;bottom:10px;right:16px;font-size:10.5px;color:var(--topo);font-style:italic;opacity:.8}
  .plano{display:block;width:100%;height:auto;max-height:460px;object-fit:contain;margin:0 auto;border-radius:6px}
  .det-body{padding:26px 28px 30px}
  .det-loc{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oliva);font-weight:600;margin-bottom:6px}
  .det-body h2{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(24px,3.5vw,32px);margin-bottom:20px}
  .det-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:12px;overflow:hidden;margin-bottom:24px}
  .spec{background:var(--carta);padding:15px 14px;text-align:center}
  .spec .v{font-size:19px;font-weight:600;color:var(--bosque);font-family:'Playfair Display',serif}
  .spec .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--topo);margin-top:3px}
  .amen-tit{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oliva);font-weight:600;margin-bottom:12px}
  .tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
  .tag{font-size:12.5px;color:var(--bosque);background:var(--bosque-10);padding:7px 14px;border-radius:30px;font-weight:500}
  .ctas{display:flex;flex-wrap:wrap;gap:12px}
  .btn{font-family:inherit;font-size:14px;font-weight:600;padding:14px 24px;border-radius:30px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;border:none;transition:opacity .18s ease,transform .18s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn-primario{background:var(--bosque);color:#fff}
  .btn-wa{background:#fff;color:var(--bosque);border:1.5px solid var(--bosque)}
  .btn svg{width:17px;height:17px}

  .fade{animation:fade .35s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  @media (max-width:820px){
    .main{grid-template-columns:1fr;grid-template-rows:auto auto auto;grid-template-areas:"edif" "detalle" "info"}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
    .celda:hover,.btn:hover{transform:none}
  }

  /* ---------- Contacto ---------- */
  .contacto{margin-top:56px;background:var(--carta);border:1px solid var(--linea);border-radius:18px;padding:40px 28px}
  .cont-inner{max-width:680px;margin:0 auto;text-align:center}
  .cont-tit{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(26px,4vw,36px);color:var(--bosque);margin-bottom:12px}
  .cont-sub{color:var(--topo);font-weight:300;font-size:15px;max-width:520px;margin:0 auto 28px}
  #form-contacto{text-align:left}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
  .campo-f{display:flex;flex-direction:column;gap:6px}
  .campo-f.full{margin-bottom:18px}
  .campo-f span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--oliva);font-weight:600}
  .campo-f input,.campo-f textarea{font-family:inherit;font-size:14px;color:var(--bosque);padding:12px 14px;border:1px solid var(--linea);border-radius:10px;background:var(--blanco);width:100%;resize:vertical}
  .campo-f input:focus,.campo-f textarea:focus{outline:2px solid var(--bosque);outline-offset:1px}
  #form-contacto .btn-primario{width:100%;justify-content:center;font-size:15px;padding:15px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .form-status{margin-top:14px;font-size:14px;text-align:center;min-height:20px}
  .form-status.ok{color:var(--bosque);font-weight:600}
  .form-status.err{color:#9B3B2E;font-weight:600}
  @media (max-width:600px){.form-grid{grid-template-columns:1fr}}

/* ---------- Header / barra superior ---------- */
.topbar{background:var(--bosque);padding:20px 24px;display:flex;justify-content:center;align-items:center;position:relative}
.topbar-logo{height:56px;width:auto;display:block}
.topbar-cta{position:absolute;top:50%;left:24px;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;
  color:#E7D4A8;background:rgba(231,212,168,.08);border:1px solid rgba(231,212,168,.5);
  padding:9px 16px;border-radius:999px;transition:background .2s,color .2s,border-color .2s,transform .2s}
.topbar-cta svg{width:14px;height:14px}
.topbar-cta:hover{background:var(--pj-gold,#C8A96E);color:var(--bosque);border-color:var(--pj-gold,#C8A96E);transform:translateY(-50%) scale(1.03)}
.topbar-cta:active{transform:translateY(-50%) scale(.98)}
@media (max-width:600px){.topbar-logo{height:44px}.topbar-cta{left:14px;padding:7px 12px;font-size:12px}}

/* ---------- Texto de ayuda ---------- */
.ayuda{text-align:center;color:var(--topo);font-size:13.5px;font-weight:300;margin:-8px 0 26px}

/* ---------- Selector visual de edificios ---------- */
.edificios{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.edificio{display:flex;flex-direction:column}
.edif-nom{text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--oliva);font-weight:700;margin-bottom:8px}
.techo{height:12px;background:var(--bosque);border-radius:9px 9px 0 0}
.cuerpo{border:2px solid var(--bosque);border-top:none;border-radius:0 0 9px 9px;overflow:hidden;background:var(--carta)}
.nivel{display:flex;align-items:stretch;border-bottom:1px solid var(--linea)}
.nivel:last-child{border-bottom:none}
.niv-tag{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:.1em;font-weight:700;color:var(--oliva);background:var(--piedra);border-right:1px solid var(--linea);display:flex;align-items:center;justify-content:center;padding:0 5px}
.par{display:flex;flex:1}
.celda{flex:1;min-width:78px;min-height:64px;border:none;border-right:1px solid var(--linea);background:var(--carta);cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:background .15s ease,transform .15s ease}
.celda:last-child{border-right:none}
.celda:hover{background:var(--bosque-10);transform:translateY(-1px)}
.celda:focus-visible{outline:2px solid var(--bosque);outline-offset:-2px}
.celda-rec{font-size:14px;font-weight:700;color:var(--bosque)}
.celda-m2{font-size:10.5px;color:var(--topo)}
.celda.tres{box-shadow:inset 0 3px 0 var(--oliva)}
.celda.activa{background:var(--bosque)}
.celda.activa .celda-rec{color:#fff}
.celda.activa .celda-m2{color:rgba(255,255,255,.78)}
.celda.activa.tres{box-shadow:inset 0 3px 0 var(--piedra)}
.celda.cli-bloq{background:#ECECE7;cursor:not-allowed;box-shadow:none}
.celda.cli-bloq .celda-rec{color:#9A9A92;font-weight:600}
.celda.cli-bloq .celda-m2{color:#AEAEA6}
.celda.cli-bloq:hover{background:#ECECE7;transform:none}
@media (max-width:420px){.celda{min-width:64px;min-height:58px}}

/* ---------- Columna izquierda: leyenda + condominio ---------- */
.panel-info{display:flex;flex-direction:column;gap:14px;max-width:380px}
.leyenda{display:flex;flex-direction:column;gap:7px;font-size:11.5px;color:var(--topo);padding-left:2px}
.lg{display:flex;align-items:center;gap:8px}
.lg-sel,.lg-tres{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
.lg-sel{background:var(--bosque)}
.lg-tres{background:var(--carta);border:1px solid var(--linea);box-shadow:inset 0 3px 0 var(--oliva)}
.condo{background:var(--bosque);color:#fff;border-radius:16px;padding:22px 20px}
.condo-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;margin-bottom:8px}
.condo-tit{font-family:'Playfair Display',serif;font-weight:600;font-size:21px;line-height:1.2;margin-bottom:8px;color:#fff}
.condo-sub{font-size:12.5px;color:rgba(255,255,255,.82);font-weight:300;line-height:1.55;margin-bottom:16px}
.condo-amen{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.condo-amen span{font-size:11px;background:rgba(255,255,255,.13);color:#fff;padding:6px 10px;border-radius:20px}
.condo-wa{width:100%;justify-content:center;gap:8px;background:#fff;color:var(--bosque);font-weight:600;padding:13px;border:none}
.condo-wa svg{width:17px;height:17px}
.condo-wa:hover{transform:translateY(-1px)}

/* ---------- Alternar con el separador sobre el plano ---------- */
/* Espejo de .topbar-cta pero al lado opuesto y en dorado, porque es la
   acción nueva. Lleva a ?vista=plano, que sirve el MISMO proyecto. */
.topbar-vista{position:absolute;top:50%;right:24px;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;
  color:var(--bosque,#1F3D2B);background:var(--pj-gold,#C8A96E);
  border:1px solid var(--pj-gold,#C8A96E);
  padding:9px 16px;border-radius:999px;
  transition:filter .2s,transform .2s}
.topbar-vista svg{width:14px;height:14px}
.topbar-vista:hover{filter:brightness(1.08);transform:translateY(-50%) scale(1.03)}
.topbar-vista:active{transform:translateY(-50%) scale(.98)}
.topbar-vista:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (max-width:600px){.topbar-vista{right:14px;padding:7px 12px;font-size:12px}}
@media (max-width:430px){.topbar-vista span{display:none}}