/*
 * Contrast layer for the neutral palette.
 *
 * The recolour script can only flip a foreground inside the same declaration
 * block that paints the background. Header links, footer text and buttons live
 * in their own selectors, so their colours are set here against the surfaces
 * they now sit on.
 *
 * It also settles a conflict the script cannot: --heartox-base is a text colour
 * 163 times and a background 143 times, so it has to stay dark ink. The few
 * components that should read as light surfaces set that here, next to the
 * matching foreground.
 *
 * Loaded after heartox-tema.css and before amacc.css.
 */

 :root {
    --tema-ink: #202124;
    --tema-ink-soft: #3c4043;
    --tema-muted: #5f6368;
    --tema-surface: #ffffff;
    --tema-surface-soft: #f1f3f4;
    --tema-panel: #e8eaed;
    --tema-line: #dadce0;
    --tema-action: #d43b83;
    --tema-action-hover: #b02e6c;
    --tema-hero-scrim: #2a2d31;

    /*
     * primary = logo pink (accents / buttons). secondary = light panel so
     * fills that still read the token stay grey, not charcoal or pink.
     */
    --heartox-primary: #d43b83;
    --heartox-primary-rgb: 212, 59, 131;
    --heartox-secondary: #e8eaed;
    --heartox-secondary-rgb: 232, 234, 237;
}

/* ---------------------------------------------------- light chrome surfaces */

.main-header,
.main-header__inner,
.sticky-header--cloned,
.main-footer,
.main-footer__top,
.cta-one-footer__inner {
    background-color: var(--tema-surface);
}

/*
 * These two bars were the template's yellow, which the recolour turns into the
 * dark action tone. On a grey and white site they read better light, and the
 * dark text above is set for them.
 */
.main-header__bottom,
.main-footer__bottom {
    background-color: var(--tema-surface);
    border-top: 1px solid var(--tema-line);
}

.main-header__bottom {
    border-top: 0;
    border-bottom: 1px solid var(--tema-line);
}

.main-header--one.sticky-header--cloned .main-header__bottom {
    background-color: var(--tema-surface);
}

/*
 * Photo bands keep a dark scrim so white type over images stays readable.
 * UI chrome (progress strips, icon discs, donate rails) is light grey below.
 */
.main-slider-one__item {
    background-color: var(--tema-ink);
}

.banner-one__item {
    background-color: var(--tema-panel);
}

.charity-cause-donate__inner,
.donate-now__inner {
    background-color: var(--tema-panel);
}

/* ------------------------------------------------------------------ header */

.main-header,
.main-header__inner,
.topbar-one,
.topbar-one__inner,
.topbar-one__info__item,
.topbar-one__text,
.topbar-one__info__item a,
.topbar-one__social a,
.main-header__info__item {
    color: var(--tema-ink-soft);
}

.topbar-one__info__icon,
.topbar-one__info__item i {
    color: var(--tema-ink);
}

/*
 * Template paints menu links white for the old dark header bar. Light chrome
 * needs dark ink — match .main-menu specificity so white does not win.
 */
.main-menu .main-menu__list > li > a,
.main-menu .main-menu__list > li.current > a,
.main-header--one .main-header__nav .main-menu__list > li > a,
.main-header--one .main-header__nav .main-menu__list > li.current > a,
.main-header--one.sticky-header--cloned .main-menu .main-menu__list > li > a,
.main-header--one.sticky-header--cloned .main-menu .main-menu__list > li.current > a,
.main-header__inner__right a,
.main-header__info__item {
    color: var(--tema-ink);
}

.main-menu .main-menu__list > li > a:hover,
.main-menu .main-menu__list > li.current > a,
.main-header--one .main-header__nav .main-menu__list > li:hover > a,
.main-header--one .main-header__nav .main-menu__list > li.current > a,
.main-header--one.sticky-header--cloned .main-menu .main-menu__list > li:hover > a,
.main-header--one.sticky-header--cloned .main-menu .main-menu__list > li.current > a,
.main-header__inner__right a:hover {
    color: var(--tema-ink-soft);
}

.main-menu .main-menu__list .sub-menu,
.main-menu .main-menu__list li ul {
    background: #fff;
    border: 1px solid var(--tema-line);
    left: 0;
    min-width: 260px;
    padding: 12px;
    box-shadow: 0 16px 40px rgba(32, 33, 36, 0.12);
    border-radius: 14px;
}

.main-menu .main-menu__list li ul li > a,
.main-menu .main-menu__list .sub-menu > li > a {
    color: var(--tema-ink);
    background: transparent;
    text-transform: none;
    font-weight: 600;
    line-height: 1.35;
    padding: 10px 14px;
    margin-bottom: 2px;
    border-radius: 10px;
}

.main-menu .main-menu__list li ul li.current > a,
.main-menu .main-menu__list li ul li:hover > a {
    background-color: var(--tema-action);
    color: #fff;
}

.main-menu .main-menu__list > li.dropdown > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.55;
}

/* Kill stray template markers under top-level items. */
.main-menu .main-menu__list > li::before,
.main-menu .main-menu__list > li::after,
.main-menu .main-menu__list > li > a::before {
    display: none !important;
}

