/*==================================================
                RESET
==================================================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:#f9fafc;
font-family:'Poppins',sans-serif;
color:rgb(15, 15, 15);
overflow-x:hidden;
}
img{
max-width:100%;
display:block;
}
a{
text-decoration:none;
}
/*==================================================
                HERO
==================================================*/
.rioHero{
position:relative;
width:100%;
min-height:95vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
overflow:hidden;
background:url("../Gallerie/hope.jpg") center/cover no-repeat;
}
.rioHero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(252, 252, 252, 0.301),
rgba(239, 242, 250, 0.5)
);
}
.rioOverlay{
position:absolute;
inset:0;
backdrop-filter:blur(3px);
}
.rioContent{
position:relative;
z-index:2;
width:min(900px,92%);
animation:fadeHero 1.5s ease;
}
.rioContent span{
display:inline-block;
padding:12px 28px;
border-radius:50px;
background:rgba(37, 36, 34, 0.12);
border:1px solid rgba(14, 13, 13, 0.25);
color:#0c0c0c;
font-weight:700;
margin-bottom:25px;
}
.rioContent h1{
font-size:68px;
font-weight:900;
line-height:1.1;
margin-bottom:30px;
text-shadow:0 10px 40px rgba(255, 255, 255, 0.5);
}
.rioContent p{
font-size:22px;
line-height:1.9;
color:#0f0f0f;
max-width:850px;
margin:auto;
}
/*==================================================
                CONTAINER
==================================================*/
.saopauloContainer{
width:min(1400px,94%);
margin:auto;
padding:10px 0;
display:flex;
flex-direction:column;
gap:20px;
margin-top: -3rem;
}
/*==================================================
                CARD
==================================================*/
.manausCard{
display:grid;
grid-template-columns:380px 1fr;
gap:18px;
background:linear-gradient(
145deg,
rgba(255, 255, 255, 0.205),
rgba(255, 255, 255, 0.089)
);
border:1px solid rgba(180, 11, 11, 0.966);
padding:10px;
backdrop-filter:blur(18px);
transition:.45s;
position:relative;
overflow:hidden;
min-height:300px;
align-items:center;
}

/*==================================================
                IMAGE
==================================================*/
.fortalezaImage{
height:300px;
overflow:hidden;
border-radius:5px;
}
.fortalezaImage img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.8s;
}
.manausCard:hover img{
transform:scale(1.08);
}

/*==================================================
                RIGHT SIDE
==================================================*/
.recifeRight{
display:flex;
flex-direction:column;
justify-content:center;
padding:5px 0;
}
.belemTop{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:10px;
margin-bottom:12px;
font-size:14px;
color:#464646;

}
.belemTop i{
color:#f7931a;
margin-right:8px;
}
.recifeRight h2{
font-size:30px;
font-weight:600;
margin-bottom:12px;
line-height:1.2;

}
.recifeRight p{
font-size:15px;
line-height:1.6;
color:#585858;
margin-bottom:18px;

}

/*==================================================
                PROGRESS BAR
==================================================*/
.salvadorProgress{
width:100%;
height:12px;
background:rgba(163, 163, 163, 0.26);
overflow:hidden;
margin-bottom:18px;
position:relative;
border-radius:5px;
}
.goianiaFill{
height:100%;
background:
linear-gradient(
90deg,
#0a8cf7ea,
#267cfd,
#67a2fc
);
position:relative;
animation:progressAnimation 2s ease;
}

.goianiaFill::after{
content:"";
position:absolute;
top:0;
left:-40%;
width:40%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);
animation:shineMove 2.6s infinite;
}

/*==================================================
                STATS
==================================================*/
.campinasStats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:5px;
margin-bottom:10px;

}
.campinasStats div{
background:rgba(255,255,255,.04);
border:1px solid rgba(90, 89, 89, 0.103);
padding:5px;
border-radius:5px;
text-align:center;
transition:.35s;

}
.campinasStats div:hover{
transform:translateY(-6px);
border-color:rgba(229, 232, 235, 0.521);
box-shadow:0 12px 35px rgba(182, 182, 182, 0.12);
}
.campinasStats strong{
display:block;
font-size:10px;
color:#f7931a;
margin-bottom:5px;
}
/*==================================================
                BUTTONS
==================================================*/

