:root {
  --bg: #ffffff;
  --bg-warm: #f6f5f2;
  --panel-bg: #fafafa;
  --ink: #1b1b1d;
  --ink-2: #333333;
  --gray: #888888;
  --gray-light: #cccccc;
  --line: #e5e5e5;
  --accent: #c97b2e;
  --accent-hover: #b06a22;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'IBM Plex Mono', monospace; }

/* ─── TOPBAR ─── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.scale-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--gray);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── LAYOUT ───
   Mobile-first: esta app se usa sobre todo en pantallas verticales
   (celular). Por defecto todo va en una sola columna, en flujo normal
   (la página scrollea, sin trucos de vh ni de grid con altura fija).
   El layout de escritorio (2 columnas, panel fijo con scroll propio)
   es una mejora que se activa solo desde 960px hacia arriba —
   ver el media query al final del archivo. */
.layout {
  display: flex;
  flex-direction: column;
}

/* ─── PREVIEW ─── */
.preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  background-image: url("../assets/backgrounds/wood.jpg");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 120px rgba(0,0,0,0.15);
}

/* ── ESCENARIO FLUIDO ──
   El ancho del escenario se calcula a partir del ANCHO de pantalla
   (vw), no del alto (vh) — así funciona igual de bien en una pantalla
   vertical angosta que en una horizontal, sin depender de cuánto
   espacio vertical le quede disponible. La altura sale sola del
   aspect-ratio, y como todas las capas comparten el mismo lienzo
   recortado (sin espacio vacío arriba del clavijero), encajan
   perfectamente sin importar el tamaño. */
/* El viewport es el marco fijo: define el tamaño y RECORTA. El stage vive
   dentro y es lo único que se escala/desplaza al hacer zoom por categoría.
   La sombra va aquí, no en el stage: con overflow:hidden una sombra puesta
   en el stage quedaría cortada por el borde del marco. Como el viewport es
   transparente, drop-shadow sigue igualmente la silueta de la guitarra. */
/* La lente CAMBIA DE FORMA según la categoría enfocada: js/focus.js le
   escribe width y height en px. Estos valores son solo el estado inicial
   antes de que corra el script (y el de "sin zoom"). */
.stage-viewport {
  position: relative;
  width: min(80vw, 420px);
  aspect-ratio: 1000 / 2200;
  overflow: hidden;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.25));
  border-radius: 0;
  transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              height 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              border-radius 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .stage-viewport { transition: none; }
}

/* Con zoom la guitarra se sale del marco y el recorte deja cantos rectos
   sobre la madera. Redondeando las esquinas solo en ese estado, el recorte
   se lee como una lente y no como un fallo de composición. */
.stage-viewport.is-zoomed {
  border-radius: 18px;
}

/* El stage mantiene SIEMPRE el lienzo 1000x2200 y un tamaño fijo en px
   (--stage-w), independiente de la forma que tome la lente. Si heredara el
   tamaño de la lente, cambiar la forma del marco deformaría la guitarra. */
.preview-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w, 100%);
  height: calc(var(--stage-w, 100%) / (1000 / 2200));
  /* origen arriba-izquierda: el cálculo de js/focus.js asume que escala y
     traslación se componen desde (0,0), no desde el centro */
  transform-origin: 0 0;
  transform: translate(0, 0) scale(1);
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .preview-stage { transition: none; }
}

/* ── Píldora de zoom ──
   Aparece solo cuando hay una zona enfocada. Es el botón de salida
   explícito, además del clic fuera de cualquier categoría. */
