/* Natal Solidario 2026 - identidade visual V5.5
   Referencia: banner da 12a edicao em Nova Europa. Somente apresentacao.
   O arquivo original de divulgacao (com chave Pix) nao e publicado no site.
*/
:root {
  --pine: #0b5034;
  --pine-dark: #073b29;
  --evergreen: #082e22;
  --mint: #eaf3e8;
  --gold: #efca74;
  --cream: #fdfaf5;
  --paper: #fffefd;
  --ink: #192c25;
  --muted: #617467;
  --line: #e5e9df;
  --red: #ae1521;
  --shadow: 0 14px 38px rgba(32, 56, 41, .08);
}
body {
  background: radial-gradient(circle at 2% 24%, rgba(227, 190, 116, .09), transparent 27%),
              radial-gradient(circle at 98% 69%, rgba(169, 20, 40, .035), transparent 25%),
              var(--cream);
}
:focus-visible { outline: 3px solid #c88c20; outline-offset: 3px; }
.topline {
  background: linear-gradient(98deg, #8b0f1b 0%, #aa1824 42%, #0a5137 100%);
  color: #fff9ee;
  letter-spacing: .015em;
}
.topflex { min-height: 37px; align-items: center; }
.topline-campaign { font-weight: 750; }
.topline-campaign>span { color: #f5d17a; margin-right: 6px; }
.topline-social { color: #fff7ec; font-size: .76rem; display: inline-flex; gap: 5px; align-items: center; }
.topline-social:hover { color: #ffde93; }
.topline-social strong { font-weight: 790; }
.header {
  background: rgba(255, 254, 249, .985);
  border-bottom: 1px solid #e5e8dd;
  box-shadow: 0 2px 18px rgba(40, 60, 36, .03);
}
.brand { color: #093f29; font-size: 1.16rem; letter-spacing: -.04em; }
.brand small { color: #8b612b; font-size: .57rem; letter-spacing: .14em; }
.brandmark {
  background: #b30c1a;
  color: #f4d079;
  border: 2px solid #f3d8a4;
  box-shadow: 0 4px 0 rgba(125, 13, 26, .12);
  transform: rotate(-8deg);
}
.menu { gap: 20px; }
.menu>a:not(.button):hover { color: #aa1d26; }
.menu .button { background: #aa1421; }
.menu .button:hover { background: #8e0b18; }
.tiny-tag { background: #fff0e7; color: #a11a24; }
.button { background: #095037; border-radius: 11px; }
.button:hover { background: #073f2b; }
.button-gold { background: #f0c978; color: #173b29; }
.button-gold:hover { background: #ffdb93; }
.button-outline-light { background: rgba(255,255,255,.035); border-color: rgba(255,251,226,.7); }
.button-outline-light:hover { background: rgba(255,255,255,.14); }
.button-quiet { background: #ebf2e8; color: #094b32; }
.button-dark { background: #0a4d34; }
.hero {
  background:
    radial-gradient(ellipse at 92% 13%, rgba(248,193,108,.24), transparent 33%),
    radial-gradient(ellipse at 72% 85%, rgba(151,9,24,.37), transparent 48%),
    linear-gradient(117deg, #063a28 0%, #0a5036 51%, #104b32 78%, #1e392d 100%);
  position: relative;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.hero::before {
  height: 190px; width: 190px; right: 2%; top: -105px;
  background: radial-gradient(circle, rgba(252,212,137,.28), transparent 66%);
}
.hero::after {
  height: 270px; width: 270px; right: -120px; bottom: -145px;
  background: radial-gradient(circle, rgba(188,16,34,.3), transparent 66%);
}
.hero-grid { min-height: 505px; }
.hero-copy { padding-top: 63px; padding-bottom: 67px; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.3rem); letter-spacing: -.06em; max-width: 760px; text-wrap: balance; }
.hero h1 em { color: #f5d388; font-family: Georgia, serif; font-weight: 500; }
.hero-copy>p { font-size: 1.02rem; color: #f1f4e9; max-width: 555px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 3px; color: #ffdd91; }
.hero-annotation { color: #e2eedb; }
.hero-gift.one { background: #d9aa52; }
.hero-gift.two { background: #b5222d; }
.hero-gift.three { background: #f0d6a0; color: #ab1524; }
.hero-gift.one:before { background: #b10c24; }
.hero-gift.two:before { background: #f4d491; }
.hero-gift.three:before { background: #9c1524; }
.hero-art-label { border-color: #fff4d566; background: #144c3fbf; box-shadow: 0 15px 35px #04201850; }
.hero-seal {
  width: 147px; height: 147px;
  position: absolute; z-index: 3; left: 7%; top: 28px;
  display: grid; align-content: center; justify-items: center;
  border-radius: 50%; border: 3px solid #f1cd7b;
  outline: 4px solid rgba(251, 215, 153, .17);
  background: linear-gradient(135deg, #ad0f1c, #850d16);
  color: white; transform: rotate(-11deg);
  box-shadow: 0 16px 30px rgba(0, 30, 21, .35);
  text-align: center;
}
.hero-seal strong { font-size: 2.35rem; line-height: 1; letter-spacing: -.04em; }
.hero-seal span { font-size: .72rem; letter-spacing: .11em; line-height: 1.3; font-weight: 850; margin-top: 3px; }
.hero-seal small { color: #fbe1a1; font-size: .52rem; letter-spacing: .14em; }
.fundraising { border-color: #e5e7d9; border-top: 4px solid #b11b26; box-shadow: 0 14px 33px #0e4f3111; }
.raised strong { color: #0b5034; }
.progress { accent-color: #117447; }
.progress::-webkit-progress-value { background: linear-gradient(90deg, #0e764a, #2a9c64); }
.progress::-moz-progress-bar { background: #0e764a; }
.overline { color: #ae7622; }
.section h2 em { color: #a32027; }
.feature-donate { background: linear-gradient(155deg, #e9f3e9, #f5f9ef); border-color: #d7e7d7; }
.feature-cake { background: linear-gradient(150deg, #fff3e8, #fff8ef); border-color: #ecd8ca; }
.feature-donate .feature-icon { color: #a61520; }
.feature-cake .feature-icon { color: #b22d21; }
.feature-card { box-shadow: 0 8px 22px #173d3010; }
.feature-card:hover, .raffle-showcase-card:hover { border-color: #c5d7c7; }
.feature-link { color: #0a5034; }
.raffle-feature, .raffle-showcase-card, .history-card {
  border-color: #e1e7db;
  box-shadow: 0 7px 20px rgba(31, 61, 43, .045);
}
.raffle-showcase-card { border-top: 3px solid #cfb26d; }
.raffle-showcase-icon, .raffle-prize-symbol { background: linear-gradient(135deg, #e7f2e6 0%, #fbf0db 100%); }
.raffle-showcase-copy h3, .history-card h3 { color: #193e30; }
.raffle-empty { background: #f2f8ef; }
.raffle-empty h2, .raffle-empty h3 { color: #0a5136; }
.history-result strong { color: #b3222c; }
.page-heading {
  background:
    radial-gradient(ellipse at 91% 35%, rgba(255,210,124,.22), transparent 31%),
    linear-gradient(112deg,#074329,#0e5838 70%,#214b32);
  border-bottom: 4px solid #cfad58;
}
.page-heading .overline { color: #ffe0a3; }
.panel, .numbers-area, .demo-order-card { border-color: #e3e7dc; }
.numbers-area { border-top: 3px solid #d2b067; }
.numbers-grid-live .number-number.demo-selected { background: #0a5c3a; border-color: #0a5c3a; }
.numbers-grid-live .number-number.demo-marked { background: #f4e7d6; border-color: #d6b995; color: #7c5939; }
.numbers-grid-live .number-number:not(:disabled):hover { background: #dff0e4; }
.demo-pages button.active { background: #0a5034; border-color: #0a5034; }
.demo-selection-form { background: #f2f7ee; }
.demo-cost-summary strong, .demo-order-numbers span { color: #075438; }
.notice-help { background: #ecf5e9; }
.notice:not(.notice-help) { border-color: #edd9ac; background: #fff8ea; }
.callout { background: linear-gradient(110deg, #e8f2e7, #fff5e7); border-left: 4px solid #b21c27; margin-bottom: 28px; }
.callout>span { color: #b21c27; }
/* Instagram: visible in header bar, homepage and footer */
.social-campaign {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 105px minmax(0,1fr) auto;
  gap: 26px;
  align-items: center;
  background: linear-gradient(115deg, #fff4e0, #f7f3e8 54%, #e9f2e7);
  border: 1px solid #e6d8bc;
  border-radius: 20px;
  padding: 29px 33px;
  margin-bottom: 83px;
}
.social-campaign::after { content: '✦'; color: #ba27302a; position: absolute; font-size: 12rem; right: 30%; bottom: -136px; pointer-events: none; }
.social-campaign-mark { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 24px; background: #b21828; color: #ffde91; font-size: 3.6rem; transform: rotate(-8deg); box-shadow: 0 9px 0 #b51c2420; }
.social-campaign h2 { color: #164732; font-size: clamp(1.28rem,2.4vw,1.95rem); margin: 7px 0 8px; }
.social-campaign p { max-width: 640px; font-size: .89rem; margin: 0; }
.social-campaign .overline { color: #9c6c29; }
.button-instagram { background: #b51b27; white-space: nowrap; position: relative; z-index: 1; }
.button-instagram:hover { background: #93121d; }
.social-link-icon { display: inline-grid; place-items: center; font-size: 1.4rem; line-height: 1; }
.footer { background: linear-gradient(114deg, #082e22 0%, #0b3c2a 72%, #183624 100%); border-top: 5px solid #a81421; }
.footer-inner { gap: 35px; }
.footer-campaign { max-width: 520px; }
.footer-campaign>strong { color: #fff9e8; font-size: 1.05rem; }
.footer-campaign>strong span { color: #edc878; }
.footer-campaign p { color: #c2d7c8; max-width: 470px; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; border: 1px solid #c5d7c566; border-radius: 10px; padding: 9px 12px; color: #fff3cf; font-size: .81rem; font-weight: 800; }
.footer-social:hover { border-color: #f4d894; background: #ffffff12; }
.footer-social span:first-child { font-size: 1.22rem; line-height: 1; }
.footer-inner>div.footer-links:last-child { display: grid; grid-template-columns: repeat(2, minmax(120px,1fr)); gap: 8px 16px; align-content: start; font-size: .81rem; }
.footer-links strong { grid-column: 1 / -1; margin-bottom: 3px; color: #f2d593; }
.footer-links a:hover { color: #fbd58d; }
.footer-bottom { color: #a9c2b0; }
/* The admin panel inherits campaign colors but retains the restrained V5.4 layout. */
.admin-v54 .admin-tabs [aria-selected="true"] { background: #0a5037; }
.admin-v54 .admin-stat strong { color: #0a5037; }
@media (max-width: 990px) {
  .social-campaign { grid-template-columns: 75px 1fr; gap: 18px; }
  .social-campaign-mark { width: 70px; height: 70px; font-size: 2.8rem; border-radius: 17px; }
  .social-campaign .button { grid-column: 2; width: fit-content; }
  .hero-seal { left: -3%; top: 14px; width: 115px; height: 115px; }
  .hero-seal strong { font-size: 1.8rem; }
  .hero-seal span { font-size: .59rem; }
}
@media (max-width: 680px) {
  .topflex { justify-content: center; flex-wrap: wrap; gap: 3px 12px; padding: 7px 0; }
  .topflex .topline-social { font-size: .68rem; }
  .brand { font-size: 1.12rem; }
  .brandmark { width: 38px; height: 38px; }
  .hero-grid { min-height: 0; }
  .hero-copy { padding: 39px 0 22px; }
  .hero h1 { font-size: clamp(2.25rem, 9vw, 3.25rem); }
  .hero-copy>p { font-size: .92rem; }
  .hero-art { height: 184px; }
  .hero-seal { width: 93px; height: 93px; left: 0; top: 6px; border-width: 2px; }
  .hero-seal strong { font-size: 1.48rem; }
  .hero-seal span { font-size: .49rem; }
  .hero-seal small { font-size: .41rem; }
  .hero-art-label { max-width: 158px; padding: 11px; font-size: .69rem; }
  .hero-art-label>span { font-size: 1.4rem; }
  .fundraising { margin-top: 20px; }
  .social-campaign { grid-template-columns: 1fr; text-align: left; padding: 22px; gap: 13px; margin-bottom: 58px; }
  .social-campaign .button { grid-column: 1; width: 100%; white-space: normal; }
  .social-campaign-mark { width: 52px; height: 52px; font-size: 2.2rem; border-radius: 13px; }
  .footer-inner { flex-direction: column; }
  .footer-inner>div.footer-links:last-child { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .feature-card, .raffle-showcase-card { transition: none !important; }
}

/* V5.5.1 - Instagram logo harmonizado com a identidade da campanha. */
.instagram-icon { display: block; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: currentColor; }
.topline-social-icon, .footer-social-icon, .social-link-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.topline-social-icon .instagram-icon { width: 1rem; height: 1rem; }
.footer-social-icon .instagram-icon { width: 1.15rem; height: 1.15rem; }
.button-instagram .instagram-icon { width: 1.25rem; height: 1.25rem; }
.topline-social { gap: .45rem; }
.footer-social { gap: .5rem; }
.button-instagram { display: inline-flex; align-items: center; gap: .55rem; }