﻿/* GENERAL */
.itl-accordion {
    position: relative;
}

/* ITEM */
.itl-accordion-item {
    color: inherit;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

.itl-accordion-item,
.itl-accordion-item:first-of-type {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.itl-accordion-item:first-of-type,
.itl-accordion-item:last-of-type {
    border-bottom-left-radius: 0rem;
    border-bottom-right-radius: 0rem;
}

.itl-accordion-item:not(:first-child) {
    margin-top: -2rem;
}

.itl-accordion-item:not(:last-child) {
    padding-bottom: 2rem;
}

.itl-accordion-item:nth-child(1) {
    background-color: #131313;
}

.itl-accordion-item:nth-child(2) {
    background-color: #3C3835;
}

.itl-accordion-item:nth-child(3) {
    background-color: #4E4B46;
}

/* HEADER */
.itl-accordion-header {
    margin: 0;
}

/* HEADER - BUTTON */
.itl-accordion-header-button {
    padding: 2rem 0;
    border: 0;
    border-radius: 0;
    color: var(--black);
    box-shadow: none;
    background-color: transparent;
}

.itl-accordion-header-button:focus {
    box-shadow: none;
}

/* HEADER - BUTTON [OPEN] */
.itl-accordion-header-button:not(.collapsed) {
    border: 0;
    border-radius: 0;
    color: var(--black);
    box-shadow: none;
    background-color: transparent;
}

/* HEADER - BUTTON [AFTER] */
.itl-accordion-header-button::after {
    content: none;
}

/* HEADER - BUTTON [CLOSED] */
/* .itl-accordion-header-button.collapsed {} */

/* HEADER - CONTENT BOX */
.itl-accordion-header-content {
    position: relative;
    z-index: 0;
    max-width: 152rem;
    width: 100%;
    margin: auto;
    padding-inline: 4rem 10rem;
}

/* HEADER - TITLE */
.itl-accordion-header-title {
    color: var(--white);
    font-size: 6rem;
    font-weight: 100;
}

.itl-accordion-header-button:not(.collapsed) .itl-accordion-header-title {
    font-weight: 400;
}

/* HEADER - ARROW */
.itl-accordion-header-arrow {
    position: absolute;
    top: 50%;
    right: 3.2rem;
    width: 4.8rem;
    transition: .2s;
    transform: translateY(-50%);
}

.itl-accordion-header-button:not(.collapsed) .itl-accordion-header-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* BODY */

/* BODY - [OPEN] */
/* .itl-accordion-collapse.show {} */

/* BODY - [CLOSED] */
/* .itl-accordion-collapse:not(.show) {} */

/* BODY - CONTENT BOX */
.itl-accordion-collapse-content {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 152rem;
    padding: 0 4rem 7.5rem;
    margin: auto;
}

.itl-accordion-collapse-content.with-link {
    align-items: normal;
}

/* BODY - COL TEXT */
.itl-accordion-collapse-content-col:nth-child(1) {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
}

/* BODY - COL IMG */
.itl-accordion-collapse-content-col:nth-child(2) {
    max-width: 53.4rem;
    margin-left: auto;
    width: 100%;
}

/* BODY - TEXT */
.itl-accordion-collapse-content-text {
    margin: 0;
    color: var(--white);
    font-size: 2.4rem;
    font-weight: 300;
    line-height: 1.6;
}

.itl-accordion-collapse-content-text * {
    margin: 0;
}

/* BODY - LINKS */
.itl-accordion-collapse-content-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* BODY - IMAGE */
.itl-accordion-collapse-content-img {
    width: 100%;
    border-radius: 2rem;

}

/* RESPONSIVO */
@media screen and (max-width: 992px) {
    .itl-accordion-header-title {
        font-size: 4.8rem;
    }
}

@media screen and (max-width: 768px) {
    .itl-accordion-header-title {
        font-size: 3.8rem;
    }

    .itl-accordion-collapse-content {
        grid-template-columns: 1fr;
    }

    .itl-accordion-collapse-content-col:nth-child(2) {
        margin: auto;
    }

    .itl-accordion-collapse-content-text {
        font-size: 1.8rem;
    }

}

@media screen and (max-width: 600px) {
    .itl-accordion-header-title {
        font-size: 3.2rem;
    }
}