.zoom-pill {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  background: rgba(20,18,16,0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  z-index: 5;
}

.zoom-pill[hidden] { display: none; }

.zoom-pill-zone {
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zoom-pill-hint {
  font-size: 11px;
  opacity: 0.65;
}

.zoom-pill:hover { background: rgba(20,18,16,0.88); }

/* En pantallas estrechas la píldora se partía en dos líneas. Se queda solo
   el nombre de la zona; el botón sigue siendo pulsable para salir del zoom. */
@media (max-width: 430px) {
  .zoom-pill-hint { display: none; }
}

.layer {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Body es la base */
.layer-body {
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Neck: posicionado para entrar en la cavidad del body.
   Ajusta SOLO estos 3 valores (left / bottom / width) hasta que
   encaje -- son % del escenario, así que valen igual en cualquier
   tamaño de pantalla. */
.layer-neck {
  width: 34%;
  height: auto;
  left: 33%;
  bottom: 46%;
  z-index: 2;
}

/* Pickups: sobre el body */
.layer-pickups {
  width: 80%;
  height: auto;
  bottom: 0;
  left: 0;
  z-index: 3;
}

/* Puente: encima de todo. La palanca del trémolo va montada sobre el bloque
   y queda por delante del pickguard, así que esta capa es la última. */
.layer-bridge {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
}

/* Clavijas: encima del mástil, sobre la pala. Van las últimas porque los
   botones sobresalen del canto de la pala, así que no pueden quedar debajo
   de ninguna otra capa. */
.layer-tuners {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
}

/* Cuando usas fotos reales (opt.img), cada capa puede
   ocupar el lienzo completo si la foto ya tiene el tamaño
   y la posición correctos. */
.layer.layer-full {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: auto;
  object-fit: contain;
}

/* Ajustes por modelo (sobrescriben las posiciones base) */
/* Todos los modelos comparten el lienzo estándar 1000x2200, así que
   la escala de la guitarra es la misma al cambiar de modelo. Solo los
   placeholders SVG (opciones sin foto) necesitan ajuste por modelo. */
/* OJO con la especificidad: estos selectores pesan más que .layer.layer-full,
   así que solo deben tocar los placeholders SVG. El :not(.layer-full) evita
   que aplasten al mástil cuando la opción ya tiene foto real. */
.preview-stage[data-model="tele"] .layer-neck:not(.layer-full) {
  width: 32%;
  left: 34%;
  bottom: 45%;
}

.preview-stage[data-model="jazzmaster"] .layer-neck:not(.layer-full) {
  width: 33%;
  left: 33.5%;
  bottom: 46%;
}

/* Placa de specs — en flujo normal, debajo del stage (nunca se
   superpone con la guitarra, sin importar cuánto la llene). */
.plate {
  position: relative;
  width: 100%;
  max-width: 320px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid var(--line);
}

.plate-row {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 4px 0;
}

.plate-label {
  color: var(--gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.plate-value {
  font-weight: 600;
  color: var(--ink-2);
}

/* ─── PANEL ─── */
.panel {
  padding: 24px 20px 48px;
  background: var(--panel-bg);
}

.group {
  margin-bottom: 28px;
}

/* ─── Campo de formulario (tipo de pintura) ─── */
.field {
  display: block;
  margin-bottom: 8px;
}

.field-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #8a8378);
  margin-bottom: 6px;
}

.select {
  width: 100%;
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line, #e0dbd2);
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a8378' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.select:focus {
  outline: 2px solid var(--accent, #c98a3a);
  outline-offset: 1px;
}

.field-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #8a8378);
}

.empty-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted, #8a8378);
}

.group-title {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chip.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}

.option-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.option-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s ease;
}

.option-card:hover {
  border-color: var(--gray-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.option-card.active {
  border-color: var(--accent);
  background: rgba(201,123,46,0.06);
}

.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}

.option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.option-name {
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink-2);
}

.option-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--accent);
}

/* ─── SUMMARY ─── */
.summary {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--gray);
  padding: 4px 0;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.summary-total .mono {
  color: var(--accent);
  font-size: 22px;
}

/* ─── ESCRITORIO ───
   Mejora progresiva desde 960px: 2 columnas, altura fija a la
   ventana, panel de opciones con su propio scroll interno. Por
   debajo de 960px se usa el layout base (mobile-first) de arriba. */
@media (min-width: 960px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    height: calc(100vh - 57px);
    overflow: hidden;
  }
  .preview {
    height: 100%;
    justify-content: center;
    padding: 24px 0;
    overflow: hidden;
  }
  .stage-viewport {
    width: min(90%, 78vh * (1000 / 2200), 420px);
  }
  .panel {
    height: 100%;
    overflow-y: auto;
    padding: 28px 32px;
    border-left: 1px solid var(--line);
  }
}
/* ── Vista 3D (prototipo) ──
   Cubre toda la zona de preview y tapa el escenario 2D, que sigue vivo
   debajo porque es de donde se saca la textura (ver js/view3d.js). Por eso
   se tapa con una capa encima y no con display:none: un stage sin caja no
   tiene getBoundingClientRect y el composite saldria vacio. */
.view3d {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  /* Misma madera que el 2D: al alternar entre las dos vistas solo cambia la
     guitarra, no la escena. El escenario 2D sigue vivo debajo (es de donde
     salen las texturas), asi que este fondo tiene que ser OPACO para taparlo:
     con alfa se veia una guitarra fantasma detras de la 3D. */
  background-image: url("../assets/backgrounds/wood.jpg");
  background-size: cover;
  background-position: center;
  cursor: grab;
}
.view3d:active { cursor: grabbing; }
.view3d[hidden] { display: none; }
.view3d canvas { display: block; }

/* Botón 3D. Tiene que verse: es la puerta de entrada a la funcionalidad y
   antes era una píldora de 40 px en una esquina que se perdía sobre la
   madera. Ahora lleva icono, texto y contraste alto, y cambia de rótulo
   según el estado para que se sepa cómo salir. */
.view3d-toggle {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(20,18,16,0.82);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  transition: background 0.2s ease, transform 0.15s ease;
}
.view3d-toggle:hover { background: rgba(20,18,16,0.95); transform: translateY(-1px); }
.view3d-toggle:focus-visible { outline: 2px solid #e0713f; outline-offset: 3px; }
.view3d-toggle.is-on {
  background: #c8552e;
  border-color: rgba(255,255,255,0.28);
}
.view3d-toggle-icon { width: 18px; height: 18px; flex: none; }

/* Pista de uso. Sin ella nadie adivina que la escena se arrastra: el 3D se
   abre girando solo, y una escena que se mueve sola no invita a tocarla. */
.view3d-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(20,18,16,0.6);
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.view3d-hint[hidden] { display: none; }

/* En 3D la píldora de zoom no pinta nada: el zoom por categoría es del
   escenario 2D, que ahora está tapado. */
body.is-3d .zoom-pill { display: none; }

/* El título de la barra es ahora el enlace de vuelta al sitio. */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover { color: #c8552e; }