.paragraph-title{
  font-weight: 500;
  font-size: 13pt;
}

.paragraph{
  font-weight: 300;
  font-size: 11pt;
}
.list-paragraph{
  list-style: none;
  font-weight: 400;
  padding: 5px;
}
.list-item-paragraph{
  font-weight: 500;
}
.destaque-paragraph{
  font-weight: 600;
  font-style: italic;
} 

/* =========================
FLOATING STICKER (bottom)
========================= */
.cmpFloatSticker{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 0 14px;

  /* hidden default */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  visibility: hidden;

  transition: opacity .42s ease, transform .42s ease, visibility .42s ease;
}

    .cmpFloatSticker.is-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    }

    .cmpFloatCard{
    width: min(560px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 10px 10px 40px rgb(0 0 0 / 35%);
    border: 1px solid rgba(17,17,24,.10);
    padding: 12px 12px 12px;
    }

    .cmpFloatTop{
    display: flex;
    gap: 12px;
    align-items: center;
    }

    .cmpFloatRing{
    width: 46px;
    height: 46px;
    position: relative;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    }
    .cmpFloatRing svg{
    width: 46px;
    height: 46px;
    transform: rotate(-90deg);
    }
    .cmpFloatRing .pct{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-primary);
    font-weight: 900;
    font-size: 11px;
    color: #111118;
    }

    .cmpFloatRaised{
    flex: 1;
    min-width: 0;
    }

    .cmpFloatLine{
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    }
    .cmpFloatLine b{
    font-family: var(--font-primary);
    font-weight: 900;
    letter-spacing: -.3px;
    font-size: 18px;
    color: #111118;
    }
    .cmpFloatLine span{
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 18px;
    color: #2b2b34;
    }
    .cmpFloatMeta{
    text-underline-offset: 3px;
    }

    /* =========================
   MINI TICKER (linha toda) - ÚNICO SISTEMA
========================= */

.cmpFloatMini{
  margin-top: 6px;
  font-family: var(--font-primary);
  font-size: 13px;
  color: #2b2b34;
  line-height: 1.25;
  overflow: hidden;
}

.cmpFloatMiniRow{
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 1.25em;
}

/* camadas */
.cmpMiniRowLayer{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;

  will-change: transform, opacity;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  pointer-events: none;
}

