/* =====================================================================
   Encanto (out/2026): animacoes e paginas de Doacoes e Lojinha.
   Carregado por ultimo. Pensado primeiro para o celular.
   Fotos de animais NAO recebem zoom nem mudam de altura: o dono ajusta o foco
   olhando o card de 220 px (ver moderno.css).
   ===================================================================== */

:root {
  --doar: #d9622b;
  --doar-escuro: #bf4f1d;
  --azul-texto: #2f67c7;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --pata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5.5' cy='10' r='2.3'/%3E%3Ccircle cx='9.8' cy='5.5' r='2.3'/%3E%3Ccircle cx='14.2' cy='5.5' r='2.3'/%3E%3Ccircle cx='18.5' cy='10' r='2.3'/%3E%3Cpath d='M12 11c-3 0-6 3.5-6 6.5C6 19.2 7.3 20 8.7 20c1.2 0 2-.6 3.3-.6s2.1.6 3.3.6c1.4 0 2.7-.8 2.7-2.5 0-3-3-6.5-6-6.5z'/%3E%3C/svg%3E");
  --coracao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21 4.2 13.4l-1-1a5.5 5.5 0 0 1 7.8-7.8l1 1.1 1-1.1a5.5 5.5 0 0 1 7.8 7.8l-1 1z'/%3E%3C/svg%3E");
}

/* ---------- Botao de doar: cor quente para se destacar do azul do site ---------- */
.btn-doar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--doar), #e8813f);
  color: #fff;
  box-shadow: 0 12px 26px rgba(217, 98, 43, 0.32);
}
.btn-doar::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--coracao) center / contain no-repeat;
  mask: var(--coracao) center / contain no-repeat;
}
.btn-doar:hover { background: linear-gradient(135deg, var(--doar-escuro), var(--doar)); }
.btn-bloco { width: 100%; }

.com-animacao .btn-doar::before { animation: batida 2.2s ease-in-out infinite; }
.com-animacao .btn-doar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-18deg);
  animation: brilho 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes batida {
  0%, 28%, 56%, 100% { transform: scale(1); }
  14%, 42% { transform: scale(1.24); }
}
@keyframes brilho {
  0%, 62% { left: -45%; }
  100% { left: 120%; }
}

/* ---------- Entradas ---------- */
/* Trava de seguranca: sem o observador (aba em segundo plano, navegador antigo) o card
   aparece sozinho em 2,5 s. Conteudo de doacao nunca pode ficar invisivel. */
.com-animacao .anima-espera { opacity: 0; animation: revelaSeguro 0.4s ease 2.5s forwards; }
@keyframes revelaSeguro {
  to { opacity: 1; }
}
.com-animacao .anima-entra {
  animation: subir 0.65s var(--curva) var(--atraso, 0ms) backwards;
}
@keyframes subir {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.com-animacao .page:not(#page-admin):not([hidden]) { animation: paginaEntra 0.4s ease; }
@keyframes paginaEntra {
  from { opacity: 0; }
  to { opacity: 1; }
}

.com-animacao .hero-copy > * { animation: subir 0.8s var(--curva) backwards; }
.com-animacao .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.com-animacao .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.com-animacao .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.com-animacao .hero-logo { animation: flutuar 6s ease-in-out infinite; }
@keyframes flutuar {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-7px) rotate(0.6deg); }
}

