#myBtn {display: none;position: fixed;bottom: 1.25em;right: -1em;z-index: 99;outline: none;background-color: #8ca135;color: #fff;cursor: pointer;padding: 0.3em;border-radius: 0.45em;font-family: 'UnimedSans-Regular';font-size: 2em;width: 2.0625em;height: 2.0625em;border-radius: 50%;margin: 2.5em;text-align: center;}#myBtn:hover {background-color: #ccc;color: #fff;}

html, body{
	background:#F7FFCA;
}

.banner_fundo {
background-image: url(../img/fundo-banner.png);
    width: 100%;
    height: 100%;
    min-height: 67.5em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
	position:relative;
	z-index:1;
}

.logo_1{
width: 100%;
    max-width: 27em;
    margin-top: 19em;
}

.logo_2{
    width: 100%;
    max-width: 12em;
    margin-left: 7em;
    margin-top: 3em;
}

.logo_3{
width: 100%;
    max-width: 16em;
    margin-left: 35em;
    margin-top: 12em;
}

.logo_4{
    width: 100%;
    max-width: 16em;
    margin-left: 35em;
    margin-top: 3em;
}

.logo_5{
    width: 100%;
    max-width: 70em;
    margin: 0 auto;
    display: block;
    margin-top: 6em;
}

.trio_percursos{
    width: 100%;
    max-width: 16em;
    margin-left: 35em;
    margin-top: 3em;
}

.hist_folha{
    width: 100%;
    max-width: 120em;
	margin:0 auto;
	display:block;	
	margin-top: -1.5em;
	position:relative;
	z-index:0;
}

.titulo_historia{
	font-family: 'Adumu';
    font-size: 6em;
    text-align: center;
    color: #3F3F3D;
    margin-top: 1em;
}

.texto_historia{
    font-family: 'UnimedSans-Regular';
    font-size: 1.3em;
    color: #3F3F3D;
    margin-top: 2em;
    line-height: 2em;
	text-align: center;
}

.tp8{
	margin-top:8em;
}

.fundo_verde{
	background:#BDE52E;
}


/*video youtube box*/

.container_video {
    max-width: 75em;
    margin: 0 auto;
	padding-top:3em;
}

.main-content {
    display: flex;
	align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.video-section {
    flex: 1;
}

#video-container {
    background-color: #16213e;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/9;
}

#youtube-player {
    width: 100%;
    height: 100%;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.video-thumbnail:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.play-button svg {
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

.logo-lateral {
    width: 12.5em;
}

#logo-lateral{
	position: absolute;
    width: 12em;
    margin-left: 5em;
    margin-top: -6em;
}

