@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

:root {
  --ink: #12242d;
  --navy: #183642;
  --blue: #2e72dc;
  --blue-soft: #eaf2ff;
  --gold: #d5b35f;
  --gold-soft: #f7f0df;
  --muted: #69747a;
  --line: #e5e8e8;
  --line-strong: #d5dadb;
  --paper: #fff;
  --warm: #f6f4ef;
  --panel: #fbfbfa;
  --shadow: 0 22px 60px rgba(26,45,54,.10);
}

* {
  box-sizing: border-box;
}

html,body {
  margin: 0;
  color: var(--ink);
  font: 14px/1.45 "Montserrat", Arial, sans-serif;
  background: #f7f6f2;
  -webkit-font-smoothing: antialiased;
}

button,a {
  font: inherit;
  color: inherit;
}

button {
  appearance: none;
}

a {
  text-decoration: none;
}

.wrap {
  width: min(1460px,calc(100% - 42px));
  margin: auto;
}

/* Header */
.site-header {
  height: 70px;
  border-bottom: 1px solid rgba(18,36,45,.08);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header-row {
  height: 70px;
  display: flex;
  align-items: center;
  gap: 38px;
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo-link img {
  display: block;
  width: 154px;
  height: auto;
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 29px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
}

.nav a {
  padding: 26px 0;
  color: #33464f;
  border-bottom: 2px solid transparent;
  transition: .18s;
}

.nav a:hover {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.nav .nav-contact {
  padding: 9px 16px;
  border: 1px solid #dce2e4;
  border-radius: 999px;
  background: #fff;
}

.nav .nav-contact:hover {
  border-color: #aebdc3;
}

.menu-btn {
  display: none;
  border: 0;
  background: none;
  font-size: 23px;
  margin-left: auto;
  cursor: pointer;
}

/* Main */
.app-shell {
  padding: 18px 0 18px;
  min-height: calc(100vh - 112px);
  background: radial-gradient(circle at 72% 8%,rgba(213,179,95,.09),transparent 24%),linear-gradient(180deg,#faf9f6 0,#f5f4f0 100%);
}

.app-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.intro-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(360px,.55fr);
  gap: 44px;
  align-items: end;
  padding: 2px 2px 0;
}

.eyebrow,.section-kicker,.field-label,.config-head small,.topbar-copy small {
  font-size: 9px;
  letter-spacing: .16em;
  font-weight: 800;
  color: #8a6b3f;
}

.intro-row h1 {
  font: 500 clamp(27px,2.3vw,38px)/1.05 "Montserrat", Arial, sans-serif;
  letter-spacing: -.025em;
  margin: 4px 0 0;
  color: #132a35;
}

.intro-row p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  max-width: 560px;
}

/* Studio shell */
.studio {
  border: 1px solid rgba(24,54,66,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.studio-topbar {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,#fff,#fcfcfb);
}

.topbar-block {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.step-badge {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.topbar-copy {
  display: flex;
  flex-direction: column;
  min-width: 106px;
}

.topbar-copy strong {
  font-size: 12px;
  margin-top: 1px;
}

.scene-picker {
  display: flex;
  gap: 8px;
}

.scene-btn {
  height: 58px;
  min-width: 230px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 5px 10px 5px 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: .18s;
}

.scene-btn:hover {
  border-color: #bdc7ca;
  transform: translateY(-1px);
}

.scene-btn.active {
  border-color: #b99756;
  background: #fffdf8;
  box-shadow: 0 0 0 3px rgba(213,179,95,.11);
}

.scene-btn img {
  width: 78px;
  height: 46px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.scene-btn span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.scene-btn b {
  font-size: 11px;
  white-space: nowrap;
}

.scene-btn small {
  font-size: 9px;
  color: #879095;
  margin-top: 2px;
  white-space: nowrap;
}

.topbar-rule {
  height: 42px;
  width: 1px;
  background: var(--line);
  margin-left: auto;
}

.topbar-help {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #758086;
  font-size: 10.5px;
  white-space: nowrap;
}

.help-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(213,179,95,.13);
}

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0,1.78fr) minmax(340px,.64fr);
  min-height: 0;
}

.viewer-column {
  padding: 15px 16px 16px;
  min-width: 0;
  background: #f7f8f7;
  border-right: 1px solid var(--line);
}

.viewer-head {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.viewer-head>div:first-child {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.viewer-head strong {
  font-size: 11.5px;
  color: #334850;
}

.viewer-actions {
  display: flex;
  gap: 6px;
}

.viewer-actions button {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  cursor: pointer;
  font-size: 10px;
  color: #55656c;
  transition: .15s;
}

.viewer-actions button:hover {
  border-color: #bbc6c9;
  background: #fafafa;
  color: #1b3742;
}

.viewer {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
  background: #dfe5e6;
  box-shadow: 0 10px 30px rgba(14,32,40,.13);
  touch-action: none;
  user-select: none;
  isolation: isolate;
}

.view-layer {
  position: absolute;
  inset: 0;
}

.view-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.layer-a {
  z-index: 1;
}

.layer-b {
  z-index: 2;
  clip-path: inset(0 0 0 50%);
}

.viewer:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
}

.side-mark {
  position: absolute;
  z-index: 8;
  top: 12px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(15,32,40,.65);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.side-mark-a {
  left: 12px;
}

.side-mark-b {
  right: 12px;
}

.slider-line {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,.96);
  left: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

.slider-handle {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: rgba(255,255,255,.97);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  border: 1px solid rgba(13,38,48,.10);
  cursor: ew-resize;
  color: #50636b;
  font-size: 14px;
}

.slider-handle i {
  display: block;
  width: 1px;
  height: 18px;
  background: #cad0d2;
}

.viewer-label {
  position: absolute;
  z-index: 8;
  bottom: 12px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(17,35,43,.72);
  backdrop-filter: blur(9px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.viewer-label.left {
  left: 12px;
}

.viewer-label.right {
  right: 12px;
}

.viewer-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-top: 9px;
  color: #7b858a;
  font-size: 9.5px;
}

.viewer-caption span:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #56676e;
  font-weight: 650;
  white-space: nowrap;
}

.caption-icon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #50a875;
}

/* Config panel */
.config-panel {
  padding: 16px;
  background: #fff;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.config-head {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 12px;
}

.config-head h2 {
  font: 500 22px/1.05 "Montserrat", Arial, sans-serif;
  letter-spacing: -.02em;
  margin: 2px 0 3px;
  color: #15303a;
}

.config-head p {
  margin: 0;
  color: #7c8589;
  font-size: 10px;
}

.comparison-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
}

.selected-box {
  position: relative;
  min-width: 0;
  height: 68px;
  border: 1px solid var(--line);
  background: #fbfbfa;
  border-radius: 11px;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: 20px 46px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  text-align: left;
  cursor: pointer;
  transition: .16s;
}

.selected-box:hover {
  border-color: #bac5c8;
}

.selected-box.active {
  border-color: #b38a51;
  background: #fffdf8;
  box-shadow: 0 0 0 2px rgba(213,179,95,.09);
}

.selected-box img {
  width: 46px;
  height: 52px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
  filter: contrast(1.16) saturate(1.08);
}

.slot-letter {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e9edef;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 9px;
  color: #53646c;
}

.selected-box.active .slot-letter {
  background: var(--navy);
  color: #fff;
}

.slot-text {
  min-width: 0;
}

.slot-text small {
  display: block;
  font-size: 7.5px;
  letter-spacing: .12em;
  color: #8b7760;
}

.slot-text strong {
  display: block;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.slot-check {
  display: none;
  position: absolute;
  right: 6px;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #b38a51;
  color: white;
  font-size: 9px;
  place-items: center;
}

.selected-box.active .slot-check {
  display: grid;
}

.side-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: #f1f3f3;
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 12px;
}

.side-btn {
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 7px 6px;
  font-size: 9.5px;
  font-weight: 700;
  color: #6e7b80;
  cursor: pointer;
  transition: .15s;
}

.side-btn.active {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(17,38,47,.12);
}

.family-section {
  margin-bottom: 10px;
}

.field-label {
  display: block;
  color: #69777d;
  margin-bottom: 6px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 4px;
  background: #f3f4f3;
  padding: 3px;
  border-radius: 9px;
}

.tab {
  border: 0;
  background: transparent;
  border-radius: 7px;
  padding: 7px 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: #6c797e;
  cursor: pointer;
  transition: .15s;
}

.tab:hover {
  color: #223d48;
}

.tab.active {
  background: #fff;
  color: #173743;
  box-shadow: 0 2px 7px rgba(22,43,52,.08);
}

.samples-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.samples-head .field-label {
  margin: 0;
}

.samples-head small {
  font-size: 8.5px;
  color: #90979a;
}

.samples-window {
  position: relative;
  flex: 1;
  min-height: 0;
  border-top: 1px solid #eef0f0;
  padding-top: 7px;
}

.finish-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1px 3px 4px 1px;
  scrollbar-width: thin;
  scrollbar-color: #c9cfd1 transparent;
  scroll-behavior: smooth;
}

.finish-card {
  height: 62px;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 51px minmax(0,1fr);
  grid-template-rows: 1fr 1fr;
  text-align: left;
  transition: .16s;
  position: relative;
}

.finish-card:hover {
  border-color: #b9c4c7;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(30,50,59,.07);
}

.finish-card img {
  grid-row: 1/3;
  width: 51px;
  height: 50px;
  object-fit: cover;
  border-radius: 7px;
  filter: contrast(1.22) saturate(1.1);
  display: block;
}

.finish-card span {
  font-weight: 750;
  align-self: end;
  padding-left: 7px;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finish-card small {
  padding-left: 7px;
  color: #899195;
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.finish-card.selected-a:after,.finish-card.selected-b:after {
  content: "A";
  position: absolute;
  right: 5px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}

.finish-card.selected-a:after {
  background: #aa7e49;
}

.finish-card.selected-b:after {
  content: "B";
  background: #2d697f;
}

.finish-card.selected-a {
  border-color: #b48a55;
  background: #fffdf8;
}

.finish-card.selected-b {
  border-color: #76a0b1;
  background: #f9fcfd;
}

.sample-arrows {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 6px;
}

.strip-arrow {
  width: 27px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #66747a;
  font-size: 12px;
  cursor: pointer;
}

.strip-arrow:hover {
  border-color: #bdc7ca;
  color: #1b3742;
}

/* Footer */
.site-footer {
  height: 42px;
  background: #efeee9;
  border-top: 1px solid #e1dfd8;
}

.footer-row {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #768084;
  font-size: 9.5px;
}

.footer-row a:hover {
  color: var(--blue);
}

@media (max-width:1120px) {
  .studio-grid {
    grid-template-columns: minmax(0,1.45fr) minmax(330px,.72fr);
  }

  .scene-btn {
    min-width: 195px;
  }

  .topbar-help {
    display: none;
  }

  .topbar-rule {
    display: none;
  }

  .viewer-caption span:last-child {
    display: none;
  }
}

@media (max-width:930px) {
  .nav {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .nav.open {
    display: flex;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #fff;
    padding: 14px 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    box-shadow: 0 15px 30px rgba(0,0,0,.08);
  }

  .nav.open a {
    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid #f0f1f1;
  }

  .nav.open .nav-contact {
    border: 0;
    border-radius: 0;
  }

  .intro-row {
    grid-template-columns: 1fr;
  }

  .intro-row p {
    display: none;
  }

  .studio-topbar {
    align-items: flex-start;
  }

  .topbar-block {
    width: 100%;
  }

  .scene-picker {
    flex: 1;
  }

  .scene-btn {
    flex: 1;
    min-width: 0;
  }

  .studio-grid {
    grid-template-columns: 1fr;
  }

  .viewer-column {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .config-panel {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 10px 14px;
  }

  .config-head {
    grid-column: 1/-1;
    margin-bottom: 0;
  }

  .comparison-slots {
    grid-column: 1;
    grid-row: 2;
  }

  .side-toggle {
    grid-column: 1;
    grid-row: 3;
  }

  .family-section {
    grid-column: 2;
    grid-row: 2;
  }

  .samples-head {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
  }

  .samples-window {
    grid-column: 2;
    grid-row: 4/7;
  }

  .finish-grid {
    grid-template-columns: repeat(3,1fr);
    max-height: 200px;
  }

  .sample-arrows {
    grid-column: 2;
  }
}

@media (max-width:680px) {
  .wrap {
    width: calc(100% - 18px);
  }

  .site-header,.header-row {
    height: 62px;
  }

  .nav.open {
    top: 62px;
  }

  .logo-link img {
    width: 136px;
  }

  .app-shell {
    padding: 10px 0;
  }

  .app-wrap {
    gap: 10px;
  }

  .intro-row h1 {
    font-size: 26px;
  }

  .studio {
    border-radius: 14px;
  }

  .studio-topbar {
    padding: 9px;
    min-height: auto;
  }

  .topbar-copy {
    display: none;
  }

  .step-badge {
    display: none;
  }

  .scene-picker {
    gap: 5px;
  }

  .scene-btn {
    height: 51px;
    padding: 4px;
    gap: 6px;
  }

  .scene-btn img {
    width: 67px;
    height: 41px;
  }

  .scene-btn small {
    display: none;
  }

  .scene-btn b {
    font-size: 10px;
  }

  .viewer-column {
    padding: 10px;
  }

  .viewer-head {
    height: 32px;
    margin-bottom: 7px;
  }

  .viewer-head .section-kicker {
    display: none;
  }

  .viewer-head strong {
    font-size: 10px;
  }

  .viewer-actions button {
    height: 28px;
    padding: 0 8px;
  }

  .viewer-actions button span {
    display: none;
  }

  .slider-handle {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
  }

  .viewer-caption {
    font-size: 8px;
  }

  .viewer-caption span:last-child {
    display: none;
  }

  .config-panel {
    display: block;
    padding: 11px;
  }

  .config-head {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }

  .config-head .step-badge {
    display: none;
  }

  .config-head small {
    display: none;
  }

  .config-head h2 {
    font-size: 19px;
    margin: 0;
  }

  .config-head p {
    margin-left: auto;
    font-size: 8px;
  }

  .comparison-slots {
    margin-bottom: 7px;
  }

  .selected-box {
    height: 60px;
    grid-template-columns: 17px 42px minmax(0,1fr);
    padding: 5px;
  }

  .selected-box img {
    width: 42px;
    height: 46px;
  }

  .side-toggle {
    margin-bottom: 9px;
  }

  .family-section {
    margin-bottom: 8px;
  }

  .finish-grid {
    grid-template-columns: repeat(2,1fr);
    max-height: 188px;
  }

  .sample-arrows {
    display: none;
  }

  .site-footer {
    height: 36px;
  }

  .footer-row {
    height: 36px;
    justify-content: center;
  }

  .footer-row span:not(:first-child) {
    display: none;
  }
}

/* ===== V9 · Composición editorial / premium ===== */
:root {
  --canvas: #f0efe9;
  --card: #ffffff;
  --sand-1: #f5efe4;
  --sand-2: #fbf8f2;
  --aqua-1: #eef6f5;
  --aqua-2: #f8fbfa;
  --deep: #12323d;
}

html,body {
  background: var(--canvas);
}

.wrap {
  width: min(1640px,calc(100% - 56px));
}

.site-header {
  background: rgba(255,255,255,.92);
  box-shadow: 0 1px 0 rgba(18,36,45,.04);
}

.app-shell {
  position: relative;
  overflow: hidden;
  padding: 24px 0 24px;
  min-height: calc(100vh - 112px);
  background: radial-gradient(900px 420px at 14% 3%,rgba(213,179,95,.16),transparent 68%),     radial-gradient(780px 480px at 90% 25%,rgba(82,151,164,.12),transparent 70%),     linear-gradient(145deg,#f4f1ea 0%,#f7f8f5 45%,#edf3f1 100%);
}

.app-shell:before,.app-shell:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
  opacity: .7;
}

.app-shell:before {
  width: 420px;
  height: 420px;
  left: -230px;
  bottom: 70px;
  background: radial-gradient(circle,rgba(213,179,95,.13),transparent 68%);
}

.app-shell:after {
  width: 460px;
  height: 460px;
  right: -260px;
  top: 220px;
  background: radial-gradient(circle,rgba(38,97,111,.10),transparent 68%);
}

.app-wrap {
  position: relative;
  z-index: 1;
  gap: 18px;
}

.intro-row {
  grid-template-columns: minmax(0,1fr) minmax(480px,.7fr);
  gap: 64px;
  align-items: end;
  padding: 0 6px;
}

.intro-row h1 {
  font-size: clamp(32px,2.35vw,44px);
  margin-top: 5px;
}

.intro-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.intro-side p {
  margin: 0;
  color: #5f6c72;
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 600px;
}

.intro-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.intro-pills span {
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 10px;
  border: 1px solid rgba(25,66,79,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  color: #607078;
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(24,54,66,.035);
}

/* Workspace becomes a group of cards instead of a single white slab */
.studio {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.studio-topbar {
  min-height: 92px;
  border: 1px solid rgba(35,60,69,.09);
  border-radius: 19px;
  padding: 14px 18px;
  background: linear-gradient(100deg,rgba(247,240,226,.94) 0%,rgba(255,255,255,.97) 48%,rgba(238,247,246,.94) 100%);
  box-shadow: 0 16px 40px rgba(26,45,54,.07);
  margin-bottom: 14px;
}

.step-badge {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg,#143a46,#1f5663);
  box-shadow: 0 5px 14px rgba(18,50,61,.16);
}

.topbar-copy {
  min-width: 118px;
}

.topbar-copy strong {
  font-size: 12.5px;
}

.scene-picker {
  gap: 9px;
}

.scene-btn {
  height: 62px;
  min-width: 248px;
  border-radius: 13px;
  border-color: rgba(34,60,70,.12);
  box-shadow: 0 3px 10px rgba(24,54,66,.03);
}

.scene-btn.active {
  border-color: #c3a163;
  background: linear-gradient(135deg,#fffdf8,#f8f4e9);
  box-shadow: 0 0 0 3px rgba(213,179,95,.11),0 8px 18px rgba(103,79,35,.05);
}

.scene-btn img {
  width: 84px;
  height: 50px;
  border-radius: 9px;
}

.scene-btn b {
  font-size: 11.5px;
}

.topbar-help {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(24,54,66,.06);
}

.topbar-rule {
  opacity: .65;
}

.studio-grid {
  grid-template-columns: minmax(0,2.18fr) minmax(370px,.72fr);
  gap: 14px;
  align-items: stretch;
}

.viewer-column,.config-panel {
  border: 1px solid rgba(31,59,69,.09);
  border-radius: 20px;
  box-shadow: 0 18px 42px rgba(22,43,52,.075);
}

.viewer-column {
  padding: 18px 18px 16px;
  border-right: 1px solid rgba(31,59,69,.09);
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,250,249,.96)),     radial-gradient(circle at 15% 20%,rgba(213,179,95,.08),transparent 38%);
}

.viewer-head {
  height: 42px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.viewer-head strong {
  font-size: 12px;
}

.viewer-actions button {
  height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 7px rgba(20,47,58,.03);
}

.viewer {
  border-radius: 17px;
  box-shadow: 0 15px 38px rgba(13,31,39,.15);
}

.viewer:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
}

.slider-handle {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border: 1px solid rgba(24,54,66,.13);
  box-shadow: 0 10px 25px rgba(13,31,39,.22);
}

.viewer-caption {
  padding: 1px 3px 0;
  min-height: 23px;
}

.config-panel {
  padding: 18px;
  background: radial-gradient(circle at 100% 0,rgba(213,179,95,.14),transparent 30%),     linear-gradient(155deg,#fff 0%,#fbfaf6 58%,#f2f7f6 100%);
}

.config-head {
  grid-template-columns: 34px 1fr;
  gap: 11px;
  margin-bottom: 14px;
}

.config-head h2 {
  font-size: 24px;
}

.config-head p {
  font-size: 10.5px;
}

.comparison-slots {
  gap: 8px;
  margin-bottom: 9px;
}

.selected-box {
  height: 74px;
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  border-color: rgba(35,60,69,.11);
}

.selected-box.active {
  background: linear-gradient(135deg,#fffdf8,#faf5e9);
  box-shadow: 0 0 0 2px rgba(213,179,95,.09),0 5px 14px rgba(80,61,25,.04);
}

.selected-box img {
  width: 48px;
  height: 56px;
}

.side-toggle {
  border: 1px solid rgba(27,55,66,.06);
  background: rgba(229,234,233,.72);
  padding: 4px;
  border-radius: 10px;
}

.side-btn {
  padding: 8px 6px;
}

.side-btn.active {
  background: linear-gradient(135deg,#173945,#214f5d);
}

.tabs {
  background: rgba(235,238,237,.72);
  border: 1px solid rgba(27,55,66,.05);
  padding: 4px;
  border-radius: 10px;
}

.tab {
  padding: 8px 4px;
}

.tab.active {
  box-shadow: 0 3px 10px rgba(22,43,52,.06);
}

.samples-window {
  border-top-color: rgba(31,59,69,.08);
  padding-top: 9px;
}

.finish-grid {
  gap: 7px;
  max-height: 388px;
  padding: 1px 4px 5px 1px;
}

.finish-card {
  height: 68px;
  border-radius: 11px;
  background: rgba(255,255,255,.84);
  border-color: rgba(35,60,69,.10);
  grid-template-columns: 55px minmax(0,1fr);
}

.finish-card img {
  width: 55px;
  height: 56px;
  border-radius: 8px;
}

.finish-card:hover {
  background: #fff;
  box-shadow: 0 7px 17px rgba(30,50,59,.075);
}

.sample-arrows {
  margin-top: 8px;
}

.strip-arrow {
  background: rgba(255,255,255,.8);
}

/* Lower zone uses the empty desktop space and explains the tool */
.guide-strip {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}

.guide-card,.project-card {
  min-height: 112px;
  border-radius: 18px;
  border: 1px solid rgba(31,59,69,.08);
  box-shadow: 0 13px 32px rgba(22,43,52,.055);
}

.guide-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  padding: 17px 18px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(6px);
}

.guide-card:nth-child(1) {
  background: linear-gradient(145deg,rgba(250,246,238,.94),rgba(255,255,255,.82));
}

.guide-card:nth-child(2) {
  background: linear-gradient(145deg,rgba(239,247,246,.95),rgba(255,255,255,.82));
}

.guide-card:nth-child(3) {
  background: linear-gradient(145deg,rgba(246,248,247,.96),rgba(255,255,255,.84));
}

.guide-index {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid rgba(24,54,66,.09);
  display: grid;
  place-items: center;
  color: #52666f;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(25,50,60,.05);
}

.guide-card small,.project-card small {
  display: block;
  color: #8c7048;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .16em;
  margin-bottom: 4px;
}

.guide-card strong,.project-card strong {
  display: block;
  color: #173540;
  font-size: 12px;
  line-height: 1.25;
}

.guide-card p {
  margin: 6px 0 0;
  color: #6c787d;
  font-size: 9.5px;
  line-height: 1.5;
}

.project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 17px 18px;
  background: linear-gradient(135deg,#183b47,#214f5b);
  color: #fff;
}

.project-card small {
  color: #d8c08b;
}

.project-card strong {
  color: #fff;
  font: 500 18px/1.15 "Montserrat", Arial, sans-serif;
  max-width: 270px;
}

.project-actions {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.project-actions a {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 750;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}

.project-actions a:first-child {
  background: #fff;
  color: #183945;
  border-color: #fff;
}

.site-footer {
  background: #e9e8e2;
  border-top-color: rgba(31,59,69,.08);
}

.footer-row {
  color: #748087;
}

@media (min-width:1440px) {
  .viewer-column {
    padding: 19px 20px 17px;
  }

  .config-panel {
    padding: 19px;
  }

  .finish-grid {
    max-height: 405px;
  }
}

@media (max-width:1180px) {
  .wrap {
    width: min(1460px,calc(100% - 36px));
  }

  .studio-grid {
    grid-template-columns: minmax(0,1.55fr) minmax(340px,.72fr);
  }

  .guide-strip {
    grid-template-columns: repeat(2,1fr);
  }

  .project-card {
    grid-column: span 1;
  }
}

@media (max-width:930px) {
  .app-shell {
    padding-top: 16px;
  }

  .intro-row {
    grid-template-columns: 1fr;
  }

  .intro-side {
    display: none;
  }

  .studio-topbar {
    margin-bottom: 10px;
  }

  .studio-grid {
    gap: 10px;
  }

  .viewer-column,.config-panel {
    border-radius: 16px;
  }

  .config-panel {
    display: grid;
  }

  .guide-strip {
    grid-template-columns: 1fr 1fr;
  }

  .project-card {
    min-height: 110px;
  }
}

@media (max-width:680px) {
  .wrap {
    width: calc(100% - 18px);
  }

  .app-shell {
    padding: 10px 0 16px;
  }

  .intro-row {
    padding: 0 2px;
  }

  .intro-row h1 {
    font-size: 28px;
  }

  .studio-topbar {
    border-radius: 14px;
    padding: 9px;
    box-shadow: 0 10px 24px rgba(26,45,54,.05);
  }

  .viewer-column,.config-panel {
    border-radius: 14px;
  }

  .viewer-column {
    padding: 10px;
  }

  .config-panel {
    padding: 11px;
  }

  .viewer {
    border-radius: 11px;
  }

  .viewer:before {
    border-radius: 11px;
  }

  .guide-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .guide-card,.project-card {
    min-height: auto;
    border-radius: 14px;
  }

  .guide-card {
    padding: 13px 14px;
  }

  .project-card {
    padding: 14px;
  }

  .project-card strong {
    font-size: 17px;
  }

  .project-actions {
    margin-top: 10px;
  }
}

/* ===== V10 · Paso 2 y colecciones con mayor jerarquía visual ===== */
.config-panel {
  position: relative;
  overflow: hidden;
  background: radial-gradient(380px 250px at 95% 2%,rgba(92,158,166,.13),transparent 66%),     radial-gradient(340px 250px at 5% 98%,rgba(213,179,95,.11),transparent 68%),     linear-gradient(160deg,#fcfdfc 0%,#f5faf8 48%,#fbf8f1 100%);
}

.config-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58);
}

.config-panel>* {
  position: relative;
  z-index: 1;
}

.config-head {
  padding: 13px 14px;
  margin: -2px -2px 14px;
  border-radius: 15px;
  border: 1px solid rgba(42,95,105,.10);
  background: linear-gradient(115deg,rgba(231,243,241,.96) 0%,rgba(250,248,240,.96) 68%,rgba(247,239,221,.92) 100%);
  box-shadow: 0 8px 20px rgba(25,56,66,.045);
}

.config-head small {
  color: #6e785d;
}

.config-head h2 {
  color: #123945;
}

.config-head p {
  color: #6a797d;
}

.family-section {
  margin: 2px 0 12px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(26,59,70,.08);
  background: rgba(255,255,255,.58);
  box-shadow: 0 6px 18px rgba(24,52,62,.035);
}

.family-section .field-label {
  margin: 0 0 8px 2px;
  color: #5f7076;
  font-size: 8.5px;
  letter-spacing: .18em;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.tab {
  position: relative;
  min-height: 34px;
  padding: 8px 6px 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: none;
  transition: transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}

.tab:before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
  opacity: .78;
}

.tab[data-family="Classic"] {
  background: linear-gradient(145deg,#fbf7ef,#f3eadc);
  border-color: #e2cfb3;
  color: #735a3d;
}

.tab[data-family="Classic"]:before {
  background: #b8915e;
}

.tab[data-family="Marfe"] {
  background: linear-gradient(145deg,#f4fafb,#e8f2f5);
  border-color: #c7dce2;
  color: #315e6c;
}

.tab[data-family="Marfe"]:before {
  background: #5d9daf;
}

.tab[data-family="Polish"] {
  background: linear-gradient(145deg,#fffaf0,#f5edcf);
  border-color: #e2d39d;
  color: #75622f;
}

.tab[data-family="Polish"]:before {
  background: #c2a24b;
}

.tab[data-family="Todos"] {
  background: linear-gradient(145deg,#fafafa,#eff1f1);
  border-color: #d8dddd;
  color: #5f6d72;
}

.tab[data-family="Todos"]:before {
  background: #8c999d;
}

.tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(26,51,61,.07);
}

.tab.active {
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(21,49,59,.10),inset 0 0 0 1px rgba(255,255,255,.65);
  font-weight: 800;
}

.tab.active[data-family="Classic"] {
  border-color: #b8925d;
  background: linear-gradient(145deg,#fffaf2,#eadbc4);
  color: #5f4428;
}

.tab.active[data-family="Marfe"] {
  border-color: #6da6b4;
  background: linear-gradient(145deg,#f8fcfd,#dcecf0);
  color: #1f5362;
}

.tab.active[data-family="Polish"] {
  border-color: #c6a94f;
  background: linear-gradient(145deg,#fffdf5,#eee0aa);
  color: #65511f;
}

.tab.active[data-family="Todos"] {
  border-color: #91a0a4;
  background: linear-gradient(145deg,#fff,#e9eded);
  color: #43545a;
}

.samples-head {
  padding: 0 2px;
}

.samples-head .field-label {
  color: #5f7076;
}

@media (max-width:930px) {
  .config-head {
    margin: 0 0 10px;
    padding: 11px 12px;
    border-radius: 13px;
  }

  .family-section {
    padding: 9px;
  }
}

@media (max-width:680px) {
  .config-panel:before {
    border-radius: 14px;
  }

  .config-head {
    padding: 9px 10px;
    margin: 0 0 9px;
  }

  .tabs {
    gap: 5px;
  }

  .tab {
    min-height: 31px;
    padding: 7px 4px;
    font-size: 9px;
  }

  .tab:before {
    width: 5px;
    height: 5px;
    margin-right: 4px;
  }
}

/* ===== V11 · Header y footer alineados con arelite.es ===== */
.site-header {
  height: 76px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid #e9e9e6;
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.header-row {
  height: 76px;
  gap: 24px;
}

.logo-link img {
  width: 150px;
}

.arelite-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .085em;
  white-space: nowrap;
}

.arelite-nav>a,.arelite-nav>.nav-item>a {
  padding: 29px 0 27px;
  color: #33464f;
  border-bottom: 2px solid transparent;
  display: block;
}

.arelite-nav>a:hover,.arelite-nav>.nav-item:hover>a {
  color: #246bd5;
  border-bottom-color: #246bd5;
}

.nav-item {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  left: -18px;
  top: 68px;
  width: 310px;
  padding: 10px;
  border: 1px solid #e6e8e7;
  border-radius: 14px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 18px 46px rgba(25,45,53,.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  transition: .16s ease;
  z-index: 60;
}

.nav-item:hover>.nav-dropdown,.nav-item:focus-within>.nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px;
  border-radius: 9px;
  letter-spacing: 0;
  white-space: normal;
}

.nav-dropdown a:hover {
  background: #f5f7f6;
}

.nav-dropdown strong {
  font-size: 11px;
  color: #1b3742;
  letter-spacing: .01em;
}

.nav-dropdown span {
  font-size: 9px;
  font-weight: 500;
  color: #7b8589;
  line-height: 1.35;
}

.nav-dropdown.compact-menu {
  width: 220px;
}

.nav-dropdown.align-right {
  left: auto;
  right: -16px;
}

.arelite-nav .nav-pro {
  color: #1d5263;
  padding: 9px 13px;
  border: 1px solid #d6e0e2;
  border-radius: 999px;
  background: #fff;
}

.arelite-nav .nav-pro:hover {
  border-color: #adc2c8;
  background: #f9fbfb;
}

.arelite-nav .nav-catalog {
  color: #fff;
  padding: 10px 14px;
  border: 1px solid #1c4655;
  border-radius: 999px;
  background: #183b47;
}

.arelite-nav .nav-catalog:hover {
  color: #fff;
  background: #225364;
  border-color: #225364;
}

/* Footer actual de Arelite: tres bloques de navegación + legal */
.site-footer.arelite-footer {
  height: auto;
  background: #f2f1ed;
  border-top: 1px solid #e1dfd8;
  color: #667277;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(250px,1.45fr) repeat(3,minmax(150px,.72fr));
  gap: 52px;
  padding-top: 34px;
  padding-bottom: 29px;
}

.footer-brand-block img {
  display: block;
  width: 142px;
  height: auto;
  margin-bottom: 12px;
}

.footer-brand-block p {
  margin: 0 0 13px;
  max-width: 270px;
  font-size: 10.5px;
  line-height: 1.6;
  color: #727b7f;
}

.footer-social {
  font-size: 10px;
  font-weight: 750;
  color: #285c6d;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-col h3 {
  margin: 0 0 5px;
  color: #243d47;
  font-size: 10px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: .02em;
  font-weight: 800;
}

.footer-col a {
  font-size: 10px;
  line-height: 1.45;
  color: #6c767a;
  transition: .15s;
}

.footer-col a:hover,.footer-social:hover {
  color: #246bd5;
}

.footer-legal {
  min-height: 43px;
  border-top: 1px solid #dfddd7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 8.8px;
  color: #858b8d;
}

.legal-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.legal-links a:hover {
  color: #246bd5;
}

@media (max-width:1320px) {
  .arelite-nav {
    gap: 12px;
    font-size: 8.8px;
    letter-spacing: .06em;
  }

  .arelite-nav .nav-pro {
    display: none;
  }
}

@media (max-width:1120px) {
  .site-header,.header-row {
    height: 70px;
  }

  .arelite-nav {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .arelite-nav.open {
    display: flex;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 70px);
    overflow: auto;
    background: #fff;
    padding: 12px 20px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    box-shadow: 0 18px 34px rgba(0,0,0,.09);
  }

  .arelite-nav.open>a,.arelite-nav.open>.nav-item>a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #eff0ef;
    font-size: 10px;
  }

  .nav-item {
    width: 100%;
  }

  .nav-dropdown,.nav-dropdown.compact-menu,.nav-dropdown.align-right {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px;
    margin: 4px 0 8px;
    padding: 6px;
    box-shadow: none;
    border-radius: 10px;
    background: #f7f8f7;
    border-color: #eceeed;
  }

  .nav-dropdown.compact-menu {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .nav-dropdown a {
    padding: 8px;
  }

  .nav-dropdown span {
    display: none;
  }

  .arelite-nav .nav-pro,.arelite-nav .nav-catalog {
    display: block;
    border-radius: 9px;
    margin-top: 8px;
    padding: 11px 12px;
  }

  .footer-main {
    grid-template-columns: 1.15fr repeat(3,1fr);
    gap: 28px;
  }
}

@media (max-width:760px) {
  .site-header,.header-row {
    height: 62px;
  }

  .arelite-nav.open {
    top: 62px;
    max-height: calc(100vh - 62px);
  }

  .logo-link img {
    width: 132px;
  }

  .nav-dropdown,.nav-dropdown.compact-menu {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    padding-top: 28px;
  }

  .footer-brand-block {
    grid-column: 1/-1;
  }

  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width:480px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-brand-block {
    grid-column: auto;
  }
}

/* ===== V12 · Paso 2 como una única tarjeta completa ===== */
.config-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(42,94,103,.16);
  border-radius: 24px;
  background: radial-gradient(430px 320px at 100% 0%,rgba(91,159,168,.18),transparent 66%),     radial-gradient(400px 320px at 0% 100%,rgba(210,174,103,.16),transparent 68%),     linear-gradient(155deg,#eef8f6 0%,#f8f8f3 51%,#f8f1e5 100%);
  box-shadow: 0 22px 52px rgba(23,49,59,.10),     inset 0 0 0 1px rgba(255,255,255,.72);
}

.config-panel:after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 3px;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(90deg,rgba(71,142,153,.62),rgba(214,180,103,.66));
  opacity: .72;
  pointer-events: none;
}

.config-panel:before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 18px;
  box-shadow: none;
  pointer-events: none;
}

.config-panel>* {
  position: relative;
  z-index: 1;
}

/* Head remains part of the same card, but gains a clear visual entry point */
.config-head {
  padding: 14px 15px;
  margin: 0 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(49,103,111,.11);
  background: linear-gradient(120deg,rgba(255,255,255,.74),rgba(247,244,234,.66));
  box-shadow: 0 7px 18px rgba(28,55,64,.045);
}

/* A/B and collection areas float softly inside the same Step 2 surface */
.comparison-slots {
  padding: 2px;
  margin-bottom: 10px;
}

.side-toggle {
  margin-bottom: 11px;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(34,73,82,.08);
}

.family-section {
  margin: 0 0 12px;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid rgba(40,83,91,.10);
  background: rgba(255,255,255,.50);
  box-shadow: 0 7px 18px rgba(28,55,64,.035);
}

/* Samples are now visibly contained by the Step 2 card */
.samples-head {
  margin: 2px 2px 7px;
  padding: 0 2px;
}

.samples-window {
  position: relative;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(39,82,91,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72),     0 8px 20px rgba(29,57,66,.035);
}

.finish-grid {
  max-height: 382px;
  padding: 0 2px 2px 0;
}

.finish-card {
  background: rgba(255,255,255,.92);
  border-color: rgba(42,79,88,.11);
  box-shadow: 0 2px 8px rgba(28,54,63,.025);
}

.finish-card:hover {
  background: #fff;
  border-color: rgba(68,119,128,.22);
  box-shadow: 0 8px 18px rgba(28,54,63,.08);
}

.sample-arrows {
  margin: 9px 0 0;
  padding: 0 2px;
}

.strip-arrow {
  background: rgba(255,255,255,.70);
  border-color: rgba(37,75,84,.10);
}

@media (max-width:930px) {
  .config-panel {
    border-radius: 20px;
    padding: 16px;
  }

  .config-panel:before {
    border-radius: 15px;
  }
}

@media (max-width:680px) {
  .config-panel {
    border-radius: 16px;
    padding: 12px;
  }

  .config-panel:before {
    inset: 5px;
    border-radius: 12px;
  }

  .samples-window {
    border-radius: 13px;
    padding: 8px;
  }
}

/* ===== V15 · visor profesional, muestras reales y escala fina ===== */
.samples-window {
  background: linear-gradient(145deg,rgba(248,244,233,.97),rgba(255,255,255,.99) 48%,rgba(238,247,246,.96));
  border: 1px solid rgba(178,151,90,.28);
  border-radius: 17px;
  padding: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9),0 8px 24px rgba(23,52,63,.04);
}

.finish-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  max-height: 405px;
  overflow-y: auto;
  padding: 1px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: #c9c5bb transparent;
}

.finish-card {
  height: 86px;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 13px;
  background: rgba(255,255,255,.93);
  border: 1px solid rgba(24,54,66,.105);
  box-shadow: 0 3px 12px rgba(20,44,54,.035);
  text-align: left;
  cursor: pointer;
}

.finish-card img {
  grid-row: 1/3;
  width: 72px;
  height: 72px;
  display: block;
  object-fit: contain;
  border-radius: 9px;
  border: 1px solid rgba(24,54,66,.08);
  background: #f5f3ed;
  padding: 2px;
}

.finish-card span {
  align-self: end;
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.05;
  color: #193842;
}

.finish-card small {
  align-self: start;
  margin-top: 4px;
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #907346;
}

.finish-card:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: #c7a666;
  box-shadow: 0 8px 18px rgba(24,54,66,.07);
}

.finish-card.selected-a {
  border-color: #245c72;
  background: linear-gradient(135deg,#fff,#eef7fa);
  box-shadow: 0 0 0 2px rgba(36,92,114,.08);
}

.finish-card.selected-b {
  border-color: #c3a05e;
  background: linear-gradient(135deg,#fff,#fff8ea);
  box-shadow: 0 0 0 2px rgba(195,160,94,.08);
}

.selected-box img {
  object-fit: contain !important;
  padding: 2px;
  background: #f7f5ef;
  border: 1px solid rgba(24,54,66,.08);
  border-radius: 8px;
}

.viewer {
  background: #d8e3e4;
}

.view-layer .finish-overlay {
  image-rendering: auto;
}

.asset-error {
  opacity: .2 !important;
  background: repeating-linear-gradient(45deg,#eee,#eee 7px,#ddd 7px,#ddd 14px) !important;
}

@media (max-width:930px) {
  .finish-grid {
    max-height: 300px;
  }

  .finish-card {
    height: 78px;
    grid-template-columns: 62px minmax(0,1fr);
  }

  .finish-card img {
    width: 62px;
    height: 62px;
  }
}

.intro-orientative {
  margin-top: 8px;
  color: #7b6a4a;
  font-size: 12px;
  line-height: 1.4;
}

/* V18 responsive correction: preserve a full-width, aligned viewer on tablet/mobile. */
@media (max-width:930px) {
  .studio-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .viewer-column,.config-panel {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width:680px) {
  .config-panel {
    display: block;
  }

  .finish-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .finish-card {
    height: 73px;
    grid-template-columns: 55px minmax(0,1fr);
    column-gap: 6px;
    padding: 5px;
  }

  .finish-card img {
    width: 55px;
    height: 55px;
  }

  .finish-card span {
    font-size: 10px;
  }

  .finish-card small {
    font-size: 7px;
  }
}

/* Arelite integration */
.app-shell .wrap {
  width: min(1640px, calc(100% - 56px));
}

@media (max-width: 680px) {
  .app-shell .wrap {
    width: calc(100% - 18px);
  }
}

/* ===== Recursos Arelite · bloque independiente y estable ===== */
.arelite-resources-bar {
  display: grid;
  grid-template-columns: minmax(190px, .85fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(190px, .72fr);
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(31, 59, 69, .10);
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 22%, rgba(255, 255, 255, .72) 0 7%, transparent 29%),
    radial-gradient(circle at 88% 78%, rgba(190, 171, 137, .16) 0 8%, transparent 31%),
    linear-gradient(132deg, #f0eee7 0%, #e6e7e1 48%, #eee9df 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 10px 28px rgba(28, 45, 49, .055);
}

.arelite-resources-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 7px 10px;
}

.arelite-resources-intro small,
.arelite-resource-copy small {
  display: block;
  margin: 0 0 4px;
  color: #8a714b;
  font-size: 7px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .15em;
}

.arelite-resources-intro strong {
  display: block;
  max-width: 220px;
  color: #173540;
  font: 650 12px/1.3 "Montserrat", Arial, sans-serif;
}

.arelite-resource-card,
.arelite-resource-catalog {
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  overflow: hidden;
  border: 1px solid rgba(31, 59, 69, .10);
  border-radius: 12px;
  color: #173540;
  text-decoration: none;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 4px 12px rgba(27, 44, 49, .04);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.arelite-resource-card {
  grid-template-columns: 82px minmax(0, 1fr) 22px;
}

.arelite-resource-card img {
  display: block;
  width: 82px;
  height: 64px;
  object-fit: cover;
}

.arelite-resource-catalog {
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  padding: 0 10px;
}

.arelite-resource-card:hover,
.arelite-resource-card:focus-visible,
.arelite-resource-catalog:hover,
.arelite-resource-catalog:focus-visible {
  border-color: rgba(138, 113, 75, .35);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 5px 15px rgba(27, 44, 49, .07);
}

.arelite-resource-card:focus-visible,
.arelite-resource-catalog:focus-visible {
  outline: 2px solid rgba(138, 113, 75, .38);
  outline-offset: 2px;
}

.arelite-resource-copy {
  min-width: 0;
  padding: 8px 10px;
}

.arelite-resource-copy b {
  display: block;
  color: #173540;
  font-size: 9px;
  font-weight: 760;
  line-height: 1.25;
}

.arelite-resource-arrow {
  display: grid;
  place-items: center;
  color: #8a714b;
  font-size: 12px;
  line-height: 1;
}

.arelite-resource-pdf {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 7px;
  color: #fff;
  background: #183b47;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
}

@media (max-width: 1180px) {
  .arelite-resources-bar {
    grid-template-columns: minmax(180px, .75fr) 1fr 1fr;
  }

  .arelite-resource-catalog {
    grid-column: 1 / -1;
    min-height: 48px;
  }
}

@media (max-width: 820px) {
  .arelite-resources-bar {
    grid-template-columns: 1fr 1fr;
  }

  .arelite-resources-intro,
  .arelite-resource-catalog {
    grid-column: 1 / -1;
  }

  .arelite-resources-intro {
    padding: 3px 4px 5px;
  }

  .arelite-resources-intro strong {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .arelite-resources-bar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .arelite-resources-intro,
  .arelite-resource-catalog {
    grid-column: auto;
  }

  .arelite-resource-card {
    grid-template-columns: 88px minmax(0, 1fr) 22px;
  }

  .arelite-resource-card img {
    width: 88px;
    height: 64px;
  }
}