/* BASE */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    border: 0;
    cursor: default;
    user-select: none;
}

a, button, .btn, .card{
    cursor: pointer;
}

a.card{
    text-decoration: none;
    color: black;
}

/* SCROLL REVEAL */
.reveal{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visivel{
    opacity: 1;
    transform: translateY(0);
}

@font-face {
    font-family: monserrat;
    src: url(fonte/Montserrat-VariableFont_wght.ttf);
    font-weight: normal;
}

@font-face {
    font-family: monserrat;
    src: url(fonte/static/Montserrat-Bold.ttf);
    font-weight: bold;
}



body{
    background-color: #123c5a;
    font-family: monserrat;
}

img, svg, video {
    width: 100%;
    height: auto;
    display: block;
}

.grelha{
    display:grid;
    grid-template-columns: repeat(12,1fr);
    column-gap:20px;
}

.max{
    max-width:1200px;
    margin:0 auto;
}

.banda{
    width: 100%;
}

.bege{
    background-color: #ECEBDD;
    position: relative;
}

/* HEADER */
header{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    z-index: 1000;
    background-color: rgba(14, 58, 90, 0.7);
}

#topo{
    grid-column: 1/13;
    z-index: 10;
}

#logo{
    grid-column: 1/3;
    width: 114px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
}

nav{
    grid-column: 3/13;
    justify-self: flex-end;
    align-self: center;
    margin-right: 20px;
}

#hero-imagem{
    position: relative;
    margin-top: 0;
}

#img-inicio{
    width: 100%;
}

#desfoque{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}






nav ul{
    display:flex;
    gap:25px;
    list-style:none;
}

nav a{
    color:white;
    text-decoration:none;
}

nav a:hover{
    color: #FFD012;
    transition: color 0.2s ease;
}

nav a.ativo{
    color:#FFD012;
    font-weight: bold;
}

/* HERO */



.frase-pc{
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    gap: 10px;
    grid-column: 1/13;
}



.frase-pc img{
    width: auto;
   
}

.subtexto{
    grid-column: 1/13; 
    text-align: center;
    margin-top: 20px;
    font-size: 35px;
}






.hero{
    display:flex;
    align-items:center;
    padding-bottom: 200px;
}

.hero-content{
    grid-column:1/13;
    text-align:center;
    color:white;
}

.hero h1{
    font-size:90px;
    color:yellow;
}

.hero h2{
    font-size:40px;
}

.hero p{
    margin-top:10px;
     width: 100%;
    margin-top: 20px;
 
}

/* SOBRE */
.secao-clara{
background-color: #ECEBDD;
    padding:100px 0;
    background-size: cover;
}



.txt-esq h2{
    grid-column: 1/6;
    margin-bottom: 43px;
    line-height: 37px;
    color: #0E3A5A;

}


.txt-esq{
    grid-column:2/7;
    line-height: 37px;
    font-size: 20px;
}

.img-dir{
    grid-column:7/12;
    padding-top: 117px;
}

.img-dir img{
    width:100%;
    border-radius:10px;
}

/* TRADIÇÕES */

#gdc-1{
    grid-column: 8/13;
    width: 260px;
    height: 260px;
    justify-self: flex-end;
    grid-row: 1;
}

#gdc-2{
    grid-column: 1/7;
    width: 500px;
    height: 500px;
    grid-row: 3;
    z-index: 10;
    position: relative;
    top: 450px;
    transform: scaleX(-1);
}

.tradicoes{
    background:#123c5a;
    color:white;
    text-align:center;
    padding-bottom: 120px;
}


.tradicoes p{
    font-size: 20px;

}

.tradicoes h2{
    font-size: 34px;
    margin-bottom: 34px;

}

#texto-tradicoes{
    grid-column: 1/13;
    align-items: center;
    margin-bottom: 45px;
    grid-row: 1;
    margin-top: 120px;
}

.cards{
    grid-column:1/13;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top:40px;
    grid-row: 3;
}

.card{
    background:white;
    color:black;
    padding: 20px 20px 0px 20px;
    border-radius:20px;
    width: 30%;
    min-width: 300px;
    transition: transform 0.15s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.card:hover{
    transform: scale(1.07);
}

.card img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.card h3{
    margin-top: 25px;
    margin-bottom: 12px;
    font-size: 25px;
    text-align: center;
}

.card p{
    font-size: 16px;
    text-align: center;
    margin-bottom: 40px;
}






@keyframes flutuar {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-14px) rotate(4deg); }
}

@keyframes flutuarB {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-10px) rotate(-3deg); }
}

/* SECAO-CLARA CONFETES */

.sc-confete{
    position: absolute;
    pointer-events: none;
    animation: flutuar 3.5s ease-in-out infinite;
}

.sc-confete:nth-child(even){
    animation: flutuarB 4.2s ease-in-out infinite;
}

.sc-confete:nth-child(3n){
    animation-duration: 5s;
    animation-delay: -1.5s;
}

/* estrela — topo direito, entre secções */
#sc-star { width: 220px; right: 40px; top: -110px; }

