/* DERPLAC - página de muestras en 3D. Usa los tokens de styles.css (blanco, verde noche, Inter Tight). */

/* ---------- Barra superior simple ---------- */
.ms-top { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 -1px 0 var(--line); }
.ms-top-row { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.ms-top .logo { font-size: 22px; color: var(--ink); }
.ms-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.ms-back::before { content: ""; width: 14px; height: 1px; background: currentColor; transition: width 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ms-back:hover::before { width: 22px; } }

/* ---------- Layout ---------- */
.ms { padding-block: 40px 72px; }
.ms-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.ms-copy .lead { max-width: 44ch; }
@media (min-width: 1024px) {
  .ms { padding-block: 64px 96px; }
  .ms-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; min-height: calc(100svh - 68px - 160px); }
}

/* ---------- Pestañas, colores y datos ---------- */
.ms-tabs { margin-top: 32px; }
.ms-pick { margin-top: 28px; }
.ms-pick-label { display: flex; align-items: baseline; gap: 10px; font-size: .875rem; }
.ms-pick-label span { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
.ms-pick-label strong { font-weight: 600; letter-spacing: -0.01em; }
.ms-inline { display: inline; }
/* Muestras como placas físicas: rectángulo con la textura real y el nombre debajo */
.ms-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; margin-top: 14px; max-width: 460px; }
.ms-swatch {
  display: grid; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink);
  font: inherit; font-size: .75rem; font-weight: 500; letter-spacing: -0.005em;
}
.ms-chip {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 4px;
  background: var(--sw) center / cover; box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 6px 14px -8px rgb(10 31 21 / .35);
  transition: translate 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.ms-chip::after {
  content: ""; position: absolute; inset: -4px; border-radius: 7px; box-shadow: 0 0 0 1.5px var(--ink);
  opacity: 0; transition: opacity 200ms var(--ease-out);
}
.ms-swatch[aria-checked="true"] .ms-chip { translate: 0 -3px; box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 12px 20px -10px rgb(10 31 21 / .45); }
.ms-swatch[aria-checked="true"] .ms-chip::after { opacity: 1; }
.ms-swatch[aria-checked="false"] .ms-name { color: var(--gray); }
.ms-swatch:active .ms-chip { scale: 0.96; }
.ms-swatch:focus-visible { outline: none; }
.ms-swatch:focus-visible .ms-chip::after { opacity: 1; box-shadow: 0 0 0 2px var(--ink); }
@media (hover: hover) and (pointer: fine) { .ms-swatch[aria-checked="false"]:hover .ms-chip { translate: 0 -2px; } }

/* Vistas: alternativa a arrastrar (frente, canto y giro automático) */
.ms-views {
  position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgb(255 255 255 / .85); box-shadow: var(--shadow-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ms-views[hidden] { display: none; }
.ms-views button {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--ink);
  font: inherit; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color 150ms ease-out, color 150ms ease-out, scale 150ms ease-out;
}
.ms-views button:active { scale: 0.96; }
.ms-views button.is-on, .ms-views button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.ms-canvas:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 10px; }
.ms-stage.is-3d .ms-hint { left: auto; right: 16px; translate: 0 0; top: 20px; bottom: auto; }
@media (max-width: 560px) { .ms-stage.is-3d .ms-hint { display: none; } }

.ms-specs { margin-top: 28px; border-top: 1px solid var(--line); }
.ms-specs div { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.ms-specs dt { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--label); padding-top: 3px; }
.ms-specs dd { margin: 0; color: var(--ink); }
.ms-cta { margin-top: 32px; }

/* ---------- Escenario 3D ---------- */
.ms-stage {
  position: relative; height: min(68svh, 640px); min-height: 380px;
  border-radius: 10px; isolation: isolate; overflow: hidden;
}
@media (min-width: 1024px) { .ms-stage { height: min(74svh, 720px); } }
.ms-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 600ms var(--ease-out); }
.ms-canvas:active { cursor: grabbing; }
.ms-stage.is-3d .ms-canvas { opacity: 1; }

