/* ──────────────────────────────────────────────────────────────────────────
   Integra Home — Visualizador de pisos (mobile-first)
   Heredado de visualizador-pisos.html, retokenizado al sistema del theme.
   ────────────────────────────────────────────────────────────────────────── */

.vis-modal{position:fixed;inset:0;z-index:95;background:var(--paper);
  display:flex;flex-direction:column;overflow-y:auto}
.vis-modal[hidden]{display:none}
.vis-modal.vis-modal-inline{position:relative;inset:auto}

@media (min-width: 1024px){
  .vis-modal:not(.vis-modal-inline){padding:32px;align-items:center;justify-content:center;
    background:rgba(42,36,27,.55);backdrop-filter:blur(6px)}
  .vis-modal:not(.vis-modal-inline) .vis-wrapper{max-width:1200px;width:100%;
    max-height:90vh;overflow-y:auto;background:var(--bg);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md)}
}

.vis-wrapper{background:var(--bg);padding:18px;border-radius:0;
  max-width:1200px;margin:0 auto;width:100%;flex:1}
@media (min-width: 768px){ .vis-wrapper{padding:24px;border-radius:var(--radius-lg)} }

.vis-header{display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;margin-bottom:16px;gap:12px}
@media (min-width: 768px){
  .vis-header{flex-direction:row;align-items:flex-end;margin-bottom:20px}
}
.vis-title{margin:0 0 4px;font-family:var(--font-display);font-weight:400;
  font-size:1.6rem;letter-spacing:-.01em;line-height:1.1}
@media (min-width: 768px){ .vis-title{font-size:1.85rem} }
.vis-subtitle{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}

.vis-tabs{display:flex;gap:6px;flex-wrap:wrap}
.vis-tab{padding:10px 16px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;cursor:pointer;font-size:.85rem;color:var(--ink);
  transition:all .15s;font-family:inherit;min-height:44px}
.vis-tab:hover{border-color:var(--ink)}
.vis-tab.is-active, .vis-tab.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.vis-canvas{position:relative;background:var(--paper);border-radius:var(--radius-lg);
  overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9}
.vis-canvas svg{display:block;width:100%;height:100%}
.vis-canvas-label{position:absolute;left:14px;bottom:12px;color:rgba(42,36,27,.55);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  z-index:2}

.vis-swatch-row{display:flex;gap:8px;margin:14px 0;overflow-x:auto;padding-bottom:6px;
  -webkit-overflow-scrolling:touch}
.vis-swatch{width:72px;height:72px;border-radius:var(--radius);background-size:cover;
  background-position:center;cursor:pointer;flex-shrink:0;position:relative;
  border:2px solid transparent;transition:border-color .15s, transform .2s;overflow:hidden}
.vis-swatch:hover{transform:translateY(-2px)}
.vis-swatch.active{border-color:var(--accent)}
.vis-swatch-label{position:absolute;left:0;right:0;bottom:0;background:rgba(42,36,27,.7);
  color:var(--paper);font-size:9px;font-family:var(--font-mono);letter-spacing:.08em;
  text-transform:uppercase;padding:4px 6px;text-align:center}

.vis-info{display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
@media (min-width: 768px){ .vis-info{flex-direction:row;align-items:center} }
.vis-product-name{margin:0 0 4px;font-family:var(--font-display);font-weight:500;
  font-size:18px;letter-spacing:-.005em;line-height:1.2}
.vis-product-meta{margin:0;color:var(--muted);font-size:13px}
.vis-cta{display:inline-flex;align-items:center;gap:6px;color:var(--ink);
  text-decoration:none;font-weight:500;font-size:13px;border-bottom:1px solid var(--ink);
  padding-bottom:2px;letter-spacing:.04em;text-transform:uppercase}
.vis-cta:hover{color:var(--accent);border-bottom-color:var(--accent)}