/* COTA · componente 4 — cota técnica animada bajo un título.
   Uso: <h2 data-cota="24" data-cota-unidad="cocinas">Título</h2>  (ver js/cota-cota.js) */
.cota-cota {
  --cc-tinta: var(--cota-carbon, #20201E);
  --cc-acento: var(--cota-terracota, #8A4B33);
  display: block;
  width: fit-content;
  max-width: 100%;
}
.cota-cota[data-cota-ancho="completo"] { width: 100%; }

.cota-cota__trazo {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 10px;
  contain: layout style;
  font-family: var(--cota-fuente, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 0;
  line-height: 0;
  --p: 0;
}
.cota-cota__trazo > i {
  position: absolute;
  display: block;
  background: var(--cc-tinta);
}
/* línea de cota: crece de izquierda a derecha */
.cota-cota__linea { left: 0; right: 0; top: 28px; height: 1px; transform-origin: 0 50%; transform: scaleX(var(--p)); }
/* líneas de extensión cortas (suben hacia el título) */
.cota-cota__ext { top: 14px; width: 1px; height: 18px; }
.cota-cota__ext--i { left: 0; }
.cota-cota__ext--d { left: calc(var(--p) * 100%); margin-left: -1px; }
/* ticks a 45° en los extremos */
.cota-cota__tick { top: 28px; width: 12px; height: 1px; margin-top: 0; transform: translate(-50%, 0) rotate(-45deg); }
.cota-cota__tick--i { left: 0; }
.cota-cota__tick--d { left: calc(var(--p) * 100%); }

.cota-cota__texto { font-weight: 500; }
.cota-cota__texto {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--cc-acento);
  font-variant-numeric: tabular-nums;
  padding: 0 .6em 0 .85em; /* compensa el letter-spacing final */
  background: var(--cota-fondo-cota, transparent);
}

/* variante grande (data-cota-tam="grande"): el número manda y la línea va debajo */
.cota-cota[data-cota-tam="grande"] .cota-cota__trazo { height: 96px; margin-top: 0; }
.cota-cota[data-cota-tam="grande"] .cota-cota__linea,
.cota-cota[data-cota-tam="grande"] .cota-cota__tick { top: 84px; }
.cota-cota[data-cota-tam="grande"] .cota-cota__ext { top: 70px; }
.cota-cota[data-cota-tam="grande"] .cota-cota__texto {
  left: 0; transform: none; padding: 0; top: 0; line-height: 64px; text-transform: none; letter-spacing: -.01em;
  font-weight: 300; font-size: clamp(2.8rem, 6.4vw, 4.6rem); color: var(--cc-tinta);
}
.cota-cota[data-cota-tam="grande"] .cota-cota__uni {
  font-size: 12px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--cc-acento); margin-left: .5em; vertical-align: baseline;
}

.cota-cota__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  .cota-cota__texto { font-size: 12px; letter-spacing: .22em; }
}

/* sin movimiento: la cota aparece completa */
@media (prefers-reduced-motion: reduce) {
  .cota-cota__trazo { --p: 1 !important; }
}