/* ============================================================================
   COTIZADOR 3D DE PUERTAS EN VIDRIO TEMPLADO · Tienda del Arquitecto
   Sistema: papel cálido + tinta navy + verde canto-de-vidrio + rojo TDA (solo
   precio y CTA). Tipografía Archivo variable (ejes wght/wdth) vendoreada.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('./assets/fonts/Archivo-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --tinta: #1d2733;
  --tinta-2: #46525f;
  --papel: #f7f6f3;
  --blanco: #fcfbf9;
  --canto: #9fc4bc;
  --canto-oscuro: #2f6e60;
  --acero: #8b959d;
  --linea: #e4e1da;
  --rojo: #fd3104;
  --rojo-oscuro: #d92700;
}

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

html { height: 100%; }
body {
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--canto-oscuro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- layout */

.app {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) clamp(400px, 35vw, 560px);
  min-height: 100dvh;
}

/* ------------------------------------------------------------- visor 3D */

#visor {
  position: sticky;
  top: 0;
  height: 100vh;   /* fallback */
  height: 100dvh;
  overflow: hidden;
  background: #f1efe9;
}
#escena3d { width: 100%; height: 100%; display: block; touch-action: none; }

.visor-ui { position: absolute; inset: 0; pointer-events: none; }
.visor-ui > * { pointer-events: auto; }

#chips {
  position: absolute; top: 18px; left: 18px; max-width: min(74%, 560px);
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 520;
  letter-spacing: .01em;
  color: var(--tinta-2);
}

.visor-pills { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 8px; }
.visor-pills button {
  background: color-mix(in srgb, var(--blanco) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 560;
  transition: border-color .15s, background .15s, color .15s;
}
.visor-pills button:hover { border-color: var(--tinta); }
.visor-pills button[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
}

#hint-visor {
  position: absolute; right: 18px; bottom: 20px;
  font-size: 11.5px; letter-spacing: .05em; color: var(--acero);
}

.sin3d-msg { display: none; }
#visor.sin3d canvas, #visor.sin3d .visor-pills, #visor.sin3d #hint-visor { display: none; }
#visor.sin3d .sin3d-msg {
  display: grid; place-items: center; height: 100%;
  padding: 32px; text-align: center; color: var(--tinta-2); font-size: 14px;
}

/* ----------------------------------------------------------------- panel */

.panel {
  background: var(--blanco);
  border-left: 1px solid var(--linea);
  display: flex;
  flex-direction: column;
}
.panel-inner { padding: 42px 44px 8px; }

.marca {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; margin-bottom: 30px;
  border-bottom: 1px solid var(--tinta);
}
.marca b {
  font-stretch: 80%; font-weight: 700; font-size: 12.5px;
  letter-spacing: .22em; text-transform: uppercase;
}
.marca span {
  font-size: 10.5px; color: var(--acero);
  letter-spacing: .16em; text-transform: uppercase;
}

h1 {
  font-stretch: 113%;
  font-weight: 580;
  font-size: clamp(26px, 2.4vw, 33px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: 12px;
}
.lede { color: var(--tinta-2); max-width: 42ch; margin-bottom: 18px; }

.sellos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-bottom: 34px; }
.sellos li {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--linea); border-radius: 999px;
  padding: 6px 13px; font-size: 12px; font-weight: 540; color: var(--tinta-2);
}
.sellos li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--canto);
}

/* ----------------------------------------------------------------- pasos */

.paso { border-top: 1px solid var(--linea); padding: 24px 0 28px; }
.paso-eyebrow {
  font-stretch: 76%; font-weight: 640; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--acero); margin-bottom: 10px;
}
.paso-eyebrow .n { color: var(--tinta); }
.paso h2 { font-size: 16px; font-weight: 620; letter-spacing: -.005em; margin-bottom: 14px; }
.ayuda { font-size: 12.5px; color: var(--acero); margin: -8px 0 12px; }

