/* ==========================================================
   FOOTER
========================================================== */

.footer{

    position: relative;

    overflow: hidden;

    padding: 110px 0 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.98) 0%,
            rgba(5,5,5,.94) 45%,
            rgba(5,5,5,.78) 70%,
            rgba(5,5,5,.40) 100%
        ),
        url("../assets/images/hero-bg.png");

    background-size: cover;

    background-position: center right;

    background-repeat: no-repeat;

    border-top: 1px solid rgba(255,255,255,.08);

}

/* brilho vermelho igual ao Hero */

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top left,

            rgba(214,40,40,.12),

            transparent 45%

        );

    pointer-events:none;

}

/* escurece um pouco mais o fundo */

.footer-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,.10),

            rgba(0,0,0,.25),

            rgba(0,0,0,.60)

        );

}

/* ==========================================================
   CONTAINER
========================================================== */

.footer .container{

    position:relative;

    z-index:5;

    max-width:1500px;

    margin:auto;

}

/* ==========================================================
   TOPO
========================================================== */

.footer-top{

    display:grid;

    grid-template-columns:

        1.1fr

        1.4fr;

    gap:120px;

    padding-bottom:90px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

/* ==========================================================
   ABOUT
========================================================== */

.footer-about{

    max-width:460px;

}

.footer-logo{

    width:190px;

    margin-bottom:35px;

}

.footer-about h2{

    color:#FFF;

    font-size:3rem;

    line-height:1.08;

    letter-spacing:-.04em;

    margin-bottom:25px;

    font-weight:300;

}

.footer-about h2 span{

    display:block;

    font-weight:700;

}

.footer-about p{

    color:#A3A3A3;

    font-size:1.05rem;

    line-height:1.9;

    margin-bottom:40px;

}

/* ==========================================================
   SOCIAL
========================================================== */

.footer-social{

    display:flex;

    gap:18px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.10);

    color:#FFF;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:#D62828;

    border-color:#D62828;

    transform:translateY(-4px);

}

/* ==========================================================
   LINKS
========================================================== */

.footer-links{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px;

    align-items:flex-start;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column h4{

    color:#FFF;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.25em;

    text-transform:uppercase;

    margin-bottom:30px;

}

.footer-column a,

.footer-column span{

    position:relative;

    color:#A0A0A0;

    text-decoration:none;

    font-size:.96rem;

    line-height:2.1;

    transition:all .35s ease;

}

.footer-column a:hover{

    color:#FFF;

    transform:translateX(8px);

}

.footer-column a::before{

    content:"";

    position:absolute;

    left:-16px;

    top:50%;

    width:0;

    height:2px;

    background:#D62828;

    transform:translateY(-50%);

    transition:.35s;

}

.footer-column a:hover::before{

    width:10px;

}

/* ==========================================================
   CONTATO
========================================================== */

.footer-column:last-child a{

    display:block;

}

.footer-column:last-child span{

    display:block;

    margin-top:8px;

}

.footer-column a + a{

    margin-top:4px;

}

/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom{

    display:grid;

    grid-template-columns:

        1fr

        auto

        1.5fr;

    align-items:center;

    gap:60px;

    padding:38px 0;

}

/*==========================================================
BRAND
==========================================================*/

.footer-brand{

    display:flex;

    align-items:center;

    gap:20px;

}

.footer-brand img{

    width:110px;

    opacity:.95;

}

.footer-brand p{

    color:#7E7E7E;

    font-size:.85rem;

    line-height:1.6;

}

/*==========================================================
CENTRO
==========================================================*/

.footer-middle{

    display:flex;

    align-items:center;

    gap:14px;

    color:#B5B5B5;

    justify-content:center;

}

.footer-middle i{

    color:#D62828;

    font-size:18px;

}

.footer-middle span{

    font-size:.95rem;

    font-weight:500;

}

/*==========================================================
DIFERENCIAIS
==========================================================*/

.footer-icons{

    display:flex;

    justify-content:flex-end;

    gap:30px;

}

.footer-icons div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#9E9E9E;

    transition:.35s;

}

