/* ==========================================================
   RESPONSIVIDADE — LENDÁRIOS FC
   ========================================================== */


/* ==========================================================
   REGRA GLOBAL — TABLETS E CELULARES
   ========================================================== */

@media (max-width: 1100px) {

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    .container {
        max-width: 100%;
    }

}


/* ==========================================================
   TABLETS
   ========================================================== */

@media (max-width: 1100px) {

    #header .container {
        width: 94%;
    }

    nav ul {
        gap: 22px;
    }

    .btn-presenca {
        padding: 11px 18px;
        font-size: 0.9rem;
    }

}


/* ==========================================================
   RESPONSIVIDADE — LENDÁRIOS FC
   ========================================================== */


/* ==========================================================
   TABLETS / CELULAR
   ========================================================== */

@media (max-width: 900px) {

    /* ------------------------------------------------------
       REGRA GERAL
       ------------------------------------------------------ */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    img {
        max-width: 100%;
        height: auto;
    }


    /* ------------------------------------------------------
    HEADER
    ------------------------------------------------------ */

    #header {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;

        z-index: 9999;
    }


    #header .container {
        width: 94%;
        max-width: 100%;
        height: 64px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    /* MENU DESKTOP */

    #menu-principal {
        display: none;
    }


    /* BOTÃO MOBILE */

    .menu-mobile-btn {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        margin-left: auto;
        margin-right: 10px;

        border: none;
        border-radius: 8px;

        background: transparent;

        color: #ffffff;

        font-size: 1.8rem;
        line-height: 1;

        cursor: pointer;
    }


    /* MENU MOBILE */

    .menu-mobile {
        display: none;

        position: absolute;

        top: 64px;
        left: 0;

        width: 100%;

        background: #00027D;

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

        z-index: 10000;
    }


    .menu-mobile.ativo {
        display: block;
    }


    .menu-mobile a {
        display: block;

        width: 100%;

        padding: 15px 25px;

        color: #ffffff;

        text-decoration: none;

        font-weight: 600;

        border-bottom: 1px solid rgba(255,255,255,.10);
    }


    .menu-mobile a:hover {
        background: #FE6601;
    }


    /* ÁREA DO ATLETA */

    .btn-presenca {
        padding: 10px 16px;

        font-size: 0.85rem;

        white-space: nowrap;
    }

    .logo-space {
        width: 80px;
        flex-shrink: 0;
    }


    /* ------------------------------------------------------
       MENU MOBILE
       ------------------------------------------------------ */

    nav {
        display: block;

        order: 3;

        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    nav::-webkit-scrollbar {
        display: none;
    }

    nav ul {
        display: flex;

        flex-wrap: nowrap;

        width: max-content;
        min-width: 100%;

        gap: 22px;

        padding: 4px 2px 8px;
        margin: 0;

        list-style: none;
    }

    nav li {
        flex-shrink: 0;
    }

    nav a {
        display: block;

        white-space: nowrap;

        font-size: 0.78rem;
    }


    /* ------------------------------------------------------
       BOTÃO ÁREA DO ATLETA
       ------------------------------------------------------ */

    .btn-presenca {
        flex-shrink: 0;

        padding: 10px 16px;

        font-size: 0.85rem;

        white-space: nowrap;
    }


    /* ------------------------------------------------------
       HERO
       ------------------------------------------------------ */

    .hero {
        width: 100%;
        max-width: 100%;

        padding: 0;

        overflow: hidden;
    }

    .hero picture {
        display: block;

        width: 100%;
        max-width: 100%;
    }

    .hero-banner {
        display: block;

        width: 100%;
        max-width: 100%;

        height: auto;

        object-fit: contain;
    }

    .hero-scroll {
        bottom: 15px;
    }

    .mouse {
        width: 24px;
        height: 40px;
    }


    /* ------------------------------------------------------
       PADRÃO DAS SEÇÕES
       ------------------------------------------------------ */

    section {
        width: 100%;
        max-width: 100%;

        padding-left: 20px;
        padding-right: 20px;

        overflow: hidden;
    }

    .container {
        width: 92%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }


    /* ------------------------------------------------------
       CABEÇALHOS
       ------------------------------------------------------ */

    .section-header,
    .titulo-secao {
        width: 100%;
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;

        margin-bottom: 50px;
    }

    .section-header h2,
    .titulo-secao h2 {
        max-width: 100%;

        font-size: 3rem;
        line-height: 1.05;

        overflow-wrap: break-word;
    }

    .section-header p,
    .titulo-secao p {
        max-width: 100%;

        font-size: 1rem;
        line-height: 1.7;
    }


    /* ------------------------------------------------------
       QUEM SOMOS
       ------------------------------------------------------ */

    .quem-grid {
        display: grid;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100%;
        max-width: 100%;

        gap: 40px;
    }

    .quem-grid > * {
        min-width: 0;
        max-width: 100%;
    }

    .quem-imagem {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .quem-imagem img {
        display: block;

        width: 100%;
        max-width: 100%;

        height: auto;
    }

    .quem-texto {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .quem-texto p {
        max-width: 100%;

        font-size: 1rem;
        line-height: 1.8;

        overflow-wrap: break-word;
    }

    .frase {
        max-width: 100%;

        font-size: 2.3rem;
        line-height: 1.15;

        overflow-wrap: break-word;
    }


    /* ------------------------------------------------------
       ESSÊNCIA
       ------------------------------------------------------ */

    .cards-essencia {
        display: grid;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100%;
        max-width: 100%;

        gap: 25px;

        margin-top: 40px;
    }

    .card-essencia {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        padding: 35px 25px;

        box-sizing: border-box;
    }

    .card-essencia h3,
    .card-essencia p {
        max-width: 100%;

        overflow-wrap: break-word;
    }


    /* ------------------------------------------------------
       ESCUDO
       ------------------------------------------------------ */

    .escudo-grid {
        display: grid;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100%;
        max-width: 100%;

        gap: 40px;

        margin-top: 40px;
    }

    .escudo-grid > * {
        min-width: 0;
        max-width: 100%;
    }

    .escudo-imagem {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        text-align: center;
    }

    .escudo-imagem img {
        display: block;

        width: auto;
        max-width: 300px;

        margin-left: auto;
        margin-right: auto;
    }

    .escudo-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }

    .escudo-item h3,
    .escudo-item p {
        max-width: 100%;

        overflow-wrap: break-word;
    }


    /* ------------------------------------------------------
       HISTÓRIA
       ------------------------------------------------------ */

    #historia::before {
        display: none;
    }

    .historia-item {
        display: grid;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100%;
        max-width: 100%;

        gap: 30px;

        margin: 50px 0;
    }

    .historia-item > * {
        min-width: 0;
        max-width: 100%;
    }

    .historia-item::after {
        display: none;
    }

}


