:root {
     --fonte: 20px;
     --fundo: #e66d0b;
     --texto: #0d2b45;
     --card: #d04c36;
 }

 body {
     background:
         linear-gradient(rgba(55, 31, 0, 0.55),
             rgba(247, 90, 0, 0.55)),
         url("../img/bg2.png");

     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

     background-attachment: fixed;
     /* Fundo fica parado */

     color: var(--texto);
     font-size: var(--fonte);
     font-family: 'Poppins', sans-serif;
 }

 /* TOPO COM BANDEIRINHAS */

 .bandeiras {
     height: 70px;
     margin-bottom: 0%;
     background-image:
         repeating-linear-gradient(90deg,
             #ff0000 0px 40px,
             #ffd000 40px 80px,
             #00aa44 80px 120px,
             #0066ff 120px 160px);

     clip-path: polygon(0 0, 100% 0,
             100% 50%,
             95% 100%, 90% 50%, 85% 100%, 80% 50%,
             75% 100%, 70% 50%, 65% 100%, 60% 50%,
             55% 100%, 50% 50%, 45% 100%, 40% 50%,
             35% 100%, 30% 50%, 25% 100%, 20% 50%,
             15% 100%, 10% 50%, 5% 100%, 0 50%);

     animation: balanco 4s infinite ease-in-out;
 }

 @keyframes balanco {
     0% {
         transform: rotate(0deg);
     }

     50% {
         transform: rotate(1deg);
     }

     100% {
         transform: rotate(0deg);
     }
 }

 /* HERO */

 .hero-junino {

     min-height: 40vh;

     background:
         linear-gradient(rgba(0, 0, 0, .55),
             rgba(0, 0, 0, .55)),
         url("../img/hero.png");

     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;

     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;

 }

 .hero-overlay {

     width: 100%;
     text-align: center;
     padding: 40px;
 }

 .hero-layout {

     display: flex;
     flex-direction: column;
     align-items: flex-start;

     max-width: 1000px;
     margin: auto;
 }

 .hero-logo {

     width: 100%;
     text-align: center;
 }

 .hero-logo img {

     width: 580px;
     height: auto;

     margin-bottom: 2px;
 }


 .hero-content {
     background: rgba(0, 0, 0, .35);
     backdrop-filter: blur(3px);
     padding: 20px;
     max-width: 800px;
     margin: auto;
     border-radius: 15px;
     text-align: center;
     color: #d1f7d6;
 }

 .hero-content h1 {

     font-size: 4rem;
     font-weight: bold;
     margin-top: 3%;
 }

 .hero-content h2 {

     font-size: 2rem;
     margin-bottom: 20px;
 }

 .hero-content p {

     font-size: 1.4rem;
     line-height: 1.8;
 }

 /* MENU DE AÇÕES */

 .menu-acoes {


     max-width: 800px;

     margin: 10px auto;

     padding: 20px;

     border-radius: 20px;

     display: flex;

     justify-content: center;

     align-items: center;

     gap: 20px;

     box-shadow: 0 5px 20px rgba(9, 9, 9, 0.687);
 }

 /* BOTÕES */

 .btn-menu {

     text-decoration: none;

     padding: 15px 30px;

     border-radius: 15px;

     font-size: 1.2rem;

     font-weight: bold;

     transition: all .3s ease;
 }

 /* CADASTRO */

 .btn-menu.cadastro {

     background: #ff5507;

     color: #fdfafa;
 }

 .btn-menu.cadastro:hover {

     transform: translateY(-3px);

     background: #ffb300;
 }

 /* CONSULTA */

 .btn-menu.consulta {

     background: #198754;

     color: white;
 }

.btn-menu.consulta:hover {

     transform: translateY(-3px);

     background: #157347;
}
.table-responsive {
    background: white;
    padding: 20px;
    border-radius: 15px;
}

.table {
    margin-bottom: 0;
}

.alert {
    border-radius: 12px;
}

.form-control-lg {
    border-radius: 12px;
}

.btn-warning {
    font-weight: bold;
}

 .hero {
     padding: 60px 20px;
     text-align: center;
 }

 .hero h1 {
     font-size: 3rem;
     font-weight: bold;
 }

 .hero p {
     font-size: 1.3rem;
 }

 .card-junino {
     border: none;
     border-radius: 20px;
     padding: 20px;
     box-shadow: 0 0 20px rgba(18, 18, 18, 0.4);
     background: rgba(255, 255, 254, 0.937);
     backdrop-filter: blur(3px);
     height: 100%;
 }

 /* LOGOS DOS PARCEIROS */

 .hero-parceiros {

     position: absolute;

     bottom: 20px;
     right: 10%;

     display: flex;

     align-items: center;

     gap: 20px;
 }

 .hero-parceiros img {

     height: 120px;

     width: auto;

     padding: 8px;

     border-radius: 12px;


 }

 /* CARDS BENEFICIOS */
 .beneficios {
     padding: 5px;
 }

 .titulo-secao {

     text-align: center;

     color: white;

     margin-bottom: 20px;
     margin-top: 0%;
     font-size: 2rem;

     font-weight: bold;
 }


 .card-junino:hover {

     transform: translateY(-5px);
 }

 .card-junino h3 {

     font-size: 1.4rem;

     margin-bottom: 20px;
 }

 .card-junino p {

     font-size: 1rem;

     margin: 0;
 }

 .beneficios .row {

     display: flex !important;

     flex-direction: row !important;

     flex-wrap: nowrap !important;

     gap: 20px;

 }

 .beneficios .col-md-4 {

     width: 33.33% !important;

     flex: 0 0 33.33% !important;

     max-width: 33.33% !important;

 }

 /* ALERTAS */

 .alert {
     border-radius: 15px;
     font-size: 1.1rem;
     padding: 15px 20px;
     margin-bottom: 20px;
     position: relative;
 }

 /* BOTÃO FECHAR */

 .alert .btn-close {
     position: absolute;
     top: 15px;
     right: 15px;
     opacity: 1;
     transform: scale(1.2);
 }

 .alert .btn-close:hover {
     transform: scale(1.4);
 }

 /* CORES PERSONALIZADAS */

 .alert-danger {
     background: #ffe5e5;
     border: 2px solid #ff4d4d;
     color: #8b0000;
 }

 .alert-warning {
     background: #fff6d6;
     border: 2px solid #ffc107;
     color: #664d03;
 }

 .alert-success {
     background: #d1f7d6;
     border: 2px solid #198754;
     color: #0f5132;
 }

 .acessibilidade {
     position: fixed;
     right: 15px;
     top: 10px;
     z-index: 999;
 }

 .acessibilidade button {
     width: 60px;
     height: 60px;
     margin-bottom: 10px;
     font-size: 22px;
     font-weight: bold;
 }

 .alto-contraste {
     background: black !important;
     color: yellow !important;
 }

 .alto-contraste .card-junino {
     background: #111 !important;
     color: white !important;
 }

 .card-junino img {
     /* Limita a largura da imagem a 100% da largura do card pai */
     max-width: 100%;

     /* Mantém a proporção da imagem ao ajustar a largura */
     height: auto;

     /* Centraliza a imagem horizontalmente se for menor que o card */
     display: block;
     margin-left: auto;
     margin-right: auto;

     /* Opcional: Adiciona um pequeno espaçamento acima da imagem para separá-la do texto */


     /* Opcional: Adiciona bordas arredondadas se você quiser (como as dos cards) */
     /* border-radius: 10px; */
 }
 

 footer {

     padding: 10px;
     text-align: center;
     background:
         linear-gradient(rgba(0, 0, 0, .55),
             rgba(0, 0, 0, .55)),
         url("../img/hero.png");

     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: white;
 }

 .form-control,
 .form-select {
     border-radius: 15px;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: #ff9900;
     box-shadow: 0 0 10px rgba(255, 153, 0, .3);
 }

 .btn-warning {
     border-radius: 15px;
     font-size: 1.2rem;
     padding: 15px;
 }

 .btn-warning:hover {
     transform: translateY(-2px);
     transition: .3s;
 }

 .evento-card {
     background:
         linear-gradient(rgba(0, 0, 0, .55),
             rgba(0, 0, 0, .55)),
         url("../img/fundo_e.jpg");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
     transition: .3s;
     color: white;
 }

 .evento-card img {
     border-radius: 10%;
     box-shadow: 0 0 5px rgba(250, 248, 248, 0.918);
 }

 .evento-card:hover {
     transform: translateY(-5px);
 }
input[type="checkbox"]:checked + .evento-card {
    border: 3px solid #f1ce07;
}

 .eventos-scroll {
     display: flex;
     gap: 20px;
     overflow-x: auto;
     padding: 15px 5px;
     scroll-behavior: smooth;
 }

 .eventos-scroll::-webkit-scrollbar {
     height: 10px;
 }

 .eventos-scroll::-webkit-scrollbar-thumb {
     background: #f0ad4e;
     border-radius: 10px;
 }

 .evento-item {
     min-width: 280px;
     max-width: 280px;
     flex-shrink: 0;
 }

 .evento-card {
     cursor: pointer;
     transition: 0.3s;
     border: 3px solid transparent;
 }

 .evento-card:hover {
     transform: translateY(-5px);
 }

 input[type="radio"]:checked+.evento-card {
     border: 3px solid #ffaa00a6;
     box-shadow: 0 0 15px rgb(255, 123, 0);
 }

 
.propagandas{
    padding-top: 5%;
    margin: 10px;
}
.propagandas img{
    margin: 60px;
    width: 35%;
    border-radius: 10%;
}
.propaganda-box {
    display: flex;
    align-items: center;
}

.propaganda-texto {
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(3px);
    padding: 20px;
    border-radius: 15px;
    color: #d1f7d6;
    width: 100%;
}

/* Responsivo */
@media (max-width: 768px) {
    .propaganda-box {
        flex-direction: column;
        text-align: center;
    }
}

.popup-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-box{
    background:
    linear-gradient(rgba(0, 0, 0, .55),
    rgba(0, 0, 0, .55)),
    url("../img/hero.png");
    color:white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 0 20px rgba(0,0,0,.3);
}
.popup-box img{
    width: 50%;
}
.popup-box h2{
    color: #d35400;
    margin-bottom: 15px;
}
.card-junino {
max-width: 1000px;
margin: auto;
}

.hero-junino {
padding: 40px 0;
}

.hero-content {
margin-bottom: 25px;
}

.eventos-scroll {
display: flex;
gap: 20px;
overflow-x: auto;
padding: 15px 5px;
scroll-behavior: smooth;
}

.evento-item {
min-width: 280px;
max-width: 280px;
flex-shrink: 0;
}
.whatsapp-box {

    display: inline-block;

    background: rgba(251, 128, 6, 0.202);

    backdrop-filter: blur(5px);

    padding: 15px;

    border-radius: 20px;

    transition: all .3s ease;

}

.whatsapp-box:hover {

    background: rgba(253, 73, 2, 0.2);

    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);

    transform: translateY(-3px);

}

.btn-whatsapp {

    display: inline-block;

    background: #04040462;

    color: white;

    text-decoration: none;

    font-weight: bold;

    padding: 12px 25px;

    border-radius: 12px;

    transition: all .3s ease;

}

.btn-whatsapp:hover {

    color: white;

    transform: scale(1.05);

}