/* =======================================================================
   ILHÉUS TRIATHLON CUP 2026 - FOLHA DE ESTILOS PRINCIPAL
   -----------------------------------------------------------------------
   Este arquivo controla TODAS as páginas do site.
   Para trocar uma cor do site inteiro, altere apenas as variáveis
   dentro de ":root" logo abaixo. Não é necessário mexer no resto do CSS.

   Linha visual: preto/branco + azul elétrico + fonte Manrope, no estilo
   dos sites oficiais da World Triathlon, com o gradiente da identidade
   do evento usado no banner (hero) e nos destaques.

   Organização deste arquivo (procure pelos títulos em CAIXA ALTA):
   1. VARIÁVEIS DE COR E FONTE
   2. RESET BÁSICO
   3. TIPOGRAFIA
   4. UTILITÁRIOS (classes reutilizáveis)
   5. BOTÕES
   6. CABEÇALHO (HEADER) E MENU
   7. RODAPÉ (FOOTER)
   8. HERO (banner principal das páginas)
   9. FAIXA DE INFORMAÇÕES RÁPIDAS
   10. GRID DE CARDS (menu estilo "app")
   11. SEÇÕES GERAIS DE CONTEÚDO
   12. CARDS DE HOTEL / CONTATO
   13. LINHA DO TEMPO / PROGRAMAÇÃO (ACCORDION)
   14. TABELAS DE INSCRIÇÃO
   15. SELOS / BADGES
   16. CARROSSEL DE FOTOS
   17. GALERIA DE FOTOS + LIGHTBOX
   18. EMBED DE MAPA (STRAVA / GOOGLE MAPS)
   19. FAIXA DE PATROCINADORES (ROLAGEM AUTOMÁTICA)
   20. POPUP DO GRUPO WHATSAPP
   21. RESPONSIVIDADE (telas maiores que celular)
   ======================================================================= */


/* 1. VARIÁVEIS DE COR E FONTE ------------------------------------------ */
:root {
    /* Preto/branco + azul elétrico - linha visual "World Triathlon" */
    --preto:         #0d0d10;   /* header, footer, textos fortes */
    --preto-suave:   #1a1b20;
    --azul-eletrico: #185fe0;   /* cor de ação: CTA, links, destaques */
    --azul-eletrico-escuro: #0f45ab;
    --amarelo-sol:   #ffc93c;   /* selo Alto Rendimento / Elite */
    --branco:        #ffffff;
    --gelo:          #f5f6f8;   /* fundo alternado das seções */
    --texto-escuro:  #14151a;
    --texto-medio:   #55585f;
    --texto-claro:   #90939b;
    --linha:         #e6e7eb;

    /* Gradiente da identidade do evento (aurora ciano > verde > amarelo / índigo) */
    --gradiente-evento: radial-gradient(60% 55% at 8% 8%, rgba(38,232,224,0.55), transparent 60%),
                        radial-gradient(130% 130% at 92% -10%, #fdf9df 0%, #f5f36a 14%, #cfe85a 28%, #7fe38a 44%, #34cfa0 60%, #1594a3 76%, #142a7c 90%, #0f0c3d 100%);

    /* Cores das 3 modalidades do triathlon (ícones) */
    --cor-natacao: #1863dc;
    --cor-ciclismo:#18a768;
    --cor-corrida: #ffc93c;

    /* Sombra e raio padrão dos cartões (mais retos, estilo "pro") */
    --sombra-card: 0 6px 22px rgba(13, 13, 16, 0.07);
    --raio-card: 12px;
    --raio-btn: 6px;
}

/* 2. RESET BÁSICO -------------------------------------------------------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    padding: 0;
    background-color: var(--branco);
    color: var(--texto-escuro);
    font-family: 'Manrope', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0 0 10px 0; }
table { border-collapse: collapse; width: 100%; }


/* 3. TIPOGRAFIA ----------------------------------------------------------- */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 800;
    color: var(--azul-eletrico);
}
.titulo-secao {
    font-size: 24px;
    font-weight: 800;
    color: var(--preto);
}
.subtitulo {
    font-size: 15px;
    color: var(--texto-medio);
    font-weight: 400;
}


