:root{
    --navy:#0C2F52;
    --navy-dark:#082238;
    --gold:#F2A93B;
    --gold-dark:#B97A17;
    --bg:#F7F8FA;
    --card:#FFFFFF;
    --line:#E3E7EC;
    --text:#1C2530;
    --text-soft:#5B6472;
    --wall:#EDE6DA;
    --floor:#C9BFAF;
    --furn:#0C2F52;
  }
  *{box-sizing:border-box;}
  [hidden]{ display:none !important; }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:'Inter',Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brandtype{ font-family:'Poppins',Arial,sans-serif; }

  header{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 28px; background:var(--navy); color:#fff;
  }
  header .brand{ display:flex; align-items:center; gap:10px; }
  header .dot{ width:10px; height:10px; border-radius:50%; background:var(--gold); }
  header h1{ font-size:16px; font-weight:600; margin:0; letter-spacing:.2px; }
  header p{ margin:0; font-size:12px; color:#B9C6D6; }
  header .tag{
    font-size:11px; background:rgba(242,169,59,0.15); color:var(--gold);
    padding:5px 12px; border-radius:20px; font-weight:600; letter-spacing:.3px;
  }

  main{ max-width:1180px; margin:0 auto; padding:28px 24px 60px; }

  .lead{ margin-bottom:22px; }
  .lead h2{ font-size:22px; margin:0 0 6px; font-weight:600; }
  .lead p{ margin:0; color:var(--text-soft); font-size:14.5px; max-width:640px; line-height:1.55; }

  /* ---------- FLOOR PLAN VIEW ---------- */
  .stage{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:22px; }
  @media (max-width:820px){ .stage{ grid-template-columns:1fr; } }

  .plan-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:20px; display:flex; flex-direction:column; position:relative;
  }
  .plan-card svg{ width:100%; height:auto; }
  .plan-hint{ font-size:12px; color:var(--text-soft); margin:12px 2px 0; text-align:center; }

  .plan-toolbar{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap;
  }
  .plan-toolbar-label{ font-size:12.5px; font-weight:600; color:var(--text-soft); }
  .plan-toolbar-actions{ display:flex; gap:8px; }
  .toolbar-btn{
    font-size:12px; font-weight:600; padding:7px 12px; border-radius:8px; cursor:pointer;
    border:1px solid var(--line); background:var(--bg); color:var(--navy);
  }
  .toolbar-btn:hover{ background:#EDEFF3; }
  .toolbar-btn.active{ background:var(--navy); color:#fff; border-color:var(--navy); }
  .toolbar-btn.ghost{ background:transparent; }

  .room-rect{ transition:fill-opacity .15s ease, stroke .15s ease; }
  .edit-handle{
    fill:var(--gold); stroke:var(--navy); stroke-width:1.5; touch-action:none;
  }
  .edit-handle:hover{ fill:var(--gold-dark); }
  .dim-tooltip{
    position:absolute; transform:translate(-50%,-100%); background:var(--navy); color:#fff;
    font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; pointer-events:none;
    display:none; white-space:nowrap; z-index:6;
  }

  .hotspot-hit{ cursor:pointer; }
  .hotspot-visual{
    transition:transform .15s ease;
    transform-box:fill-box; transform-origin:50% 50%;
  }
  .hotspot-hit:hover .hotspot-visual{ transform:scale(1.12); }
  .hotspot-visual circle.ring{ fill:none; stroke-width:2; }
  .hotspot-visual text{ font-family:'Poppins',Arial,sans-serif; font-weight:600; }

  .info-card{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:22px; display:flex; flex-direction:column;
  }
  .info-thumb{
    width:100%; height:180px; border-radius:12px; overflow:hidden; margin-bottom:16px;
    background:var(--wall); position:relative;
  }
  .info-thumb svg, .info-thumb img{ width:100%; height:100%; display:block; object-fit:cover; }
  .info-thumb .badge{
    position:absolute; top:10px; left:10px; background:rgba(12,47,82,0.85); color:#fff;
    font-size:11px; padding:4px 10px; border-radius:20px; font-weight:600;
  }
  .info-thumb .badge.badge-custom{ background:rgba(242,169,59,0.92); color:var(--navy-dark); }
  .info-card h3{ margin:0 0 4px; font-size:19px; font-weight:600; }
  .info-card .meta{ font-size:12.5px; color:var(--gold-dark); font-weight:600; margin:0 0 10px; }
  .info-card p.desc{ font-size:13.5px; color:var(--text-soft); line-height:1.55; margin:0 0 18px; flex:1; }

  .btn{
    border:none; cursor:pointer; font-family:'Inter',Arial,sans-serif; font-weight:600;
    font-size:14px; border-radius:10px; padding:12px 18px;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:transform .12s ease, opacity .12s ease;
  }
  .btn:active{ transform:scale(0.98); }
  .btn-primary{ background:var(--navy); color:#fff; }
  .btn-primary:hover{ opacity:.92; }
  .btn-ghost{ background:transparent; color:var(--navy); border:1px solid var(--line); }
  .btn-ghost:hover{ background:var(--bg); }

  .upload-block{ margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
  .upload-btn{
    display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
    color:var(--navy); background:var(--bg); border:1px solid var(--line); border-radius:8px;
    padding:8px 12px; cursor:pointer;
  }
  .upload-btn:hover{ background:#EDEFF3; }
  .link-btn{
    display:block; background:none; border:none; color:var(--gold-dark); font-size:11.5px;
    font-weight:600; cursor:pointer; padding:8px 0 0; text-decoration:underline;
  }
  .upload-note{ font-size:11px; color:var(--text-soft); line-height:1.5; margin:8px 0 0; }

  .room-list{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
  .room-chip{
    font-size:12px; padding:7px 12px; border-radius:20px; border:1px solid var(--line);
    cursor:pointer; color:var(--text-soft); font-weight:500; background:var(--card);
  }
  .room-chip.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

  /* ---------- IMMERSIVE 360 VIEW ---------- */
  .immersive{
    display:none; background:var(--navy-dark); border-radius:16px; overflow:hidden;
    position:relative; user-select:none;
  }
  .immersive.active{ display:block; }
  .pano-wrap{
    position:relative; width:100%; height:480px; overflow:hidden; cursor:grab;
    background:var(--wall);
  }
  .pano-wrap.dragging{ cursor:grabbing; }
  .pano-canvas{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; cursor:grab; }
  .pano-wrap.dragging .pano-canvas{ cursor:grabbing; }
  .pano-fallback{
    position:absolute; top:0; left:0; width:100%; height:100%; display:none;
    background-repeat:no-repeat; background-size:auto 100%; background-position:0 50%;
  }

  .pano-top{
    position:absolute; top:16px; left:16px; right:16px; display:flex;
    justify-content:space-between; align-items:flex-start; z-index:5; pointer-events:none;
  }
  .pano-top > *{ pointer-events:auto; }
  .pano-back{
    background:rgba(8,34,56,0.75); color:#fff; border:none; border-radius:10px;
    padding:9px 14px; font-size:13px; font-weight:600; cursor:pointer;
    display:flex; align-items:center; gap:6px; backdrop-filter:blur(2px);
  }
  .pano-label{
    background:rgba(8,34,56,0.75); color:#fff; padding:8px 14px; border-radius:10px;
    font-size:13px; font-weight:600; text-align:right;
  }
  .pano-label span{ display:block; font-size:11px; font-weight:400; color:#B9C6D6; margin-top:2px; }

  .pano-arrow{
    position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
    border-radius:50%; background:rgba(8,34,56,0.6); color:#fff; border:none;
    cursor:pointer; font-size:18px; z-index:5; display:flex; align-items:center; justify-content:center;
  }
  .pano-arrow:hover{ background:rgba(8,34,56,0.85); }
  .pano-arrow.left{ left:16px; }
  .pano-arrow.right{ right:16px; }

  .pano-hotspot{
    position:absolute; width:38px; height:38px; border-radius:50%;
    background:var(--gold); color:var(--navy-dark); border:3px solid rgba(255,255,255,0.85);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px;
    cursor:pointer; z-index:4; box-shadow:0 2px 8px rgba(0,0,0,0.25);
    animation:pulse 2.4s infinite;
  }
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(242,169,59,0.45);} 50%{ box-shadow:0 0 0 8px rgba(242,169,59,0);} }

  .pano-bottom{
    position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center;
    gap:8px; z-index:5;
  }
  .pano-dot{
    width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.35); cursor:pointer;
  }
  .pano-dot.active{ background:var(--gold); }

  .footer-note{
    margin-top:26px; font-size:12px; color:var(--text-soft); line-height:1.6;
    border-top:1px solid var(--line); padding-top:16px;
  }
  .footer-note b{ color:var(--text); }

  /* ---------- ILUSTRACIONES ANIMADAS ---------- */
  @keyframes swayLeaf{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(5deg); } }
  @keyframes curtainSway{ 0%,100%{ transform:skewX(-1.5deg); } 50%{ transform:skewX(2deg); } }
  @keyframes glowPulse{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }
  @keyframes steamRise{ 0%{ transform:translateY(0) scaleX(1); opacity:0.5; } 100%{ transform:translateY(-46px) scaleX(1.4); opacity:0; } }
  @keyframes cloudDrift{ 0%{ transform:translateX(0); } 100%{ transform:translateX(140px); } }
  @keyframes twinkle{ 0%,100%{ opacity:0.25; } 50%{ opacity:1; } }
  @keyframes lightRay{ 0%,100%{ opacity:0.18; } 50%{ opacity:0.4; } }

  .leaf{ transform-box:fill-box; transform-origin:50% 100%; animation:swayLeaf 4s ease-in-out infinite; }
  .curtain{ transform-box:fill-box; transform-origin:50% 0%; animation:curtainSway 5s ease-in-out infinite; }
  .glow{ animation:glowPulse 3s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 50%; }
  .steam{ transform-box:fill-box; transform-origin:50% 100%; animation:steamRise 2.6s ease-in infinite; }
  .cloud{ animation:cloudDrift 20s ease-in-out infinite alternate; }
  .twinkle{ animation:twinkle 1.8s ease-in-out infinite; }
  .ray{ animation:lightRay 6s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce){
    .leaf,.curtain,.glow,.steam,.cloud,.twinkle,.ray{ animation:none !important; }
  }