/* ==========================================================
   PÁGINA DAS ACADEMIAS FILIADAS
   Liga Nacional de Hapkido
========================================================== */

:root{

    --lnh-blue:#23237d;
    --lnh-red:#d33441;
    --lnh-light:#f4f6f9;
    --lnh-text:#2d2d2d;

}


/* ==========================================================
   BANNER
========================================================== */

.academy-banner{

    position:relative;
    height:380px;

    overflow:hidden;

}

.academy-banner img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}

.academy-banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(15,25,70,.65),
        rgba(15,25,70,.75)
    );

    display:flex;

    align-items:center;

}

.academy-banner h1{

    color:#FFF;

    font-size:46px;

    margin-bottom:15px;

    font-weight:700;

}

.academy-banner p{

    color:#FFF;

    font-size:20px;

    opacity:.95;

}



/* ==========================================================
   CARD PRINCIPAL
========================================================== */

.academy-card{

    background:#FFF;

    border-radius:22px;

    padding:45px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.10);

}

.academy-grid{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:50px;

    align-items:flex-start;

}



/* ==========================================================
   COLUNA ESQUERDA
========================================================== */

.academy-left{

    text-align:center;

}

.academy-logo{

    width:300px;

    height:300px;

    object-fit:contain;

    background:#FFF;

    border-radius:18px;

    padding:20px;

    border:1px solid #e5e5e5;

}

.academy-selo{

    width:180px;

    margin-top:30px;

}



/* ==========================================================
   COLUNA DIREITA
========================================================== */

.academy-title{

    color:var(--lnh-blue);

    font-size:40px;

    margin-bottom:15px;

}

.status-badge{

    display:inline-block;

    background:var(--lnh-red);

    color:#FFF;

    padding:8px 22px;

    border-radius:40px;

    font-size:14px;

    font-weight:bold;

    letter-spacing:.05em;

    margin-bottom:25px;

}

/* ==========================================================
   TABELA DE INFORMAÇÕES
========================================================== */

.academy-table{

    width:100%;

    border-collapse:collapse;

    margin-top:10px;

}

.academy-table tr{

    border-bottom:1px solid #ececec;

    transition:.25s;

}

.academy-table tr:hover{

    background:#f8f9fd;

}

.academy-table th{

    width:170px;

    text-align:left;

    color:var(--lnh-blue);

    font-size:15px;

    font-weight:700;

    padding:16px 0;

}

.academy-table td{

    padding:16px 10px;

    color:#555;

    font-size:16px;

}

.academy-table a{

    color:var(--lnh-blue);

    text-decoration:none;

    font-weight:600;

}

.academy-table a:hover{

    color:var(--lnh-red);

}



/* ==========================================================
   BANDEIRA
========================================================== */

.flag-state{

    width:34px;

    margin-right:12px;

    vertical-align:middle;

    border-radius:4px;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}



/* ==========================================================
   REDES SOCIAIS
========================================================== */

.academy-social{

    margin-top:60px;

}

.academy-social h3{

    color:var(--lnh-blue);

    margin-bottom:20px;

}

.academy-social-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.social-btn{

    flex:1;

    min-width:180px;

    text-align:center;

    padding:18px;

    color:#FFF;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.30s;

}

.social-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.20);

}

.instagram{

    background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);

}

.facebook{

    background:#1877F2;

}

.youtube{

    background:#FF0000;

}

.tiktok{

    background:#111;

}



/* ==========================================================
   GOOGLE MAPS
========================================================== */

.academy-map{

    margin-top:60px;

}

.academy-map h3{

    color:var(--lnh-blue);

    margin-bottom:20px;

}

.academy-map iframe{

    width:100%;

    height:480px;

    border:none;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(0,0,0,.10);

}

.academy-map-button{

    text-align:center;

    margin-top:25px;

}

/* ==========================================================
   BOTÕES DE AÇÃO
========================================================== */

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    background:var(--lnh-blue);

    color:#FFF;

    border-radius:30px;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    border:none;

    cursor:pointer;

    transition:.30s;

}



.btn-primary:hover{

    background:var(--lnh-red);

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}



.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 32px;

    background:#FFF;

    color:var(--lnh-blue);

    border:2px solid var(--lnh-blue);

    border-radius:30px;

    text-decoration:none;

    font-weight:700;

    font-size:16px;

    transition:.30s;

}



.btn-secondary:hover{

    background:var(--lnh-blue);

    color:#FFF;

    transform:translateY(-3px);

}



/* ==========================================================
   ÁREA DE FILIAÇÃO / CTA
========================================================== */

.academy-cta{

    margin-top:70px;

    padding:50px 40px;

    background:

    linear-gradient(

        135deg,

        rgba(35,35,125,.96),

        rgba(211,52,65,.92)

    );

    border-radius:24px;

    text-align:center;

    color:#FFF;

    box-shadow:0 15px 40px rgba(0,0,0,.18);

}



.academy-cta h2{

    font-size:32px;

    margin-bottom:15px;

}



.academy-cta p{

    max-width:720px;

    margin:0 auto 30px;

    font-size:18px;

    line-height:1.7;

}



.academy-cta .btn-primary{

    background:#FFF;

    color:var(--lnh-blue);

}



.academy-cta .btn-primary:hover{

    background:#f4f6f9;

    color:var(--lnh-red);

}



/* ==========================================================
   FOOTER DA PÁGINA DE ACADEMIA
========================================================== */

.academy-footer{

    margin-top:80px;

    padding-top:40px;

    border-top:1px solid #eeeeee;

    text-align:center;

}



.academy-footer p{

    color:#777;

    font-size:15px;

}



.academy-footer strong{

    color:var(--lnh-blue);

}



/* ==========================================================
   RESPONSIVIDADE - ACADEMIA
========================================================== */

@media(max-width:768px){


    .academy-table th{

        width:120px;

        font-size:14px;

    }


    .academy-table td{

        font-size:14px;

        padding:14px 5px;

    }


    .academy-social{

        margin-top:40px;

    }


    .academy-social-buttons{

        flex-direction:column;

    }


    .social-btn{

        width:100%;

    }


    .academy-map iframe{

        height:320px;

        border-radius:12px;

    }


    .academy-cta{

        padding:35px 20px;

    }


    .academy-cta h2{

        font-size:25px;

    }


    .academy-cta p{

        font-size:16px;

    }


}



@media(max-width:480px){


    .academy-table{

        display:block;

        overflow-x:auto;

    }


    .academy-table th{

        min-width:110px;

    }


    .academy-table td{

        min-width:180px;

    }


    .btn-primary,
    .btn-secondary{

        width:100%;

        padding:14px 20px;

    }


}

@media(max-width:900px){

    .academy-grid{

        grid-template-columns:1fr;

    }

    .academy-card{

        padding:25px;

    }

    .academy-logo{

        width:220px;

        height:220px;

    }

    .academy-banner h1{

        font-size:32px;

    }

}