/* ==========================================================
   CELULARES
   ========================================================== */

@media (max-width: 600px) {

    /* ------------------------------------------------------
       HEADER
       ------------------------------------------------------ */

    #header .container {
        width: 92%;

        min-height: 60px;

        padding: 7px 0;
    }

    .logo-space {
        width: 60px;
    }

    .btn-presenca {
        padding: 9px 13px;

        font-size: 0.78rem;
    }


    /* ------------------------------------------------------
       MENU
       ------------------------------------------------------ */

    nav ul {
        gap: 18px;

        padding-bottom: 7px;
    }

    nav a {
        font-size: 0.72rem;
    }


    /* ------------------------------------------------------
       HERO
       ------------------------------------------------------ */

    .hero-banner {
        width: 100%;
        height: auto;
    }

    .hero-scroll {
        display: none;
    }


    /* ------------------------------------------------------
       TÍTULOS
       ------------------------------------------------------ */

    .section-header h2,
    .titulo-secao h2 {
        font-size: 2.4rem;
        line-height: 1.05;
    }

    .section-header p,
    .titulo-secao p {
        font-size: 0.95rem;
        line-height: 1.7;
    }


    /* ------------------------------------------------------
       CAPÍTULOS
       ------------------------------------------------------ */

    .capitulo {
        padding: 7px 18px;

        font-size: 0.65rem;

        letter-spacing: 3px;
    }


    /* ------------------------------------------------------
       QUEM SOMOS
       ------------------------------------------------------ */

    .frase {
        font-size: 2rem;
    }

    .quem-texto p {
        font-size: 0.98rem;
        line-height: 1.8;
    }


    /* ------------------------------------------------------
       ESSÊNCIA
       ------------------------------------------------------ */

    .cards-essencia {
        grid-template-columns: 1fr;
    }

    .card-essencia {
        padding: 30px 22px;
    }

    .card-essencia h3 {
        font-size: 1.5rem;
    }

    .card-essencia p {
        font-size: 0.95rem;
        line-height: 1.7;
    }


    /* ------------------------------------------------------
       ESCUDO
       ------------------------------------------------------ */

    .escudo-grid {
        grid-template-columns: 1fr;
    }

    .escudo-imagem img {
        max-width: 260px;
    }


    /* ------------------------------------------------------
       HISTÓRIA
       ------------------------------------------------------ */

    .historia-item {
        margin: 40px 0;

        gap: 20px;
    }


    /* ------------------------------------------------------
       ESPAÇAMENTO
       ------------------------------------------------------ */

    section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

}


