/*
 * Rediseño 2026 — Cifras destacadas v1.0.2
 * Figma: node 237:401 (1920 x 250).
 * Los tres separadores son recursos exportados directamente de los vectores
 * 237:419, 237:420 y 237:421 del diseño y viajan dentro del módulo.
 *
 * Las fuentes Autography y Futura PT deben estar cargadas por el tema.
 */

.r26-stats,
.r26-stats * {
    box-sizing: border-box;
}

.r26-stats {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #fff;
    isolation: isolate;
}

.r26-stats__item {
    position: absolute;
    z-index: 2;
    top: 79.31px;
    height: 111.312px;
    display: flex;
    align-items: flex-start;
    min-width: 0;
    color: #151515;
}

/* Posiciones y anchuras del nodo 237:401. */
.r26-stats__item--1 {
    left: 4.6875%;       /* 90 / 1920 */
    width: 17.395833%;   /* 334 / 1920 */
    gap: clamp(14px, 1.25vw, 24px);
}

.r26-stats__item--2 {
    left: 27.916667%;    /* 536 / 1920 */
    width: 21.5625%;     /* 414 / 1920 */
    gap: clamp(20px, 2.34375vw, 45px);
}

.r26-stats__item--3 {
    left: 53.958333%;    /* 1036 / 1920 */
    width: 19.114583%;   /* 367 / 1920 */
    gap: clamp(14px, 1.40625vw, 27px);
}

.r26-stats__item--4 {
    left: 77.916667%;    /* 1496 / 1920 */
    width: 17.1875%;     /* 330 / 1920 */
    gap: clamp(12px, 0.989583vw, 19px);
}

/* Figma: frame "number", 120 x 111.312. */
.r26-stats__number {
    position: relative;
    flex: 0 0 clamp(92px, 6.25vw, 120px);
    width: clamp(92px, 6.25vw, 120px);
    height: 111.312px;
    font-family: "Autography", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    text-align: left;
    white-space: nowrap;
}

.r26-stats__value,
.r26-stats__label {
    position: absolute;
    display: block;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    transform: none;
    font-family: "Autography", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap;
}

/* v1.0.2: número y etiqueta alineados al inicio de su propia columna. */
.r26-stats__number,
.r26-stats__value,
.r26-stats__label {
    justify-self: start;
}

.r26-stats__value {
    z-index: 2;
    top: 9.5px;
    color: #8e0027 !important;
    font-size: clamp(72px, 5.208333vw, 100px) !important;
    line-height: 0.6 !important;
}

.r26-stats__label {
    z-index: 1;
    top: 55.65px;
    color: #151515 !important;
    font-size: clamp(36px, 2.604167vw, 50px) !important;
    line-height: 1.2 !important;
}

.r26-stats__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 11px 0 0 !important;
    align-self: flex-start;
    color: #000 !important;
    font-family: "Futura PT", "Futura_PT", Futura, sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Anchuras de texto de Figma. */
.r26-stats__item--1 .r26-stats__text { max-width: 190px; }
.r26-stats__item--2 .r26-stats__text { max-width: 249px; }
.r26-stats__item--3 .r26-stats__text { max-width: 220px; }
.r26-stats__item--4 .r26-stats__text { max-width: 191px; }

/* Separadores originales de Figma. */
.r26-stats__separator {
    position: absolute;
    z-index: 1;
    display: block;
    width: 3px;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.r26-stats__separator--1 {
    left: 24.791667%;    /* 476 / 1920 */
    top: 32.66px;
    height: 179.186px;
}

.r26-stats__separator--2 {
    left: 50.833333%;    /* 976 / 1920 */
    top: 32.66px;
    height: 179.186px;
}

.r26-stats__separator--3 {
    left: 75.989583%;    /* 1459 / 1920 */
    top: 20.66px;
    height: 190.045px;
}

/*
 * El Figma facilitado corresponde a desktop. En anchos intermedios se mantiene
 * la lectura en dos columnas y en móvil se apila, sin alterar el orden del contenido.
 */
@media (max-width: 1399px) {
    .r26-stats {
        height: auto;
        min-height: 0;
        padding: 48px clamp(24px, 5vw, 64px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 52px 64px;
        overflow: visible;
    }

    .r26-stats__item,
    .r26-stats__item--1,
    .r26-stats__item--2,
    .r26-stats__item--3,
    .r26-stats__item--4 {
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        min-height: 112px;
        align-items: flex-start;
        gap: clamp(18px, 3vw, 36px);
    }

    .r26-stats__number {
        flex-basis: 120px;
        width: 120px;
    }

    .r26-stats__value {
        font-size: 92px !important;
    }

    .r26-stats__label {
        font-size: 46px !important;
    }

    .r26-stats__text,
    .r26-stats__item--1 .r26-stats__text,
    .r26-stats__item--2 .r26-stats__text,
    .r26-stats__item--3 .r26-stats__text,
    .r26-stats__item--4 .r26-stats__text {
        max-width: 280px;
        padding-top: 10px !important;
    }

    .r26-stats__separator {
        display: none;
    }
}

@media (max-width: 700px) {
    .r26-stats {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 40px 24px;
    }

    .r26-stats__item,
    .r26-stats__item--1,
    .r26-stats__item--2,
    .r26-stats__item--3,
    .r26-stats__item--4 {
        justify-content: flex-start;
        gap: 28px;
    }

    .r26-stats__number {
        flex-basis: 112px;
        width: 112px;
    }

    .r26-stats__value {
        font-size: 82px !important;
    }

    .r26-stats__label {
        font-size: 42px !important;
    }

    .r26-stats__text,
    .r26-stats__item--1 .r26-stats__text,
    .r26-stats__item--2 .r26-stats__text,
    .r26-stats__item--3 .r26-stats__text,
    .r26-stats__item--4 .r26-stats__text {
        max-width: none;
        padding-top: 8px !important;
        font-size: 17px !important;
    }
}