/* Vista de foto (celulares, o mientras carga): la muestra plana, con sombra suave */
.ms-poster { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 400ms var(--ease-out); }
.ms-stage.is-3d .ms-poster { opacity: 0; pointer-events: none; }
.ms-poster-tile {
  width: min(62%, 420px); aspect-ratio: 3 / 2; border-radius: 4px;
  background: var(--sw, #EEE); background-size: cover; background-position: center;
  box-shadow: 0 30px 60px -30px rgb(10 31 21 / .45), 0 0 0 1px rgb(0 0 0 / .06);
  transform: rotate(-4deg); transition: background-color 300ms ease;
}
.ms-poster-tile.is-wpc { aspect-ratio: 1 / 1.6; width: min(42%, 260px); background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / .28) 0 6%, transparent 6% 25%); }

.ms-activate {
  position: absolute; left: 50%; bottom: 24px; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--white); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgb(10 31 21 / .5);
  transition: scale 150ms ease-out;
}
.ms-activate:active { scale: 0.96; }
.ms-activate-ic { width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%; position: relative; }
.ms-activate-ic::after { content: ""; position: absolute; inset: 3px -4px; border: 1.5px solid currentColor; border-radius: 50%; }
.ms-note, .ms-hint {
  position: absolute; left: 50%; bottom: 24px; translate: -50% 0; z-index: 2; margin: 0; width: max-content; max-width: calc(100% - 32px);
  font-size: .8125rem; color: var(--gray); text-align: center; text-wrap: balance;
}
.ms-hint { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--label); transition: opacity 600ms ease; }
.ms-hint.is-gone { opacity: 0; }
.ms-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2; padding: 5px 10px; border-radius: 999px;
  background: rgb(255 255 255 / .85); box-shadow: var(--shadow-border);
  font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--label);
}

/* ---------- Pie simple ---------- */
.ms-foot { border-top: 1px solid var(--line); padding: 24px 0 calc(24px + env(safe-area-inset-bottom)); font-size: .8125rem; color: var(--gray); }
.ms-foot-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 28px; } /* a la izquierda: a la derecha va WhatsApp */
.ms-foot a { color: var(--gray); text-decoration: none; display: inline-block; padding-block: 4px; }
@media (max-width: 767px) { .ms-foot { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* Celular: arriba el título, después la muestra y abajo los controles */
@media (max-width: 1023px) {
  .ms-copy { display: contents; }
  .ms-copy > .eyebrow, .ms-copy > .h2, .ms-copy > .lead { order: 1; }
  .ms-stage { order: 2; height: min(58svh, 520px); min-height: 340px; }
  .ms-copy > .ms-tabs, .ms-copy > .ms-pick, .ms-copy > .ms-specs, .ms-copy > .ms-cta { order: 3; }
  .ms-grid { gap: 0; }
  .ms-copy > .lead { margin-bottom: 8px; }
  .ms-copy > .ms-tabs { margin-top: 8px; }
  .ms-copy > .ms-cta { justify-self: start; }
}
@media (max-width: 560px) { .ms-back-long { display: none; } }

/* Tipo de WPC: interior / exterior */
.ms-type { display: inline-flex; gap: 2px; margin-top: 16px; padding: 4px; border-radius: 999px; box-shadow: var(--shadow-border); background: rgb(255 255 255 / .7); }
.ms-type[hidden] { display: none; }
.ms-type button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--ink); font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: -0.005em;
  transition: background-color 150ms ease-out, color 150ms ease-out, scale 150ms ease-out;
}
.ms-type button:active { scale: 0.96; }
.ms-type button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.ms-type button span { font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgb(10 31 21 / .08); }
.ms-type button[aria-pressed="true"] span { background: rgb(255 255 255 / .18); }
.ms-poster-tile.is-ext { aspect-ratio: 13 / 9; background-image: repeating-linear-gradient(180deg, transparent 0 21%, rgb(0 0 0 / .3) 21% 24%); }

/* Táctil: sin desenfoque de fondo (se recalcula en cada cuadro del 3D y de la niebla) */
@media (pointer: coarse) {
  .ms-top, .ms-views { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .97); }
}