/* 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;
}
/* Muestras con foto real: se ve la foto tal cual, sin girar */
.ms-poster-tile.is-photo {
  width: min(92%, 520px); aspect-ratio: 1; border-radius: 0; transform: none; box-shadow: none;
  /* el papel de la foto se funde con la página: sin recuadro */
  --fade: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: var(--fade); -webkit-mask-composite: source-in; mask-image: var(--fade); mask-composite: intersect;
}

.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; align-items: center; justify-content: flex-start; gap: 12px 28px; }
.ms-foot p { margin: 0; padding-block: 4px; line-height: 1.5; }
.ms-foot a { line-height: 1.5; } /* 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-type, .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; }
/* en pantallas angostas los botones bajan de renglón en vez de salirse */
.ms-type { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 420px) { .ms-type { border-radius: 20px; } }
.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); }
/* Modelo de WPC: debajo del tipo, más chico */
.ms-model { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin-top: 10px; border-radius: 20px; }
.ms-model[hidden] { display: none; }
.ms-badge[hidden] { display: none; }

/* Táctil: sin desenfoque de fondo (se recalcula en cada cuadro del 3D y de la niebla) */
@media (pointer: coarse) {
  /* la pieza no se arrastra: el dedo sigue bajando la página */
  .ms-stage.is-touch .ms-canvas { cursor: default; touch-action: auto; }
  .ms-top, .ms-views { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 255 255 / .97); }
}

/* Celular: luz blanca suave detrás de la pieza para que se despegue de la niebla */
@media (max-width: 1023px) {
  .ms-stage { background: radial-gradient(ellipse 62% 58% at 50% 50%, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .75) 45%, rgb(255 255 255 / 0) 100%); }
}

/* ---------- Página de productos: mismo diseño que las muestras, con la foto real a la derecha ---------- */
/* La foto queda fija arriba: al cambiar Melamina / WPC / MDF no se mueve aunque cambie el largo de la columna izquierda */
@media (min-width: 1024px) {
  .ms-page .ms-grid { align-items: start; }
  .ms-page .ms-stage { position: sticky; top: 100px; }
}
.pp-stage { display: grid; place-items: center; background: var(--white); box-shadow: 0 0 0 1px var(--line); }
.pp-foto { width: min(88%, 620px); height: auto; aspect-ratio: 1; object-fit: contain; transition: opacity 250ms ease; }
.pp-vacio { max-width: 360px; padding: 24px; text-align: center; }
.pp-vacio-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; }
.pp-vacio p + p { margin-top: 8px; color: var(--gray); }
.pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.pp-actions .ms-cta { margin-top: 0; }
.pp-3d-btn .ic { transition: transform 450ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pp-3d-btn:hover .ic { transform: translate(3px, -3px); } }
.ms-pick[hidden], .ms-specs[hidden], .pp-actions [hidden] { display: none; }
@media (max-width: 1023px) {
  .ms-copy > .pp-actions { order: 3; }
  .pp-stage { height: min(52svh, 460px); min-height: 300px; }
}