.cifras {
      --fondo: #eeede7;
      --naranja: #cc5002;
      --trazo: var(--color-trazos);
      --largo-remate: 33px;
      --grosor-trazo: var(--grosor-lineas);
    }
    *, *::before, *::after { box-sizing: border-box; }


    

    /* Marco de referencia Figma: 1831 × 990 px. Centro del grupo: x=915.5. */
    .cifras {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 990px;
      min-height: 100svh;
      width: 100%;
      background: transparent;
      padding: 80px 34px;
    }
    .cifras-contenedor {
      display: flex;
      width: 1383px;
      max-width: 100%;
      height: 70svh;
      gap: 39px;
      flex-shrink: 1;
    }
    .cifra {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    /* Cada corchete es CSS: una vertical y dos pequeños remates.
       Sus medidas cambian con el contenedor; no se utilizan SVG o imágenes. */
    .cifra-marco {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .cifra-marco::before, .cifra-marco::after {
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--largo-remate);
      content: "";
      background:
        linear-gradient(var(--trazo),var(--trazo)) left top / 100% var(--grosor-trazo) no-repeat,
        linear-gradient(var(--trazo),var(--trazo)) left bottom / 100% var(--grosor-trazo) no-repeat;
    }
    .cifra-marco::before { left: 0; border-left: var(--grosor-trazo) solid var(--trazo); }
    .cifra-marco::after { right: 0; border-right: var(--grosor-trazo) solid var(--trazo); }
    .cifra-contenido {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transform: translateY(-10px);
      width: 100%;
      padding: 0 12px;
    }
    .cifra-numero {
      margin: 0;
      font-size: 110px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -4.4px;
      white-space: nowrap;
    }
    .cifra-descripcion {
      margin: 16px 0 0;
      font-size: 22px;
      line-height: 28px;
      letter-spacing: -.22px;
      font-weight: 400;
      color: rgba(0,0,0,.8);
    }
    .cifra--centro .cifra-numero {
      max-width: 302px;
      white-space: normal;
      line-height: 90px;
    }
    .cifra--centro .cifra-descripcion { margin-top: 18px; }
    /* Los tres números reposan negros; se iluminan al revelarse o al hover. */
    .cifra-numero {
      color: #000;
      transition: color 850ms cubic-bezier(.45, 0, .55, 1);
    }
    .cifra.is-animating .cifra-numero,
    .cifra:hover .cifra-numero {
      color: var(--naranja);
    }
    /* Al retirar el mouse se usa la transición de 850ms del estado base. */
    @media (hover: hover) {
      .cifra:hover .cifra-numero {
        transition-duration: 360ms;
        transition-timing-function: ease-out;
      }
    }
    @media (hover: none) {
      .cifra:hover:not(.is-animating) .cifra-numero { color: #000; }
    }


    /* Revelado, sin modificar el layout original ni el grosor de 1px. */
    .js .cifra-marco::before,
    .js .cifra-marco::after {
      transition: clip-path 1500ms cubic-bezier(.25,.8,.3,1);
    }
    .js .cifra-marco::before { clip-path: inset(0 0 100% 0); }
    .js .cifra-marco::after { clip-path: inset(100% 0 0 0); }
    .js .cifra.is-revealing .cifra-marco::before,
    .js .cifra.is-revealing .cifra-marco::after { clip-path: inset(0 0 0 0); }

    .cifra-numero .numero-mascara { display: inline-block; vertical-align: bottom; overflow: hidden; padding: .12em .075em .13em; margin: -.12em -.075em -.13em; }
    .cifra-numero .numero-interior { display: inline-block; }
    .js .cifra-numero .numero-interior {
      transform: translate3d(0, 145%, 0);
      opacity: 0;
      transition: transform 1200ms cubic-bezier(.22,1,.36,1), opacity 980ms ease-in-out;
      will-change: transform, opacity;
    }
    .js .cifra.is-number-visible .numero-interior { transform: translate3d(0,0,0); opacity: 1; }
    .js .cifra-descripcion {
      opacity: 0;
      transition: opacity 1150ms cubic-bezier(.25,.1,.25,1);
    }
    .js .cifra.is-description-visible .cifra-descripcion { opacity: 1; }

    /* En reversa los elementos se retiran más rápido, conservando el fade. */
    .js .cifra.is-reversing .cifra-marco::before,
    .js .cifra.is-reversing .cifra-marco::after {
      transition-duration: 580ms;
      transition-timing-function: cubic-bezier(.55,0,.85,.45);
    }
    .js .cifra.is-reversing .numero-interior {
      transition: transform 650ms cubic-bezier(.55,0,.85,.45), opacity 540ms ease-in-out;
    }
    .js .cifra.is-reversing .cifra-descripcion {
      transition: opacity 480ms ease-in-out;
    }
    @media (prefers-reduced-motion: reduce) {
      .js .cifra-marco::before, .js .cifra-marco::after,
      .js .cifra-numero .numero-interior, .js .cifra-descripcion, .cifra-numero { transition: none !important; }
    }

    @media (max-width: 1450px) {
      .cifras-contenedor { gap: 2.15vw; height: 40.5vw; max-height: 70svh; }
      .cifra-numero { font-size: 7vw; letter-spacing: -.28vw; }
      .cifra--centro .cifra-numero { line-height: .82; }
      .cifra-descripcion { font-size: 1.45vw; line-height: 1.3; }
    }
    @media (max-width: 700px) {
      .cifras { padding: 60px 22px; }
      .cifras-contenedor { flex-direction: column; width: 100%; height: auto; max-height: none; gap: 20px; }
      .cifra { flex: none; height: 34svh; }
      .cifra-numero { font-size: 72px; letter-spacing: -2.9px; }
      .cifra--centro .cifra-numero { line-height: .83; }
      .cifra-descripcion { font-size: 18px; line-height: 24px; margin-top: 14px; }
      .cifra--centro .cifra-descripcion { margin-top: 16px; }
      .cifra-contenido { transform: none; }
      .cifras { --largo-remate: 22px; }
    }