/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 400px) {

    #header .container {
        width: 94%;
    }

    .btn-presenca {
        padding: 8px 11px;

        font-size: 0.72rem;
    }

    nav ul {
        gap: 16px;
    }

    nav a {
        font-size: 0.68rem;
    }

    .section-header h2,
    .titulo-secao h2 {
        font-size: 2rem;
    }

    .frase {
        font-size: 1.8rem;
    }

}


/* ==========================================================
   CELULARES
   ========================================================== */

@media (max-width: 600px) {


    /* ------------------------------------------------------
       HEADER
       ------------------------------------------------------ */

    #header .container {
        width: 92%;
        max-width: 100%;
        height: 60px;
    }

    .logo-space {
        width: 60px;
    }

    .btn-presenca {
        padding: 9px 13px;
        font-size: 0.78rem;
    }


    /* ------------------------------------------------------
       HERO
       ------------------------------------------------------ */

    .hero-banner {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .hero-scroll {
        display: none;
    }


    /* ------------------------------------------------------
       TÍTULOS
       ------------------------------------------------------ */

    .section-header h2,
    .titulo-secao h2 {
        width: 100%;
        max-width: 100%;
        font-size: 2.4rem;
        line-height: 1.05;
        overflow-wrap: break-word;
    }

    .section-header p,
    .titulo-secao p {
        width: 100%;
        max-width: 100%;
        font-size: 0.95rem;
        line-height: 1.7;
    }


    /* ------------------------------------------------------
       CAPÍTULOS
       ------------------------------------------------------ */

    .capitulo {
        max-width: 100%;
        padding: 7px 18px;
        font-size: 0.65rem;
        letter-spacing: 3px;
    }


    /* ------------------------------------------------------
       QUEM SOMOS
       ------------------------------------------------------ */

    .quem-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px;
    }

    .quem-imagem {
        width: 100%;
        max-width: 100%;
    }

    .quem-imagem img {
        width: 100%;
        max-width: 100%;
    }

    .frase {
        width: 100%;
        max-width: 100%;
        font-size: 2rem;
    }

    .quem-texto p {
        width: 100%;
        max-width: 100%;
        font-size: 0.98rem;
        line-height: 1.8;
    }


    /* ------------------------------------------------------
       ESSÊNCIA
       ------------------------------------------------------ */

    .cards-essencia {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        gap: 22px;
    }

    .card-essencia {
        width: 100%;
        max-width: 100%;
        padding: 30px 22px;
    }

    .card-essencia h3 {
        font-size: 1.5rem;
    }

    .card-essencia p {
        font-size: 0.95rem;
        line-height: 1.7;
    }


    /* ------------------------------------------------------
       ESCUDO
       ------------------------------------------------------ */

    .escudo-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
    }

    .escudo-imagem img {
        max-width: 260px;
    }

    .escudo-item {
        width: 100%;
        max-width: 100%;
    }


    /* ------------------------------------------------------
       HISTÓRIA
       ------------------------------------------------------ */

    .historia-item {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        margin: 40px 0;
        gap: 20px;
    }


    /* ------------------------------------------------------
       ESPAÇAMENTO
       ------------------------------------------------------ */

    section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

}


/* ==========================================================
   CELULARES PEQUENOS
   ========================================================== */

@media (max-width: 400px) {


    /* ------------------------------------------------------
       HEADER
       ------------------------------------------------------ */

    #header .container {
        width: 94%;
    }

    .btn-presenca {
        padding: 8px 11px;
        font-size: 0.72rem;
    }


    /* ------------------------------------------------------
       TÍTULOS
       ------------------------------------------------------ */

    .section-header h2,
    .titulo-secao h2 {
        font-size: 2rem;
    }

    .frase {
        font-size: 1.8rem;
    }


    /* ------------------------------------------------------
       CARDS
       ------------------------------------------------------ */

    .card-essencia {
        padding: 28px 20px;
    }

}