/* ---------- Enfeites do topo: atras do texto, nunca clicaveis ---------- */
.hero-section { position: relative; overflow: hidden; }
.hero-section > .container { position: relative; z-index: 1; }
.hero-enfeites { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pegada {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #4e8fd8;
  -webkit-mask: var(--pata) center / contain no-repeat;
  mask: var(--pata) center / contain no-repeat;
  opacity: 0;
  transform: rotate(var(--giro));
  animation: pegada 7.7s ease-in-out infinite;
}
.pegada-rosa { background: #d96aa7; }
@keyframes pegada {
  0%, 100% { opacity: 0; }
  6%, 34% { opacity: 0.2; }
  48% { opacity: 0; }
}
.coracao-sobe {
  position: absolute;
  bottom: -30px;
  width: 20px;
  height: 20px;
  background: #e78ab3;
  -webkit-mask: var(--coracao) center / contain no-repeat;
  mask: var(--coracao) center / contain no-repeat;
  opacity: 0;
  animation: coracaoSobe 14s linear infinite;
}
@keyframes coracaoSobe {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  10% { opacity: 0.32; }
  50% { transform: translate(16px, -48vh) scale(1); }
  85% { opacity: 0.2; }
  100% { opacity: 0; transform: translate(-10px, -92vh) scale(1.1); }
}

/* Coracoes do toque */
.coracao-voa {
  position: fixed;
  z-index: 300;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: #ef6f96;
  -webkit-mask: var(--coracao) center / contain no-repeat;
  mask: var(--coracao) center / contain no-repeat;
  pointer-events: none;
  animation: coracaoVoa 0.85s var(--curva) backwards;
}
.coracao-voa:nth-child(even) { background: var(--doar); }
@keyframes coracaoVoa {
  from { opacity: 1; transform: translate(0, 0) scale(0.5); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(1.15); }
}

/* ---------- Mascotes espiando por cima do card: moram no vao acima dele, sem cobrir botao ---------- */
.espia {
  position: absolute;
  right: 22px;
  bottom: 100%;
  width: 78px;
  height: 56px;
  overflow: hidden;
  pointer-events: none;
}
.espia .mascote {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: -2px;
  animation: espiar 9s var(--curva) infinite;
}
@keyframes espiar {
  0%, 4% { transform: translateY(100%); }
  12%, 86% { transform: translateY(0); }
  94%, 100% { transform: translateY(100%); }
}
.m-olho { transform-box: fill-box; transform-origin: center; animation: piscar 4.4s linear infinite; }
@keyframes piscar {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.08); }
}
.m-orelha { transform-box: fill-box; transform-origin: 50% 8%; animation: orelha 2.6s ease-in-out infinite; }
.m-orelha-d { animation-delay: 0.3s; }
@keyframes orelha {
  0%, 60%, 100% { transform: rotate(0); }
  72% { transform: rotate(-7deg); }
  84% { transform: rotate(5deg); }
}
.m-lingua { transform-box: fill-box; transform-origin: 50% 0; animation: lingua 0.7s ease-in-out infinite alternate; }
@keyframes lingua {
  from { transform: scaleY(0.72); }
  to { transform: scaleY(1); }
}

.home-impact-cta { position: relative; margin-top: 62px; }
.home-impact-cta .espia-home { right: auto; left: 22px; }
.donation-checkout { position: relative; }
.donate-grid { margin-top: 66px; }
.donor-plans-featured { position: relative; margin-top: 62px; }
.espia-planos { right: 18px; }
.shop-hero { position: relative; margin-top: 46px; }

/* Gato andando no rodape */
.rodape-gato {
  position: relative;
  height: 46px;
  margin-top: -32px;
  margin-bottom: 18px;
  overflow: hidden;
  border-bottom: 2px dashed rgba(78, 143, 216, 0.28);
  pointer-events: none;
}
.gato-anda {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 72px;
  animation: atravessar 26s linear infinite;
}
.gato-anda .mascote { display: block; width: 100%; height: auto; }
@keyframes atravessar {
  from { transform: translateX(-90px); }
  to { transform: translateX(100vw); }
}
.m-pata { transform-box: fill-box; transform-origin: 50% 0; animation: passo 0.62s ease-in-out infinite alternate; }
.m-pata-b { animation-direction: alternate-reverse; }
@keyframes passo {
  from { transform: rotate(-20deg); }
  to { transform: rotate(20deg); }
}
.m-rabo { transform-box: fill-box; transform-origin: 100% 100%; animation: rabo 0.9s ease-in-out infinite alternate; }
@keyframes rabo {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}

/* ---------- Status "Disponivel": pontinho vivo ---------- */
.tag-status-disponivel { gap: 6px; }
.tag-status-disponivel::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.com-animacao .tag-status-disponivel::before { animation: pontoVivo 2s ease-in-out infinite; }
@keyframes pontoVivo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 158, 99, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(44, 158, 99, 0); }
}