/* canto superior esquerdo (4) — sem sobreposição entre eles nem sobre texto */
#sc-tl-1 { width: 78px;  left: 5px;   top: 20px;  } /* espiral:  5–83px / top 20–92px  */
#sc-tl-2 { width: 44px;  left: 100px; top: 18px;  } /* retâng: 100–144px / top 18–40px */
#sc-tl-3 { width: 24px;  left: 108px; top: 70px;  } /* bola:   108–132px / top 70–94px */
#sc-tl-4 { width: 34px;  left: 12px;  top: 98px;  } /* coração: 12–46px  / top 98–132px*/

/* canto inferior esquerdo (5) — entre secao-clara e secao abaixo, sem sobreposição */
#sc-bl-1 { width: 105px; left: 5px;   bottom: 5px;   } /* espiral:  5–110px / bot 5–102px  */
#sc-bl-2 { width: 46px;  left: 115px; bottom: 55px;  } /* retâng: 115–161px / bot 55–78px  */
#sc-bl-3 { width: 22px;  left: 120px; bottom: 25px;  } /* bola:   120–142px / bot 25–47px  */
#sc-bl-4 { width: 26px;  left: 5px;   bottom: 112px; } /* bola:    5–31px   / bot 112–138px*/
#sc-bl-5 { width: 38px;  left: 55px;  bottom: 118px; } /* retâng:  55–93px  / bot 118–137px*/

/* centro direito (4) — sem sobreposição, pode tocar ligeiramente a imagem */
#sc-rc-1 { width: 95px;  right: 8px;  top: 40%;  } /* espiral */
#sc-rc-2 { width: 26px;  right: 80px; top: 26%;  } /* bola — acima do espiral */
#sc-rc-3 { width: 42px;  right: 12px; top: 63%;  } /* retâng — abaixo do espiral */
#sc-rc-4 { width: 22px;  right: 85px; top: 68%;  } /* bola — ao lado do retâng */

/* CTA CONFETES */

.cta-confete{
    position: absolute;
    pointer-events: none;
    animation: flutuar 3.8s ease-in-out infinite;
}

.cta-confete:nth-child(even){
    animation: flutuarB 4.5s ease-in-out infinite;
}

.cta-confete:nth-child(3n){
    animation-duration: 5.5s;
    animation-delay: -2s;
}

/* lado esquerdo — 4 dentro + 2 sobrepõem footer */
#cnf-4  { width: 110px; left: 5px;   bottom: 65px; }
#cnf-2  { width: 50px;  left: 140px; bottom: 55px; }
#cnf-3  { width: 20px;  left: 145px; bottom: 100px; }
#cnf-6  { width: 32px;  left: 140px; bottom: 135px; }
#cnf-1  { width: 26px;  left: 25px;  bottom: -28px; z-index: 5; }
#cnf-11 { width: 48px;  left: 75px;  bottom: -52px; z-index: 5; }

/* lado direito — 4 dentro + 2 sobrepõem footer */
#cnf-7  { width: 145px; right: 5px;  bottom: 65px; }
#cnf-8  { width: 50px;  right: 160px; bottom: 55px; }
#cnf-10 { width: 20px;  right: 165px; bottom: 100px; }
#cnf-5  { width: 28px;  right: 160px; bottom: 135px; }
#cnf-9  { width: 85px;  right: 10px; bottom: -28px; z-index: 5; }
#cnf-12 { width: 26px;  right: 115px; bottom: -52px; z-index: 5; }





#titulo-interacao{
    grid-column: 4/10;
    align-items: center;
     font-size: 25px;
     color: #0E3A5A;
     margin-bottom: 30px;
}


#texto-interacao {
    font-size: 20px;
     grid-column: 4/10;
    align-items: center;
    grid-row: 2;

}

#botao{
     grid-column: 4/10;
    align-items: center; 
    grid-row: 2;
    margin-top: 65px;
}

.cta{
    background:#ECEBDD;
    text-align:center;
    padding:100px 0;
    position: relative;
    z-index: 2;
    overflow: visible;
}

.btn{
    display:inline-block;
    margin-top:20px;
    padding:15px 40px;
    background:#FFD012;
    text-decoration:none;
    color:#E8538C;
    border-radius:30px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.btn:hover{
    transform: scale(1.08);
}

/* FOOTER */
footer{
    position: relative;
    z-index: 1;
    background:#123c5a;
    background-image: url(img/footer-fundo.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    padding: 0;
    text-align:center;
}

#onda-footer{
    width: 100%;
    display: block;
    margin-bottom: 40px;
}

#footer-logo{
    grid-column: 1/13;
    width: 150px;
    margin: 0 auto 20px auto;
}

.social{
    grid-column: 1/13;
    display: flex;
    justify-content: center;
    align-items: center;
}

.social img{
    width:30px;
    margin:10px;
}

.footer-copyright{
    grid-column: 1/13;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    padding: 0 10px;
}

footer > div {
    padding-bottom: 40px;
}