.curitibaButtons{
display:flex;
gap:14px;
margin-top:8px;
}
.curitibaButtons button{
border:none;
cursor:pointer;
padding:14px 28px;
border-radius:50px;
font-size:15px;
font-weight:600;
transition:.35s;
}
/* READ MORE */
.natalRead{
background:transparent;
border:2px solid rgba(110, 132, 150, 0.15) !important;
color:rgb(14, 13, 13);
}
.natalRead:hover{
background:white;
color:#111;
transform:translateY(-6px);
}


/* DONATE */
.vitoriaDonate{
background:
linear-gradient(
135deg,
#ff8a00,
#f7931a

);
color:white;
box-shadow:0 8px 20px rgba(247,147,26,.25);

}
.vitoriaDonate:hover{
transform:translateY(-6px);
box-shadow:0 20px 60px rgba(247,147,26,.35);

}

/* COMPLETED */

.vitoriaFinished{
background:#1e8e3e;
color:white;
cursor:not-allowed;
opacity:.9;
}


/* SEE PROOF */
.maceioProof{

display:inline-flex;

justify-content:center;

align-items:center;

margin-top:18px;

padding:13px 24px;

border-radius:50px;

background:linear-gradient(
135deg,
#0078ff,
#2bc5ff
);

color:white;

font-weight:700;

width:max-content;

transition:.35s;

}
.maceioProof:hover{
transform:translateY(-5px);
box-shadow:0 15px 45px rgba(0,120,255,.35);
}
/*==================================================
                HOVER GLOW
==================================================*/
.manausCard:hover .recifeRight h2{
color:#ffb347;
transition:.35s;
}
.manausCard:hover .belemTop{
color:white;
}

/*==================================================
                ANIMATIONS
==================================================*/
@keyframes progressAnimation{
0%{
width:0;
}
}
@keyframes shineMove{
0%{
left:-40%;
}
100%{
left:140%;
}
}

@keyframes fadeHero{
from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);

}
}

/*==================================================
                READ MORE POPUP
==================================================*/
.aracajuOverlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.82);
backdrop-filter:blur(10px);
display:flex;
justify-content:center;
align-items:center;
padding:10px;
opacity:0;
border-radius: 5px;
visibility:hidden;
transition:.45s;
z-index:99999;
}
.aracajuOverlay.active{
opacity:1;
visibility:visible;
}

.teresinaPopup{
width:min(900px,95%);
max-height:90vh;
overflow-y:auto;
background:
linear-gradient(
145deg,
#0d1424,
#141f34
);
padding:15px;
border-radius: 10px;
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 30px 80px rgba(0,0,0,.55);
position:relative;
transform:translateY(40px) scale(.95);
transition:.45s;
}
.aracajuOverlay.active .teresinaPopup{
transform:translateY(0) scale(1);
}
.palmasClose{
position:absolute;
right:25px;
top:10px;
width:48px;
height:48px;
border:none;
border-radius:50%;
cursor:pointer;
font-size:28px;
background:#f7931a;
color:white;
transition:.35s;
}
.palmasClose:hover{
transform:rotate(90deg);
}
#joaoPessoaImage{
width:100%;
height:500px;
object-fit:cover;
margin-bottom:30px;
}
#rioTitulo{
font-size:42px;
margin-bottom:25px;
line-height:1.2;
color:#ffa012;
}

#rioDescricao{
font-size:15px;
line-height:1.6;
color:#dddddd;
white-space:pre-line;

}

/*==================================================
                SCROLLBAR
==================================================*/
.teresinaPopup::-webkit-scrollbar{
width:2px;

}
.teresinaPopup::-webkit-scrollbar-thumb{
background:#fffdfa77;
border-radius:2px;
}
.teresinaPopup::-webkit-scrollbar-track{
background:transparent;
}
/*==================================================
                RESPONSIVE
==================================================*/
@media(max-width:1100px){
.manausCard{
grid-template-columns:1fr;
}
.fortalezaImage{
height:350px;
}
}