/* ---------- Estrelinhas: animais que faleceram, em homenagem ---------- */
.tag-estrelinha { background: rgba(123, 90, 166, 0.14); color: #6a4a96; }
.animal-card-estrelinha { background: linear-gradient(180deg, #fff, #f6f2fb); }

/* ---------- Carregando: patinha no lugar do vazio ---------- */
#animalsGrid:empty, #animalsGridAll:empty, #shopProducts:empty, #donorPlans:empty, #rankingContainer:empty, #donateStory:empty {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  min-height: 140px;
  padding: 28px 0;
  margin: 0;
}
#animalsGrid:empty::before, #animalsGridAll:empty::before, #shopProducts:empty::before, #donorPlans:empty::before, #rankingContainer:empty::before, #donateStory:empty::before {
  content: "";
  width: 42px;
  height: 42px;
  background: #4e8fd8;
  -webkit-mask: var(--pata) center / contain no-repeat;
  mask: var(--pata) center / contain no-repeat;
  animation: pataCarrega 0.9s ease-in-out infinite alternate;
}
#animalsGrid:empty::after, #animalsGridAll:empty::after, #shopProducts:empty::after, #donorPlans:empty::after, #rankingContainer:empty::after, #donateStory:empty::after {
  content: "Só um instantinho...";
  color: var(--color-text-soft);
  font-size: 0.92rem;
  font-weight: 700;
}
@keyframes pataCarrega {
  from { transform: translateY(0) rotate(-12deg); }
  to { transform: translateY(-10px) rotate(12deg); }
}

/* ---------- Icones dos cards "Como sua ajuda e usada" ---------- */
.dynamic-card-icon svg { width: 34px; height: 34px; }
.dynamic-card-icon svg, .impact-tile svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dynamic-card-icon svg.icone-cheio { fill: currentColor; stroke: none; }

/* Etiqueta do plano ocupava a largura toda do card */
.donor-plan-card .donor-plan-level { align-self: flex-start; }

/* ---------- Pagina Doacoes ---------- */
.donate-heading { display: grid; justify-items: start; gap: 6px; margin-bottom: 18px; }
.donate-heading .eyebrow { margin-bottom: 4px; }
.donate-heading h2 { font-size: clamp(1.75rem, 2.2vw + 1rem, 2.9rem); line-height: 1.12; max-width: 22ch; }
.donate-heading p { font-size: 1.05rem; line-height: 1.6; max-width: 56ch; margin: 0; }
#page-donate .section-heading > p { max-width: 56ch; }

.story-card {
  display: grid;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(224, 223, 221, 0.75);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.story-foto {
  position: relative;
  border: 0;
  padding: 0;
  background: #eef2f7;
  overflow: hidden;
}
.story-foto img { width: 100%; height: 260px; object-fit: cover; object-position: var(--animal-photo-position, 50% 50%); }
.story-nome {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 800;
}
.story-texto { display: grid; gap: 12px; padding: 18px; align-content: center; }
.story-texto h3 { margin: 0; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.2; }
.story-texto p { margin: 0; color: var(--color-text); line-height: 1.6; }
.story-acoes { display: grid; gap: 8px; margin-top: 4px; }
.story-acoes .btn { width: 100%; }
.com-animacao .story-troca .story-foto img,
.com-animacao .story-troca .story-texto > * { animation: subir 0.5s var(--curva) backwards; }

.impact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.impact-tile {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(224, 223, 221, 0.75);
  border-radius: 18px;
}
.impact-tile svg { width: 30px; height: 30px; color: var(--doar); margin-bottom: 4px; }
.impact-tile strong { font-size: 0.98rem; }
.impact-tile span { color: var(--color-text-soft); font-size: 0.84rem; line-height: 1.35; }

.donate-grid { display: grid; gap: 16px; align-items: start; }
.donate-side { display: grid; gap: 16px; min-width: 0; }
.donation-checkout { margin-top: 0; min-width: 0; }
.donation-checkout > h3 { font-family: var(--font-heading); font-size: 1.4rem; margin-bottom: 4px; }

.valor-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.valor-chip {
  min-height: 52px;
  padding: 0 4px;
  border: 2px solid rgba(217, 98, 43, 0.28);
  border-radius: 14px;
  background: #fff;
  color: var(--doar-escuro);
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform 0.18s var(--curva), background-color 0.18s ease, color 0.18s ease;
}
.valor-chip:active { transform: scale(0.95); }
.valor-chip.is-active { background: var(--doar); border-color: var(--doar); color: #fff; }
.valor-nota {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--doar-escuro);
  font-size: 0.92rem;
  font-weight: 700;
}
.seguro-nota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: -2px 0 0;
  color: var(--color-text-soft);
  font-size: 0.84rem;
  text-align: center;
}

