.container__hero {
    position: relative;
    height: 700px;

    .container__inside-hero {
        position: relative;
        z-index: 1;
        max-width: var(--breakpoint-extra-large);
        width: 95%;
        display: flex;
        margin: 0 auto;
        height: 100%;
        /* padding: 0 1rem 5rem 1rem; */
        display: flex;
        align-items: flex-end;
        padding-bottom: 4.375rem;
        padding-left: 2.625rem;
    }

    .section__text-hero {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 1.5rem;
        background: var(--orsystem-white);
        height: fit-content;
        padding: 0 24px 24px;
        border-radius: 16px;

        .text-hero__etiqueta {
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.625rem;
            color: var(--orsystem-almost-white);
            /* width: 50%; */

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-size: 1.5rem;
                font-weight: 600;
                line-height: 1.625rem;
                color: var(--orsystem-climate-control);
                margin-bottom: 0;
                margin-top: 24px;
            }
        }

        .text-hero__title {
            /* width: 50%; */
            font-size: 3.5rem;
            font-weight: 500;
            line-height: 3.75rem;
            color: var(--orsystem-white);

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-size: 3.5rem;
                font-weight: 700;
                line-height: 3.75rem;
                color: var(--orsystem-black);
                margin-bottom: 0;
            }
        }

        .field--name-field-hero-texto {
            /* width: 50%; */
            font-size: 1.125rem;
            font-weight: 400;
            line-height: 1.625rem;
            color: var(--orsystem-black);

            p {
                font-size: 1.125rem;
                font-weight: 400;
                line-height: 1.625rem;
                color: var(--orsystem-black);
                /* margin-bottom: 0.5rem; */
            }
        }

        .custom-links {
            /* width: 50%; */
            display: flex;
            gap: 1.5rem;

            a {
                font-size: 1rem;
                line-height: 1.5rem;
                font-weight: 400;
                border: 0.125rem solid var(--orsystem-white);
                border-radius: 6.25rem;
                padding: 0.625rem 1.25rem;
                background: transparent;
                color: var(--orsystem-white);
                text-decoration: none;

                &:first-child {
                    background-color: var(--orsystem-climate-control);
                    color: var(--orsystem-white);
                    font-weight: 800;
                    font-size: 24px;

                    background-repeat: no-repeat;
                    background-position: right 16px center;
                    padding-right: 48px;
                    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.2' d='M20.2184 18.5377C20.2563 18.6669 20.2588 18.8039 20.2255 18.9344C20.1921 19.0649 20.1243 19.1841 20.0291 19.2793C19.9338 19.3745 19.8147 19.4424 19.6842 19.4757C19.5537 19.509 19.4166 19.5065 19.2874 19.4686L16.6877 18.7036C15.829 19.1629 14.8811 19.431 13.909 19.4896C12.9369 19.5483 11.9636 19.396 11.0559 19.0433C10.1481 18.6906 9.32737 18.1458 8.6499 17.4462C7.97243 16.7466 7.45424 15.9088 7.13086 14.9902C7.25367 14.9967 7.37648 15.0005 7.50023 15.0005C8.57914 15.0006 9.64234 14.742 10.6007 14.2465C11.5591 13.751 12.3848 13.033 13.0085 12.1527C13.6322 11.2723 14.0358 10.2553 14.1855 9.18681C14.3351 8.11833 14.2265 7.02955 13.8687 6.01172C15.0025 6.07329 16.1026 6.41992 17.0669 7.01953C18.0312 7.61914 18.8287 8.45233 19.3855 9.442C19.9423 10.4317 20.2404 11.5458 20.2523 12.6813C20.2642 13.8168 19.9894 14.9369 19.4534 15.938L20.2184 18.5377Z' fill='white'/%3E%3Cpath d='M20.2568 16.0097C20.7751 14.9348 21.0293 13.7518 20.9985 12.559C20.9678 11.3661 20.6528 10.1978 20.0798 9.15108C19.5068 8.10439 18.6923 7.20952 17.704 6.54081C16.7158 5.87211 15.5822 5.44886 14.3975 5.30624C14.0033 4.38971 13.4301 3.56104 12.7117 2.86876C11.9932 2.17648 11.1439 1.63451 10.2134 1.27458C9.28283 0.91465 8.28985 0.743998 7.29255 0.772618C6.29525 0.801237 5.31368 1.02855 4.40533 1.44125C3.49698 1.85395 2.6801 2.44374 2.00253 3.17608C1.32496 3.90842 0.800312 4.76859 0.459321 5.70622C0.118329 6.64385 -0.0321569 7.6401 0.016675 8.63661C0.0655069 9.63313 0.312675 10.6099 0.743706 11.5097L0.0621431 13.8262C-0.0140614 14.0849 -0.0191568 14.3592 0.0473929 14.6205C0.113943 14.8817 0.249677 15.1202 0.440316 15.3109C0.630956 15.5015 0.869452 15.6373 1.13071 15.7038C1.39198 15.7704 1.66634 15.7653 1.92496 15.6891L4.24152 15.0075C4.98537 15.3649 5.78285 15.5976 6.60214 15.6966C7.00019 16.6292 7.58322 17.4714 8.31599 18.1723C9.04876 18.8732 9.91606 19.4183 10.8655 19.7745C11.8148 20.1307 12.8266 20.2907 13.8396 20.2448C14.8526 20.1989 15.8457 19.9481 16.759 19.5075L19.0756 20.1891C19.3341 20.2652 19.6083 20.2702 19.8695 20.2037C20.1306 20.1372 20.369 20.0016 20.5597 19.8111C20.7503 19.6206 20.886 19.3822 20.9527 19.1211C21.0193 18.86 21.0144 18.5857 20.9384 18.3272L20.2568 16.0097ZM4.31277 13.4541C4.2411 13.4543 4.1698 13.4643 4.10089 13.4841L1.50027 14.2509L2.26621 11.6484C2.32068 11.4604 2.29948 11.2585 2.20714 11.0859C1.52868 9.8171 1.32878 8.34671 1.64386 6.9428C1.95895 5.53889 2.76804 4.29496 3.92365 3.43776C5.07927 2.58055 6.50444 2.16717 7.93938 2.27296C9.37432 2.37875 10.7235 2.99667 11.7409 4.01408C12.7583 5.03149 13.3762 6.38063 13.482 7.81557C13.5878 9.25051 13.1744 10.6757 12.3172 11.8313C11.46 12.9869 10.2161 13.796 8.81215 14.1111C7.40824 14.4262 5.93785 14.2263 4.66902 13.5478C4.55991 13.4874 4.43747 13.4552 4.31277 13.4541ZM18.7306 16.1475L19.5003 18.7509L16.8978 17.985C16.7097 17.9305 16.5079 17.9517 16.3353 18.0441C14.9542 18.7815 13.3397 18.9504 11.8358 18.5147C10.332 18.079 9.05788 17.0731 8.28496 15.7116C9.31187 15.6044 10.3056 15.2861 11.2037 14.7768C12.1018 14.2674 12.885 13.578 13.5041 12.7517C14.1231 11.9254 14.5648 10.9801 14.8013 9.97503C15.0378 8.96998 15.064 7.92691 14.8784 6.91124C15.7731 7.12215 16.6074 7.53582 17.3169 8.12034C18.0264 8.70485 18.5921 9.44458 18.9704 10.2824C19.3486 11.1203 19.5293 12.0338 19.4984 12.9525C19.4676 13.8713 19.226 14.7707 18.7925 15.5812C18.6991 15.7549 18.6779 15.9583 18.7334 16.1475H18.7306Z' fill='white'/%3E%3C/svg%3E%0A");
                }
            }
        }
    }

    .section__image-hero {
        display: grid;
        grid-template-columns: 30% 65%;
        margin: 0 auto;
        justify-content: center;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;

        .container__background-hero {
            background: var(--orsystem-climate-control);
            border-top-left-radius: 1rem;
            border-bottom-left-radius: 1rem;
        }

        .field--name-field-media,
        .container__image-hero {
            height: 100%;
            width: 100%;
        }

        .container__image-hero {
            max-height: 700px;
        }

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            border-top-right-radius: 1rem;
            border-bottom-right-radius: 1rem;
        }
    }
}