/* Hamburger was white for the dark bar — now sits on white chrome. */
.mobile-nav__btn span,
.main-header--four .mobile-nav__btn span {
    background-color: var(--tema-ink);
}

/* Dark drawer keeps white labels (do not inherit header ink). */
.mobile-nav__content a,
.mobile-nav__content .main-menu__list li > a,
.mobile-nav__close {
    color: #fff;
}

.mobile-nav__close:hover,
.mobile-nav__content .main-menu__list li > a:hover {
    color: #e8eaed;
}

/* ------------------------------------------------------------------ footer */

.main-footer__top,
.main-footer__bottom {
    border-color: var(--tema-line);
}

/* These beat the template's own, more specific, white-on-dark rules. */
.main-footer .footer-widget__text,
.main-footer .footer-widget__links a,
.main-footer .footer-widget__contact li,
.main-footer .footer-widget__contact a,
.main-footer .main-footer__copy,
.main-footer .main-footer__copy a,
.main-footer .footer-widget__social a,
.cta-one-footer .cta-one-footer__text {
    /* the template sets white at 70% opacity here, invisible on a light band */
    color: var(--tema-ink-soft);
}

.main-footer .footer-widget__title,
.main-footer .footer-widget__contact a:hover,
.cta-one-footer .cta-one-footer__title {
    color: var(--tema-ink);
}

/* ----------------------------------------------------------------- buttons */

/*
 * Filled face lives on ::before/::after (template), not the element background.
 * Accent = logo pink; hover = darker pink.
 */
.heartox-btn,
.heartox-btn--base,
.heartox-btn--primary,
.heartox-btn--secondary {
    background-color: var(--tema-action);
    color: #fff;
}

.heartox-btn::before,
.heartox-btn--base::before,
.heartox-btn--primary::before,
.heartox-btn--secondary::before,
.main-header__btn .heartox-btn::before {
    background-color: var(--tema-action);
}

.heartox-btn::after,
.heartox-btn--base::after,
.heartox-btn--primary::after,
.heartox-btn--secondary::after,
.main-header__btn .heartox-btn::after {
    background-color: var(--tema-action-hover);
}

@media (max-width: 1399px) {
    .main-header__btn .heartox-btn::before {
        background-color: var(--tema-action);
    }

    .main-header__btn .heartox-btn::after {
        background-color: var(--tema-action-hover);
    }
}

.heartox-btn:hover,
.heartox-btn--base:hover,
.heartox-btn--primary:hover,
.heartox-btn--secondary:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

.heartox-btn--border {
    background-color: transparent;
    border: 1px solid var(--tema-line);
    color: var(--tema-ink);
}

.heartox-btn--border::before {
    background-color: transparent;
}

.heartox-btn--border::after {
    background-color: var(--tema-action);
}

.heartox-btn--border:hover {
    color: #fff;
    border-color: var(--tema-action);
}

/* ------------------------------------------------------------ photo / hero */

/*
 * Template left-scrim was light grey for dark type. After recolour the copy is
 * white, so the left plane must stay charcoal.
 */
.main-slider-one__bg::before {
    background: linear-gradient(
        93.4deg,
        var(--tema-hero-scrim) 10%,
        rgba(32, 33, 36, 0.78) 28%,
        rgba(32, 33, 36, 0.2) 45%,
        transparent 50%
    );
}

/* Recolour turned right paint-splat white — covers headline. Hide it. */
.main-slider-one__shape {
    display: none;
}

/* AMACC mark watermark — esquerda (left 10%), centro na altura. */
.main-slider-one__shape-two {
    left: 10%;
    top: 50%;
    opacity: 0.28;
    pointer-events: none;
    width: min(28vw, 220px);
    max-width: 220px;
    transform: translate(-500px, -50%);
}

.main-slider-one__shape-two img {
    width: 100%;
    height: auto;
    display: block;
    filter: none;
}

.main-slider-one .active .main-slider-one__shape-two {
    opacity: 0.28;
    transform: translate(0, -50%);
}

/*
 * Template wipe: title::after is a solid currentColor (white) slab that slides
 * across the headline. It sticks mid-transition / on owl clones and blanks text.
 */
.main-slider-one__title {
    position: relative;
}

.main-slider-one__title::after {
    display: none !important;
    content: none !important;
}

.main-slider-one .active .main-slider-one__title::after {
    display: none !important;
    transform: none;
}

/* Hero CTAs: flat pink pills, no bubble pseudo / overflow clip. */
.main-slider-one__btn {
    overflow: visible;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.main-slider-one__btn .heartox-btn {
    background-color: var(--tema-action);
    color: #fff;
    padding: 14px 28px;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
}

.main-slider-one__btn .heartox-btn::before,
.main-slider-one__btn .heartox-btn::after {
    display: none;
}

.main-slider-one__btn .heartox-btn:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

/* Badge next to buttons: glass on scrim, not solid white slab. */
.main-slider-one__btn__happy {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 18px 10px 12px;
}

.main-slider-one__btn__happy__text {
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
}

.main-slider-one__btn__happy__img img {
    border-color: rgba(255, 255, 255, 0.35);
}

/*
 * The template tinted these cards and bands with its green and yellow, which
 * doubled as the scrim that kept white text readable. With the tint gone, a
 * bright photograph leaves the title unreadable, so the scrim is explicit.
 */
.volunteer-video__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(32, 33, 36, .88) 0%, rgba(32, 33, 36, .35) 60%, rgba(32, 33, 36, .18) 100%);
    pointer-events: none;
}