.cmpMiniRowLayer.is-on{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* animações */
@keyframes cmpMiniRowIn{
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cmpMiniRowOut{
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(12px); }
}

.cmpMiniRowIn{  animation: cmpMiniRowIn  .36s ease both; }
.cmpMiniRowOut{ animation: cmpMiniRowOut .28s ease both; }

@media (prefers-reduced-motion: reduce){
  .cmpMiniRowIn, .cmpMiniRowOut{ animation: none !important; }
}

 


    .cmpFloatChevron{
    font-weight: 900;
    margin-left: 3px;
    }

    .cmpFloatBtns{
    display: flex;
    gap: 12px;
    margin-top: 10px;
    }

    .cmpFloatBtn{
    width: 50%;
    height: 44px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 900;
    letter-spacing: -.15px;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    display:inline-flex;
    align-items:center;
    gap:6px;
    justify-content: center;
    }
    .cmpFloatBtn svg{
    width:1em;
    height:1em;
    fill:currentColor;
    display:block;
    flex-shrink:0;
  }


    .btnIcon{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:0;
  }

    .btnIcon svg{
      width:16px;
      height:16px;

      /* herda a cor do texto */
      fill:currentColor;

      display:block;
    }


    .cmpFloatBtn:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(0,0,0,.12);
    }

    .cmpFloatBtnDonate{ background: var(--g-btn); color:white; }
    .cmpFloatBtnShare{ background: #94ca35; color:#17331f; }


    .cmpDonationsFooterDesktop{
    display:flex;
    gap: 12px;
    margin-top: 14px;
    }

    .cmpDonationsFooterDesktop .cmpSmallBtn{
    flex: 1;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(17,17,24,.20);
    background:#fff;
    cursor:pointer;
    font-family: var(--font-primary);
    font-weight: 900;
    letter-spacing: -.1px;
    }

    :root{
      --g-bg:#ffffff;
      --g-text:#111118;
      --g-muted:#5b5b66;
      --g-border: rgba(17,17,24,.14);

      --g-card:#fff;
      --g-shadow: 0 18px 40px rgba(0,0,0,.08);

      --g-green:#7ddc4a;
      --g-green-dark:#214a34;

      --g-btn:#69951d; /* donate */
      --g-btn-2:#ffcc29; /* share */

      /* bloco campanhas (verde escuro do print) */
      --camp-bg: #063b2a;
      --camp-bg-2: #043424;
      --camp-border: rgba(255,255,255,.16);
      --camp-bar: rgba(255,255,255,.14);
      --camp-bar-fill: #7ddc4a;
    }

    body{
      background: var(--g-bg);
      color: var(--g-text);
    }

    /* container (usa o seu .container se existir; caso não, garante) */
    .container{
      width: min(1180px, calc(100% - 48px));
      margin: 0 auto;
      padding: 10px;
    }
    @media (max-width: 520px){
      .container{ width: calc(100% - 28px); }
      .cmpCurvedOverlay{ height: 38px; display: block!important; border: 0px; }

    }

    /* =========================
        HERO (campanha)
    ========================== */
    .cmpWrap{
      padding: 10px 0 10px;
    }

    .cmpTitle{
      margin: 0 0 18px;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.7px;
      line-height: 1.05;
      font-size: clamp(26px, 3.4vw, 38px);
    }

    .cmpGrid{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap: 26px;
      align-items: start;
    }
    .cmpDonationsHead{ display:none; }
    .cmpDonationsSeeAll{ display:none; }
    .cmpDonationsFooterDesktop{ display:flex; gap:12px; margin-top:14px; }


/* Desktop: permite scroll vertical normal, sem “gestos” horizontais no slider */
@media (min-width: 981px){
  #cmpSlider{ touch-action: pan-y; }
  .cmpFloatSticker{
    display: none !important;
  }
}

     /* =========================
   MOBILE FINAL (100% responsivo)
========================= */
@media (max-width: 980px){
    

/* ===== Donations (mobile) acima do Organizer ===== */
#cmpDonationsMobileSlot{
  padding: 14px 16px 0 !important;
  margin-top: 30px;
}

.cmpDonationsHead{ display:flex; }
.cmpDonationsFooterDesktop{ display:none; }
.cmpDonationsSeeAll{ display:block; margin-top: 20px; }

.cmpDonationsBlock{
  background: none;
}

  /* garante o estilo do print mobile */
  .cmpDonationsSeeAll{
    width: 100%;
    height: 44px;
    margin-top: 20px;
    border-radius: 999px;
    border: 1px solid rgba(17,17,24,.16);
    background:#fff;
    cursor:pointer;
    font-family: var(--font-primary);
    font-weight: 900;
  }

.cmpDonationsTitle{
  font-family: var(--font-primary);
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 22px;
  color:#111118;
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 20px;
}

.cmpDonationsCount{
  display: none;

}

.cmpDonationsTopBtn{
display: none;
}

.cmpDonorList{ margin-top: 0 !important; gap: 12px !important; }
.cmpDonorAv{ width: 36px !important; height: 36px !important; }


  html, body{ overflow-x:hidden; }
  .cmpCurvedOverlay{ display:block; }
  .cmpReadMore{ margin-top: 8px; }


  /* full width real */
  .cmpWrap{ padding:0 !important; }
  .container{ width:100% !important; margin:0 !important; padding:0 !important; }

  /* grid vira 1 coluna */
  .cmpGrid{ grid-template-columns: 1fr !important; gap: 0 !important; }

  /* esconde card da direita no mobile */
  .cmpDonateWrap{ display:none !important; }

  /* H1 desktop some (usa overlay) */
  .cmpTitle{ display:none !important; }

  /* ===== HERO / BANNER ===== */
  .cmpMediaCard{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    position:relative !important;
    overflow:hidden !important;
    background: #ffffff;
  }

  .cmpSlider{
    width:100% !important;
    aspect-ratio:auto !important;
    height: min(62vh, 520px) !important;
  }

  .cmpSlide img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    display:block !important;
  }

  /* remove setas, só dots */
  .cmpNav{ display:none !important; }

  .cmpDots{
    left:50% !important;
    transform:translateX(-50%) !important;
    bottom: 40px !important;
    z-index: 7 !important;
    gap: 8px !important;
  }
  .cmpDot{
    width: 8px !important;
    height: 8px !important;
    background: rgba(255,255,255,.45) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }
  .cmpDot.is-active{
    background:#fff !important;
    transform: scale(1.2) !important;
  }

  /* overlay do título (centralizado, branco, colado no bottom) */
  .cmpHeroOverlay{
    position:absolute !important;
    inset:0 !important;
    z-index: 6 !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;

    padding: 0 16px 44px !important; /* espaço pra não bater nos dots */
    text-align:center !important;

    background: linear-gradient(
      to top,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.22) 44%,
      rgba(0,0,0,0) 76%
    ) !important;

    pointer-events:none !important;
  }

  .cmpTitleMobile{
    width:100% !important;
    max-width: 560px !important;

    color:#fff !important;
    font-family: var(--font-primary) !important;
    font-weight: 900 !important;
    letter-spacing: -.6px !important;
    line-height: 1.06 !important;
    font-size: 28px !important;

    text-shadow: 0 12px 34px rgba(0,0,0,.45) !important;
  }

  /* avatar + nome no topo esquerdo do banner (com pill/blur) */
  .cmpByline{
    position:absolute !important;
    top: 0px !important;
    left: 0px !important;
    z-index: 8 !important;

    padding: 8px 10px !important;
    border-radius: 999px !important;
    border: 0 !important;

    color:#fff !important;
  }
  .cmpAvatar{
    width: 26px !important;
    height: 26px !important;
    background:  white!important;
    color:grey !important;
    font-size: 12px !important;
  }
  .cmpByName{ color:#fff !important;
    text-shadow: 1px 1px 10px black;
    font-size: 10pt;
 }

  /* some selo no banner */
  .cmpProtected{ display:none !important; }

  /* ===== BARRA BRANCA (abaixo do banner) ===== */
  .cmpDonateBarMobile{
    display:block !important;
    padding: 14px 16px 34px !important;
    background:#fff !important;
    border-bottom: 1px solid rgba(17,17,24,.12) !important;
  }

  /* 30% x 70% real */
  .cmpDonateBarTop{
    display:grid !important;
    grid-template-columns: 15% 85% !important;
    column-gap: 12px !important;
    align-items:center !important;
  }

  .cmpRingSm{
    width: 52px !important;
    height: 52px !important;
    justify-self:start !important;
  }
  .cmpRingSm svg{
    width: 52px !important;
    height: 52px !important;
  }

  .cmpRaisedLineMobile b{
    font-size: 20px !important;
    font-weight: 900 !important;
  }
  .cmpRaisedLineMobile span{
    font-size: 20px !important;
    font-weight: 400 !important;
  }

  /* botões Donate/Share na mesma linha e mesmo tamanho */
  .cmpDonateBarBtns{
    display:flex !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }
  .cmpDonateBarBtns .cmpBtn{
    width: 100% !important;
    height: 46px !important;
    margin-top: 0 !important;
  }

  /* ===== CONTEÚDO ABAIXO ===== */
  .cmpStory{
    padding: 14px 16px 0 !important;
  }
  .cmpStory hr{ display:none !important; }
  .cmpActionsBottom{ display:none !important; }

  .cmpSections,
  .trustWrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* trust vira 1 coluna sem precisar setar em outro lugar */
  .trustRow{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* bloco verde: container precisa de padding interno */
  .campPage .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* header do bloco verde empilha */
  .campHeader{
    flex-direction: column !important;
    align-items:flex-start !important;
    gap: 14px !important;
  }
  .campControls{
    width:100% !important;
    justify-content:space-between !important;
    min-width: unset !important;
  }

  /* cards do carrossel ocupam melhor a tela */
  .campCard{ width: 82vw !important; }
}
    

    /* =========================
        GALERIA (esquerda)
    ========================== */
    .cmpMediaCard{
      border-radius: 22px;
      overflow:hidden;
    }

    .cmpSlider{
      position: relative;
      aspect-ratio: 16/9;
      background: #eee;
      overflow:hidden;
    }

    .cmpSlides{
      display:flex;
      height: 100%;
      transition: transform .35s ease;
      will-change: transform;
    }

    .cmpSlide{
      flex: 0 0 100%;
      height: 100%;
      position: relative;
      background:#ddd;
    }
    .cmpSlide img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    .cmpNav{
      position:absolute;
      right: 16px;
      bottom: 16px;
      display:flex;
      gap: 10px;
      z-index: 2;
    }

    .cmpNavBtn{
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.35);
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform .12s ease, background .12s ease;
    }
    .cmpNavBtn:hover{ transform: translateY(-1px); background: rgba(0,0,0,.45); }

    .cmpDots{
      position:absolute;
      left: 18px;
      bottom: 18px;
      display:flex;
      gap: 7px;
      z-index: 2;
    }
    .cmpDot{
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: rgba(255,255,255,.45);
      border: 1px solid rgba(255,255,255,.14);
      cursor:pointer;
      transition: transform .12s ease, background .12s ease;
    }
    .cmpDot.is-active{
      background: #fff;
      transform: scale(1.15);
    }

    /* autor abaixo da imagem */
    .cmpByline{
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 14px 16px;
      border-top: 1px solid var(--g-border);
    }
    .cmpAvatar{
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: #f1f1f3;
      display:grid;
      place-items:center;
      font-weight: 900;
      color:#222;
      font-family: var(--font-primary);
    }
    .cmpByName{
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.2px;
    }

    /* selo donation protected */
    .cmpProtected{
      padding: 0 16px 16px;
    }
   
    .cmpProtectedBadge svg{ opacity:.9; }

    /* texto história */
    .cmpStory{
    }
    .cmpStory hr{
      border:0;
      height:1px;
      background: rgba(17,17,24,.14);
      margin: 14px 0 18px;
    }
    .cmpStory p{
      margin: 0 0 16px;
      color: #2b2b34;
      line-height: 1.6;
      font-size: 15px;
    }
    /* =========================
   CMP STORY - clamp 3 linhas + fade + read more
========================= */
.cmpStoryClamp{
  position: relative;
  overflow: hidden;

  /* 3 linhas */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;

  /* fallback moderno (quando suportado) */
  max-height: calc(1.6em * 6);  /* line-height(1.6) * 3 linhas */
}

 
/* quando expandir */
.cmpStoryClamp.is-expanded{
  display: block;
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}