.short-form-class,
.short-class {
    .container__hero {
        height: 500px;

        .container__inside-hero {
            display: flex;
            align-items: flex-end;
            padding: 0 1rem 3.125rem 1rem;

            .section__text-hero {
                width: 50%;

                .text-hero__etiqueta,
                .text-hero__title,
                .field--name-field-hero-texto {
                    font-size: 1.5rem;
                    font-weight: 600;
                    line-height: 1.625rem;
                    color: var(--orsystem-almost-white);
                    width: 100%;
                }

                .text-hero__title {
                    font-size: 3rem;
                    font-weight: 500;
                    line-height: 3.25rem;

                    h1,
                    h2,
                    h3,
                    h4,
                    h5,
                    h6 {
                        font-size: 3rem;
                        font-weight: 700;
                        line-height: 3.25rem;
                        margin-bottom: 0;
                        color: var(--orsystem-black);
                    }
                }

                .field--name-field-hero-texto p {
                    font-size: 1.125rem;
                    line-height: 1.6875rem;
                }

                .custom-links {
                    display: none;
                }
            }

            .header-contact {
                width: 50%;
                display: flex;
                justify-content: flex-end;

                .field--name-field-contacto {
                    background: var(--orsystem-pale-sky);
                    padding: 1.5rem;
                    border-radius: 0.75rem;
                    width: 75%;

                    .hero-form__title {
                        color: var(--orsystem-cod-grey);
                        font-size: 1.25rem;
                        font-weight: 600;
                        line-height: 1.375rem;

                        p,
                        h1,
                        h2,
                        h3,
                        h4,
                        h5,
                        h6 {
                            color: var(--orsystem-cod-grey);
                            font-size: 1.25rem;
                            font-weight: 600;
                            line-height: 1.375rem;
                            padding-bottom: 0.5rem;
                            margin-bottom: 0;
                        }
                    }

                    form.webform-submission-form {
                        display: flex;
                        flex-wrap: wrap;

                        #edit-hero-titulo {
                            p {
                                font-size: 20px;
                                font-weight: 700;
                                color: var(--orsystem-black);
                            }
                        }

                        .form-item-nombre,
                        .form-item-e-mail,
                        .form-item-prefijo,
                        .form-item-telefono,
                        .form-item-codigo-postal {
                            input {
                                border-radius: 6.25rem;
                                font-size: 0.75rem;
                                padding: 0.875rem 1.5rem;
                                border: 1px solid var(--orsystem-soft-cloud);

                                &::placeholder {
                                    color: var(--orsystem-silver-grey);
                                }
                            }
                        }

                        .form-item-codigo-postal {
                            width: 33%;
                        }

                        .form-item-prefijo {
                            width: 20%;
                            margin-left: 2%;
                        }

                        .form-item-telefono {
                            width: 43%;
                            margin-left: 2%;
                        }

                        .phone-group {
                            display: flex;
                            gap: 0.5rem;

                            .phone-prefix {
                                width: 20%;
                            }

                            .phone-number {
                                width: 80%;
                            }
                        }

                        .form-item-privacidad {
                            .form-checkbox.form-check-input {
                                margin-top: 0;
                            }
                        }

                        .form-actions.webform-actions {
                            margin: 0 !important;
                            width: 100%;
                        }
                    }
                }
            }
        }

        .section__image-hero {
            max-height: 500px;

            .container__image-hero {
                max-height: inherit;
            }
        }
    }
}