/* Inner-page header: photo visible, light bottom scrim only for type. */
.page-header {
    background-color: var(--tema-ink);
    padding-top: clamp(120px, 18vw, 180px);
    padding-bottom: clamp(72px, 12vw, 140px);
}

.page-header__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(32, 33, 36, 0.55) 0%,
        rgba(32, 33, 36, 0.18) 45%,
        rgba(32, 33, 36, 0.05) 100%
    );
    pointer-events: none;
}

.page-header__title {
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    text-shadow: 0 1px 12px rgba(32, 33, 36, 0.35);
}

.page-header .heartox-breadcrumb {
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--tema-ink);
}

.page-header .heartox-breadcrumb,
.page-header .heartox-breadcrumb a,
.page-header .heartox-breadcrumb span,
.page-header .heartox-breadcrumb li {
    color: var(--tema-ink-soft);
}

.page-header .heartox-breadcrumb li a:hover {
    color: var(--tema-action);
}

/*
 * Their position is left alone on purpose: these layers are already absolute
 * full-bleed backgrounds, and forcing relative drops them into normal flow,
 * which stretches the cards into strips.
 */

/* The card content sits above its scrim. */
.banner-one__item__content,
.donation-one__item__content,
.main-slider-one__item .container,
.volunteer-video__content,
.page-header .container {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------- text over a dark scrim */

.main-slider-one__content,
.main-slider-one__title,
.main-slider-one__text,
.main-slider-one__sub-title,
.volunteer-video__title {
    color: #fff;
}

/* Banner overlays are light — ink, not white. */
.banner-one__item__content,
.banner-one__item__main-title,
.banner-one__item__sub-title {
    color: var(--tema-ink);
}

/* Light donate rails: dark ink, not the photo-scrim white. */
.charity-cause-donate__title .sec-title__title,
.charity-cause-donate__title .sec-title__tagline,
.charity-cause-donate__text,
.charity-cause-donate .date,
.donate-now__right .sec-title__title,
.donate-now__funfact__item__count,
.donate-now__funfact .text {
    color: var(--tema-ink);
}

/* ----------------------------------------------- impact cards (funfact-one) */

.funfact-one .sec-title__title {
    color: var(--tema-ink);
}

.funfact-one__single::after {
    background-color: var(--tema-surface);
    border: 1px solid var(--tema-line);
}

.funfact-one__single:hover::after {
    height: 100%;
    border-radius: 10px;
    background-color: var(--tema-surface);
}

.funfact-one__icon__inner {
    background-color: var(--tema-action);
    color: #fff;
}

.funfact-one__icon__inner i {
    color: #fff;
}

.funfact-one__icon__inner img {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.funfact-one__single:hover .funfact-one__icon__inner {
    background-color: var(--tema-action-hover);
}

.funfact-one__single:hover .funfact-one__icon::before {
    background-color: var(--tema-action);
}

.funfact-one__text {
    color: var(--tema-ink-soft);
}

/* ----------------------------------------------- donate-now band (home) */

.donate-now__bg::after {
    background-color: rgba(32, 33, 36, 0.52);
}

/*
 * Heartox: inner cola no fundo da section (só radius em cima).
 * padding-bottom na section = buraco cinza embaixo — remove.
 */
.donate-now__inner {
    background-color: var(--tema-surface);
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 0;
    box-shadow: 0 -12px 32px rgba(32, 33, 36, 0.12);
    overflow: hidden;
}

.donate-now__inner > .row {
    align-items: stretch;
}

.donate-now__inner > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.donate-now__left {
    background-color: var(--tema-surface-soft);
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
}

.donate-now .donate-now__right {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    background-color: var(--tema-panel);
    padding: 48px 40px !important;
}

@media (min-width: 992px) {
    .donate-now .donate-now__right {
        padding: 56px 48px 56px 40px !important;
        border-radius: 0;
    }
}

@media (max-width: 991px) {
    .donate-now .donate-now__right {
        padding: 36px 28px !important;
        border-radius: 0;
    }
}

.donate-now .donate-now__right .sec-title--three .sec-title__tagline,
.donate-now .donate-now__right .sec-title--three .sec-title__title {
    color: var(--tema-ink);
}

.donate-now .donate-now__right .sec-title__tagline {
    color: var(--tema-action);
    font-weight: 600;
}

.donate-now .donate-now__right .sec-title {
    padding-bottom: 20px;
}

.donate-now__funfact__item {
    background-color: var(--tema-surface);
    border: 1px solid var(--tema-line);
}

.donate-now__funfact__item::after {
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--tema-action);
}

.donate-now__funfact__item__count {
    color: var(--tema-action);
}

.donate-now__funfact__item .text {
    color: var(--tema-ink-soft);
}

.donate-now__funfact__item:last-child {
    background-color: var(--tema-surface);
    align-items: center;
    text-align: center;
    padding-left: 0;
}

.donate-now__funfact__item:last-child .donate-now__funfact__item__count {
    color: var(--tema-action);
    font-size: 40px;
}

.donate-now-form__cta .heartox-btn {
    background-color: var(--tema-action);
    color: #fff;
}

.donate-now-form__cta .heartox-btn::before,
.donate-now-form__cta .heartox-btn::after {
    display: none;
}

.donate-now-form__cta .heartox-btn:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

.main-slider-one__sub-title {
    color: rgba(255, 255, 255, 0.92);
}

.main-slider-one__text {
    color: rgba(255, 255, 255, 0.88);
}

/* Active slide restores opacity:0→1; keep readable after that. */
.main-slider-one .active .main-slider-one__text {
    opacity: 0.9;
}

/* ------------------------------------------------------ light panels */

/*
 * --heartox-base is dark ink (dual-use token). Components that paint it as a
 * fill need an explicit light panel + matching foreground.
 */
.testimonials-card__bottom,
.testimonials-card__bottom::before,
.testimonials-card:hover .testimonials-card__bottom,
.testimonials-card:hover .testimonials-card__bottom::before,
.donate-now__left,
.main-header--three,
.main-header--three.sticky-header--cloned,
.main-header--four.sticky-header--cloned {
    background-color: var(--tema-panel);
    background: var(--tema-panel);
}

.about-one__help__progress-box__bg::after {
    background-color: #fff;
    background: #fff;
    opacity: 1;
}

/* One grey panel wraps both columns (copy + photo), not full-bleed section. */
.about-one {
    background-color: transparent;
}

.about-one > .container {
    background-color: var(--tema-panel);
    border-radius: 16px;
    /* Logo badge hangs top:-50px / right:-70px; ribbon hangs bottom:-46px. */
    padding-top: 72px;
    padding-bottom: 80px;
    padding-left: 28px;
    padding-right: 96px;
    max-width: 1400px;
}

.about-one__content {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

.about-one__help__list {
    background-color: #fff;
}

/* Center divider cuts through uneven columns — remove. */
.about-one__help__list::after {
    display: none;
}

.about-one__help__list__icon {
    background-color: var(--tema-action);
    color: #fff;
}

.about-one__help__list__icon img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.about-one__help__list__icon::after {
    display: none;
}

.about-one__help__list__item:hover .about-one__help__list__icon {
    background-color: var(--tema-action-hover);
    color: #fff;
    transform: translateY(-2px);
}

.about-one__help__list__item:hover .about-one__help__list__icon::after {
    display: none;
}

.about-one__help .progress-box__text,
.about-one__help .progress-box__text__inner,
.about-one__help .progress-box__text span {
    color: var(--tema-ink);
}

.about-one__help .progress-box__bar__inner,
.about-one__help .progress-box__bar__inner::before,
.about-one__help .progress-box__number,
.about-one__help .progress-box__number::after {
    background-color: var(--tema-action);
}

.about-one__help .progress-box__number {
    color: #fff;
}

/*
 * Bandeirinha: fita escura + texto branco (Heartox original).
 * Tira invert claro e tinta rosa/preta nos labels.
 */

.about-one__thumb__funfact__count,
.about-one__thumb__funfact__count span,
.about-one__thumb__funfact__text {
    color: #fff !important;
}

/* Foto do about: sem filtro/ajuste de cor. */
.about-one__thumb__item img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* About: stack + room for hanging ribbon/logo on small screens. */
@media (max-width: 991px) {
    .about-one > .container {
        padding-top: 40px;
        padding-bottom: 96px;
        padding-left: 16px;
        padding-right: 16px;
        border-radius: 12px;
    }

    .about-one__thumb {
        margin: 24px 12px 0 0;
        max-width: 100%;
    }

    .about-one__thumb::after {
        right: -12px;
        bottom: -16px;
    }

    .about-one__thumb__item__icon {
        top: -24px !important;
        right: -12px !important;
        width: 64px;
    }

    .about-one__thumb__item__icon img {
        width: 64px;
        height: auto;
    }

    .about-one__thumb__bottom {
        left: 0;
        right: auto;
        max-width: 92%;
    }

    .about-one__help__list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-one__btn {
        margin-top: 8px;
    }

    .about-one__btn .heartox-btn {
        display: inline-block;
    }

    .about-one .sec-title__title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        line-height: 1.2;
    }
}

@media (max-width: 575px) {
    .about-one__help__list__item {
        padding: 18px 16px;
    }

    .page-header {
        padding-top: 110px;
        padding-bottom: 64px;
    }
}

.testimonials-card::after {
    background: var(--tema-action);
}

.testimonials-card__author-name {
    color: var(--tema-ink);
}

.testimonials-card__author-position,
.testimonials-card:hover .testimonials-card__author-position {
    color: var(--tema-muted);
}

.testimonials-card__author {
    border-color: rgba(32, 33, 36, 0.12);
}

.testimonials-card__quite svg path {
    fill: rgba(32, 33, 36, 0.28);
}

.testimonials-one .owl-dots .owl-dot:hover span,
.testimonials-one .owl-dots .owl-dot.active span {
    background-color: var(--tema-action) !important;
}

/* --------------------------------------------------- donation cards */

.donation-one__item,
.donation-one__item__content {
    background-color: var(--tema-panel);
}

.donation-one__item__title,
.donation-one__item__title a,
.donation-one__item .progress-box__text,
.donation-one__item .progress-box__text span,
.donation-one__item .progress-box__text__inner {
    color: var(--tema-ink);
}

.donation-one__item__text {
    /* Template pulls text up (-67px) so it stacks on the title until hover. */
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--tema-muted);
}

