/* Línea de cota de plano para las cifras. */
@layer components {
  .cota {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
    padding-top: 2.25rem;
    margin: 0;
  }

  /* La línea y su marca final. */
  .cota::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1.5px;
    background: var(--petroleo-hondo);
    transform-origin: left;
  }
  .cota::after,
  .cota__item::before {
    content: "";
    position: absolute;
    top: -0.65rem;
    width: 4px;
    height: 1.4rem;
    background: var(--senal);
    box-shadow: 0 0 0 1px var(--petroleo-hondo);
  }
  .cota::after { right: 0; }

  .cota__item {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.25rem;
  }
  .cota__item::before { left: 0; top: calc(-2.25rem - 0.65rem); }

  .cota__value {
    margin: 0;
    font-size: var(--fs-figure);
    font-stretch: 100%;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--petroleo);
    font-variant-numeric: tabular-nums;
  }
  .cota__label {
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--acero-oscuro);
  }

  @media (min-width: 48rem) {
    .cota { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; }
  }

  /* En móvil (2 columnas) las marcas de la segunda fila van sobre su propia línea. */
  @media (max-width: 47.99rem) {
    .cota__item:nth-child(n + 3)::before { top: calc(-3rem - 0.65rem); display: none; }
  }

  @supports (animation-timeline: view()) {
    .cota::before {
      animation: cota-draw linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }
    @keyframes cota-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .cota__item::before,
    .cota::after {
      animation: cota-tick linear both;
      animation-timeline: view();
      animation-range: entry calc(20% + var(--i, 4) * 15%) entry calc(32% + var(--i, 4) * 15%);
      transform-origin: top;
    }
    @keyframes cota-tick { from { scale: 1 0; } to { scale: 1 1; } }
  }
}