@media(max-width:768px){
.rioHero{
min-height:75vh;
padding:80px 20px;
}
.rioContent h1{
font-size:42px;
}
.rioContent p{
font-size:18px;
}
.saopauloContainer{
padding:70px 15px;
gap:40px;
}
.manausCard{
padding:22px;
border-radius:25px;
}
.recifeRight h2{
font-size:30px;
}
.campinasStats{
grid-template-columns:1fr;
}
.curitibaButtons{
flex-direction:column;
}
.curitibaButtons button,
.maceioProof{
width:100%;
}
#joaoPessoaImage{
height:250px;
}
#rioTitulo{
font-size:28px;
}
#rioDescricao{
font-size:16px;
line-height:1.8;
}
}

@media(max-width:480px){
.rioContent span{
font-size:14px;
padding:10px 18px;
}
.rioContent h1{
font-size:34px;
}
.rioContent p{
font-size:16px;
}
.fortalezaImage{
height:230px;
}
.belemTop{
font-size:13px;
}
.recifeRight h2{
font-size:25px;
}
.recifeRight p{
font-size:15px;
}
.campinasStats strong{
font-size:22px;
}
.teresinaPopup{
padding:20px;
}
}



/*==================================================
            DONATION POPUP
==================================================*/

.curitibaOverlay{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.78);
backdrop-filter:blur(12px);
opacity:0;
visibility:hidden;
transition:.45s;
z-index:999999;
padding:25px;
}

.curitibaOverlay.active{
opacity:1;
visibility:visible;
}
.curitibaPopup{
width:100%;
max-width:520px;
background:
linear-gradient(
145deg,
rgba(17,24,39,.96),
rgba(30,41,59,.98)
);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
padding:45px;
position:relative;
box-shadow:
0 25px 80px rgba(0,0,0,.55);
transform:translateY(40px) scale(.9);
transition:.45s;
overflow:hidden;
}
.curitibaOverlay.active .curitibaPopup{
transform:translateY(0) scale(1);
}
.curitibaPopup::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:240px;
height:240px;
border-radius:50%;
background:rgba(247,147,26,.12);
filter:blur(70px);
pointer-events:none;
}
.curitibaPopup h2{
font-size:34px;
margin-bottom:12px;
font-weight:800;
color:white;
}
.curitibaPopup p{
color:#c8d0dc;
font-size:17px;
line-height:1.8;
margin-bottom:30px;
}
#curitibaClose{
position:absolute;
top:18px;
right:18px;
width:48px;
height:48px;
border:none;
border-radius:50%;
cursor:pointer;
font-size:28px;
background:#f7931a;
color:white;
transition:.35s;
}
#curitibaClose:hover{
transform:rotate(90deg);
background:#ffb347;
}
#curitibaAmount{
width:100%;
padding:18px 22px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.04);
color:white;
font-size:20px;
margin-bottom:30px;
outline:none;
transition:.35s;
}
#curitibaAmount:focus{
border-color:#f7931a;
box-shadow:0 0 25px rgba(247,147,26,.25);
}
#curitibaAmount::placeholder{
color:#9aa4b2;
}
.curitibaActions{
display:flex;
flex-direction:column;
gap:18px;
}
#curitibaBlink,
#curitibaStripe{
border:none;
cursor:pointer;
padding:18px;
font-size:18px;
font-weight:700;
border-radius:18px;
transition:.35s;
color:white;
}
#curitibaBlink{
background:
linear-gradient(
135deg,
#f7931a,
#ffb347
);
box-shadow:0 12px 35px rgba(247,147,26,.25);
}
#curitibaBlink:hover{
transform:translateY(-5px);
box-shadow:0 18px 45px rgba(247,147,26,.40);
}
#curitibaStripe{
background:
linear-gradient(
135deg,
#635bff,
#8b7cff
);
box-shadow:0 12px 35px rgba(99,91,255,.25);
}
#curitibaStripe:hover{
transform:translateY(-5px);
box-shadow:0 18px 45px rgba(99,91,255,.40);
}
@media(max-width:650px){
.curitibaPopup{
padding:28px;
border-radius:22px;
}
.curitibaPopup h2{
font-size:28px;

}
#curitibaAmount{
font-size:18px;
}
#curitibaBlink,
#curitibaStripe{
font-size:16px;
padding:16px;
}
}