.donation-one__item:hover .donation-one__item__text {
    margin-top: 0;
}

.donation-one__item .progress-box__bar__inner,
.donation-one__item .progress-box__bar__inner::before,
.donation-one__item .progress-box__number,
.donation-one__item .progress-box__number::after {
    background-color: var(--tema-action);
}

.donation-one__item .progress-box__number {
    color: #fff;
}

.donation-one__item:hover {
    background-color: var(--tema-line);
}

/* Gallery count pill ("3") reads as stray badge — hide. */
.donation-one__item__bottom__btn,
.donation-one__item__popup .count {
    display: none;
}

.donation-one__item__category {
    background-color: var(--tema-ink);
    color: #fff;
}

.donation-one__item__category:hover {
    background-color: var(--tema-action);
    color: #fff;
}

/* Gallery hover: soft pink veil + white + ring (not solid charcoal). */
.gallery-one__card__hover__box {
    background-color: rgba(212, 59, 131, 0.52);
}

.gallery-one__card__hover .img-popup {
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(32, 33, 36, 0.18);
}

.gallery-one__card__hover .img-popup:hover {
    background-color: var(--tema-ink);
}

.gallery-one__card__icon::after,
.gallery-one__card__icon::before {
    background-color: var(--tema-action);
}

.gallery-one__card__hover .img-popup:hover .gallery-one__card__icon::after,
.gallery-one__card__hover .img-popup:hover .gallery-one__card__icon::before {
    background-color: #fff;
}