/* — segmentados (hojas / mano) */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg button {
  display: flex; align-items: center; gap: 13px; text-align: left;
  border: 1px solid var(--linea); border-radius: 13px;
  background: var(--blanco); padding: 13px 15px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.seg button:hover { border-color: var(--acero); }
.seg button[aria-pressed="true"] {
  border-color: var(--tinta);
  background: color-mix(in srgb, var(--canto) 14%, var(--blanco));
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.seg svg { width: 40px; height: auto; flex: none; color: var(--tinta); }
.seg svg .v { fill: color-mix(in srgb, var(--canto) 45%, transparent); }
.seg strong { display: block; font-size: 14px; font-weight: 620; }
.seg small { display: block; font-size: 12px; color: var(--acero); }

/* — acabados (muestras de color) */
.seg-acabado { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.seg-acabado button { padding: 11px 12px; gap: 10px; }
.sw {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--sw) 65%, #fff), var(--sw) 62%);
  border: 1px solid rgba(29, 39, 51, .18);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .12);
}
.sw-brillo { box-shadow: inset 0 -2px 4px rgba(0,0,0,.08), inset 0 2px 3px rgba(255,255,255,.9); }
.seg-acabado strong { font-size: 13px; }
.seg-acabado small { font-size: 11px; }

/* — medidas */
.medida { margin-bottom: 16px; }
.medida-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px;
}
.medida-head label {
  font-size: 11px; font-weight: 640; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-2); font-stretch: 80%;
}
.rango { font-size: 11.5px; color: var(--acero); font-variant-numeric: tabular-nums; }

.medida-controles { display: flex; align-items: center; gap: 14px; }
.medida-controles .num {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--acero); flex: none;
}
.medida-controles input[type="number"] {
  width: 84px; padding: 9px 10px;
  border: 1px solid var(--linea); border-radius: 9px;
  background: var(--blanco); text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 560;
}
.medida-controles input[type="number"]:focus { border-color: var(--tinta); outline: none; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 32px; background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: color-mix(in srgb, var(--tinta) 24%, transparent);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; margin-top: -9px;
  border-radius: 50%; background: var(--blanco);
  border: 2px solid var(--tinta);
  box-shadow: 0 1px 5px rgba(29, 39, 51, .2);
  cursor: grab;
}
input[type="range"]::-moz-range-track {
  height: 2px; background: color-mix(in srgb, var(--tinta) 24%, transparent);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%; background: var(--blanco);
  border: 2px solid var(--tinta);
  box-shadow: 0 1px 5px rgba(29, 39, 51, .2);
  cursor: grab;
}

.hint-hoja { font-size: 12.5px; font-weight: 560; color: var(--canto-oscuro); }

.medidas-error {
  margin-top: 12px; padding: 11px 14px;
  border-left: 2px solid var(--rojo);
  background: color-mix(in srgb, var(--rojo) 6%, var(--blanco));
  font-size: 13px; border-radius: 0 9px 9px 0;
}
.medidas-error .sugerencia { color: var(--canto-oscuro); font-weight: 620; margin-top: 4px; }

/* — kits */
.kits { display: grid; gap: 10px; }
.kit-card, .manija-card {
  display: block; text-align: left;
  border: 1px solid var(--linea); border-radius: 14px;
  background: var(--blanco); padding: 16px 18px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.kit-card:hover { border-color: var(--acero); }
.kit-card[aria-pressed="true"] {
  border-color: var(--tinta);
  background: color-mix(in srgb, var(--canto) 13%, var(--blanco));
  box-shadow: inset 0 0 0 1px var(--tinta);
}
.kit-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 3px;
}
.kit-head strong { font-size: 14.5px; font-weight: 640; }
.kit-head em {
  font-style: normal; font-size: 12px; color: var(--acero);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kit-tag { display: block; font-size: 12.5px; color: var(--tinta-2); margin-bottom: 8px; }
.kit-card ul { list-style: none; }
.kit-card li { font-size: 12px; color: var(--acero); padding-left: 16px; position: relative; }
.kit-card li::before { content: '—'; position: absolute; left: 0; color: var(--canto); }

.manija-card { border-style: dashed; }

/* — datos */
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo-full { grid-column: 1 / -1; }
.campo label {
  font-size: 10.5px; font-weight: 640; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acero); font-stretch: 80%;
}
.campo input {
  padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--blanco);
}
.campo input:focus {
  border-color: var(--tinta); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--canto) 30%, transparent);
}