/*==================================================
            LIGHTNING POPUP
==================================================*/
.florianopolisOverlay{
position:fixed;
inset:0;
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.82);
backdrop-filter:blur(12px);
opacity:0;
visibility:hidden;
transition:.45s;
z-index:9999999;
padding:25px;

}
.florianopolisOverlay.active{
opacity:1;
visibility:visible;
}
.florianopolisPopup{
width:100%;
max-width:560px;
background:
linear-gradient(
145deg,
#111827,
#1e293b
);
padding:40px;
position:relative;
border:1px solid rgba(255,255,255,.08);
box-shadow:
0 30px 80px rgba(0,0,0,.55);
transform:translateY(40px) scale(.9);
transition:.45s;
overflow:hidden;
}
.florianopolisOverlay.active .florianopolisPopup{
transform:translateY(0) scale(1);
}

.florianopolisPopup::before{
content:"";
position:absolute;
right:-120px;
top:-120px;
width:250px;
height:250px;
border-radius:50%;
background:rgba(247,147,26,.08);
filter:blur(80px);

}
#florianopolisClose{
position:absolute;
right:10px;
top:15px;
width:48px;
height:48px;
border:none;
border-radius:50%;
cursor:pointer;
background:#f7931a;
color:white;
font-size:25px;
transition:.35s;
}
#florianopolisClose:hover{
transform:rotate(90deg);
}
.florianopolisPopup h2{
text-align:center;
font-size:30px;
margin-bottom:10px;
}
.florianopolisPopup p{
text-align:center;
color:#d5d5d5;
margin-bottom:20px;
line-height:1.5;
}
#florianopolisQRCode{
display:flex;
justify-content:center;
align-items:center;
padding:10px;
background:white;
margin:10px auto;
width:max-content;
}
#florianopolisInvoice{
width:100%;
height:70px;
border:none;
resize:none;
outline:none;
padding:5px;
margin-top:10px;
background:#0f172a;
color:#f5f5f5;
font-size:12px;
line-height:1.5;
}
.florianopolisButtons{
display:flex;
gap:15px;
margin-top:10px;
flex-wrap:wrap;
}

.florianopolisButtons button{
flex:1;
padding:10px;
border:none;
cursor:pointer;
border-radius:25px;
font-size:15px;
font-weight:500;
transition:.35s;
}
#copyLightningInvoice{
background:#c98302;
color:white;
}
#copyLightningInvoice:hover{
transform:translateY(-5px);
box-shadow:0 15px 40px rgba(247, 170, 26, 0.35);
}
#openLightningWallet{
background:#111827;
color:white;
border:1px solid rgba(255,255,255,.08);
}
#openLightningWallet:hover{
background:#1f2937;
transform:translateY(-5px);
}
#florianopolisStatus{
margin-top:10px;
padding:10px;
border-radius:16px;
background:rgba(247,147,26,.10);
border:1px solid rgba(247,147,26,.20);
text-align:center;
font-weight:500;
font-size:10px;
color:#ffb347;
animation:pulseLightning 1.5s infinite;
}
@keyframes pulseLightning{
0%{
transform:scale(1);
}
50%{
transform:scale(1.03);
}
100%{
transform:scale(1);
}
}
@media(max-width:650px){
.florianopolisPopup{
padding:25px;
}
.florianopolisPopup h2{
font-size:28px;
}
.florianopolisButtons{
flex-direction:column;
}

}










#toastContainer{
position:fixed;
top:20px;
right:20px;
z-index:999999;
display:flex;
flex-direction:column;
gap:12px;
}

.toast{
min-width:320px;
padding:16px 20px;
border-radius:14px;
color:#fff;
font-weight:600;
box-shadow:0 15px 40px rgba(0,0,0,.35);
animation:toastIn .35s ease;
}

.toast.error{
background:#dc3545;
}

.toast.success{
background:#198754;
}

.toast.info{
background:#0d6efd;
}

@keyframes toastIn{
from{
opacity:0;
transform:translateX(100%);
}
to{
opacity:1;
transform:translateX(0);
}
}