.gallery-one__card:hover img {
    opacity: 1;
    transform: scale(1.04);
}

/* ----------------------------------------------- charity-cause / diferenciais */

/* Icon cards: light panel + dark glyphs (was white-on-grey). */
.charity-cause__list__item {
    background: #fff;
    border: 1px solid var(--tema-line);
}

.charity-cause__list__item::after {
    background: var(--tema-action);
}

.charity-cause__list__item__icon {
    color: var(--tema-action);
    border-bottom-color: var(--tema-line);
}

.charity-cause__list__item__icon img {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    object-fit: contain;
}

.charity-cause__list__item__title {
    color: var(--tema-ink);
}

.charity-cause__list__item:hover .charity-cause__list__item__icon,
.charity-cause__list__item:hover .charity-cause__list__item__title {
    color: #fff;
}

.charity-cause__list__item:hover .charity-cause__list__item__icon img {
    filter: brightness(0) invert(1);
}

.charity-cause__list__item:hover .charity-cause__list__item__icon {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

/* Progress strip: light, not charcoal; pink fill. */
.charity-cause-donate__box {
    background-color: #fff;
    border: 1px solid var(--tema-line);
}

.charity-cause-donate .progress-box__text,
.charity-cause-donate .progress-box__text__inner,
.charity-cause-donate .progress-box__text span {
    color: var(--tema-ink);
}

.charity-cause-donate .progress-box__bar {
    background-color: var(--tema-line);
}

.charity-cause-donate .progress-box__bar__inner,
.charity-cause-donate .progress-box__bar__inner::before,
.charity-cause-donate .progress-box__number,
.charity-cause-donate .progress-box__number::after {
    background-color: var(--tema-action);
}

.charity-cause-donate .progress-box__number {
    color: #fff;
}

/* ----------------------------------------------------------- cta donation */

.cta-one {
    overflow: hidden;
}

/* Shape canto inferior esquerdo (Heartox) + espelho invertido no topo direito. */
.cta-one__shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
}

.cta-one__shape img {
    display: block;
    max-width: min(42vw, 552px);
    height: auto;
    opacity: 0.9;
}

.cta-one__shape--bl {
    bottom: 0;
    left: 0;
}

.cta-one__shape--tr {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
}

.cta-one__shape--tr img {
    transform: scale(-1, -1);
}

.cta-one--centered .cta-one__content {
    margin-inline: auto;
    max-width: 720px;
}

.cta-one__content {
    background-color: var(--tema-panel);
}

.cta-one__top {
    background-color: var(--tema-action);
}

/* Template slides gray ::after over header on card hover — breaks contrast. */
.cta-one__top::after {
    display: none;
}

.cta-one__content:hover .cta-one__top::after {
    transform: translateX(-100%);
}

.cta-one__top__title,
.cta-one__top__icon {
    color: #fff;
}

.cta-one__text {
    color: var(--tema-ink-soft);
}

.cta-one__list__item {
    color: var(--tema-ink);
}

.cta-one__list__icon {
    background-color: var(--tema-action);
    color: #fff;
}

