/*=== GLOBAL & VARIÁVEIS ===*/
:root {
    --el-bg-header: #FD8932; /* Sincronizado com --BG1 */
    --el-text-primary: #ffffff;
    --el-accent: #000000;    
    --el-font: 'Roboto', sans-serif;
    --el-transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    --el-header-height: 80px;

    /* Categorias */
    --KIDS: #FF007F;
    --K3: #A86F50;
    --k6: #639DF8;
    --k13: #7BDA84;
    --k18: #E4AE30;
    --k28: #E1701A;
    --k38: #CC0033;

    --BG1: #FD8932;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--el-font);
}

html {
    scroll-behavior: smooth;
}

section {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/*=== TIPOGRAFIA ===*/
h2 {
    font-size: 40px;
    font-style: italic;
}

.titulo1, .titulo2 {
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
}

.titulo1 { font-size: 40px; }
.titulo2 { font-size: 28px; }

p {
    font-size: 15px;
    line-height: 23px;
    color: #000;
}

/*=== COMPONENTES GERAIS ===*/
.btn-info {
    background-color: #181818;
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 16px;
    text-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.3s;
}

.btn-info svg {
    height: auto;
    width: 16px;
    fill: white;
}

.btn-info:hover {
    background-color: #555555;
}

/*=== ESTRUTURAS DE GRIDS E SEÇÕES ===*/
.GC1, .GC2 { 
    scroll-margin-top: 40px; 
}

.GC2 {
    display: flex;
    flex-direction: column;
    background-color: var(--BG1);
}

.GC11 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1280px;
    padding: 64px 40px;
    gap: 64px;
}

.GCT1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 60%;
}



/*=== SECTION: BANNER ===*/
#banner {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%), url("images/banner.jpg") no-repeat center/cover fixed;
}

.banner1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
    width: 100%;
    padding: 120px 64px 64px;
}

.banner1 img {
    height: 100px; 
    width: auto;  
    object-fit: contain; 
}

.banner2 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-end;
}

.banner2-1 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.banner2-11 {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.icon1 {
    width: 3rem;
    height: 3rem;
    fill: #ffffff;
}

h1 {
    font-size: 4rem;
    font-style: italic;
    text-transform: uppercase;
    color: #ffffff;
}

.banner2-12 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    width: 50%;
}

.botao-ancora {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 20px 40px;
    color: #ffffff;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}

.botao-ancora.kids { background-color: var(--KIDS); }
.botao-ancora.k3    { background-color: var(--K3); }
.botao-ancora.k6    { background-color: var(--k6); }
.botao-ancora.k13   { background-color: var(--k13); }
.botao-ancora.k18   { background-color: var(--k18); }
.botao-ancora.k28   { background-color: var(--k28); }
.botao-ancora.k38   { background-color: var(--k38); }

.botao-ancora svg {
    width: 16px;
    height: 16px;
    fill: #ffffff;
}

/*== COMPONENTE: TIMER ==*/
.timer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background-color: white;
    padding: 16px;
}

.tm-box {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 8px;
    gap: 4px; 
}

.tm-box span {
    font-size: 40px;
    font-weight: 400;
    color: #000;
}

.tm-box p {
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
}

/*== DIVISOR: MONTANHA ==*/
.divisor-montanha {
    display: flex;
    width: 100%;
    transform: rotate(180deg);
}

.divisor-montanha svg {
    height: 80px;
    width: 100%;
}

.divisor-montanha path {
    fill: #ffffff; 
}

/*=== SECTION: SOBRE ===*/
#sobre .GC11 {
    align-items: flex-start;
}

.info-meta {
    display: flex;
    gap: 24px;      
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;      
    color: #000;  
    font-size: 16px;
    font-weight: 500;
}

.meta-icon {
    width: 18px;
    height: 18px;
    fill: #000; 
}