.footer-icons div:hover{

    color:#FFF;

}

.footer-icons i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    color:#D62828;

    transition:.35s;

}

.footer-icons div:hover i{

    background:#D62828;

    color:#FFF;

    transform:translateY(-3px);

}

.footer-icons span{

    font-size:.92rem;

    font-weight:500;

}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media(max-width:1400px){

    .footer-top{

        gap:80px;

    }

    .footer-about h2{

        font-size:2.7rem;

    }

}

/* ========================================================== */

@media(max-width:1200px){

    .footer-top{

        grid-template-columns:1fr;

        gap:70px;

    }

    .footer-links{

        grid-template-columns:repeat(3,1fr);

        gap:40px;

    }

    .footer-bottom{

        grid-template-columns:1fr;

        gap:35px;

        text-align:center;

    }

    .footer-brand{

        justify-content:center;

    }

    .footer-middle{

        justify-content:center;

    }

    .footer-icons{

        justify-content:center;

        flex-wrap:wrap;

    }

}

/* ========================================================== */

@media(max-width:768px){

    .footer{

        padding:90px 0 0;

    }

    .footer-about{

        max-width:100%;

    }

    .footer-logo{

        width:150px;

    }

    .footer-about h2{

        font-size:2.1rem;

    }

    .footer-about p{

        font-size:.95rem;

    }

    .footer-links{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-column{

        border-bottom:1px solid rgba(255,255,255,.06);

        padding-bottom:25px;

    }

    .footer-column:last-child{

        border:none;

    }

    .footer-icons{

        gap:18px;

    }

    .footer-icons div{

        width:calc(50% - 10px);

        justify-content:center;

    }

}

/* ========================================================== */

@media(max-width:576px){

    .footer{

        padding:70px 0 0;

    }

    .footer-about h2{

        font-size:1.8rem;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-brand{

        flex-direction:column;

    }

    .footer-brand img{

        width:90px;

    }

    .footer-icons{

        flex-direction:column;

        align-items:center;

    }

    .footer-icons div{

        width:100%;

        justify-content:flex-start;

    }

}

/* ==========================================================
   SEÇÃO DE PARCEIROS
========================================================== */

.partners-section {

    position: relative;

    padding: 120px 0;

    background: #050505;

    overflow: hidden;

}


/* brilho sutil no fundo */

.partners-section::before {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    top: -300px;
    right: -250px;

    background: radial-gradient(
        circle,
        rgba(214, 40, 40, .10),
        transparent 70%
    );

    pointer-events: none;

}


/* container */

.partners-section .container {

    position: relative;

    z-index: 2;

    max-width: 1500px;

    margin: 0 auto;

}


/* ==========================================================
   CABEÇALHO DA SEÇÃO
========================================================== */

.partners-header {

    margin-bottom: 60px;

    max-width: 700px;

}

.partners-header .section-label {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 20px;

    color: #D62828;

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: .25em;

    text-transform: uppercase;

}

.partners-header .section-label::before {

    content: "";

    width: 45px;

    height: 2px;

    background: #D62828;

}

.partners-header h2 {

    margin: 0;

    color: #FFF;

    font-size: 3.5rem;

    line-height: 1.05;

    letter-spacing: -.04em;

    font-weight: 300;

}

.partners-header h2 strong {

    font-weight: 700;

}

.partners-header p {

    margin-top: 22px;

    max-width: 650px;

    color: #8F8F8F;

    font-size: 1.05rem;

    line-height: 1.8;

}


/* ==========================================================
   GRID DE PARCEIROS
========================================================== */

.partners-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 18px;

}


/* ==========================================================
   CARD
========================================================== */

.partner-card {

    position: relative;

    min-height: 360px;

    padding: 35px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);

    border-radius: 24px;

    background: #0A0A0A;

    text-decoration: none;

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;

}