/*==========================================
            COMMENTS
==========================================*/
.rioCommentsSection{
margin-top:-20px;
padding:5px;
background:linear-gradient(145deg,#131b2c,#1b2435);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.rioCommentsSection h2{
margin-bottom:25px;
font-size:20px;
font-weight:700;
color:#fff;
}

#rioCommentForm{
display:flex;
flex-direction:column;
gap:10px;

}

#rioCommentForm input,
#rioCommentForm textarea{
width:100%;
padding:10px 12px;
background:#202b3d;
border:1px solid rgba(255,255,255,.08);
color:#fff;
font-size:15px;
transition:.3s;
font-family:'Poppins',sans-serif;
}

#rioCommentForm input:focus,
#rioCommentForm textarea:focus{
outline:none;
border-color:#f7931a;
box-shadow:0 0 0 4px rgba(247,147,26,.15);

}

#rioCommentForm textarea{
resize:vertical;
min-height:150px;
}

#rioCommentForm button{
align-self:flex-start;
padding:10px 15px;
border:none;
background:linear-gradient(135deg,#ff8a00,#f7931a);
color:#fff;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:.3s;

}

#rioCommentForm button:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(247,147,26,.35);
}

#rioCommentsList{
margin-top:20px;
display:flex;
flex-direction:column;
gap:10px;

}

@media(max-width:768px){

.rioCommentsSection{
padding:10px;

}

#rioCommentForm button{
width:100%;

}

}








.rioCommentCard{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
padding:10px;
width: 100%;
margin-bottom:18px;

}

.rioCommentHeader{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;

}

.rioCommentHeader strong{
color:#fff;
font-size:15px;

}

.rioCommentHeader span{
color:#999;
font-size:14px;

}

.rioCommentCard p{
color:#ddd;
line-height:1.6;
margin:0;

}

.rioNoComments{
text-align:center;
color:#888;
padding:25px;
font-style:italic;

}





.rioCommentUser{
display:flex;
align-items:center;
gap:15px;
}

.rioAvatar{
width:52px;
height:52px;
border-radius:50%;
background:linear-gradient(135deg,#f7f6f5,#d8d7d7);
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
font-size:18px;
color:#ff8a00;
flex-shrink:0;
}

.rioCommentUser strong{
color:#fff;
font-size:17px;
}

.rioCommentUser span{

display:block;
margin-top:3px;
font-size:13px;
color:#9ca3af;
font-weight:500;

}







.rioReplyForm{

margin-top:20px;

display:flex;

flex-direction:column;

gap:12px;

}

.rioReplyForm textarea{
width:100%;
min-height:110px;
padding:10px;
background:#1c2434;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
color:#fff;
resize:vertical;

}

.rioReplyForm button{
align-self:flex-end;
padding:12px 24px;
background:#0d6efd;
color:#fff;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:700;

}



.rioAdminReply{
margin-top:18px;
padding:18px;
background:rgb(255, 255, 255);
border-left:4px solid #0d6efd;
border-radius:12px;

}

.rioAdminReplyHeader{
font-weight:700;
color:#4ea1ff;
margin-bottom:10px;
}

.rioAdminReply p{
margin:0;
line-height:1.7;
color:#383838;

}








/*==========================================
        COMMENTS ACCORDION
==========================================*/

.rioCommentsDetails{

background:#141d2d;

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

overflow:hidden;

}

.rioCommentsDetails summary{

list-style:none;

cursor:pointer;

padding:22px 28px;

font-size:22px;

font-weight:700;

color:#fff;

display:flex;

justify-content:space-between;

align-items:center;

user-select:none;

transition:.3s;

}

.rioCommentsDetails summary:hover{

background:rgba(255,255,255,.04);

}

.rioCommentsDetails summary::-webkit-details-marker{

display:none;

}

.rioCommentsDetails summary::after{

content:"▼";

font-size:16px;

transition:.35s;

}

.rioCommentsDetails[open] summary::after{

transform:rotate(180deg);

}

.rioCommentsContent{

padding:30px;

border-top:1px solid rgba(255,255,255,.08);

}