.etiquetado-energetico-mod4 {
    width: 100%;
    display: flex;
    justify-content: center;

    & .mod4-content {
        width: var(--360-575-page-width, 360px);
        padding: var(--size-space-24, 24px) var(--360-575-page-margin, 16px) var(--size-space-40, 40px) var(--360-575-page-margin, 16px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        align-self: stretch;
        text-align: center;

        & .title {
            color: var(--Color-Content-General-1, #2C2C2C);
            font-feature-settings: 'liga' off, 'clig' off;
            width: 100%;
            margin: 0px;
        }

        & .body {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 32px;
            align-self: stretch;


            & p {
                color: var(--Color-Content-General-2, #707070);
                font-feature-settings: 'liga' off, 'clig' off;
                margin: 0;
                text-align: left;
            }

            & .content {
                display: flex;
                width: 100%;
                box-sizing: border-box;
                padding: 0px var(--size-space-0, 0px);
                flex-direction: column;
                align-items: center;
                gap: var(--size-space-24, 24px);

                & .table-data {
                    width: 100%;
                    padding: 0px 58px;

                    & .data-content {
                        width: 100%;
                        gap: 4px;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        text-align: right;
                        
                        & span:last-child {
                            flex: 1;
                        }

                        & span:first-child {
                            width: 94px;
                        }
                    }

                    /* TABLE HEADER */
                    & .header-table {
                        color: var(--Color-Content-General-1, #2C2C2C);
                        font-feature-settings: 'liga' off, 'clig' off;

                        & th:first-child {
                            width: 138px;
                            text-align: start;
                        }

                        & th {
                            padding-bottom: 16px;
                        }
                    }

                    /* TABLE BODY */
                    & tbody {
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 16px;
                        color: var(--Color-Content-General-2, #707070);
                        font-feature-settings: 'liga' off, 'clig' off;

                        & .table-header {
                            display: flex;
                            flex-direction: row;
                            justify-content: start;
                            align-items: start;
                            gap: 4px;
                            text-align: start;
                            padding-bottom: 8px;

                            & .color {
                                min-width: 16px;
                                width: 16px;
                                height: 16px;
                            }

                            & .renobable {
                                background: var(--Green-50, #00A443);
                            }

                            & .alta-eficiencia {
                                background: var(--Sunset-80, #8B4C00);
                            }

                            & .gas-natural {
                                background: var(--Sunset-50, #FF9C1A);
                            }

                            & .carbon {
                                background: var(--Neutral-80, #474747);
                            }

                            & .gas {
                                background: var(--Neutral-60, #999);
                            }

                            & .nuclear {
                                background: var(--Green-80, #006228);
                            }

                            & .otras {
                                background: var(--Sky-50, #0DA9FF);
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 576px) {
    .etiquetado-energetico-mod4 {
        & .mod4-content {
            width: var(--576-767-page-width, 576px);
            padding: var(--size-space-24, 24px) var(--576-767-page-margin, 42px) var(--size-space-40, 40px) var(--576-767-page-margin, 42px);

            & .body {
                & .content {
                    & .table-data {
                        & .data-content {
                            & span:last-child {
                                flex: 1;
                            }

                            & span:first-child {
                                width: 139px;
                            }
                        }
                    }
                }
            }
        }

    }
}

@media (min-width: 768px) {
    .etiquetado-energetico-mod4 {
        & .mod4-content {
            width: var(--768-991-page-width, 768px);
            padding: var(--space-40, 40px) var(--768-991-page-margin, 48px) var(--space-64, 64px) var(--768-991-page-margin, 48px);
        }

    }
}

@media (min-width: 992px) {
    .etiquetado-energetico-mod4 {
        & .mod4-content {
            width: var(--992-1199-page-width, 992px);
            padding: var(--space-40, 40px) var(--992-1199-page-margin, 82px) var(--space-64, 64px) var(--992-1199-page-margin, 82px);

            & .body {
                & .content {
                    width: 100%;
                    flex-direction: row;
                    justify-content: space-between;

                    & img {
                        width: 260px;
                        height: 260px;
                    }

                    & .table-data {
                        width: 471px;
                        padding: 0px;

                        & .data-content {
                            & span:last-child {
                                flex: 1;
                            }

                            & span:first-child {
                                width: 114px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 1200px) {
    .etiquetado-energetico-mod4 {
        & .mod4-content {
            width: var(--1200-1399-page-width, 1200px);
            padding: var(--space-40, 40px) var(--1200-1399-page-margin, 102px) var(--space-64, 64px) var(--1200-1399-page-margin, 102px);

            & .body {
                & .content {
                    padding: 0px 85px;

                    & img {
                        width: 231px;
                        height: 231px;
                    }
                }
            }
        }
    }
}

@media (min-width: 1920px) {
    .etiquetado-energetico-mod4 {
        & .mod4-content {
            width: var(--14001920-page-width, 1920px);
            padding: var(--space-40, 40px) var(--14001920-page-margin, 324px) var(--space-64, 64px) var(--14001920-page-margin, 324px);

            & .body {
                & .content {
                    padding: 0px 216px;

                    & img {
                        width: 300px;
                        height: 300px
                    }
                }
            }
        }
    }
}