/* fade no final (só quando NÃO expandido) */
.cmpStoryClamp::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height: 44px; /* intensidade do fade */
  pointer-events:none;

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 72%,
    rgba(255,255,255,1) 100%
  );
}
.cmpStoryClamp.is-expanded::after{ display:none; }

/* botão/Link Read more */
.cmpReadMore{
  margin-top: 0px;
  display:inline-block;
  border:0;
  padding:0;
  background: transparent;

  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;

  color: #111118;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}



    /* botões donate/share (baixo da história no print) */
    .cmpActionsBottom{
      display:flex;
      gap: 18px;
      padding: 12px 0 0;
      flex-wrap: wrap;
    }
    .cmpActionGhost{
      flex: 0 0 auto;
      min-width: 240px;
      height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(17,17,24,.22);
      background: #fff;
      cursor:pointer;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.15px;
      transition: transform .12s ease, box-shadow .12s ease;
      display:inline-flex;
      align-items:center;
      gap:6px;
      justify-content: center;
    }

    .cmpActionGhost svg{
      width:1em;
      height:1em;
      fill:currentColor;

      display:block;
      flex-shrink:0;
      line-height:0;
    }

    .cmpActionGhost:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 30px rgba(0,0,0,.08);
    }

    /* =========================
        CARD DOAÇÃO (direita)
    ========================== */
    .cmpDonateCard{
      position: relative; /* base */
      top: 0;
      background: var(--g-card);
      border: 1px solid var(--g-border);
      border-radius: 22px;
      padding: 18px;
      width: 360px;

    }

    .cmpDonateWrap{
      position: relative;
      width: 100%;

    }

  .cmpDonateCard.is-fixed{
    position: fixed;
    top: calc(var(--topbar-h, 64px) + 18px);
  }

    .cmpDonateCard.is-stopped{
    position: absolute;
    top: 0; /* base */
    }
  
    .cmpProgressTop{
      display:flex;
      align-items:center;
      gap: 7px;
    }

    .cmpRing{
      width: 58px;
      height: 58px;
      display:grid;
      place-items:center;
      position: relative;
      flex: 0 0 auto;
    }
    .cmpRing svg{
      width: 58px;
      height: 58px;
      transform: rotate(-90deg);
    }
    .cmpRing .pct{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      font-family: var(--font-primary);
      font-weight: 900;
      font-size: 12px;
      color:#111;
    }
   
    .cmpRaisedLine{
      line-height: 1.1;
    }
    .cmpRaisedLine b{
      font-family: var(--font-primary);
      font-weight: 900;
      font-size: 18px;
      letter-spacing: -.3px;
    }
    .cmpRaisedLine span{
      color: var(--g-muted);
      font-weight: 500;
      font-size: 18px;
      margin-left: 6px;
    }
    .cmpDonCount{
      color: var(--g-muted);
      font-size: 13px;
      margin-top: 4px;
      font-weight: 400;
    }

    .cmpBtn{
      width: 100%;
      height: 46px;
      border-radius: 999px;
      border: 0;
      cursor:pointer;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.15px;
      transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
      display:inline-flex;
      align-items:center;
      gap:6px;
      justify-content: center;
    }
    .cmpBtn svg{
      width:16px;
      height:16px;

      fill:currentColor; /* mesma cor do texto */

      display:block;
      line-height:0;
    }

    .cmpBtn:hover{
      transform: translateY(-1px);
      box-shadow: 0 16px 32px rgba(0,0,0,.10);
    }
    .cmpBtnShare{ background: #94ca35; color:#17331f; margin-top: 10px; }

    .cmpDonorList{
      margin-top: 30px;
      display:flex;
      flex-direction:column;
      gap: 30px;
    }
    .cmpDonor{
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }
    .cmpDonorAv{
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background:#f1f1f3;
      display:grid;
      place-items:center;
      font-family: var(--font-primary);
      font-weight: 900;
      color:#222;
      flex: 0 0 auto;
    }
    .cmpDonorTxt{
      line-height: 1.15;
    }
    .cmpDonorName{
      font-weight: 500;
      font-family: var(--font-primary);
      letter-spacing: -.1px;
    }
    .cmpDonorMeta{
      color: var(--g-muted);
      font-size: 13px;
      font-weight: 100;
      margin-top: 4px;
    }
    .cmpDonorMeta b{
      color:#111118;
      font-weight: 900;
    }

    .cmpDonorBtns{
      margin-top: 16px;
      display:flex;
      gap: 12px;
    }
    .cmpSmallBtn{
      flex: 1;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(17,17,24,.20);
      background:#fff;
      cursor:pointer;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.1px;
    }

    /* =========================
        ORGANIZER / META
    ========================== */
    .cmpSections{
      padding: 26px 0 0;
    }

    .cmpH2{
      margin: 0 0 14px;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.35px;
      font-size: 22px;
    }

    .orgCard{
      display:flex;
      gap: 14px;
      align-items:flex-start;
    }

    .orgInfo{
      line-height: 1.25;
    }
    .orgInfo strong{
      display:block;
      font-family: var(--font-primary);
      font-weight: 900;
    }
    .orgInfo small{
      display:block;
      color: var(--g-muted);
      font-weight: 400;
      margin-top: 4px;
    }

   
    .orgNew{
      height: 20px;
      padding: 0 8px;
      border-radius: 8px;
      display:inline-grid;
      place-items:center;
      font-size: 11px;
      font-weight: 900;
      background: #ead7ff;
      color: #4a1b7a;
      border: 1px solid rgba(74,27,122,.12);
    }

    .cmpDivider{
      border:0;
      height:1px;
      background: rgba(17,17,24,.14);
      margin: 18px 0;
    }

    .cmpMetaLine{
      font-size: 15px;
      color:#2b2b34;
      display:flex;
      gap: 14px;
      flex-wrap: wrap;
      align-items:center;
      margin-top: 30px;
    }
    .cmpMetaLine a{
      color:#111118;
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .cmpReport{
      display:flex;
      align-items:center;
      gap: 10px;
      margin: 18px 0 0;
      font-weight: 800;
      color:#2b2b34;
      cursor:pointer;
      user-select:none;
      width: fit-content;
    }
    .cmpReport svg{
      opacity:.8;
    }

    /* =========================
        EASY/POWERFUL/TRUSTED
    ========================== */
    .trustWrap{
      padding: 50px 0 26px;
    }
    .trustTitle{
      margin:0 0 20px;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.35px;
      font-size: 20px;
    }
    .trustRow{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
   
    .trustItem{
      display:flex;
      gap: 14px;
      align-items:flex-start;
    }
    .trustIcon{
    width: 38px;            /* pode manter 34 se quiser */
    height: 38px;
    flex: 0 0 38px;         /* impede “encolher” */
    display: grid;
    place-items: center;
    border-radius: 10px;
    overflow: hidden;       /* garante “caixa” igual */
    border: 1px solid #80808038;
    }

    /* normaliza o SVG dentro do bloco */
    .trustIcon svg{
    width: 18px;
    height: 18px;
    display: block;
    }
 
    .trustItem h3{
      margin:0;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.2px;
      font-size: 16px;
    }
    .trustItem p{
      margin: 6px 0 0;
      color: var(--g-muted);
      font-weight: 500;
      line-height: 1.4;
      font-size: 14px;
    }
    .trustItem a{
      color:#111118;
      font-weight: 900;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    /* =========================
        CAMPANHAS (bloco verde)
    ========================== */
    .campPage{
       
      padding: clamp(34px, 5vw, 54px) 0 clamp(60px, 6vw, 80px);
      margin-top: 26px;
    }

    .campHeader{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .campTitle{
      margin:0;
      font-family: var(--font-primary);
      font-weight: 900;
      letter-spacing: -.8px;
      color:#fff;
      line-height: 1.05;
      font-size: clamp(28px, 4.2vw, 56px);
      max-width: 860px;
    }

    .campControls{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 12px;
      flex: 0 0 auto;
      min-width: 220px;
    }

    .campDD{ position:relative; display:inline-flex; align-items:center; flex: 0 0 auto; }

    .campDDbtn{
      appearance:none;
      border: 1px solid var(--camp-border);
      background: transparent;
      color:#fff;
      border-radius: 999px;
      padding: 10px 42px 10px 16px;
      font-family: var(--font-primary);
      font-weight: 800;
      font-size: 14px;
      line-height: 1;
      cursor:pointer;
      outline:none;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
      white-space: nowrap;
    }

    .campDDbtn:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.28);
      box-shadow: 0 12px 22px rgba(0,0,0,.18);
    }

    .campDDbtn:focus{
      border-color: rgba(255,255,255,.38);
      box-shadow: 0 0 0 3px rgba(255,255,255,.14);
    }

    .campDDchev{
      position:absolute;
      right: 14px;
      pointer-events:none;
      opacity:.9;
      color:#fff;
    }

    .campDDmenu{
      position:absolute;
      top: calc(100% + 10px);
      left: 0;
      width: min(300px, 88vw);
      background: #073f2d;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 38px rgba(0,0,0,.30);
      border-radius: 16px;
      padding: 8px;
      display:none;
      z-index: 50;
    }

    .campDD.is-open .campDDmenu{ display:block; }

    .campDDitem{
      width:100%;
      border:0;
      background: transparent;
      color:#fff;
      padding: 12px 12px;
      border-radius: 14px;
      cursor:pointer;
      text-align:left;
      font-family: var(--font-primary);
      font-weight: 800;
      font-size: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      transition: background .12s ease;
    }
    .campDDitem:hover{ background: rgba(255,255,255,.06); }

    .campDDitem small{
      font-weight: 700;
      color: rgba(255,255,255,.68);
      font-size: 12px;
      letter-spacing: -.1px;
    }

    .campDDitem.is-active{ background: rgba(255,255,255,.08); }

    .campArrows{ display:flex; align-items:center; gap: 10px; }

    .campArrowBtn{
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      background: transparent;
      display:grid;
      place-items:center;
      cursor:pointer;
      color:#fff;
      transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
    }

    .campArrowBtn:hover{
      transform: translateY(-1px);
      box-shadow: 0 14px 26px rgba(0,0,0,.24);
      border-color: rgba(255,255,255,.34);
    }

    .campArrowBtn:disabled{
      opacity:.45;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }

    .campRow{
      display:flex;
      gap: 22px;
      overflow:auto;
      padding: 8px 2px 12px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .campRow::-webkit-scrollbar{ height: 10px; }
    .campRow::-webkit-scrollbar-thumb{
      background: rgba(255,255,255,.12);
      border-radius: 999px;
    }

    .campCard{
      flex: 0 0 auto;
      width: 258px;
      scroll-snap-align: start;
      text-decoration:none;
      color: inherit;
      border-radius: 14px;
      overflow:hidden;
      background: transparent;
    }

    .campMedia{
      position:relative;
      width:100%;
      height: 150px;
      border-radius: 14px;
      overflow:hidden;
      background: rgba(255,255,255,.06);
    }

    .campMedia img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      transform: scale(1);
      transition: transform .35s cubic-bezier(.2,.9,.2,1);
      will-change: transform;
    }

    @media (hover:hover) and (pointer:fine){
      .campCard:hover .campMedia img{ transform: scale(1.04); }
    }

    .campBadge{
      position:absolute;
      left: 10px;
      top: 10px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,.45);
      color:#fff;
      font-family: var(--font-primary);
      font-weight: 800;
      font-size: 12px;
      line-height:1;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.14);
    }

    .campBody{ padding-top: 12px; }

    .campH3{
      margin:0;
      font-family: var(--font-primary);
      font-weight: 900;
      color:#fff;
      letter-spacing:-.25px;
      font-size: 14px;
      line-height: 1.25;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }

    .campBy{
      margin-top: 8px;
      font-family: var(--font-primary);
      font-weight: 700;
      font-size: 12px;
      color: rgba(255,255,255,.70);
      line-height: 1.25;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow:hidden;
    }

    .campBy strong{
      color: rgba(255,255,255,.92);
      font-weight: 900;
    }

    .campMeta{
      margin-top: 12px;
      display:flex;
      flex-direction:column;
      gap: 8px;
    }

    .campRemaining{
      margin-top:6px;
      font-size:12px;
      font-weight:700;
      color:#ffffffcc; /* leve transparência no fundo verde */
    }


    .campBar{
      height: 10px;
      border-radius: 999px;
      background: var(--camp-bar);
      overflow:hidden;
    }

    .campBar > span{
      display:block;
      height:100%;
      width: var(--pct, 55%);
      background: var(--camp-bar-fill);
      border-radius: 999px;
    }

    .campRaised{
      font-family: var(--font-primary);
      font-weight: 900;
      font-size: 13px;
      color:#fff;
      letter-spacing:-.1px;
    }
 

    @media (max-width: 520px){
      .campCard{ width: 82vw; }

    }
    @media (max-width: 2560px){
      .cmpDonateBarMobile{ display: none; }
    }


    @media (prefers-reduced-motion: reduce){
      .cmpSlides, .campMedia img{ transition:none !important; }
      .campDDbtn, .campArrowBtn, .cmpNavBtn{ transition:none !important; }
    }

    /* =========================
   CURVED OVERLAY (banner -> conteúdo)
========================= */
.cmpCurvedOverlay{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;            /* cola e evita “linha” */
  height: 25px;           /* ajuste fino */
  width:100%;
  z-index: 9;             /* acima do gradiente e imagem */
  pointer-events:none;
  display:none;           /* default: escondido */
}

.cmpCurvedOverlay path{
  fill: #fff;             /* cor do conteúdo abaixo */
}



/* =========================
   DONATIONS MODAL (mobile + desktop)
========================= */
.donModal{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
}
.donModal.is-open{ display:block; }

.donOverlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.50);
  border:0;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}