.payment-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.payment-options .btn { min-width: 0; padding: 0 6px; }
.payment-options .btn-ghost.is-active { background: var(--azul-texto); border-color: var(--azul-texto); color: #fff; }

.pix-card { display: grid; gap: 10px; min-width: 0; }
.pix-card .section-subheading { flex-wrap: nowrap; }
.pix-card .section-subheading h3 { font-family: var(--font-heading); font-size: 1.15rem; }
.pix-card .section-subheading p { margin: 0; }
.pix-card .tag { flex: none; }
.pix-card p { margin: 0; overflow-wrap: anywhere; }
.pix-chave {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px dashed rgba(78, 143, 216, 0.55);
  border-radius: 14px;
  background: rgba(124, 199, 242, 0.1);
}
.pix-chave small { color: var(--color-text-soft); font-size: 0.82rem; font-weight: 700; }
.pix-chave strong { font-size: 1.08rem; overflow-wrap: anywhere; }
.pix-card .btn { width: 100%; }

.donate-trust { display: grid; gap: 8px; }
.donate-trust h3 { margin: 0; font-size: 1.05rem; }
.donate-trust p { margin: 0; color: var(--color-text-soft); line-height: 1.55; }
.donate-trust-cnpj { font-size: 0.86rem; font-weight: 700; }
.donate-trust-cnpj:empty { display: none; }
.donate-trust .btn { justify-self: start; margin-top: 4px; }

.donor-member-heading-featured { margin-top: 40px; }
.donor-member-heading-featured h3 { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.2; }
.donor-member-heading-featured p { margin: 0; }
.donor-plans-featured { margin-top: 56px; margin-bottom: 0; }
.plan-card strong small { color: var(--color-text-soft); font-weight: 700; }

.donate-bottom { display: grid; gap: 16px; margin-top: 28px; align-items: start; }
.donation-guide { display: grid; gap: 10px; min-width: 0; }
.donation-guide h3, .donation-guide h4 { margin: 0; line-height: 1.25; }
.donation-guide h3 { font-family: var(--font-heading); font-size: 1.2rem; }
.donation-guide h4 { margin-top: 6px; font-size: 1rem; }
.donation-guide p { margin: 0; color: var(--color-text-soft); line-height: 1.55; }
.donation-guide .contact-card { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(124, 199, 242, 0.1); }
.donation-guide .contact-card p { margin-bottom: 8px; color: var(--color-text); overflow-wrap: anywhere; }
.donation-guide .contact-card p:last-child { margin-bottom: 0; }

.donor-account-panel { margin: 0; max-width: none; min-width: 0; }
.donor-account-panel summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.donor-account-panel summary::-webkit-details-marker { display: none; }
.donor-account-panel summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--azul-texto);
  border-bottom: 2px solid var(--azul-texto);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.donor-account-panel[open] summary::after { transform: rotate(-135deg); }
.donor-account-panel summary span { display: grid; gap: 2px; }
.donor-account-panel summary small { color: var(--color-text-soft); font-size: 0.84rem; }
.donor-account-panel form { margin-top: 12px; }

.donate-ranking-heading { display: grid; justify-items: start; gap: 4px; margin-top: 44px; }
.donate-ranking-heading .eyebrow { margin-bottom: 4px; }
#rankingContainer { display: grid; gap: 8px; }
#rankingContainer .ranking-item { padding: 12px 14px; }
#rankingContainer .ranking-item:nth-child(1) .ranking-position { background: #f3c93f; color: #5c4a00; }
#rankingContainer .ranking-item:nth-child(2) .ranking-position { background: #cfd6e1; color: #38414f; }
#rankingContainer .ranking-item:nth-child(3) .ranking-position { background: #e6a877; color: #5a2f10; }