@media (max-width: 1200px) {

    .short-form-class,
    .short-class {
        .container__hero {
            max-height: 580px;

            .container__inside-hero {
                padding-bottom: 10px;

                .header-contact {
                    .field--name-field-contacto {
                        form.webform-submission-form {
                            #edit-hero-titulo {
                                width: 100%;
                            }

                            .form-item-nombre,
                            .form-item-e-mail,
                            .form-item-codigo-postal {
                                width: 100%;
                            }

                            .form-item-prefijo {
                                margin-left: 0;
                                width: 27%;
                            }

                            .phone-group {
                                .phone-prefix {
                                    width: 30%;
                                }

                                .phone-number {
                                    width: 70%;
                                }
                            }

                            .form-item-telefono {
                                width: 70%;
                                margin-left: 3%;
                            }
                        }
                    }
                }
            }

            .section__image-hero {
                max-height: 560px;
            }
        }
    }
}

@media (max-width: 992px) {

    .container__hero {
        height: 650px;

        .container__inside-hero {
            padding: 0 1rem 1.25rem 1rem;
        }

        .section__text-hero {
            .text-hero__etiqueta {
                width: 100%;
                font-size: 1.25rem;
                line-height: 1.375rem;

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    width: 100%;
                    font-size: 1.25rem;
                    line-height: 1.375rem;
                }
            }

            .text-hero__title {
                width: 100%;
                font-size: 2rem;
                line-height: 2.125rem;

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    width: 100%;
                    font-size: 2rem;
                    line-height: 2.125rem;
                    margin-bottom: 0;
                }
            }

            .field--name-field-hero-texto {
                width: 100%;

                p {
                    line-height: 1.25rem;
                    overflow-wrap: break-word;
                    word-break: break-word;
                }
            }

            .custom-links {
                width: 100%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 1rem;

                a {
                    width: 100%;
                    text-align: center;
                }
            }
        }
    }

    .short-form-class,
    .short-class {
        .container__hero {
            max-height: fit-content;
            height: 820px;
            margin-bottom: 0;

            .container__inside-hero {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-bottom: 16px;

                .section__text-hero {
                    width: 90%;
                    margin: 0 auto;

                    .text-hero__title {
                        font-size: 2rem;
                        line-height: 2.125rem;

                        h1,
                        h2,
                        h3,
                        h4,
                        h5,
                        h6 {
                            font-size: 2rem;
                            line-height: 2.125rem;
                            margin-bottom: 0;
                        }
                    }

                    .field--name-field-hero-texto p {
                        font-size: 1rem;
                        line-height: 1.5rem;
                    }
                }

                .header-contact {
                    width: 100%;
                    margin-top: 1rem;

                    .field--name-field-contacto {
                        margin-bottom: -180px;
                        width: 90%;
                        margin: 0 auto;

                        form.webform-submission-form {
                            .phone-group {
                                .phone-prefix {
                                    width: 30%;
                                }

                                .phone-number {
                                    width: 70%;
                                }
                            }

                            #edit-hero-titulo {
                                width: 100%;
                            }

                            .form-item-nombre,
                            .form-item-e-mail {
                                width: 100%;
                            }
                        }
                    }
                }
            }

            .section__image-hero {
                max-height: 800px;
            }
        }
    }
}

@media (max-width: 768px) {

    .short-form-class {
        .container__hero {
            height: 1200px;

            .section__image-hero {
                max-height: 1200px;
            }
        }
    }
}

@media (max-width: 576px) {

    .short-class {
        .container__hero {
            height: 990px;

            .section__image-hero {
                max-height: 990px;
            }
        }
    }
}