.cta-one__btn {
    margin-top: 4px;
}

/* Wizard buttons: override cta-one gray pill + bubble hover from template. */
.cta-one__btn .donation-wizard .heartox-btn {
    background-color: var(--tema-action);
    color: #fff;
    font-size: 16px;
    padding: 13px 38px;
}

.cta-one__btn .donation-wizard .heartox-btn::before,
.cta-one__btn .donation-wizard .heartox-btn::after {
    display: none;
}

.cta-one__btn .donation-wizard .heartox-btn:hover:not(:disabled):not([disabled]) {
    background-color: var(--tema-action-hover);
    color: #fff;
}

.cta-one__btn .donation-wizard .heartox-btn:disabled,
.cta-one__btn .donation-wizard .heartox-btn[disabled] {
    background-color: #d5d8dc;
    color: #6b7280;
    cursor: not-allowed;
}

.cta-one__btn .donation-wizard .heartox-btn:disabled:hover,
.cta-one__btn .donation-wizard .heartox-btn[disabled]:hover {
    background-color: #d5d8dc;
    color: #6b7280;
}

.main-header__inner__right a:hover,
.funfact-one__count,
.donation-card .progress-box__text i,
.donation-details .progress-box__text i,
.donation-details-two .progress-box__text i,
.product-details__form-ratings,
.login-page__form-forgot-password a:hover,
.testimonials-card__rating i {
    color: var(--tema-action);
}

.donation-details__card__image__btn {
    background-color: var(--tema-action);
}

.donation-details__card__image__btn:hover {
    background-color: var(--tema-action-hover);
}

.organizer-card__category:hover,
.organizer-card:hover .organizer-card__category {
    background-color: var(--tema-action);
    color: #fff;
}

.organizer-card__info li:hover .organizer-card__info__icon {
    background-color: var(--tema-action);
    color: #fff;
}

.sidebar-donation__social .social-links a:hover {
    background-color: var(--tema-action);
    border-color: var(--tema-action);
    color: #fff;
}

/* -------------------------------------------------------------- blog cards */

.blog-card {
    transition: transform 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
}

.blog-card__content {
    border-color: var(--tema-line);
    box-shadow: 0 10px 28px rgba(32, 33, 36, 0.08);
}

.blog-card__content__month {
    background-color: var(--tema-action);
    color: #fff;
}

.blog-card__content::after {
    background-color: var(--tema-action);
}

.blog-card__title {
    color: var(--tema-ink);
    border-color: var(--tema-line);
}

.blog-card__text {
    color: var(--tema-muted);
    font-size: 15px;
    line-height: 1.55;
}

.blog-card__meta {
    margin-bottom: 12px;
}

.blog-card__meta li {
    color: var(--tema-muted);
}

.blog-card__meta a {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tema-action);
}

.blog-card__meta a:hover {
    background: none;
    color: var(--tema-action-hover);
}

.blog-card__link {
    background-color: transparent;
    border: 2px solid var(--tema-action);
    color: var(--tema-action);
    padding: 8px 20px;
}

.blog-card__link:hover {
    background-color: var(--tema-action);
    color: #fff;
}

/* Hover: lift + pink accent — no dark flip / grayscale. */
.blog-card:hover .blog-card__image img {
    transform: scale(1.04);
    filter: none;
}

.blog-card__image__link {
    background-color: rgba(212, 59, 131, 0.42);
}

.blog-card:hover .blog-card__content {
    border-color: var(--tema-action);
    background-color: var(--tema-surface);
}

.blog-card:hover .blog-card__content::after {
    transform: translateY(-50%) rotateX(0deg);
}

.blog-card:hover .blog-card__content__month {
    background-color: var(--tema-action-hover);
    color: #fff;
}

.blog-card:hover .blog-card__meta li,
.blog-card:hover .blog-card__meta li i {
    color: var(--tema-muted);
}

.blog-card:hover .blog-card__meta a {
    background: none;
    color: var(--tema-action);
}

.blog-card:hover .blog-card__meta a:hover {
    color: var(--tema-action-hover);
}

.blog-card:hover .blog-card__title {
    color: var(--tema-ink);
    border-color: var(--tema-line);
}

.blog-card:hover .blog-card__text {
    color: var(--tema-muted);
}

.blog-card:hover .blog-card__link {
    background-color: var(--tema-action);
    border-color: var(--tema-action);
    color: #fff;
}

.blog-card:hover .blog-card__link:hover {
    background-color: var(--tema-action-hover);
    border-color: var(--tema-action-hover);
}

/* ----------------------------------------------- funfact-four (lista) */

.funfact-four {
    background-color: var(--tema-panel);
    padding: 56px 0;
}

.funfact-four::after,
.funfact-four::before {
    display: none;
}

.funfact-four__list {
    align-items: stretch;
    gap: 24px 0;
}

.funfact-four__list__icon {
    background-color: var(--tema-action);
    color: #fff;
    flex-shrink: 0;
}

.funfact-four__list__icon img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.funfact-four__list__icon::after {
    background-color: var(--tema-action-hover);
}

.funfact-four__list__text {
    color: var(--tema-muted);
}