/* 4. UTILITÁRIOS ----------------------------------------------------------- */
.container {
    width: 92%;
    max-width: 1080px;
    margin: 0 auto;
}
.secao {
    padding: 40px 0;
}
.secao-alt { background: var(--gelo); }
.secao-cabecalho {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 30px auto;
}
.mt-0 { margin-top: 0; }
.texto-centro { text-align: center; }


/* 5. BOTÕES ----------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: var(--raio-btn);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    text-align: center;
}
.btn:active { transform: scale(0.97); }
.btn-primario {
    background: var(--azul-eletrico);
    color: var(--branco);
    box-shadow: 0 8px 20px rgba(24, 95, 224, 0.35);
}
.btn-primario:hover { background: var(--azul-eletrico-escuro); }
.btn-secundario {
    background: var(--preto);
    color: var(--branco);
}
.btn-secundario:hover { background: var(--preto-suave); }
.btn-linha {
    background: transparent;
    color: var(--branco);
    border: 2px solid rgba(255,255,255,0.7);
}
.btn-bloco { width: 100%; }
.grupo-botoes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* 6. CABEÇALHO (HEADER) E MENU ------------------------------------------- */
/* O cabeçalho começa TRANSPARENTE, flutuando sobre a foto/vídeo do banner.
   A classe ".rolou" (aplicada pelo main.js assim que a página é rolada)
   deixa o fundo sólido, para continuar legível sobre o conteúdo branco. */
.cabecalho {
    background: transparent;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 999;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.cabecalho.rolou {
    background: var(--preto);
    box-shadow: 0 2px 15px rgba(0,0,0,0.15);
}
.cabecalho-conteudo {
    width: 92%;
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}
.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--branco);
}
.marca-logo { height: 34px; width: auto; }
.marca-icones { display: flex; gap: 4px; }
.marca-icones span {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: var(--branco);
}
.marca-icones .i-natacao { background: var(--cor-natacao); }
.marca-icones .i-ciclismo { background: var(--cor-ciclismo); }
.marca-icones .i-corrida { background: var(--cor-corrida); color: var(--preto); }
.marca-texto { line-height: 1.1; }
.marca-texto strong { display: block; font-size: 15px; font-weight: 800; }
.marca-texto small { font-size: 10px; letter-spacing: 1px; color: var(--amarelo-sol); font-weight: 700; }

.nav-desktop { display: none; }
.nav-desktop a {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--raio-btn);
    transition: background 0.2s, color 0.2s;
}
.nav-desktop a:hover, .nav-desktop a.ativo { background: rgba(255,255,255,0.1); color: var(--branco); }
.nav-desktop .btn { margin-left: 6px; }

.btn-hamburguer {
    background: none;
    border: none;
    color: var(--branco);
    font-size: 22px;
    cursor: pointer;
}

/* Menu lateral (mobile) */
.menu-lateral {
    position: fixed;
    top: 0; right: -300px;
    width: 280px; max-width: 80%;
    height: 100%;
    background: var(--preto);
    z-index: 1001;
    padding: 30px 24px;
    transition: right 0.35s ease;
}
.menu-lateral.aberto { right: 0; }
.menu-lateral-fechar {
    color: var(--branco);
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
}
.menu-lateral a {
    display: block;
    color: var(--branco);
    font-weight: 600;
    padding: 13px 14px;
    border-radius: var(--raio-btn);
    margin-bottom: 8px;
    background: rgba(255,255,255,0.06);
}
.menu-lateral a.ativo { background: var(--azul-eletrico); color: var(--branco); }
.fundo-escurecido {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    display: none;
}
.fundo-escurecido.ativo { display: block; }