.estado { margin-top: 14px; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 540; }
.estado.ok { background: color-mix(in srgb, var(--canto) 22%, var(--blanco)); color: var(--canto-oscuro); }
.estado.error { background: color-mix(in srgb, var(--rojo) 8%, var(--blanco)); color: var(--rojo-oscuro); }

.pie { padding: 22px 0 26px; border-top: 1px solid var(--linea); }
.pie p { font-size: 11px; color: var(--acero); line-height: 1.6; }

/* ------------------------------------------------------------------ dock */

#dock {
  position: sticky; bottom: 0; z-index: 6;
  background: color-mix(in srgb, var(--blanco) 90%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--tinta);
  padding: 14px 44px 16px;
}

.dock-top { margin-bottom: 2px; }
.dock-label {
  font-size: 10px; font-weight: 640; letter-spacing: .15em;
  text-transform: uppercase; color: var(--acero); font-stretch: 80%;
}
.dock-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }

#precio-total {
  font-size: clamp(27px, 2.6vw, 35px);
  font-weight: 300; font-stretch: 106%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  color: var(--rojo);
  white-space: nowrap;
}
.dock-sub { font-size: 11.5px; color: var(--acero); margin-top: 2px; font-variant-numeric: tabular-nums; }

.btn-cta {
  background: var(--rojo); color: #fff;
  border: 0; border-radius: 12px;
  padding: 14px 22px;
  font-size: 14.5px; font-weight: 660; letter-spacing: .01em;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--rojo) 30%, transparent);
  white-space: nowrap;
}
.btn-cta:hover { background: var(--rojo-oscuro); transform: translateY(-1px); }
.btn-cta:active { transform: translateY(0); }

/* modo medida especial */
.solo-especial { display: none; }
#dock.especial .solo-ok { display: none; }
#dock.especial .solo-especial { display: block; }
.esp-title {
  font-stretch: 110%; font-weight: 580; font-size: 22px; letter-spacing: -.01em;
}
.esp-msg { font-size: 13px; color: var(--tinta-2); margin: 2px 0 4px; }
#dock.especial #btn-wa {
  background: var(--tinta); color: var(--blanco);
  border-color: var(--tinta);
  padding: 12px 20px; border-radius: 12px; font-weight: 640;
}
#dock.especial #btn-print, #dock.especial #desglose { display: none; }

.dock-acciones {
  display: flex; align-items: baseline; gap: 16px;
  margin-top: 10px;
}
.dock-flex { flex: 1; }
.dock-acciones summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
  list-style: none; user-select: none;
}
.dock-acciones summary::before { content: '+ '; color: var(--canto-oscuro); font-weight: 700; }
details[open] summary::before { content: '− '; }
.dock-acciones summary::-webkit-details-marker { display: none; }

#btn-wa, #btn-print {
  background: none; border: none;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--linea);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
#btn-wa:hover, #btn-print:hover { color: var(--tinta); border-color: var(--tinta); }

