/* COTA · componente 1 — láminas que se dibujan solas (trazos ligados al scroll). */
.cota-dibujo {
  --cd-carbon: var(--cota-carbon, #20201E);
  --cd-papel: var(--cota-papel, #EDE9E1);
  --cd-piedra: var(--cota-piedra, #D6D1C5);
  --cd-acento: var(--cota-terracota, #8A4B33);
  --cd-gris: #77736B;
  position: relative;
  background: var(--cd-papel);
  color: var(--cd-carbon);
  font-family: var(--cota-fuente, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif);
}
.cota-dibujo *, .cota-dibujo *::before, .cota-dibujo *::after { box-sizing: border-box; }

/* riel de scroll: el escenario queda fijo mientras se dibuja */
.cota-dibujo__riel { position: relative; height: 215vh; height: 215svh; }
.cota-dibujo__escena {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column;
  gap: clamp(10px, 2svh, 22px);
  padding: clamp(18px, 3.2vw, 48px) clamp(16px, 4vw, 56px) clamp(14px, 2.4vw, 32px);
  max-width: 1360px; margin: 0 auto;
  overflow: hidden;
}

.cota-dibujo__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.cota-dibujo__etq {
  margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--cd-gris);
}
.cota-dibujo__titulo {
  margin: 0; font-weight: 300; line-height: 1.12; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 4.2vw, 3.1rem);
}
.cota-dibujo__txt { margin: 12px 0 0; max-width: 46ch; font-size: clamp(.9rem, 1.4vw, 1rem); line-height: 1.55; font-weight: 400; color: #4a4943; }

.cota-dibujo__tabs { display: flex; gap: 0; border: 1px solid var(--cd-carbon); flex: 0 0 auto; }
.cota-dibujo__tab {
  appearance: none; border: 0; background: transparent; color: var(--cd-carbon); cursor: pointer;
  min-height: 44px; min-width: 76px; padding: 0 18px;
  font: 500 12px/1 var(--cota-fuente, 'Montserrat', system-ui, sans-serif); letter-spacing: .22em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.cota-dibujo__tab + .cota-dibujo__tab { border-left: 1px solid var(--cd-carbon); }
.cota-dibujo__tab[aria-selected="true"] { background: var(--cd-carbon); color: var(--cd-papel); }
.cota-dibujo__tab:focus-visible { outline: 2px solid var(--cd-acento); outline-offset: 3px; }
@media (hover: hover) { .cota-dibujo__tab[aria-selected="false"]:hover { background: rgba(32, 32, 30, .07); } }

.cota-dibujo__lienzo { flex: 1 1 0; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.cota-dibujo__lienzo svg { display: block; width: 100%; height: 100%; max-width: 100%; overflow: visible; }

/* trazos: dasharray normalizado con pathLength=1 (lo anima el JS) */
.cota-dibujo svg .cd-trazo {
  fill: none; stroke: var(--cd-carbon); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 2; stroke-dashoffset: 0;
}
.cota-dibujo svg #muros .cd-trazo { stroke-width: 2.4; stroke-linejoin: miter; }
.cota-dibujo svg #muros .cd-trazo[data-fill] { fill: var(--cd-piedra); fill-opacity: 1; }
.cota-dibujo svg #muebles .cd-trazo { stroke-width: 1.5; }
.cota-dibujo svg #artefactos .cd-trazo { stroke-width: 1.1; }
.cota-dibujo svg #cotas .cd-trazo { stroke: var(--cd-acento); stroke-width: .9; stroke-linecap: butt; }
.cota-dibujo svg .cd-txt { fill: var(--cd-carbon); font-family: inherit; font-weight: 400; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.cota-dibujo svg .cd-txt--total { fill: var(--cd-acento); font-weight: 500; }

.cota-dibujo__capas {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--cd-gris);
}
.cota-dibujo__capas li { display: flex; align-items: center; gap: 8px; transition: color .25s ease; }
.cota-dibujo__capas li::before { content: ''; width: 18px; height: 1px; background: currentColor; opacity: .5; transition: opacity .25s ease, height .25s ease; }
.cota-dibujo__capas li.is-on { color: var(--cd-carbon); }
.cota-dibujo__capas li.is-on::before { opacity: 1; }
.cota-dibujo__capas li.is-act { color: var(--cd-acento); }
.cota-dibujo__capas li.is-act::before { height: 2px; opacity: 1; }
.cota-dibujo__unidad { margin-left: auto; letter-spacing: .18em; }

@media (max-width: 700px) {
  .cota-dibujo__riel { height: 200vh; height: 200svh; }
  /* la planta pasa a ocupar el ancho completo del lienzo y el bloque se centra en la pantalla */
  .cota-dibujo__escena { justify-content: center; gap: 22px; }
  .cota-dibujo__lienzo { flex: 0 0 auto; }
  .cota-dibujo__lienzo svg { width: calc(100% + 20px); height: auto; max-height: 58vh; max-height: 58svh; margin: 0 -10px; }
  .cota-dibujo__escena { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* deja lugar a la barra fija de compra */
  .cota-dibujo__cab { gap: 12px; }
  .cota-dibujo__txt { display: none; }
  .cota-dibujo__etq { margin-bottom: 8px; }
  .cota-dibujo__tabs { width: 100%; }
  .cota-dibujo__tab { flex: 1 1 0; min-width: 0; padding: 0 4px; letter-spacing: .16em; }
  .cota-dibujo__capas { gap: 6px 14px; letter-spacing: .14em; font-size: 12px; }
  .cota-dibujo__capas li::before { width: 10px; }
  .cota-dibujo__unidad { display: none; }
  /* a este ancho, solo la medida total; los parciales quedan como marcas */
  .cota-dibujo svg .cd-txt:not(.cd-txt--total), .cota-dibujo svg .cd-par { display: none; }
  .cota-dibujo svg .cd-txt--total { font-size: 24px; }
  .cota-dibujo svg #muros .cd-trazo { stroke-width: 3.4; }
  .cota-dibujo svg #muebles .cd-trazo { stroke-width: 2.2; }
  .cota-dibujo svg #artefactos .cd-trazo { stroke-width: 1.7; }
  .cota-dibujo svg #cotas .cd-trazo { stroke-width: 1.4; }
}

/* sin JS o sin movimiento: lámina completa, sin escenario fijo */
.cota-dibujo.is-reducido .cota-dibujo__riel { height: auto; }
.cota-dibujo.is-reducido .cota-dibujo__escena { position: static; height: auto; min-height: 0; overflow: visible; }
.cota-dibujo.is-reducido .cota-dibujo__lienzo { aspect-ratio: 4 / 3; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .cota-dibujo__riel { height: auto; }
  .cota-dibujo__escena { position: static; height: auto; overflow: visible; }
  .cota-dibujo__lienzo { aspect-ratio: 4 / 3; flex: none; }
}