/* sheet base */
.donSheet{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 44px));
  height: min(720px, calc(100% - 44px));

  background:#fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);

  display: flex;
  flex-direction: column;

  overflow: hidden; /* 🔒 impede scroll externo */
  outline:none;
}

/* header */
.donHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 18px 10px;
}
.donHeadLeft{
  display:flex;
  align-items:center;
  gap: 10px;
}
.donTitle{
  margin:0;
  font-family: var(--font-primary);
  font-weight: 900;
  letter-spacing: -.4px;
  font-size: 26px;
  color:#111118;
}
.donPill{
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background:#eef0f3;
  color:#111118;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 12px;
  display:inline-grid;
  place-items:center;
}
.donClose{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border:0;
  background: transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  color:#111118;
}
.donClose:hover{ background: #f2f3f6; }

/* tabs */
.donTabs{
  display:flex;
  gap: 18px;
  padding: 0 18px 10px;
}
.donTab{
  border:0;
  background: transparent;
  cursor:pointer;
  font-family: var(--font-primary);
  font-weight: 900;
  letter-spacing: -.15px;
  font-size: 15px;
  color:#2b2b34;
  padding: 8px 12px;
  border-radius: 999px;
}
.donTab.is-active{
  background:#111118;
  color:#fff;
}

/* body scroll */
.donBody{
  flex: 1;                 /* ocupa o espaço entre header e footer */
  overflow-y: auto;        /* ✅ scroll vertical */
  overflow-x: hidden;

  padding: 4px 0 0;

  overscroll-behavior: contain; /* 🔒 não “puxa” o body da página */
  -webkit-overflow-scrolling: touch;
}

/* list items */
.donList{
  padding: 0 18px;
}
.donRow{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(17,17,24,.08);
}
.donAv{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background:#f1f1f3;
  display:grid;
  place-items:center;
  font-family: var(--font-primary);
  font-weight: 900;
  color:#222;
  flex: 0 0 auto;
}
.donTxt{ line-height: 1.15; }
.donName{
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing:-.1px;
  color:#111118;
}
.donMeta{
  margin-top: 4px;
  font-family: var(--font-primary);
  font-size: 13px;
  color: var(--g-muted, #5b5b66);
  font-weight: 500;
}
.donMeta b{
  color:#111118;
  font-weight: 900;
}

/* banner green */
.donBanner{
  margin: 14px 0;
  background: #c9f58d; /* bem próximo do print */
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
}
.donBannerImg{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0,0,0,.08);
  background-size: cover;
  background-position:center;
  flex: 0 0 44px;
}
.donBannerTxt{
  flex: 1;
  font-family: var(--font-primary);
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 14px;
  color:#17331f;
  line-height: 1.15;
}
.donBannerBtn{
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border:0;
  cursor:pointer;
  background: #214a34;
  color:#fff;
  font-family: var(--font-primary);
  font-weight: 900;
}

/* bottom bar */
.donBottom{
  border-top: 1px solid rgba(17,17,24,.10);
  padding: 14px 18px 16px;
  background:#fff;
}
.donBottomRow{
  display:flex;
  align-items:center;
  gap: 12px;
}
.donRing{
  width: 56px;
  height: 56px;
  position: relative;
  flex: 0 0 56px;
  display:grid;
  place-items:center;
}
.donRing svg{
  width: 56px;
  height: 56px;
  transform: rotate(-90deg);
}
.donRing .pct{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: 12px;
  color:#111118;
}
.donRaised{
  flex:1;
  min-width:0;
}
.donRaisedTop{
  font-family: var(--font-primary);
  font-weight: 500;
  color:#111118;
  letter-spacing:-.15px;
  font-size: 18px;
}
.donRaisedTop b{
  font-weight: 900;
}
.donRaisedSub{
  margin-top: 2px;
  font-family: var(--font-primary);
  font-weight: 500;
  color: var(--g-muted, #5b5b66);
  font-size: 18px;
}
.donRaisedSub .meta{
  text-decoration: underline;
  text-underline-offset: 3px;
}
.donBottomBtn{
  width: 100%;
  height: 48px;
  border-radius: 999px;
  border:0;
  margin-top: 12px;
  cursor:pointer;
  font-family: var(--font-primary);
  font-weight: 900;
  letter-spacing:-.15px;
  background: var(--g-btn, #d7f7a7);
  color:#17331f;
}

/* =========================
   MODOS: DESKTOP vs MOBILE
========================= */
.donModal.is-desktop .donOverlay{
  opacity: 1;
  pointer-events:auto;
}

.donModal.is-mobile .donOverlay{
  opacity: 0;
  pointer-events:none;
}

/* MOBILE: full screen */
@media (max-width: 980px){
  .donSheet{
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow:none;
  }
  .donBody{
    max-height: calc(100vh - 170px);
  }
}

/* trava scroll do body quando modal abre */
body.is-locked{
  overflow: hidden !important;
}


 /* =========================
     Toast (top-right)
  ========================= */
  .toastHost{
    position: fixed;
    top: calc(var(--topbar-h, 64px) + 14px);
    right: 14px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
  }

  .toast{
    pointer-events: auto;
    min-width: 260px;
    max-width: 360px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(20, 20, 22, .92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 35px rgba(0,0,0,.35);
    color: #fff;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transform: translateY(-6px);
    opacity: 0;
    animation: toastIn .18s ease forwards;
  }

  .toast .ico{
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: 0 0 auto;
  }

  .toast .txt{
    flex: 1 1 auto;
    line-height: 1.25;
    font-size: 13.5px;
  }

  .toast .ttl{
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 2px;
  }

  .toast .sub{
    opacity: .86;
    font-size: 12.5px;
  }

  .toast.is-out{
    animation: toastOut .16s ease forwards;
  }

  @keyframes toastIn{
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes toastOut{
    to { transform: translateY(-6px); opacity: 0; }
  }