/* 7. RODAPÉ (FOOTER) ------------------------------------------------------ */
.rodape {
    background: var(--preto);
    color: rgba(255,255,255,0.85);
    padding: 40px 0 20px 0;
    margin-top: 40px;
}
.rodape-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr;
}
.rodape h4 {
    color: var(--branco);
    font-size: 15px;
    margin-bottom: 12px;
}
.rodape p, .rodape a { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.8; }
.rodape a:hover { color: var(--amarelo-sol); }
.rodape-social { display: flex; gap: 10px; margin-top: 10px; }
.rodape-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
}
.rodape-social a:hover { background: var(--azul-eletrico); color: var(--branco); }
.rodape-base {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 30px;
    padding-top: 18px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-align: center;
}
.rodape-base a { color: rgba(255,255,255,0.75); text-decoration: underline; }


/* 8. HERO (banner principal) ---------------------------------------------- */
.hero {
    position: relative;
    /* padding-top maior porque o cabeçalho agora é "fixed" (flutua por cima,
       não empurra mais o conteúdo) — este espaço evita que o selo/logo
       fique escondido atrás do menu */
    padding: 130px 0 90px 0;
    text-align: center;
    color: var(--branco);
    /* Camadas: 1) escurecedor  2) foto de capa (assets/img/hero-bg.jpg)  3) gradiente de reserva,
       caso a foto ainda não exista ou não carregue. */
    background:
        linear-gradient(180deg, rgba(6,6,20,0.35) 0%, rgba(6,6,20,0.72) 100%),
        url('../img/hero-bg.jpg') center/cover no-repeat,
        var(--gradiente-evento);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.hero .container { position: relative; z-index: 2; }

/* --- Vídeo de fundo (apenas na Home, telas maiores) --- */
.hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    display: none; /* ligado só a partir do tablet/desktop, ver media query lá embaixo */
}
.hero-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 177.77vh;  /* garante cobertura total mantendo a proporção 16:9 */
    min-height: 56.25vw;
    transform: translate(-50%, -50%);
}
.hero-escurecer {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6,6,20,0.35) 0%, rgba(6,6,20,0.75) 100%);
}
/* No celular o vídeo fica desligado (economia de dados) e continua aparecendo
   a foto definida em background acima. Para desligar o vídeo também no
   desktop, basta apagar o bloco ".hero-video-bg" do index.html. */
.hero-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.35);
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}
.hero h1 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.12;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}
.hero h1 span { color: var(--amarelo-sol); }
.hero-logo {
    width: 78%;
    max-width: 300px;
    margin: 0 auto 18px auto;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
}
.hero-data {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}
.hero-local {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 26px;
}
.hero-local i { color: var(--amarelo-sol); margin-right: 6px; }
.hero .grupo-botoes { max-width: 320px; margin: 0 auto; }

.hero-mini {
    padding: 110px 0 70px 0;
}
.hero-mini h1 { font-size: 27px; }


/* 9. FAIXA DE INFORMAÇÕES RÁPIDAS ------------------------------------------ */
.faixa-info {
    background: var(--branco);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-card);
    border: 1px solid var(--linha);
    margin-top: -60px;
    position: relative;
    z-index: 5;
    padding: 22px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.faixa-info-item { text-align: center; }
.faixa-info-item i {
    font-size: 20px;
    color: var(--azul-eletrico);
    margin-bottom: 8px;
}
.faixa-info-item h5 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--texto-claro);
    margin: 0 0 4px 0;
}
.faixa-info-item p {
    font-size: 13px;
    font-weight: 700;
    color: var(--preto);
    margin: 0;
}


