#rmr {
    --rmr-white: #FFFFFF;
    --rmr-forest: #00402A;
    --rmr-green-1: #007F33;
    --rmr-green: #00A443;
    --rmr-sand-3: #D8CFC7;
    --rmr-sand-6: #615D5A;

    --rmr-font-title: "IberPangea", Arial, sans-serif;
    --rmr-font-body: "IberPangea Text", Arial, sans-serif;
    --rmr-font-italic: "IberPangea Text Italic", "IberPangea Text", Arial, sans-serif;

    container-type: inline-size;
    width: 100%;
    max-width: 980px;
    margin: 20px auto;
    box-sizing: border-box;
    text-align: left;
    background-color: var(--rmr-white);
    border: 1px solid var(--rmr-sand-3);
    border-radius: 20px;
    padding: 36px 0;
}

#rmr * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-style: normal;
}

/* El padding horizontal va como margen de los hijos: si fuera padding del
   propio contenedor alteraría su content-box y desestabilizaría las
   container queries en los puntos de corte */
#rmr>* {
    margin-left: 36px;
    margin-right: 36px;
}

/* ===== Título ===== */
#rmr .rmr__title {
    color: var(--rmr-green-1);
    font-family: var(--rmr-font-title);
    font-weight: 400;
    font-size: 32px;
    line-height: 36px;
}

#rmr .rmr__title strong {
    font-weight: 700;
}

/* ===== Intro: texto + ilustración ===== */
#rmr .rmr__intro {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 265px;
    grid-template-areas: "text illu";
    column-gap: 24px;
    align-items: end;
}

#rmr .rmr__text {
    grid-area: text;
}

#rmr .rmr__illustration {
    grid-area: illu;
    width: 260px;
    /* Como en Figma: la ilustración (234px) sobresale del bloque de intro (210px) */
    margin-bottom: -32px;
}

#rmr .rmr__illustration img {
    display: block;
    width: 100%;
    height: auto;
}

#rmr .rmr__text p {
    color: var(--rmr-forest);
    font-family: var(--rmr-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

#rmr .rmr__text p+p {
    margin-top: 24px;
}

#rmr .rmr__text strong {
    font-weight: 700;
}

/* ===== Estadísticas: países + donut ===== */
#rmr .rmr__stats {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "es donut br"
        "uk donut us";
    column-gap: 36px;
    row-gap: 24px;
    align-items: center;
}

#rmr .rmr__country--es {
    grid-area: es;
}

#rmr .rmr__country--uk {
    grid-area: uk;
}

#rmr .rmr__country--br {
    grid-area: br;
}

#rmr .rmr__country--us {
    grid-area: us;
}

#rmr .rmr__donut {
    grid-area: donut;
}

/* Tarjeta país */
#rmr .rmr__country {
    position: relative;
    border: 1px solid var(--rmr-sand-3);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
}

#rmr .rmr__country-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px 8px 0;
}

#rmr .rmr__country-icon {
    display: block;
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
}

#rmr .rmr__country-name {
    font-family: var(--rmr-font-title);
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: var(--rmr-forest);
}

#rmr .rmr__country-value {
    text-align: center;
    padding: 8px 16px;
    font-family: var(--rmr-font-body);
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    color: var(--rmr-forest);
    white-space: nowrap;
}

/* Donut (por encima de los conectores: el anillo tapa el tramo sobrante) */
#rmr .rmr__donut {
    --rmr-donut-gap: 36px;
    position: relative;
    z-index: 1;
    width: 278px;
    height: 278px;
    justify-self: center;
}

/* Conectores en el espacio del donut: cada línea toca el círculo a la altura
   del segmento de su país (alturas de Figma: 9% Brasil, 29,5% España, 90%
   Reino Unido/EE. UU.); el tramo que entra en el anillo queda oculto tras él. */
#rmr .rmr__line {
    position: absolute;
    height: 1px;
    background-color: var(--rmr-sand-3);
    z-index: -1;
}

#rmr .rmr__line--es {
    top: 29.5%;
    left: calc(-1 * var(--rmr-donut-gap));
    width: calc(var(--rmr-donut-gap) + 11%);
}

#rmr .rmr__line--uk {
    top: 90%;
    left: calc(-1 * var(--rmr-donut-gap));
    width: calc(var(--rmr-donut-gap) + 23.5%);
}

#rmr .rmr__line--br {
    top: 9%;
    right: calc(-1 * var(--rmr-donut-gap));
    width: calc(var(--rmr-donut-gap) + 25%);
}

#rmr .rmr__line--us {
    top: 90%;
    right: calc(-1 * var(--rmr-donut-gap));
    width: calc(var(--rmr-donut-gap) + 23.5%);
}

#rmr .rmr__donut-ring {
    display: block;
    width: 100%;
    height: 100%;
    /* Orientación de los segmentos como en Figma (980/565): cada tramo queda
       junto a su tarjeta — Brasil (55%, azul oscuro) arriba-dcha, España (19,5%)
       izq, Reino Unido y EE. UU. (~12,5%) abajo izq/dcha. */
    transform: rotate(210deg);
}

