/* ==========================================================================
   FONTES EXTERNAS - OSWALD
   ========================================================================== */
@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-ExtraLight.woff2') format('woff2'), url('fonts/Oswald-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-Light.woff2') format('woff2'), url('fonts/Oswald-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-Medium.woff2') format('woff2'), url('fonts/Oswald-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oswald ';
    src: url('fonts/Oswald-Regular.woff2') format('woff2'), url('fonts/Oswald-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Oswald';
    src: url('fonts/Oswald-SemiBold.woff2') format('woff2'), url('fonts/Oswald-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   RESET E ESTRUTURA GERAL
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    font-family: 'Oswald', sans-serif;
    background-color: #f2f2f2;
    color: #000000;
}

.page-container {
    display: grid;
    grid-template-rows: 1fr auto auto; /* Conteúdo, Faixa Azul, Rodapé */
    height: 100vh;
    min-height: 750px;
}

/* ==========================================================================
   ZONA PRINCIPAL (CONTEÚDO E IMAGEM)
   ========================================================================== */
.main-content {
    position: relative; /* Define o ponto de referência para a imagem */
    display: block; /* Remove o grid para a imagem poder ir para o fundo */
    /*padding: 40px 60px 20px 60px;*/
    padding: 7vh 0 0 5vh;
    height: 100%;
}

.text-side {
    position: relative;
    z-index: 2; /* Garante que o texto fica por CIMA da imagem */
    /*max-width: 65%;*/ /* Define a área máxima que o texto ocupa antes de cruzar a imagem */
}

/* Títulos Principais calibrados */
.main-title { 
    font-size: 6vw; /* Equivalente proporcional a ~136px */
    font-weight: 400; /* Regular */
    line-height: 1; 
    text-transform: uppercase;
}
.sub-title { 
    font-size: 5.5vw; /* Equivalente proporcional a ~136px */
    font-weight: 200; /* ExtraLight */
    line-height: 1; 
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* Bloco de Informações */
.info-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 50px; 
    align-items: start;
}

/* Caixa Azul de Data */
.blue-date-box {
    background-color: #009ee2;
    color: black;
    padding: 20px 25px 20px 60px; /* Mantém o padding extra à esquerda por causa do margin-left */
    margin-left: -60px;
    font-size: 1.6vw; /* Base ~49px para Segunda-Feira */
    font-weight: 600; /* SemiBold */
    line-height: 1.1;
    text-transform: uppercase;
    
    /* Esta linha faz a caixa adaptar-se exatamente ao tamanho do conteúdo */
    width: fit-content; 
}

/* Alinhamento fino para a data interna */
.blue-date-box .big-day {
    font-size: 2vw; /* Base ~62px para "27 DE JULHO" */
    display: block;
    white-space: nowrap; /* Garante que "27 DE JULHO" e "DE 2026" não partem a meio */
}

.hour-box span {
    font-size: 2vw; /* Base ~49px */
    font-weight: 600; /* SemiBold */
    margin-top: 15px;
    line-height: 1.2;
    /*text-transform: uppercase;*/
}

.hour-box p {
    font-size: 2vw; /* Base ~49px */
    font-weight: normal; /* Regular */
    margin-top: 15px;
    line-height: 1.2;
    /*text-transform: uppercase;*/
}

/* Descrições e Localização */
.details-box h3 { 
    font-size: 2.5vw; /* Base ~53.79px */
    font-weight: 300; /* Light */
    margin-bottom: 20px; 
    line-height: 1.2; 
    text-transform: uppercase; 
}
.details-box p { 
    font-size: 1.6vw; /* Base ~33.3px */
    font-weight: 300; /* Light */
    line-height: 1.3; 
    max-width: 55%;
}

/* Lado da Imagem (Maior e com mais presença) */
.image-side {
    position: absolute;
    top: -28%;          /* Cola 100% ao topo (sem espaço) */
    right: 0;        /* Encosta ao canto direito */
    bottom: 0;       /* Encosta à faixa azul em baixo */
    z-index: 1;      /* Fica por TRÁS do texto */
    
    /* -------------------------------------------------------------
       AQUI CONTROLA A LARGURA DA IMAGEM COMO QUISERES:
       Aumenta ou diminui os 50vw (ex: 45vw, 55vw, 60vw)
       ------------------------------------------------------------- */
    width: 51%; 
    
    background-size: cover;
    background-position: top center; /* Mostra a cabeça/topo da imagem sem cortar */
    background-repeat: no-repeat;
}

/* ==========================================================================
   FAIXA DO CONTADOR (Cores corrigidas: Fundo azul, Texto/Contador a Preto)
   ========================================================================== */
.blue-strip {
    background-color: #009ee2;
    padding: 25px 60px;
    display: flex;
    align-items: center;
    min-height: 120px;
}

.counter-layout {
    display: flex;
    align-items: center;
    gap: 30px;
    color: #000000; /* Texto do prefixo e labels a Preto */
}

.counter-label { 
    font-size: 2rem; 
    font-weight: 600; 
    text-transform: uppercase;
}

/* Estrutura interna com Dias, Horas, Minutos e Segundos */
.countdown-container {
    display: flex;
    gap: 25px;
}

.time-block {
    text-align: center;
}

.time-block span {
    display: block;
    font-size: 4vw; /* Dígitos em formato fluido */
    font-weight: 600;
    line-height: 1;
}

.time-block label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 4px;
}