/* 10. GRID DE CARDS (menu estilo app) -------------------------------------- */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.menu-card {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    box-shadow: var(--sombra-card);
    padding: 22px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 130px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
}
.menu-card:active { transform: scale(0.96); }
.menu-card:hover { transform: translateY(-3px); border-color: var(--azul-eletrico); }
.menu-card i { font-size: 28px; }
.menu-card h3 { font-size: 13.5px; color: var(--texto-escuro); font-weight: 700; }
.menu-card .selo-novo {
    position: absolute; top: 10px; right: 10px;
    background: var(--azul-eletrico); color: var(--branco);
    font-size: 9px; font-weight: 800;
    padding: 3px 7px; border-radius: 4px;
}
.mc-programacao i { color: #e17055; }
.mc-hospedagem i { color: #6c5ce7; }
.mc-percurso i { color: var(--cor-natacao); }
.mc-inscricoes i { color: var(--azul-eletrico); }
.mc-elite i { color: var(--amarelo-sol); }
.mc-chegar i { color: var(--cor-ciclismo); }
.mc-contato i { color: #25D366; }
.mc-regulamento i { color: var(--texto-medio); }
.mc-galeria i { color: #e84393; }
.mc-turismo i { color: #d9772f; }


/* 11. SEÇÕES GERAIS DE CONTEÚDO -------------------------------------------- */
.faixa-destaque {
    position: relative;
    border-radius: var(--raio-card);
    padding: 30px 22px;
    color: var(--branco);
    overflow: hidden;
    background: linear-gradient(120deg, rgba(6,6,20,0.55), rgba(6,6,20,0.85)), var(--gradiente-evento);
    background-size: 220% 220%;
    background-position: 30% 30%;
}
.faixa-destaque .eyebrow { color: var(--amarelo-sol); }
.faixa-destaque h2 { color: var(--branco); font-size: 22px; font-weight: 800; }
.faixa-destaque p { color: rgba(255,255,255,0.85); font-size: 14px; }
.faixa-destaque .grupo-botoes { margin-top: 18px; max-width: 280px; }

.bloco-texto {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    padding: 24px 20px;
}
.bloco-texto h3 {
    color: var(--preto);
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bloco-texto h3 i { color: var(--azul-eletrico); }
.bloco-texto p, .bloco-texto li {
    font-size: 14px;
    color: var(--texto-medio);
    line-height: 1.7;
}
.bloco-texto li { margin-bottom: 6px; padding-left: 18px; position: relative; }
.bloco-texto li::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--azul-eletrico);
    position: absolute;
    left: 0; top: 8px;
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 18px; }


/* 12. CARDS DE HOTEL / CONTATO --------------------------------------------- */
.card-hotel {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    overflow: hidden;
    margin-bottom: 20px;
}
.card-hotel-faixa {
    background: var(--preto);
    color: var(--branco);
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.card-hotel-foto { width: 100%; height: 170px; object-fit: cover; display: block; }
.card-hotel-corpo { padding: 20px; }
.card-hotel h3 { color: var(--preto); font-size: 18px; font-weight: 800; }
.card-hotel p { font-size: 14px; color: var(--texto-medio); line-height: 1.7; }
.card-hotel-contatos {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 14px;
}
.pill-contato {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--gelo);
    padding: 8px 14px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--preto);
}
.pill-contato i { color: var(--azul-eletrico); }
.pill-contato.whats { background: #e7f9ee; color: #1a7a3d; }
.pill-contato.whats i { color: #25D366; }

.card-simples {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.card-simples .icone-redondo {
    width: 46px; height: 46px; min-width: 46px;
    border-radius: 50%;
    background: var(--gelo);
    display: flex; align-items: center; justify-content: center;
    color: var(--azul-eletrico); font-size: 18px;
}
.card-simples h4 { font-size: 14.5px; color: var(--preto); font-weight: 800; }
.card-simples p, .card-simples a { font-size: 13px; color: var(--texto-medio); line-height: 1.6; }


/* 13. LINHA DO TEMPO / PROGRAMAÇÃO (ACCORDION) ----------------------------- */
.dia-acordeao {
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    margin-bottom: 16px;
    overflow: hidden;
}
.dia-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
}
.dia-cabecalho-texto span { display: block; font-size: 11px; color: var(--texto-claro); text-transform: uppercase; letter-spacing: 1px; }
.dia-cabecalho-texto strong { font-size: 17px; color: var(--preto); font-weight: 800; }
.dia-cabecalho i.seta { transition: transform 0.3s ease; color: var(--azul-eletrico); }
.dia-acordeao.aberto .dia-cabecalho i.seta { transform: rotate(180deg); }
.dia-corpo {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0 20px;
}
.dia-acordeao.aberto .dia-corpo { padding-bottom: 18px; }

.evento-item {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--linha);
}
.evento-item:first-child { border-top: none; }
.evento-hora {
    min-width: 58px;
    font-weight: 800;
    color: var(--azul-eletrico);
    font-size: 13px;
}
.evento-texto strong { display: block; font-size: 14px; color: var(--texto-escuro); }
.evento-texto span { font-size: 12.5px; color: var(--texto-claro); }
.tag-elite {
    display: inline-block;
    background: var(--amarelo-sol);
    color: var(--preto);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
}


/* 14. TABELAS DE INSCRIÇÃO -------------------------------------------------- */
.tabela-wrap {
    overflow-x: auto;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio-card);
    margin-bottom: 22px;
}
.tabela-precos { min-width: 520px; }
.tabela-precos th {
    background: var(--preto);
    color: var(--branco);
    text-align: left;
    padding: 14px 16px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.tabela-precos td {
    padding: 13px 16px;
    font-size: 13.5px;
    color: var(--texto-medio);
    border-top: 1px solid var(--linha);
    white-space: nowrap;
}
.tabela-precos tr:hover td { background: var(--gelo); }
.tabela-precos td.preco { font-weight: 800; color: var(--preto); }
.rotulo-lote {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px 8px 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--preto);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* 15. SELOS / BADGES --------------------------------------------------------- */
.selo-pass {
    display: inline-flex; align-items: center; gap: 8px;
    background: #e7f9ee; color: #1a7a3d;
    padding: 10px 16px; border-radius: 50px;
    font-size: 13px; font-weight: 700;
}
.selo-pass i { font-size: 16px; }
.aviso-caixa {
    background: #fff8e6;
    border: 1px solid #ffe6a3;
    border-radius: var(--raio-card);
    padding: 16px 18px;
    font-size: 13.5px;
    color: #7a5a00;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.aviso-caixa i { color: var(--amarelo-sol); font-size: 18px; margin-top: 2px; }


/* 16. CARROSSEL DE FOTOS ----------------------------------------------------- */
.carrossel-wrap {
    position: relative;
}
.carrossel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.carrossel::-webkit-scrollbar { display: none; }
.carrossel-slide {
    flex: 0 0 84%;
    scroll-snap-align: center;
    border-radius: var(--raio-card);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--gradiente-evento);
}
.carrossel-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.carrossel-legenda {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 16px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
    color: var(--branco);
    font-size: 13px;
    font-weight: 700;
}
.carrossel-controles {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}
.carrossel-seta {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--linha);
    background: var(--branco);
    color: var(--preto);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
}
.carrossel-seta:hover { background: var(--preto); color: var(--branco); }


/* 17. GALERIA DE FOTOS + LIGHTBOX -------------------------------------------- */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.galeria-item {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
    background: var(--gradiente-evento);
    position: relative;
}
.galeria-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.galeria-item:hover img { transform: scale(1.06); }
.galeria-item .galeria-zoom {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: var(--branco);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
}

.lightbox {
    position: fixed; inset: 0;
    background: rgba(6,6,10,0.92);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px 16px;
}
.lightbox.ativo { display: flex; }
.lightbox img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 10px;
    margin: 0 auto;
}
.lightbox-legenda {
    color: rgba(255,255,255,0.8);
    text-align: center;
    font-size: 13px;
    margin-top: 14px;
}
.lightbox-fechar {
    position: absolute; top: 20px; right: 20px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    color: var(--branco);
    border: none;
    font-size: 18px;
    cursor: pointer;
}


/* 18. EMBED DE MAPA (STRAVA / GOOGLE MAPS) ----------------------------------- */
.mapa-embed-wrap {
    border-radius: var(--raio-card);
    overflow: hidden;
    border: 1px solid var(--linha);
}
.mapa-embed-wrap iframe { width: 100%; border: 0; display: block; }

/* Widget de rota do Strava (script strava-embeds.com) - o próprio Strava
   desenha um iframe interno; aqui só arredondamos os cantos do quadro. */
.strava-wrap {
    border-radius: var(--raio-card);
    overflow: hidden;
    border: 1px solid var(--linha);
    min-height: 220px;
    background: var(--gelo);
}


/* 19. FAIXA DE PATROCINADORES (ROLAGEM AUTOMÁTICA) --------------------------- */
.marquee-patrocinadores {
    overflow: hidden;
    position: relative;
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-trilho {
    display: flex;
    align-items: center;
    gap: 44px;
    width: max-content;
    animation: rolar-patrocinadores 40s linear infinite;
}
.marquee-patrocinadores:hover .marquee-trilho { animation-play-state: paused; }
@keyframes rolar-patrocinadores {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.patrocinador-item {
    height: 64px;
    min-width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.patrocinador-item img {
    max-height: 46px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
.patrocinador-item:hover img { filter: grayscale(0%); opacity: 1; }
.patrocinador-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    background: var(--gelo);
    border: 1px solid var(--linha);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--texto-medio);
    white-space: nowrap;
    text-align: center;
}


/* 20. POPUP DO GRUPO WHATSAPP ------------------------------------------------ */
.modal-wapp {
    position: fixed;
    inset: 0;
    background: rgba(6,6,10,0.75);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-wapp.ativo { display: flex; }
.modal-wapp-caixa {
    background: var(--branco);
    border-radius: var(--raio-card);
    padding: 30px 26px;
    max-width: 360px;
    width: 100%;
    position: relative;
    text-align: center;
}
.modal-wapp-fechar {
    position: absolute;
    top: 14px; right: 14px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--gelo);
    color: var(--preto);
    font-size: 15px;
    cursor: pointer;
}
.modal-wapp-cabecalho { margin-bottom: 20px; }
.modal-wapp-cabecalho i {
    font-size: 34px;
    color: #25D366;
    display: block;
    margin-bottom: 10px;
}
.modal-wapp-cabecalho h3 { font-size: 18px; color: var(--preto); font-weight: 800; }
.modal-wapp-opcoes { display: flex; flex-direction: column; gap: 12px; }


/* 21. RESPONSIVIDADE (telas maiores) ---------------------------------------- */
@media (min-width: 768px) {
    .nav-desktop { display: flex; align-items: center; }
    .btn-hamburguer { display: none; }
    .marca-logo { height: 40px; }

    .hero-video-bg { display: block; }

    .hero h1 { font-size: 46px; }
    .hero-logo { max-width: 460px; margin-bottom: 24px; }
    .hero-data { font-size: 19px; }
    .hero .grupo-botoes { flex-direction: row; max-width: none; justify-content: center; }

    .faixa-info { grid-template-columns: repeat(4, 1fr); padding: 28px 30px; }

    .patrocinador-item img { max-height: 54px; max-width: 170px; }

    .menu-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .grupo-botoes.linha-desktop { flex-direction: row; }

    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }

    .rodape-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }

    .faixa-destaque { padding: 46px 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .faixa-destaque .grupo-botoes { margin-top: 0; }

    .carrossel-slide { flex: 0 0 44%; }
    .galeria-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .hero h1 { font-size: 54px; }
    .carrossel-slide { flex: 0 0 31%; }
}