#desglose { max-width: 100%; }
#desglose table {
  width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px;
}
#desglose th {
  text-align: left; font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--acero); font-weight: 640; padding: 0 8px 6px 0;
}
#desglose th:last-child, #desglose td:last-child { text-align: right; padding-right: 0; }
#desglose td {
  padding: 7px 8px 7px 0; border-top: 1px solid var(--linea);
  vertical-align: top; font-variant-numeric: tabular-nums;
}
#desglose td span { display: block; font-size: 11px; color: var(--acero); max-width: 34ch; }
#desglose tr.t td { border-top: 1px solid var(--linea); color: var(--tinta-2); }
#desglose tr.total td { font-weight: 680; color: var(--tinta); border-top: 2px solid var(--tinta); }
#desglose .nota { font-size: 11px; color: var(--acero); margin-top: 8px; }

.noscript { padding: 24px; text-align: center; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 940px) {
  .app { display: block; }
  #visor {
    height: 44vh;   /* fallback */
    height: 44dvh;
    z-index: 5;
    border-bottom: 1px solid var(--linea);
  }
  .panel { border-left: none; }
  .panel-inner { padding: 26px 20px 8px; }
  #dock { padding: 12px 20px 14px; }
  #chips {
    top: 12px; left: 12px; font-size: 11px; padding: 6px 12px;
    max-width: 78%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .visor-pills { left: 12px; bottom: 12px; }
  #hint-visor { display: none; }
  .seg { grid-template-columns: 1fr 1fr; }
  .datos { grid-template-columns: 1fr; }
  .dock-row { gap: 12px; }
  .btn-cta { padding: 13px 16px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ----------------------------------------------------------------- print */

#print-sheet { display: none; }

@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .app, .noscript { display: none !important; }
  #print-sheet { display: block; color: #111; font-size: 12px; }

  #print-sheet .p-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 18px;
  }
  #print-sheet .p-head b { letter-spacing: .18em; font-size: 13px; }
  #print-sheet .p-head p { font-size: 10.5px; color: #555; }
  #print-sheet .p-folio { text-align: right; }
  #print-sheet h1 { font-size: 17px; margin-bottom: 10px; font-weight: 640; }
  #print-sheet .p-meta { margin-bottom: 4px; }
  #print-sheet .p-aviso {
    margin: 10px 0; padding: 8px 10px; border: 1px solid #999; font-size: 11px;
  }
  #print-sheet table { width: 100%; border-collapse: collapse; margin: 14px 0; }
  #print-sheet th {
    text-align: left; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid #111; padding: 4px 6px 4px 0;
  }
  #print-sheet td { padding: 6px 6px 6px 0; border-bottom: 1px solid #ddd; vertical-align: top; }
  #print-sheet td span { display: block; font-size: 10px; color: #666; }
  #print-sheet th:last-child, #print-sheet td:last-child,
  #print-sheet th:nth-child(3), #print-sheet td:nth-child(3) { text-align: right; }
  #print-sheet tfoot td { border-bottom: none; padding: 3px 6px 3px 0; }
  #print-sheet .p-total td { font-weight: 700; border-top: 2px solid #111; font-size: 13px; }
  #print-sheet .p-cond { margin-top: 14px; padding-left: 16px; }
  #print-sheet .p-cond li { font-size: 10.5px; color: #444; margin-bottom: 3px; }
}

/* ============ wizard v2 — navegación por pasos, sin precio en pantalla ============ */

[hidden] { display: none !important; }

#stepper {
  display: flex; gap: 6px;
  overflow-x: auto; padding: 2px 0 12px; margin-bottom: 2px;
  scrollbar-width: none;
}
#stepper::-webkit-scrollbar { display: none; }
#stepper button {
  flex: none; display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--linea); border-radius: 999px;
  background: var(--blanco); padding: 7px 13px;
  font-size: 11.5px; font-weight: 600; color: var(--acero);
  transition: border-color .15s, background .15s, color .15s;
}
#stepper button .n { font-stretch: 78%; letter-spacing: .06em; font-size: 10px; color: var(--acero); }
#stepper button:hover { border-color: var(--acero); }
#stepper button[aria-current="step"] {
  border-color: var(--tinta); color: var(--tinta);
  background: color-mix(in srgb, var(--canto) 15%, var(--blanco));
}
#stepper button[aria-current="step"] .n { color: var(--tinta); }
#stepper button.hecho { color: var(--canto-oscuro); border-color: color-mix(in srgb, var(--canto) 55%, var(--linea)); }
#stepper button.hecho .n { color: var(--canto-oscuro); }