/*== GRID CARDS ==*/
.GRID1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.CARD {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.CC1 {  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 360px;
    padding: 16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}

.CIMG1 { background-image: linear-gradient(rgba(0, 0, 0, 0.199), rgba(0, 0, 0, 0.5)), url('images/IMG5.jpg'); }
.CIMG2 { background-image: linear-gradient(rgba(0, 0, 0, 0.199), rgba(0, 0, 0, 0.5)), url('images/IMG2.jpg'); }
.CIMG3 { background-image: linear-gradient(rgba(0, 0, 0, 0.199), rgba(0, 0, 0, 0.5)), url('images/IMG4.jpg'); }
.CIMG4 { background-image: linear-gradient(rgba(0, 0, 0, 0.199), rgba(0, 0, 0, 0.5)), url('images/IMG1.jpg'); }

.numero {
    font-size: 19rem;
    font-weight: 800;
    font-style: italic;
    color: white;
    position: absolute;  
    top: -40px;          
    right: -20px;
    letter-spacing: -2rem;
}

.texto1 {
    font-size: 16px;
    color: white;
    text-align: center;
    text-transform: uppercase;
}

.CARD P {
    text-align: justify;
}

/*=== SECTION: PERCURSOS ===*/
#percursos .divisor-montanha {
    background-color: white;
}

#percursos .divisor-montanha path {
    fill: #FD8932; 
}

.cardsdepercursos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cardpercursos {
    background-color: red;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: 48vh;
    scroll-margin-top: 120px; 
}

/* --- COLUNA 1: CTA --- */
.coluna-cta {
    display: flex;
    flex-direction: column;
    padding: 32px;
    justify-content: space-between;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("images/S01.webp") no-repeat center/cover;
}

.km-titulo {
    font-size: 5rem;
    font-weight: 900;
    font-style: italic;
    line-height: 0.9;
}

#kids .km-titulo { color: var(--KIDS); }
#k3 .km-titulo   { color: var(--K3); }
#k6 .km-titulo   { color: var(--k6); }
#k13 .km-titulo  { color: var(--k13); }
#k18 .km-titulo  { color: var(--k18); }
#k28 .km-titulo  { color: var(--k28); }
#k38 .km-titulo  { color: var(--k38); }

.km-subtitulo {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: #ffffff;
}

.botao-inscricao {
    background-color: #ff9100;
    color: #000000;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    padding: 20px 12px;
    text-transform: uppercase;
    transition: background 0.3s;
}

.botao-inscricao:hover {
    background-color: #e07f00;
}

/* --- COLUNA 2: CENTRAL --- */
.coluna-central {
    display: flex;
    flex-direction: column;
    padding: 32px;  
    gap: 60px;
    justify-content: flex-end;
    align-items: center;
    background-color: #000;
}

.grid-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 70%;
}

.item-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.icone-montanha {
    max-width: 70%;
    height: auto;
}

.item-status p {
    font-size: 0.9rem;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

.item-status .distancia { color: white; }
.item-status .maxima    { color: #00ff00; }
.item-status .minima    { color: red; }

.grid-botoes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

.coluna-central .botao-inscricao {
    display: none;
}

/* --- COLUNA 3: IMAGEM (DIREITA) --- */
.coluna-imagem {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#kids.cardpercursos   { background: url('images/IMG - KIDS.jpg') no-repeat center/cover; }
#k3 .coluna-imagem    { background-image: url('images/IMG - 3K.jpg'); }
#k6 .coluna-imagem    { background-image: url('images/IMG - 6K.jpg'); }
#k13 .coluna-imagem   { background-image: url('images/IMG - 13K.jpg'); }
#k18 .coluna-imagem   { background-image: url('images/IMG - 18K.jpg'); }
#k28 .coluna-imagem   { background-image: url('images/IMG - 28K.jpg'); }
#k38 .coluna-imagem   { background-image: url('images/IMG - 38K.jpg'); }

/*=== SECTION: KIT ATLETA ===*/


.item-lista {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.kit1 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.kit2 {
    display: flex; 
    gap: 16px;
}

.kit21 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("images/breve.webp") no-repeat center/cover;
  
    width: 70%;
}

.kit21 h2{
    font-size: 6rem;
}

#kitembreve  .kit21 {
    background-image: url('images/5\ -\ Percusos\ -\ Em\ breve.webp');
    width: 100%;
    height: 80vh;
}

#kitatleta .kit21 {
    background-image: url('images/5\ -\ Kit\ atleta\ -\ Em\ breve.webp');
    
}

#premiacao .kit21 {
    background-image: url('images/5\ -\ Premiações\ -\ Em\ breve.webp');

}



