/* Variables
----------------------------------------------------------------------------------------------------------------- */
@import './../constants.css';



/* Inicio
----------------------------------------------------------------------------------------------------------------- */
.page--home { }
.page--home[nodisplayed] {
    display: none;
}

    /* Hero
    --------------------------------------------- */
    .home--hero {
        width: 100%;
        position: relative;
        display: flex;
        overflow: hidden;
        background-color: var(--color--representative1);
    }
        .backgroundVideo--video {
            width: 100%;
        }
        .hero--content {
            width: 100%; height: 100%;
            display: flex; flex-direction: column;
            z-index: 400;
            position: absolute;
        }
        .hero--content h1, h2 {
            color: #fff;
            font-weight: bold;
            text-align: center;

            cursor: default;
        }
        .hero--content h1 {
            margin-top: auto;
            position: relative;
            display: flex;

            font-size: 2.9rem;
            letter-spacing: 3px;
        }
        .hero--content h1 i {
            margin-right: var(--padding--insideElements);

            font-size: 3rem;
            color: #fff;
        }

        .hero--content h1 img {
            height: 55px;
            margin: auto 0 auto auto;
        }
        .hero--content h1 span {
            color: #fff;
            font-weight: bold;
            text-align: left;
            margin: auto auto auto 0;

            font-size: 2.9rem;
            letter-spacing: 3px;
        }

        .hero--content h2 {
            font-size: 2.5rem;
            letter-spacing: 2px;
        }
        .hero--content button {
            width: 500px;
            margin: 0 auto;
            margin-top: var(--padding--insideInterfaces);
            background-color: var(--color--representative3);
        }
        .hero--content button span{
            letter-spacing: 3px;
        }
        .hero--content label {
            width: 100%;
            margin-top: 15px;

            font-size: 1.1rem;
            letter-spacing: 2px;
            line-height: 1.4rem;
            color: #fff;
            text-align: center;
        }
        .hero--content p {
            width: 100%;
            margin-top: 10px; margin-bottom: auto;

            font-size: 1rem;
            letter-spacing: 2px;
            color: #fff;
            text-align: center;

            cursor: default;
        }

    @media only screen and (max-width: 1130px) {
        .hero--content h1 {
            margin: auto auto 0 !important;
        }
        .hero--content h2, .hero--content button, .hero--content label {
            margin: 0 auto !important;
        }
        .hero--content h2, .hero--content button {
            margin-bottom: 10px !important;
        }
        .hero--content h1 {
            font-size: 1.9rem;
            letter-spacing: 3px;
        }
        .hero--content h2 {
            font-size: 1.5rem;
            letter-spacing: 2px;
        }
        .hero--content button span{
            font-size: 1.5rem;
            letter-spacing: 3px;
        }
        .hero--content label {
            font-size: 1.1rem;
            letter-spacing: 2px;
            line-height: 1.4rem;
        }
        .hero--content p {
            font-size: 1rem;
            letter-spacing: 2px;
        }
    }
    @media only screen and (max-width: 756px) {

        .hero--content h1 {
            margin: auto auto 0 !important;
        }
        .hero--content h2, .hero--content button, .hero--content label {
            margin: 0 auto !important;
        }
        .hero--content h2, .hero--content button {
            margin-bottom: 5px !important;
        }
        .hero--content h1 {
            font-size: 1.7rem;
            letter-spacing: 3px;
        }
        .hero--content h2 {
            font-size: 1.3rem;
            letter-spacing: 2px;
        }
        .hero--content button span{
            font-size: 1.4rem;
            letter-spacing: 3px;
        }
        .hero--content label {
            font-size: 0.9rem;
            letter-spacing: 2px;
            line-height: 1.6rem;
        }
        .hero--content p {
            margin: 0 auto 10px;

            font-size: 1rem;
            letter-spacing: 2px;
        }
    }
    @media only screen and (max-width: 524px) {
        .hero--content button {
            width: 90% !important;
            margin: var(--padding--insideInterfaces) auto auto;
        }
    }
    @media only screen and (max-width: 594px) {
        .home--hero {
            height: 390px !important;
        }
        .backgroundVideo--video {
            height: 100%;
        }
        .hero--content h1 {
            display: flex; flex-direction: column;
        }
        .hero--content img {
            margin: 0 auto !important;
        }
        .hero--content h1 span {
            line-height: 2.4rem;
            text-align: center !important;
        }
        .hero--content h2, .hero--content button, .hero--content label {
            margin: 5px auto !important;
        }
    }

    /* Servicios
    --------------------------------------------- */
    .home--content1 {
        width: 100%;
        padding: var(--padding--insideInterfaces);
        background-color: var(--color--representative1);
        position: relative;
    }

        .home--content1 h3 {
            font-size: 2.4rem;
            color: #fff;
            letter-spacing: 5px;
        }
        .home--content1 > p {
            margin-top: 15px;

            font-size: var(--textSize--big);
            line-height: var(--textSize--big);
            color: #fff;
            font-weight: bold;
            text-align: center;
        }

        .content1--searchDiv { 
            display: flex;
            position: relative;
        }
            .content1--searchDiv i { 
                position: absolute; top: 15px; left: 15px;

                color: #000;
                font-size: 1.4rem;
            }
            .content1--searchDiv input {
                height: 55px;
                padding-left: 45px;

                font-size: 1.4rem;
                font-weight: bold;
            }

        .content1--catalog {
            width: 100%;
            margin-top: var(--padding--insideInterfaces);

            display: grid;
            grid-template-columns: repeat(3, minmax(200px, 540px)); gap: 20px;
            justify-content: center;
        }

            .content1--catalog .catalog--card {
                min-width: 0; width: 100%; height: 500px;
                border-radius: 5px;
                margin: 0;
                background-color: #fff;
                overflow: hidden;
                position: relative;
            }
            .card__internal-grid {
                width: 100%; height: 100%;
                display: grid; grid-template-rows: 1fr 180px;
            }
                .content1--catalog .catalog--card .card__internal-grid img {
                    width: 100%; height: 100%;
                    object-fit: cover; object-position: center center;
                    min-height: 0;
                }

                .content1--catalog .catalog--card .card__internal-grid .card-mask { 
                    width: 100%; 
                    display: flex; flex-direction: column; flex-shrink: 0;
                    background-color: #fff;
                    cursor: pointer;
                }
                    .card-mask > div { 
                        padding: 30px var(--padding--insideElements);
                        margin-top: auto;
                    }
                    .card-mask label {
                        margin: auto auto var(--padding--insideElements);

                        font-size: 1.5rem;
                        color: #000;
                        font-weight: bold;
                        letter-spacing: 2px;
                    }
                    .card-mask p {
                        height: 108px;
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-line-clamp: 6;
                        -webkit-box-orient: vertical;

                        color: #000;
                        line-height: 1.1rem;
                        letter-spacing: 1px;
                    }
                        
        .content1--catalog[collapsed] {
            max-height: 800px;
            padding-bottom: 90px;
            overflow: hidden;
        }

        .content1--separator {
            width: 100%; height: 13.0208333333vw;
            position: absolute; bottom: 0; left: 0;
            display: flex; flex-direction: column;
            background: linear-gradient(180deg, transparent 0, #fff 100%);
            display: none;
        }
        .content1--separator[collapsed] {
            display: flex !important;
        }

            .content1--separator > label {
                margin: auto auto 0 auto;

                font-size: 2rem;
                color: #fff;
                font-weight: bold;
                text-align: center;
                letter-spacing: 3px;

                cursor: pointer;
            }
            .content1--separator > i {
                padding-top: 5px;
                margin: 0 auto 40px auto;

                font-size: 2rem;
                color: #fff;
                font-weight: bold;
                text-align: center;

                cursor: pointer;
            }

            .content1--separator:hover > label {
                color: var(--color--tenderStrong);
            }
            .content1--separator:hover > i {
                color: var(--color--tenderStrong);
            }
            
    @media only screen and (max-width: 1270px) {
        .content1--catalog {
            grid-template-columns: repeat(2, minmax(200px, 540px)); gap: 20px;
        }
    } 
    @media only screen and (max-width: 638px) {
        .content1--catalog {
            grid-template-columns: repeat(1, minmax(200px, 540px)); gap: 20px;
        }
    } 

    /*@media only screen and (max-width: 1696px) {
        .content1--catalog {
            width: 32%;
        }
    }
    @media only screen and (max-width: 1338px) {
        .content1--catalog .catalog--card {
            width: 35%;
        }
    }
    @media only screen and (max-width: 1056px) {
        .content1--catalog .catalog--card {
            width: 40%;
        }
    }
    @media only screen and (max-width: 850px) {
        .content1--catalog .catalog--card {
            width: 45%;
        }
    }
    @media only screen and (max-width: 750px) {
        .content1--catalog .catalog--card {
            width: 400px;
        }
    }*/

    /* Nosotros
    --------------------------------------------- */
    .home--content2 {
        width: 100%;
        padding: var(--padding--insideInterfaces); padding-bottom: 180px;
        background-color: #fff;
        position: relative;
    }

        .home--content2 h3 {
            font-size: 2.4rem;
            color: var(--color--lightBlack);
            letter-spacing: 5px;
        }

        .content2--catalog {
            width: 100%;
            margin-top: var(--padding--insideInterfaces);
            display: flex; flex-direction: column;
        }

            .content2--catalog .catalog--card {
                width: 100%; height: 600px;
                margin-bottom: var(--padding--insideInterfaces);
                display: grid; grid-template-columns: 450px 1fr;
            }

                .content2--catalog .catalog--card .card--portrait {
                    height: 100%;
                    border-radius: 5px;
                    background-color: var(--color--gray);
                    overflow: hidden;
                }
                .content2--catalog .catalog--card .card--portrait img {
                    width: 100%;
                }

                .content2--catalog .catalog--card .card--content {
                    width: 100%; height: 100%;
                    padding-top: 30px; padding-left: 50px; padding-right: var(--padding--insideElements); padding-bottom: 5px;
                    border-radius: 5px;
                    background: rgba(0,0,0,0.06);
                    backdrop-filter: saturate(180%) blur(10px);
                    display: grid; grid-template-rows: auto auto auto auto auto 1fr;
                }

                    .content2--catalog .catalog--card .card--content > label {
                        width: 100%;
                        margin-bottom: 20px;

                        font-size: 1.8rem;
                        line-height: 1.7rem;
                        font-weight: bold;
                        letter-spacing: 3px;
                    }
                    .content2--catalog .catalog--card .card--content > p, .content2--catalog .catalog--card .card--content > p span, .content2--catalog .catalog--card .card--content > p strong {
                        font-size: 1.2rem;
                        letter-spacing: 1px;
                    }
                    .content2--catalog .catalog--card .card--content > p {
                        width: 100%;
                        margin-top: 5px;
                    }
                    .content2--catalog .catalog--card .card--content > ul {
                        margin-top: -6px;
                        overflow: auto;
                    }
                    .content2--catalog .catalog--card .card--content > ul li {
                        margin-top: var(--padding--insideElements);

                        font-size: 1.2rem;
                        letter-spacing: 1px;
                    }
                    .content2--catalog .catalog--card .card--content > textarea {
                        width: 100%;
                        border: none;
                        margin-top: var(--padding--insideElements);
                        background-color: transparent;

                        font-family: var(--textFont--main);
                        font-size: 1.1rem;
                        font-style: italic;
                        letter-spacing: 2px;
                        line-height: 1.1rem;

                        resize: none;
                    }
                    .content2--catalog .catalog--card .card--content > div a {
                        margin-right: 15px;;

                        color: var(--color--actionLight);
                        text-decoration: none;
                    }
                    .content2--catalog .catalog--card .card--content > div a:hover {
                        color: var(--color--actionStrong);
                        text-decoration: underline;
                    }

                .content2--catalog .catalog--card[no="1"] .card--content {
                    display: grid; grid-template-rows: auto auto 1fr;
                }
                .content2--catalog .catalog--card[no="2"] .card--content {
                    display: grid; grid-template-rows: auto auto auto 1fr;
                }
                .content2--catalog .catalog--card[no="4"] .card--content {
                    display: grid; grid-template-rows: auto auto auto auto auto 1fr;
                }

            .catalog--cardRight {
                display: grid; grid-template-columns: 1fr 450px !important;
            }
                .catalog--cardRight .card--content {
                    padding-right: 50px !important; padding-left: var(--padding--insideElements) !important;
                }

    @media only screen and (max-width: 1044px) {
        .content2--catalog .catalog--card[no="3"] .card--content ul {
            max-height: 100px;
            overflow: auto;
        }
        .content2--catalog .catalog--card[no="4"] .card--content ul {
            max-height: 100px;
            overflow: auto;
        }
        /*.content2--catalog .catalog--card {
            height: auto;
        }*/
    }

    /* Encuentranos
    --------------------------------------------- */
    .home--content4 {
        width: 100%;
        padding-bottom: 30px; padding-top: 9px;
        margin-top: -165px;
        background-color: var(--color--otherOepresentative);
        position: relative;
    }

        .home--content4 h3 {
            margin-top: var(--padding--insideInterfaces);

            font-size: 2.4rem;
            color: #000;
            letter-spacing: 5px;
        }

        .home--content4 .content4--content {
            margin-top: 30px;
            display: flex; flex-direction: row;
        }

            .home--content4 .content4--content .content--column1 {
                height: 300px;
                padding: var(--padding--insideElements);
                margin: auto 0 auto auto;
            }
                .home--content4 .content4--content .content--column1 label {
                    margin-bottom: var(--padding--insideInterfaces);

                    font-size: 1.3rem;
                    color: #000;
                    font-weight: bold;
                    letter-spacing: 2px;
                }
                .home--content4 .content4--content .content--column1 p { 
                    display: flex; 
                }
                .home--content4 .content4--content .content--column1 p i {
                    margin-right: var(--padding--insideElements);

                    font-size: 1.3rem;
                    color: #000;
                }
                .home--content4 .content4--content .content--column1 p strong {
                    width: 120px;
                    margin-right: var(--padding--insideElements);
                    display: block;

                    font-size: 1.1rem;
                    color: #000;
                    letter-spacing: 1px;
                }
                .home--content4 .content4--content .content--column1 p a {
                    font-size: 1.1rem;
                    color: #000;
                    font-style: italic;
                    letter-spacing: 1px;
                    text-decoration: none;
                    font-weight: bold;
                }
                .home--content4 .content4--content .content--column1 p a:hover {
                    text-decoration: underline;
                }

            .home--content4 .content4--content .content--column2 {
                width: 450px; height: 300px;
                padding: var(--padding--insideElements);
                margin: 0 70px 0;
            }
                .home--content4 .content4--content .content--column2 label {
                    margin-bottom: var(--padding--insideInterfaces);

                    font-size: 1.3rem;
                    color: #000;
                    font-weight: bold;
                    letter-spacing: 2px;
                }
                .home--content4 .content4--content .content--column2 > p {
                    font-size: 1.1rem;
                    color: #000;
                    letter-spacing: 1px;
                    font-weight: bold;
                }

                .home--content4 .content4--content .content--column2  ul {
                    padding: 0;

                    list-style: none;
                }
                .home--content4 .content4--content .content--column2  ul li {
                    margin-bottom: var(--padding--insideElements);
                    display: flex; flex-direction: row;
                }
                .home--content4 .content4--content .content--column2  ul li strong {
                    margin: auto auto auto 0;

                    font-size: 1.1rem;
                    color: #000;
                    letter-spacing: 1px;
                }
                .home--content4 .content4--content .content--column2  ul li span {
                    margin: auto 0 auto auto;

                    font-size: 1.0rem;
                    color: #000;
                    letter-spacing: 1px;
                    font-weight: bold;
                }
                .home--content4 .content4--content .content--column2  ul li[closed] span {
                    color: #000;
                }

            .home--content4 .content4--content .content--column3 {
                width: 400px;
                margin: auto auto auto 0;
            }

                .home--content4 .content4--content .content--column3 iframe {
                    width: 100%; height: 280px;
                    margin-top: -20px;
                }
          
    @media only screen and (max-width: 1436px) {
        .home--content4 .content4--content {
            flex-wrap: wrap;
        }
        .home--content4 .content4--content .content--column2{
            margin: -10px auto auto 0;
        }
        .home--content4 .content4--content .content--column3 {
            width: 100%;
            padding: 0 20px;
        }
        iframe {
            width: 100%;
        }
    }
    @media only screen and (max-width: 862px) {
        .content--column1, .content--column2 {
            height: auto !important;
            margin: 0 auto 0 auto !important;
        }
        .content--column2 {
            margin-bottom: var(--padding--insideElements) !important;
        }
    }