/* Janela de doar para um animal */
.modal-story { display: flex; align-items: center; gap: 12px; }
.modal-story img {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--animal-photo-position, 50% 50%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(217, 98, 43, 0.45);
}
.modal-story h3 { margin: 0 0 2px; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.2; }
.modal-story p { margin: 0; color: var(--color-text-soft); font-size: 0.92rem; line-height: 1.4; }
.modal-story-texto {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--doar);
  border-radius: 0 10px 10px 0;
  background: rgba(230, 124, 60, 0.08);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---------- Pagina Lojinha ---------- */
.shop-section { padding-top: 16px; }
.shop-hero {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 20px;
  margin-bottom: 18px;
  background: linear-gradient(145deg, #fff, #fff4ea);
  border: 1px solid rgba(230, 124, 60, 0.22);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.shop-hero .eyebrow { margin: 0; background: rgba(230, 124, 60, 0.13); color: var(--doar-escuro); }
.shop-hero h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.55rem, 1.6vw + 1rem, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; }
.shop-hero p { margin: 0; color: var(--color-text-soft); line-height: 1.6; max-width: 60ch; }

.shop-faces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; }
.shop-faces:empty { display: none; }
.shop-faces-fotos { display: flex; padding-left: 8px; }
.shop-faces-fotos img {
  width: 42px;
  height: 42px;
  margin-left: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--animal-photo-position, 50% 50%);
}
.shop-faces small { color: var(--color-text-soft); font-size: 0.86rem; line-height: 1.3; flex: 1 1 150px; }

.shop-card { position: relative; }
/* Duas colunas no celular: etiqueta em uma linha so */
.shop-card-body .tag { white-space: nowrap; padding: 0 9px; }
@media (max-width: 370px) { .tag-ajuda::before { display: none; } }
/* Fotos da loja sao retrato (3:4): em 4:3 a camiseta e a caneca ficavam cortadas */
.shop-card-image { aspect-ratio: 4 / 5; background: #fff; }
.com-animacao .shop-card-image img { transition: transform 0.5s var(--curva); }
@media (hover: hover) {
  .com-animacao .shop-card:hover .shop-card-image img { transform: scale(1.05); }
}
.shop-card-body .tag { gap: 5px; background: rgba(230, 124, 60, 0.13); color: var(--doar-escuro); }
.tag-ajuda::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--coracao) center / contain no-repeat;
  mask: var(--coracao) center / contain no-repeat;
}
.estoque-baixo { color: var(--doar-escuro); font-weight: 800; }
.shop-card-body small { color: var(--color-text-soft); }

.shop-passos { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.shop-passo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(224, 223, 221, 0.75);
  border-radius: 18px;
}
.shop-passo b {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(230, 124, 60, 0.14);
  color: var(--doar-escuro);
}
.shop-passo span { color: var(--color-text-soft); font-size: 0.9rem; line-height: 1.4; }
.shop-passo strong { display: block; color: var(--color-text); font-size: 0.98rem; }

.shop-doar {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #2f67c7, #4c90f1);
  color: #fff;
}
.shop-doar h3 { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1.2rem; }
.shop-doar p { margin: 0; opacity: 0.92; line-height: 1.5; }

/* ---------- Barra de doar (celular) e dica do carrossel ---------- */
.barra-doar { display: none; }
.dica-deslize { display: none; }

@media (max-width: 900px) {
  .barra-doar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(224, 223, 221, 0.9);
    box-shadow: 0 -10px 28px rgba(31, 31, 36, 0.1);
    font-size: 0.92rem;
    font-weight: 700;
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.32s var(--curva), visibility 0.32s;
  }
  .barra-doar.is-visivel { transform: none; visibility: visible; }
  .barra-doar span { min-width: 0; }
  .barra-doar .btn { flex: none; min-height: 44px; padding: 0 18px; }
  /* Espaco para a barra nunca cobrir o fim da pagina */
  body.tem-barra-doar .site-footer { padding-bottom: 96px; }
  /* Aviso acima da barra e sem estourar a largura */
  .toast { left: 14px; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-width: 0; max-width: none; }

  .dica-deslize {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -4px;
    color: var(--color-text-soft);
    font-size: 0.86rem;
    font-weight: 700;
    transition: opacity 0.3s ease;
  }
  .dica-deslize.is-oculta { opacity: 0; }
  .pegada-mini {
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--pata) center / contain no-repeat;
    mask: var(--pata) center / contain no-repeat;
  }
  .com-animacao .pegada-mini { animation: deslize 1.3s ease-in-out infinite alternate; }

  /* Janela como folha subindo de baixo: alcance do polegar */
  .modal-backdrop { align-items: end; padding: 0; }
  .modal {
    width: 100%;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
  }
  #modalContent { padding: 0 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes deslize {
  from { transform: translateX(-6px) rotate(70deg); }
  to { transform: translateX(6px) rotate(110deg); }
}