.dock-nav { display: flex; align-items: center; gap: 14px; }
#dock-paso {
  flex: 1; text-align: center;
  font-size: 10.5px; font-weight: 640; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acero); font-stretch: 80%;
  font-variant-numeric: tabular-nums;
}
.btn-ghost {
  background: none; border: 1px solid var(--linea); border-radius: 12px;
  padding: 13px 18px; font-size: 13.5px; font-weight: 600; color: var(--tinta-2);
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); }
.btn-ghost:disabled { opacity: .35; cursor: default; }
.dock-final { display: flex; align-items: center; gap: 16px; }

#aviso-esp {
  margin-bottom: 9px; padding: 8px 12px;
  border-left: 2px solid var(--rojo);
  background: color-mix(in srgb, var(--rojo) 6%, var(--blanco));
  font-size: 12px; border-radius: 0 8px 8px 0; color: var(--tinta-2);
}

.resumen {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 20px;
  border: 1px solid var(--linea); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 12px; background: var(--blanco);
}
.resumen dt {
  font-size: 10.5px; font-weight: 640; letter-spacing: .13em; text-transform: uppercase;
  color: var(--acero); font-stretch: 80%; padding-top: 2px;
}
.resumen dd { font-size: 13.5px; font-weight: 560; }
.resumen-nota { margin-bottom: 16px; }

.mlen {
  width: 5px; height: var(--h, 18px); flex: none; align-self: center;
  border-radius: 3px; background: var(--tinta);
}
.mlen-sin { height: 2px; width: 14px; background: var(--acero); }
.seg-manija { grid-template-columns: 1fr 1fr; }

.acepto {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; font-size: 12.5px; color: var(--tinta-2); cursor: pointer;
}
.acepto input { margin-top: 2px; accent-color: var(--canto-oscuro); width: 16px; height: 16px; flex: none; }
.acepto a { color: var(--tinta); font-weight: 600; }

.dock-final { flex: 1; justify-content: flex-end; }
@media (max-width: 940px) {
  .dock-final { gap: 12px; }
  .dock-final .btn-cta { padding: 13px 16px; }
}

/* ============ cabecera de marca (concepto del header del sitio TDA) ============ */

:root { --cab: 60px; }

#cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  height: var(--cab);
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  padding: 0 22px;
}
.cab-logo { display: flex; align-items: center; }
.cab-logo img { display: block; height: 34px; width: auto; }
.cab-sep { width: 1px; height: 22px; background: var(--linea); }
.cab-titulo {
  font-size: 11px; font-weight: 640; letter-spacing: .15em;
  text-transform: uppercase; color: var(--acero); font-stretch: 80%;
}
.cab-volver {
  margin-left: auto;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
  text-decoration: none; border-bottom: 1px solid var(--linea);
  padding-bottom: 1px; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.cab-volver:hover { color: var(--rojo); border-color: var(--rojo); }

/* el visor y el layout ceden la altura de la cabecera */
.app { min-height: calc(100dvh - var(--cab)); }
#visor {
  top: var(--cab);
  height: calc(100vh - var(--cab));
  height: calc(100dvh - var(--cab));
}
.panel-inner { padding-top: 30px; }

@media (max-width: 940px) {
  #cabecera { padding: 0 16px; gap: 12px; }
  .cab-titulo { display: none; }
  .cab-logo img { height: 28px; }
  #visor {
    top: var(--cab);
    height: calc(44vh - 0px);
    height: 44dvh;
  }
}