.logo-box {
    background-color: #0f3460;
    border-radius: 10px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.logos-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.scroll-btn {
	display:none !important;
    background-color: #8ca135;
    border: none;
    width: 45px;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.scroll-btn:hover {
    background-color: #004E4C;
    transform: scale(1.1);
}

.logos-bottom {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    max-width: 100%;
    padding: 10px 0;
    scrollbar-width: none;
}

.logos-bottom::-webkit-scrollbar {
    display: none;
}

.logo-item {
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-weight: bold;
    border: 3px solid transparent;
}

.logo-item:hover {
    transform: translateY(-5px);
}

.logo-item.active {

}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .main-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .video-section {
        width: 100%;
    }
    
    .logo-lateral {
        width: 100%;
        order: -1;
    }
    
    .logo-box {
        height: 60px;
        font-size: 16px;
    }
    
    .logos-wrapper {
        gap: 5px;
        padding: 0 5px;
    }
    
    .logos-bottom {
        max-width: calc(100vw - 120px);
        gap: 10px;
    }
    
    .logo-item {
        padding: 12px 16px;
        font-size: 12px;
        flex-shrink: 0;
        min-width: 70px;
        text-align: center;
    }
    
    .scroll-btn {
        width: 35px;
        height: 35px;
    }
    
    .scroll-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .play-button svg {
        width: 50px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 8px;
    }
    
    .main-content {
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .logo-box {
        height: 50px;
        font-size: 14px;
        border-radius: 8px;
    }
    
    #video-container {
        border-radius: 8px;
    }
    
    .logos-bottom {
        max-width: calc(100vw - 100px);
        gap: 8px;
    }
    
    .logo-item {
        padding: 10px 12px;
        font-size: 11px;
        border-radius: 8px;
        min-width: 60px;
        border-width: 2px;
    }
    
    .scroll-btn {
        width: 30px;
        height: 30px;
    }
    
    .scroll-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .play-button svg {
        width: 40px;
        height: 28px;
    }
}
/*final */

.img-normal, .img-hover{
	width:6.5em;
	height:6.5em;
}
.troca-foto .img-hover {
  display: none; /* Esconde a foto de hover por padrão */
}

.troca-foto:hover .img-normal {
  display: none; /* Esconde a normal quando o mouse passa */
}

.troca-foto:hover .img-hover {
  display: inline-block; /* Mostra a de hover quando o mouse passa */
}

.fundo_camiseta{
    width: 44em;
    position: absolute;
    z-index: 0;
    cursor: pointer;
    margin-left: 2em;
}


.camiseta{
    position: relative;
    z-index: 1;
    width: 33em;
    cursor: pointer;
    margin-left: 7em;
	
}


.camiseta3{
    position: relative;
    z-index: 1;
    width: 40em;
    cursor: pointer;
	
}

.adquira{
width: 100%;
    max-width: 20em;
    margin: 0 auto;
    display: block;
    margin-bottom: 5em;
	cursor:pointer;
	
}

.bloco_verde_ouro{
	width:50em;
	position:absolute;
	z-index:0;
}

.escrito_kit_ouro{
position: relative;
    z-index: 1;
    width: 16em;
    margin: 0 auto;
    display: block;
    margin-top: 2em;
}

.escrito_kit_ouro2{
position: relative;
    z-index: 1;
    width: 20em;
    margin: 0 auto;
    display: block;
    margin-top: 2em;
}

.central_lf{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-left: -12.5em;
    margin-top: -4em;
}

.tp5{
	margin-top:5em;
}

.camiseta_prata{
position: relative;
    z-index: 1;
    width: 30em;
    cursor: pointer;
    margin-top: -9em;
    margin-left: 2em;
	
}

.fundo_camiseta_prata{
	width:40em;
	position:absolute;
	z-index:1;
	cursor:pointer;
	margin-top: -4em;
}

.bloco_verde_prata{
	width:50em;
	position:absolute;
	z-index:0;
	    margin-left: -10em;
		margin-top: -10em;
}

.escrito_kit_prata{
position: relative;
    z-index: 1;
    width: 16em;
    margin: 0 auto;
    display: block;
    margin-top: -7em;
}

.fundo_parallax{
	max-width:120.0625em;
	margin:0 auto;
	display:block;
}

.parallax {
  /* The image used */
  background-image: url("../img/imagem-inscreva-se.png");

  /* Set a specific height */
  min-height: 1016px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top:-23em;
  margin-bottom: -20em;
}

.titulo_inscricoes{
    font-family: 'Adumu';
    font-size: 6em;
    color: #FFF;
	text-align: center;
	margin-bottom: 0.5em;
}

.fundo_manual_do_atleta{
	max-width: 635px;    /* Não passa de 400px */
    width: 100%;         /* Ocupa tudo se a tela for menor que 400px */
    height: 180px;

    /* Caminho da imagem */
    background-image: url('../img/botao-manual-do-atleta.svg');

    /* Ajustes essenciais para a imagem não repetir e cobrir o espaço */
    background-size: auto;      /* Faz a imagem preencher toda a div */
    background-position: center; /* Centraliza a imagem na área */
    background-repeat: no-repeat; /* Evita que a imagem duplique */	
	
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	font-family: 'Adumu';	
	font-size:2em;
	color:#004E4C;
	position: relative;
    margin-left: -3em;	
	cursor:pointer;
}

.fundo_manual_inscreva{
	max-width: 635px;    /* Não passa de 400px */
    width: 100%;         /* Ocupa tudo se a tela for menor que 400px */
    height: 180px;

    /* Caminho da imagem */
    background-image: url('../img/botao-inscreva-se.svg');

    /* Ajustes essenciais para a imagem não repetir e cobrir o espaço */
    background-size: auto;      /* Faz a imagem preencher toda a div */
    background-position: center; /* Centraliza a imagem na área */
    background-repeat: no-repeat; /* Evita que a imagem duplique */	
	
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	font-family: 'Adumu';	
	font-size:2em;
	color:#004E4C;
	cursor:pointer;
}

.fundo_manual_regulamento{
	max-width: 635px;    /* Não passa de 400px */
    width: 100%;         /* Ocupa tudo se a tela for menor que 400px */
    height: 180px;

    /* Caminho da imagem */
    background-image: url('../img/botao-regulamento.svg');

    /* Ajustes essenciais para a imagem não repetir e cobrir o espaço */
    background-size: auto;      /* Faz a imagem preencher toda a div */
    background-position: center; /* Centraliza a imagem na área */
    background-repeat: no-repeat; /* Evita que a imagem duplique */	
	
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	font-family: 'Adumu';	
	font-size:2em;
	color:#004E4C;
	position: relative;
    margin-left: 3em;
	cursor:pointer;
}

.titulo_percursos{
    font-family: 'Adumu';
    font-size: 6em;
    color: #3F3F3D;
	text-align: center;
	margin-bottom: 0.5em;
	margin-top:1em;
}

.fundo_verde_2{
	background:#BDE52E !important;
	height:75em;
}
/*percursos*/

.bola_perc{
width: 100%;
    max-width: 70em;
    position: absolute;
    margin-top: -5em;
}



.cinco{
width: 100%;
max-width: 13.5em;
height:7em;
background-repeat: no-repeat;
margin-top: 10em;
position: absolute;
margin-left: 64em;
display: inline-block;
background-image: url('../img/botao-sem-clique-5k.svg'); /* Imagem inicial */
background-size: cover; /* Ajusta o tamanho da imagem */
background-position: center; /* Centraliza a imagem */
border: none;
cursor: pointer;
transition: background-image 0.3s ease; /* Animação suave */
z-index:10;
}
.cinco:hover{
	background-image: url('../img/botao-clique-5k.svg');
}

.doze{
width: 100%;
max-width: 13.5em;
height:7em;
background-repeat: no-repeat;
margin-top: 20em;
position: absolute;
margin-left: 64em;
display: inline-block;
background-image: url('../img/botao-sem-clique-12k.svg'); /* Imagem inicial */
background-size: cover; /* Ajusta o tamanho da imagem */
background-position: center; /* Centraliza a imagem */
border: none;
cursor: pointer;
transition: background-image 0.3s ease; /* Animação suave */
z-index:10;
}
.doze:hover{
	background-image: url('../img/botao-clique-12k.svg');
}

.vinteum{
width: 100%;
max-width: 13.5em;
height:7em;
background-repeat: no-repeat;
margin-top: 30em;
position: absolute;
margin-left: 64em;
display: inline-block;
background-image: url('../img/botao-sem-clique-21k.svg'); /* Imagem inicial */
background-size: cover; /* Ajusta o tamanho da imagem */
background-position: center; /* Centraliza a imagem */
border: none;
cursor: pointer;
transition: background-image 0.3s ease; /* Animação suave */
z-index:10;
}
.vinteum:hover{
	background-image: url('../img/botao-clique-21k.svg');
}

#mapa{
	width: 100%;
    max-width: 85.75em;
    position: absolute;
    margin-left: -17em;
    margin-top: 1.7em;
}