.com-animacao .modal-backdrop:not([hidden]) { animation: paginaEntra 0.22s ease; }
.com-animacao .modal-backdrop:not([hidden]) .modal { animation: folhaSobe 0.38s var(--curva); }
@keyframes folhaSobe {
  from { opacity: 0.4; transform: translateY(46px); }
  to { opacity: 1; transform: none; }
}
.com-animacao .lightbox-overlay:not([hidden]) { animation: paginaEntra 0.22s ease; }

/* Faixa fixa so para o X: ao rolar o formulario ele nunca fica por cima de campo nem de titulo */
.modal { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.modal-close {
  position: static;
  display: grid;
  place-items: center;
  flex: none;
  align-self: flex-end;
  margin: 10px 12px 4px;
  box-shadow: none;
}
#modalContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 28px 28px;
}
.donate-modal h3 { overflow-wrap: anywhere; }

/* Filtro de Animais nao mostrava qual opcao estava ligada */
.filter-actions .btn.is-active { background: var(--azul-texto); border-color: var(--azul-texto); color: #fff; }

/* ---------- Ajustes finos do celular ---------- */
@media (max-width: 900px) {
  .filter-actions { flex-wrap: nowrap; }
  .filter-actions .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}
@media (max-width: 900px) {
  .eyebrow { letter-spacing: 0.04em; }
  /* Icone + titulo na mesma linha; texto usa a largura toda em vez de uma coluna estreita */
  .dynamic-card { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .dynamic-card-icon { width: 48px; height: 48px; border-radius: 14px; }
  .dynamic-card-icon svg { width: 26px; height: 26px; }
  .dynamic-card-content { display: contents; }
  .dynamic-card-content h3 { margin: 0; align-self: center; font-size: 1.08rem; }
  .dynamic-card-content p, .dynamic-card-content small { grid-column: 1 / -1; margin: 0; }
  .footer-link { padding-left: 0; }
}

/* ---------- Menu do celular ---------- */
@media (max-width: 900px) {
  /* Fechado seguia alcancavel pelo teclado e pelo leitor de tela */
  header .primary-nav { visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; }
  body.is-nav-open header .primary-nav { visibility: visible; }
  .mobile-toggle::before { transition: transform 0.25s var(--curva); }
  body.is-nav-open .mobile-toggle::before {
    background:
      linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) center / 2px 100% no-repeat;
    height: 18px;
    transform: rotate(45deg);
  }
  .com-animacao body.is-nav-open .primary-nav .nav-link { animation: subir 0.34s var(--curva) backwards; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(2) { animation-delay: 30ms; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(3) { animation-delay: 60ms; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(4) { animation-delay: 90ms; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(5) { animation-delay: 120ms; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(6) { animation-delay: 150ms; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(7) { animation-delay: 180ms; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(8) { animation-delay: 210ms; }
  .com-animacao body.is-nav-open .primary-nav .nav-link:nth-child(9) { animation-delay: 240ms; }
}

/* ---------- Computador ---------- */
@media (min-width: 720px) {
  .impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-doar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 22px 26px; }
  .story-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .story-foto { min-height: 340px; }
  .story-foto img { position: absolute; inset: 0; height: 100%; }
  .story-texto { padding: 26px 30px; }
  .story-acoes { grid-auto-flow: column; justify-content: start; }
  .story-acoes .btn { width: auto; }
}
@media (min-width: 900px) {
  .donate-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px; }
  .donate-bottom { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px; }
  .shop-hero { padding: 30px 34px; }
  .barra-doar, .dica-deslize { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .barra-doar { transition: none; }
}