.funfact-four__list__count {
    color: var(--tema-ink);
}

@media (max-width: 991px) {
    .funfact-four {
        padding: 40px 0;
    }

    .funfact-four__list__item {
        justify-content: flex-start;
    }
}

/* ----------------------------------------------- team-two + cards */

.team-two {
    margin-bottom: 0;
    background-color: var(--tema-surface);
    padding-bottom: 64px;
}

.team-two .sec-title__title,
.team-two .sec-title__tagline {
    color: var(--tema-ink);
}

.team-card {
    height: 100%;
}

.team-card__inner {
    height: 100%;
    background-color: var(--tema-panel);
    border-radius: 12px;
    padding: 0 0 0;
    overflow: hidden;
    border: 1px solid var(--tema-line);
}

.team-card__inner::before,
.team-card__inner::after,
.team-two .team-card__inner::after {
    display: none;
}

.team-card__image {
    border-radius: 12px 12px 0 0;
    aspect-ratio: 7 / 8;
    background: var(--tema-panel);
}

.team-card__image img,
.team-card__image--vazia {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.team-card__content {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 18px 20px 22px;
    border-radius: 0;
    background-color: var(--tema-surface);
}

.team-card__title {
    color: var(--tema-ink);
}

.team-card__designation {
    color: var(--tema-muted);
}

.team-card:hover .team-card__image img {
    transform: scale(1.03);
}

/* ----------------------------------------------- volunteer-video band */

/* Boxed no container (Heartox). Proporção original da foto — sem crop/full-bleed. */
.volunteer-video {
    position: relative;
    padding-top: 48px;
    padding-bottom: 48px;
    background-color: var(--tema-surface);
}

.volunteer-video__bg {
    display: none;
}

.volunteer-video__frame {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.volunteer-video__photo {
    display: block;
    width: 100%;
    height: auto !important;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}

.volunteer-video__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: min(755px, calc(100% - 32px));
    margin: 0;
    padding: 28px 40px 40px;
    text-align: center;
    line-height: normal;
    background: rgba(32, 33, 36, 0.9);
    border-radius: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.volunteer-video__title {
    color: #fff;
    margin: 0 0 20px;
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1.25;
}

.volunteer-video__btn .heartox-btn {
    background-color: var(--tema-action);
    color: #fff;
}

.volunteer-video__btn .heartox-btn::before,
.volunteer-video__btn .heartox-btn::after {
    display: none;
}

.volunteer-video__btn .heartox-btn:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

.volunteer-video .video__popup {
    margin-top: 0;
    margin-bottom: 16px;
    background-color: var(--tema-action);
}

.volunteer-video .video__popup:hover {
    background-color: var(--tema-action-hover);
}

@media (max-width: 767px) {
    .volunteer-video__content {
        padding: 20px 18px 28px;
        width: calc(100% - 24px);
    }
}

/* ========================================================= inner pages
   Same palette/contrast fixes as home + sobre — global, not per-page. */

/* Flat buttons everywhere (template wipe off). */
.heartox-btn::before,
.heartox-btn::after {
    display: none;
}

/* ----------------------------------------------- banner-one / faixa_cards / grid_servicos */

.banner-one {
    background-color: var(--tema-surface);
    padding-bottom: 64px;
}

.banner-one__item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--tema-line);
    min-height: 280px;
}

.banner-one__item__bg::before,
.banner-one__item__bg::after {
    display: none;
}

.banner-one__item__content {
    padding: 28px 24px;
    background: rgba(232, 234, 237, 0.82);
}

.banner-one__item__sub-title {
    color: var(--tema-muted);
}

.banner-one__item__main-title {
    color: var(--tema-ink);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    margin-bottom: 20px;
}

.banner-one__item__btn {
    background-color: var(--tema-action);
    color: #fff;
}

.banner-one__item__btn:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

.banner-one .owl-dots .owl-dot:hover span,
.banner-one .owl-dots .owl-dot.active span {
    background-color: var(--tema-action) !important;
}

/* ----------------------------------------------- charity-cause overlap */

.charity-cause {
    padding-bottom: 64px;
}

.charity-cause-donate {
    padding-bottom: 64px;
    background-color: var(--tema-surface);
}

.charity-cause-donate__inner {
    margin-top: 0;
    background-color: var(--tema-panel);
    border: 1px solid var(--tema-line);
    box-shadow: 0 12px 32px rgba(32, 33, 36, 0.08);
}

.charity-cause-donate__btn .heartox-btn {
    background-color: var(--tema-action);
    color: #fff;
}

.charity-cause-donate__btn .heartox-btn:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

/* Photo band keeps white titles; donate rail stays ink. */
.charity-cause__bg ~ .container .sec-title--two .sec-title__tagline,
.charity-cause__bg ~ .container .sec-title--two .sec-title__title {
    color: #fff;
}

/* ----------------------------------------------- donate-now band spacing */

/* Heartox: só padding-top (funfacts sobrepõem). Fundo da section = base do card. */
.donate-now {
    padding-top: 120px;
    padding-bottom: 0 !important;
    margin-bottom: 0;
}