/* Botão Pós-Data */
.btn-access {
    background-color: #000000;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    text-transform: uppercase;
}
.btn-access:hover { background-color: #222; }

/* ==========================================================================
   RODAPÉ (Patrocinadores e Notas)
   ========================================================================== */
.footer-strip {
    background-color: white;
    border-top: 1px solid #eee;
    padding: 15px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sponsors-container { display: flex; gap: 40px; }
.sponsor-group { display: flex; flex-direction: column; gap: 5px; }
.sponsor-group span { 
    font-size: 17px; /* Fixado conforme especificado */
    font-weight: normal; /* Regular */
    color: #000; 
}
.logos-flex { display: flex; align-items: center; gap: 15px; padding-top:10%}
.sponsor-logo { max-height: 40px; max-width: 120px; object-fit: contain; }

.certification-container { display: flex; align-items: center; gap: 15px; text-align: right; width:13% }
.certification-container p { 
    font-size: 14px; /* Fixado conforme especificado */
    font-weight: normal; /* Regular */
    color: #000; 
    line-height: 1.3;
    text-align: left;
}
.cert-logo-img { max-height: 45px; }

.hidden { display: none !important; }

/* ==========================================================================
   RESPONSIVIDADE (LAYOUT VERTICAL)
   ========================================================================== */
@media (max-width: 900px) {
    .page-container { height: auto; display: block; }
    .main-content { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
    
    .text-side { order: 2; }
    .image-side { order: 1; top: -12.5%; right: 0; height: 400px; background-position: center; }

    .main-title, .sub-title { font-size: 1.5rem; }
    .info-grid { grid-template-columns: 1fr; gap: 20px; }
    
    .blue-date-box { font-size: 1.5rem; }
    .blue-date-box .big-day { font-size: 1.8rem; }
    .hour-box { font-size: 1.5rem; }
    .hour-box span { font-size: 6vw; }
    .hour-box p { font-size: 6vw; }
    .details-box h3 { font-size: 1.6rem; }
    .details-box p { font-size: 1.1rem;padding-right:30px;max-width: 100%; }

    .blue-strip { padding: 20px; justify-content: center; }
    .counter-layout { flex-direction: column; text-align: center; gap: 15px; }
    .time-block span { font-size: 10vw; }
    
    /* ==========================================================================
       RODAPÉ RESPONSIVO EM GRELHA (2 COLUNAS COM DIVISÓRIAS)
       ========================================================================== */
    .footer-strip {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* Coluna Esquerda | Coluna Direita */
        gap: 20px 0;                    /* Espaço vertical entre linhas */
        padding: 20px 15px;
        align-items: start;
    }

    /* Remove o display flex da div exterior para que os filhos entrem diretamente na Grid */
    .sponsors-container {
        display: contents !important; /* Faz os .sponsor-group comportarem-se como filhos diretos da .footer-strip */
    }

    /* Regra geral dos grupos (Organização, Master Sponsor, Apoio) */
    .sponsor-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-right: 15px;
        padding-left: 15px;
    }

    /* Linha divisória vertical nos elementos da COLUNA ESQUERDA (1ª e 3ª caixas) */
    .sponsor-group:nth-child(1),
    .sponsor-group:nth-child(3) {
        border-right: 1px solid #000; /* Traço cinzento a separar as colunas */
        padding-left: 0;
    }

    /* Ajustes da Certificação para ficar na Coluna Direita (Linha 2, Coluna 2) */
    .certification-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding-left: 15px;
        margin-top: 0;
        border-top: none; /* Remove qualquer borda superior antiga */
        align-self: normal; 
        width: 82%;  
    }

    .sponsor-group span {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .logos-flex {
        display: flex;
        /*flex-wrap: wrap;*/
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .sponsor-logo {
        max-height: 32px;
        max-width: 100%;
        object-fit: contain;
    }

    .certification-container p {
        font-size: 2vw;
        /*line-height: 1.2;*/
        font-weight: normal;
        text-align: left;
    }

    .cert-logo-img {
        max-height: 38px;
    }
}