#rmr .rmr__donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#rmr .rmr__donut-icon {
    display: block;
    width: 67px;
    height: 67px;
    margin-bottom: 4px;
}

#rmr .rmr__total-num {
    display: block;
    font-family: var(--rmr-font-title);
    font-weight: 400;
    font-size: 32px;
    line-height: 36px;
    color: var(--rmr-green-1);
}

#rmr .rmr__total-label {
    display: block;
    font-family: var(--rmr-font-title);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--rmr-forest);
}

#rmr .rmr__total-label strong {
    font-weight: 600;
}

/* ===== Fuente ===== */
#rmr .rmr__source {
    margin-top: 28px;
    font-family: var(--rmr-font-italic);
    font-style: italic;
    font-size: 14px;
    line-height: 18px;
    color: var(--rmr-sand-6);
}

#rmr .rmr__source a {
    color: var(--rmr-green-1);
    text-decoration: underline;
}

/* =========================================================================
   INTERMEDIO (~tablet): donut centrado con 4 tarjetas alrededor
   ========================================================================= */
@container (max-width: 640px) {
    #rmr {
        padding: 24px 0;
    }

    #rmr>* {
        margin-left: 24px;
        margin-right: 24px;
    }

    /* Intro: 1er párrafo a ancho completo; ilustración junto al 2º (como Figma 565) */
    #rmr .rmr__text {
        display: contents;
        padding-bottom: 16px;

    }

    #rmr .rmr__intro {
        grid-template-columns: minmax(0, 1fr) 149px;
        grid-template-areas:
            "p1 p1"
            "p2 illu";
        column-gap: 16px;
        row-gap: 16px;
    }

    #rmr .rmr__text p:first-child {
        grid-area: p1;
    }

    #rmr .rmr__text p:last-child {
        grid-area: p2;
        margin-top: 0;
    }

    #rmr .rmr__illustration {
        width: 149px !important;
        margin: 0;
        margin-bottom: -32px;
    }
}

/* =========================================================================
   Desk interior 
   ========================================================================= */
@container (max-width: 750px) {

    #rmr .rmr__illustration {
        width: 210px !important;
        margin: 0;
        margin-bottom: -32px;

    }

    #rmr .rmr__intro {
        margin-top: 24px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 191px;
        grid-template-areas: "text illu";
        column-gap: 24px;
        align-items: end;
    }

}



/* =========================================================================
   MÓVIL (vertical)
   ========================================================================= */
@container (max-width: 540px) {
    #rmr {
        padding: 16px 0;
    }

    #rmr>* {
        margin-left: 16px;
        margin-right: 16px;
    }

    /* Intro en columna: párrafos y debajo ilustración a ancho completo (como Figma 290) */
    #rmr .rmr__intro {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "p1"
            "p2"
            "illu";
        row-gap: 16px;
    }

    /* 16px de row-gap + 8px = 24px entre párrafos, como la línea en blanco
       del bloque de texto de Figma */
    #rmr .rmr__text p:last-child {
        margin-top: 8px;
    }

    #rmr .rmr__illustration {
        width: 314px !important;
        align-self: start;
        margin-bottom: -25px;
    }

    /* Stats: UK+US arriba, donut a tamaño completo, BR+ES abajo */
    #rmr .rmr__stats {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "uk us"
            "donut donut"
            "br es";
        column-gap: 16px;
        row-gap: 16px;
    }

    /* El donut vuelve a tamaño completo; su centro recupera los tamaños
       base (en Figma 290 es la composición de desktop escalada al donut) */
    #rmr .rmr__donut {
        width: 278px;
        height: 278px;
    }

    #rmr .rmr__donut-icon {
        width: 67px;
        height: 67px;
        margin-bottom: 4px;
    }

    #rmr .rmr__total-num {
        font-size: 32px;
        line-height: 36px;
    }

    #rmr .rmr__total-label {
        font-size: 20px;
        line-height: 28px;
    }

    /* Valor de km menor en móvil (Figma 290) */
    #rmr .rmr__country-value {
        font-size: 16px;
    }

    /* Orientación móvil del donut (Figma 290): Reino Unido arriba-izq,
       EE. UU. arriba-dcha, España dcha-abajo, Brasil izq-abajo */
    #rmr .rmr__donut-ring {
        transform: rotate(38.7deg);
    }

    /* Conectores verticales (posiciones x de Figma 290, en % del donut):
       UK/US bajan desde arriba y BR/ES suben desde abajo hasta su segmento */
    #rmr .rmr__line {
        width: 1px;
    }

    #rmr .rmr__line--uk {
        left: 31%;
        right: auto;
        top: -16px;
        height: calc(16px + 11%);
    }

    #rmr .rmr__line--us {
        left: 83.7%;
        right: auto;
        top: -16px;
        height: calc(16px + 20%);
    }

    #rmr .rmr__line--br {
        left: 17.8%;
        right: auto;
        top: auto;
        bottom: -16px;
        height: calc(16px + 19%);
    }

    #rmr .rmr__line--es {
        left: 92.2%;
        right: auto;
        top: auto;
        bottom: -16px;
        height: calc(16px + 30%);
    }
}