.kit22, .kit3 {
    display: flex;
    flex-direction: column;
    padding: 32px;
    gap: 20px;
    background-color: white;
}

.kit22 { width: 30%; }

#kitatleta .btn-info {
    width: 30%;
}

.programa1 {
    background-color: white;
    padding: 20px;
}

.programa1 p {
    font-size: 14px;
    line-height: 20px;
}

.grid-botoes2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.btn-largo {
    grid-column: span 2;
    width: 60%;
}



.grid-apoio {
  display: grid;
  grid-template-columns: repeat(4, 1fr) ; 
  gap: 4px ;
  align-items: center ;
  justify-items: center;
}

.grid-apoio img {
  width: 100% ;
  height: auto;
}

#apoio .grid-apoio {
  display: grid;
  grid-template-columns: repeat(1, 1fr) ; 
  gap: 4px ;
  align-items: center ;
  justify-items: center;
}

/*=== FOOTER ===*/
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

.footer1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 56px 0px 120px 0px;
    gap: 40px;
    width: 1280px;
}

.footer1 img {
    max-width: 100px;
    height: auto;
}

.footer2 {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px; 
}

.footer3 h2 {
    font-size: 40px;
    font-style: italic;
    color: white;
}

.footer-sociais {
    display: flex;
    gap: 12px; 
}

.icone-circulo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #ffffff; 
    border-radius: 50%;       
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.icone-circulo svg {
    width: 20px;
    height: 20px;
    fill: #111111; 
}

.icone-circulo:hover {
    transform: scale(1.1); 
    background-color: #e0e0e0; 
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.footer-menu a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}






/* === MOBILE === */
@media (max-width: 798px) {
    
    .el-nav-item.el-has-dropdown:hover .el-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .el-nav-item.el-has-dropdown:hover .el-chevron-icon {
        transform: rotate(180deg);
    }



    /*=== GLOBAL MOBILE ===*/
    .GC11 {
        max-width: 100%;
        padding: 40px 16px;
        gap: 40px;
    }

    .GCT1 {
        width: 100%;
    }

    .titulo1 {
        font-size: 24px;
    }

    .GRID1 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /*== SECTION: BANNER ==*/
    #banner {
        background-attachment: scroll;
    }

    .banner1 {
        padding: 100px 16px 64px 16px;
    }

    .banner1 img {
        height: 80px;  
    }

    .banner2 {
        flex-direction: column;
        gap: 40px;
    }

    .icon1 {
        width: 2rem;
    }

    h1 {
        font-size: 2.4rem;
    }

    .banner2-12 {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
    }

    .botao-ancora {
        padding: 12px;
    }

    .timer {
        padding: 0px;
        width: 100%;
    }

    .tm-box span {
        font-size: 36px;
    }

    .cardpercursos {
        grid-template-columns: 1fr;
        height: auto;
    }

    .coluna-cta {
        align-items: center; 
    }

    .coluna-cta .botao-inscricao {
        display: none;
    }

    .coluna-central {
        gap: 20px;
        padding: 16px;
    }

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

    .botao-inscricao {
        width: 100%;
    }

    .coluna-imagem {
        display: none;
    }

    /*== SECTION: KIT DO ATLETA ==*/
    .kit21 h2{
        font-size: 3rem;
    }

    .kit2 {
        flex-direction: column;
    }

    .kit21 {
        height: 40vh;
        width: 100%;
    }

    .kit22 {
        background-color: white;
        width: 100%;
    }

    #kitatleta .btn-info {
        width: 100%;
    }

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

    .btn-largo {
        grid-column: span 1;
        width: 100%;
    }

    .footer1 {
        padding: 56px 16px 40px 16px;
        gap: 40px;
        width: 100%;
    }

    .footer2 {
        flex-direction: column;
        gap: 60px;
    }

    .footer3 {
        gap: 16px;
    }

    .footer-menu {
        flex-direction: column;
    }

    .coluna-central .botao-inscricao {
        display: block;
    }

    .grid-apoio {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }


}