.donate-now .donate-now__right .donate-now-form .heartox-btn {
    background-color: var(--tema-action);
    color: #fff;
}

.donate-now .donate-now__right .donate-now-form .heartox-btn:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

.donate-now .donate-form__amount__btn {
    background-color: var(--tema-surface);
    border: 1px solid var(--tema-line);
    color: var(--tema-ink);
}

.donate-now .donate-form__amount__btn.active,
.donate-now .donate-form__amount__btn:hover {
    background-color: var(--tema-action);
    border-color: var(--tema-action);
    color: #fff;
}

/* ----------------------------------------------- donation cards residual */

.donation-one__bg {
    display: none;
}

.donation-one__item__content {
    margin-top: 0;
    padding-top: 24px;
}

.donation-one__item__image::after,
.donation-one__item__image::before {
    background: linear-gradient(
        360deg,
        rgba(32, 33, 36, 0.55) 0%,
        rgba(32, 33, 36, 0) 85%
    );
}

.donation-one__item:hover .donation-one__item__image::before {
    opacity: 0;
    visibility: hidden;
}

.donation-one__item:hover {
    background-color: var(--tema-panel);
}

/* ----------------------------------------------- testimonials-four (sobre) */

.testimonials-four {
    background-color: var(--tema-surface);
}

.testimonials-four .sec-title__title,
.testimonials-four .sec-title__tagline {
    color: var(--tema-ink);
}

.testimonials-four__box {
    background-color: var(--tema-panel);
    border: 1px solid var(--tema-line);
    border-radius: 12px;
}

.testimonials-four__box__count,
.testimonials-four__box__title,
.testimonials-four__box__text {
    color: var(--tema-ink);
}

.testimonials-four__box__count {
    color: var(--tema-action);
}

.testimonials-four__inner,
.testimonials-four__carousel {
    margin-left: 0;
}

.testimonials-four__item {
    height: auto;
    background-color: #fff;
    border: 1px solid var(--tema-line);
    border-radius: 12px;
    overflow: hidden;
}

.testimonials-four__item__top::after {
    display: none;
}

.testimonials-four__item__content {
    padding: 28px 24px 24px;
    border: none;
    border-radius: 0;
    min-height: 0;
}

.testimonials-four__inner.owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.testimonials-four__inner.owl-carousel .owl-item {
    display: flex;
    height: auto;
}

.testimonials-four__inner.owl-carousel .item {
    width: 100%;
    display: flex;
}

.testimonials-four__inner.owl-carousel .testimonials-four__item {
    width: 100%;
}

.testimonials-four__item__text {
    color: var(--tema-muted);
    text-align: left;
    margin-bottom: 16px;
}

.testimonials-four__item__name {
    color: var(--tema-ink);
}

.testimonials-four__item__deg {
    color: var(--tema-muted);
}

.testimonials-four__item__author {
    max-width: none;
    width: auto;
    height: auto;
    border-radius: 0;
    display: flex;
    justify-content: center;
    padding: 0 24px 24px;
}

.testimonials-four__item__author img {
    width: 56px;
    height: 56px;
    border: 3px solid var(--tema-line);
}

.testimonials-four__item:hover .testimonials-four__item__top,
.testimonials-four__item:hover .testimonials-four__item__name,
.testimonials-four__item:hover .testimonials-four__item__deg {
    color: inherit;
    background-color: inherit;
}

.testimonials-four .owl-dots .owl-dot:hover span,
.testimonials-four .owl-dots .owl-dot.active span {
    background-color: var(--tema-action) !important;
}

.testimonials-one__btn .heartox-btn {
    background-color: var(--tema-action);
    color: #fff;
}

.testimonials-one__btn .heartox-btn:hover {
    background-color: var(--tema-action-hover);
    color: #fff;
}

/* ----------------------------------------------- product grid */

.product-one {
    background-color: var(--tema-surface);
}

.product__item {
    border: 1px solid var(--tema-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.product__item:hover {
    border-color: var(--tema-action);
}

.product__item__title a {
    color: var(--tema-ink);
}

.product__item__price {
    color: var(--tema-action);
}

.product__item .heartox-btn {
    width: 100%;
}

/* ----------------------------------------------- pilares + faq */

.pilares {
    background-color: var(--tema-surface);
}

.faq-one {
    background-color: var(--tema-surface);
}

/* ----------------------------------------------- contact forms */

.contact-one {
    padding-top: 0;
}

.contact-one .sec-title__title {
    color: var(--tema-ink);
    margin-bottom: 12px;
}

.contact-one__text {
    color: var(--tema-muted);
    max-width: 42rem;
    margin-bottom: 0;
}

.contact-one__panel {
    padding: 28px 28px 32px;
    border: 1px solid var(--tema-line, #e8eaed);
    border-radius: 16px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    box-shadow: 0 10px 30px rgba(26, 26, 26, 0.04);
}

@media (min-width: 992px) {
    .contact-one__panel {
        padding: 36px 40px 40px;
    }
}

.contact-one__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* ----------------------------------------------- page prose / legal */

.page-prose {
    background-color: var(--tema-surface);
}

.page-prose .sec-title__title {
    color: var(--tema-ink);
}