/* ============ refinado móvil (pasada UX 10-jul, aprobada) ============ */
@media (max-width: 940px) {
  /* héroe compacto: las opciones quedan a la vista sin scroll */
  h1 { font-size: 19px; margin: 2px 0 12px; }
  .lede, .sellos { display: none; }
  .panel-inner { padding-top: 16px; }

  /* visor un pelo más bajo; gesto natural: vertical desplaza la página,
     horizontal gira la puerta, pellizco acerca */
  #visor { height: 42vh; height: 42dvh; }
  #escena3d { touch-action: pan-y; }
  .visor-pills button { padding: 8px 13px; font-size: 12.5px; }

  /* stepper compacto: números; solo el paso activo muestra su nombre */
  #stepper { gap: 5px; padding-bottom: 10px; }
  #stepper button { padding: 8px 11px; }
  #stepper button .t { display: none; }
  #stepper button[aria-current="step"] .t { display: inline; }

  /* dock: safe-area (iPhone) + CTA final a lo ancho */
  #dock { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .dock-final .btn-cta { flex: 1; }

  /* al navegar, el paso aterriza justo debajo del visor sticky */
  .paso { scroll-margin-top: calc(var(--cab) + 42dvh + 10px); }
}

/* ============ control de acceso (sub-bloque del paso Accesorios) ============ */
.h2-acceso { margin-top: 26px; }
.seg-acceso { grid-template-columns: 1fr; }

/* ============ iconos Material Symbols (vendoreados, inline) ============ */
.paso h2 { display: flex; align-items: center; gap: 9px; }
.ic { width: 21px; height: 21px; flex: none; color: var(--canto-oscuro); }
.ic-card { width: 34px; height: 34px; flex: none; color: var(--tinta); }

/* ============ proyecto multipuerta ============ */
#tabs-puertas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#tabs-puertas button {
  border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco);
  padding: 7px 12px; font-size: 12px; font-weight: 620; color: var(--tinta-2);
  transition: border-color .15s, background .15s;
}
#tabs-puertas button[aria-current="true"] {
  border-color: var(--tinta); color: var(--tinta);
  background: color-mix(in srgb, var(--canto) 16%, var(--blanco));
  box-shadow: inset 0 0 0 1px var(--tinta);
}
#tabs-puertas #tab-add { color: var(--canto-oscuro); border-style: dashed; }
#tabs-puertas button:disabled { opacity: .4; cursor: default; }

.puerta-card {
  border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco);
  padding: 14px 16px; margin-bottom: 10px;
}
.puerta-card.activa { border-color: color-mix(in srgb, var(--canto) 55%, var(--linea)); }
.puerta-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.puerta-card header strong { font-size: 14px; font-weight: 660; }
.pc-cant { display: flex; align-items: center; gap: 8px; }
.pc-cant b { font-size: 13px; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.pc-cant button {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--linea);
  background: var(--blanco); font-size: 15px; line-height: 1; font-weight: 700; color: var(--tinta-2);
}
.pc-cant button:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); }
.pc-cant button:disabled { opacity: .35; cursor: default; }
.pc-desc { font-size: 13.5px; font-weight: 600; }
.pc-esp { color: var(--rojo-oscuro); font-weight: 650; }
.pc-sub { font-size: 12px; color: var(--acero); margin-top: 2px; line-height: 1.5; }
.pc-acciones { display: flex; gap: 14px; margin-top: 9px; }
.pc-acciones button {
  background: none; border: none; padding: 0 0 1px;
  font-size: 12.5px; font-weight: 600; color: var(--tinta-2);
  border-bottom: 1px solid var(--linea);
}
.pc-acciones button:hover:not(:disabled) { color: var(--tinta); border-color: var(--tinta); }
.pc-acciones button:disabled { opacity: .35; cursor: default; }
.pc-acciones button[data-acc="eliminar"]:hover:not(:disabled) { color: var(--rojo-oscuro); border-color: var(--rojo-oscuro); }
.btn-add { margin-bottom: 14px; width: 100%; }