#foto_mapa{
	width: 100%;
    max-width: 85.75em;	
}


.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 99999999999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	overflow-y: scroll;
	}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
	}
.modalDialog > div {
	width: 90%;
	position: relative;
	margin: 3% auto;
	background: -moz-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	z-index:777;
	}
.close {
	font-family: 'UnimedSans-SemiBold';
	background: #D94116;
	color: #FFFFFF;
	line-height: 48px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 50px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
	cursor: pointer;
	z-index:888;
	}
.close:hover {
	background: #ffffff;
	color:#A71680;
	cursor: pointer;
	width: 50px;
	}
.fotofull{
	width:100%;
	max-width:100%;
	height:auto;
	margin:0 auto;
	display:block;
}

.fundo_mapa{
	position: absolute;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 88em;
    /* height: 60em; */
    margin-left: -18em;
}

/*final percursos*/


.titulo_faq{
    font-family: 'Adumu';
    font-size: 6em;
    color: #004E4C;
	text-align: center;
	margin-bottom: 0.5em;
}


/* accordion */

.accordion {
background-color: #EEF4B5;
    color: #004E4C;
    cursor: pointer;
    padding: 1em;
    width: 100%;
    border: 0px;
    text-align: left;
    outline: none;
    font-size: 1.5em;
    transition: 0.4s;
    position: relative;
    text-align: center;
    margin-top: 1em;
    font-family: 'UnimedSans-Regular';
}