/* primeiros dois cards maiores */

.partner-card:nth-child(1),
.partner-card:nth-child(2) {

    grid-column: span 3;

    min-height: 430px;

}


/* últimos três */

.partner-card:nth-child(3),
.partner-card:nth-child(4) {
    grid-column: span 3;
}


/* ==========================================================
   IMAGEM DE FUNDO
========================================================== */

.partner-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image: var(--partner-bg);

    background-size: cover;

    background-position: center;

    opacity: .42;

    transition:
        transform .7s ease,
        opacity .5s ease;

}


/* overlay */

.partner-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.98) 0%,
            rgba(0,0,0,.78) 38%,
            rgba(0,0,0,.20) 100%
        );

    z-index: 1;

}


/* conteúdo */

.partner-content {

    position: relative;

    z-index: 2;

}


/* ==========================================================
   LOGO
========================================================== */

.partner-logo {

    position: absolute;

    top: 35px;

    left: 35px;

    max-width: 190px;

    max-height: 75px;

    object-fit: contain;

    object-position: left center;

    filter: brightness(1.05);

    transition: transform .45s ease;

}


/* ==========================================================
   TEXTO
========================================================== */

.partner-card h3 {

    margin: 0 0 12px;

    color: #FFF;

    font-size: 2rem;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.03em;

}

.partner-card p {

    max-width: 680px;

    margin: 0 0 22px;

    color: #BDBDBD;

    font-size: .95rem;

    line-height: 1.65;

}

.partner-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #FFF;

    font-size: .88rem;

    font-weight: 700;

    text-decoration: none;

    transition: gap .3s ease;

}

.partner-link::after {

    content: "→";

    color: #D62828;

    font-size: 1.1rem;

    transition: transform .3s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.partner-card:hover {

    transform: translateY(-6px);

    border-color: rgba(214,40,40,.45);

    box-shadow:
        0 25px 70px rgba(0,0,0,.45);

}

.partner-card:hover::before {

    transform: scale(1.06);

    opacity: .58;

}

.partner-card:hover .partner-logo {

    transform: translateY(-4px);

}

.partner-card:hover .partner-link {

    gap: 15px;

}

.partner-card:hover .partner-link::after {

    transform: translateX(4px);

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1200px) {

    .partners-section {

        padding: 100px 0;

    }

    .partners-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .partner-card:nth-child(1),
    .partner-card:nth-child(2),
    .partner-card:nth-child(3),
    .partner-card:nth-child(4) {

        grid-column: span 1;

        min-height: 380px;

    }

    .partner-card:nth-child(1),
    .partner-card:nth-child(2) {

        grid-column: span 2;

        min-height: 420px;

    }

    .partners-header h2 {

        font-size: 3rem;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px) {

    .partners-section {

        padding: 80px 0;

    }

    .partners-header {

        margin-bottom: 40px;

    }

    .partners-header h2 {

        font-size: 2.4rem;

    }

    .partners-header p {

        font-size: .95rem;

    }

    .partners-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }

    .partner-card:nth-child(1),
    .partner-card:nth-child(2),
    .partner-card:nth-child(3),
    .partner-card:nth-child(4) {

        grid-column: span 1;

        min-height: 360px;

    }

    .partner-card {

        padding: 28px;

        border-radius: 20px;

    }

    .partner-logo {

        top: 28px;

        left: 28px;

        max-width: 150px;

        max-height: 60px;

    }

    .partner-card h3 {

        font-size: 1.7rem;

    }

}


/* ==========================================================
   MOBILE PEQUENO
========================================================== */

@media(max-width:576px) {

    .partners-section {

        padding: 65px 0;

    }

    .partners-header h2 {

        font-size: 2rem;

    }

    .partner-card {

        min-height: 330px !important;

    }

    .partner-logo {

        max-width: 135px;

    }

}