.active, .accordion:hover {
  background-color: white;
}

.accordion::after {
  content: "+";
  position: absolute;
  right: 18px;
  font-size: 20px;
  color: #444;
}

.accordion.active::after {
  content: "-";
}

.panel {
        padding-bottom: 1em;
    padding-left: 2em;
    padding-right: 2em;
    display: none; 
    background-color: white;
    overflow: hidden;
    font-size: 1.5em;
    font-family: 'UnimedSans-Regular';
    color: #a7a3a3;
}
p, b{
	font-family: 'UnimedSans-Regular';
}

/* fim accordion */


.fundo_verde_3{
	background:#EEF4B5;
}

.box_patro{
    width: 80%;
    height: 22em;
    background-repeat: no-repeat;
    background-image: url(../img/box.svg);
    background-size: auto;
    background-position: center;
    margin: 0 auto;
    display: block;
}

.box_patro2{
    width: 80%;
    height: 25em;
    background-repeat: no-repeat;
    background-image: url(../img/box.svg);
    background-size: auto;
    background-position: center;
    margin: 0 auto;
    display: block;
	margin-top:-5em;
}

.box_patro3{
    width: 80%;
    height: 25em;
    background-repeat: no-repeat;
    background-image: url(../img/box.svg);
    background-size: auto;
    background-position: center;
    margin: 0 auto;
    display: block;
	margin-top:-5em;
}

.ouro{
	font-family: 'Adumu';
    font-size: 1.7em;
    color: #004E4C;
	text-align: center;
	margin-top: 1.5em;
}

.logo_sicredi{
	width:100%;
	max-width:25em;
	margin:0 auto;
	display:block;
	margin-top: 1em;
}

.org_logo_1{
	width:100%;
	max-width:13em;
	margin:0 auto;
	display:block;
	margin-top:8em;
}

.org_logo_2{
	width:100%;
	max-width:9em;
	margin:0 auto;
	display:block;
	margin-top:8em;
}

.org_logo_3{
	width:100%;
	max-width:12em;
	margin:0 auto;
	display:block;
	margin-top:8em;
}

.rodape{
width: 100%;
    max-width: 120em;
    height: 26.1875em;
    background-repeat: no-repeat;
    background-image: url(../img/fundo-rodape.png);
    background-size: auto;
    background-position: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.rodape_logo_1{
	width:100%;
	max-width:18em;
	margin-top:3em;
}

.rodape_logo_2{
	width:100%;
	max-width:17em;
	margin-left: 11em;
}


.rodape_logo_3{
    width: 100%;
    max-width: 15em;
    margin-top: 3em;
    margin-left: 11em;
}


.rodape_social{
    width: 100%;
    max-width: 3.5em;
    margin-top: 5em;
}

.rodape_uni{
    width: 100%;
    max-width: 15em;
    margin-left: 5.5em;
    margin-top: 3em;
}


     .marquee-container {
            width: 100%;
            overflow: hidden;
            padding: 20px 0;
            position: relative;
        }

        .marquee-track {
            display: flex;
            /*animation: scroll 20s linear infinite;*/
            width: max-content;
        }

        .marquee-track:hover {
            /*animation-play-state: paused;*/
        }

        .logo-items {
            width: 12.5em;
            flex-shrink: 0;
            margin: 0 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
           
            transition: transform 0.3s;
        }

        .logo-items:hover {
            transform: scale(1.05);
        }

        .logo-items img {
            max-width: 180px;
            max-height: 180px;
            object-fit: contain;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* Para efeito contínuo sem quebra */
        .marquee-track {
            /*animation: scroll 20s linear infinite;*/
        }
		
		
.img-zoom-container {
  position: relative; /* Obrigatório para o z-index da lupa funcionar */
  display: inline-block;
}

.img-zoom-lens {
  position: absolute;
  /* Garante que a bola fique acima da imagem */
  z-index: 999; 
  
  /* Evita que a bola "roube" o foco do mouse, 
     permitindo que o JavaScript leia a posição na imagem abaixo */
  pointer-events: none; 

  border: 3px solid #fff;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  background-repeat: no-repeat;
  display: none;
}

#myimage {
  display: block;
  z-index: 1; /* Imagem fica na camada de baixo */
}