/* Ajustes de 30/out/2026 (retorno da cliente). Carregado por último na página. */

/* 1. Contador do hero: rótulo e número em amarelo, número do tamanho dos números de impacto */
#doar .hero-counter-widget {
  gap: 18px;
  padding: 12px 22px 12px 14px;
  border-radius: 20px;
}
#doar .hero-counter-widget__tag {
  border-color: rgba(255, 223, 80, .5);
  background: rgba(255, 223, 80, .1);
  color: var(--bjf-yellow);
  font-size: .74rem;
}
#doar .hero-counter-widget__value strong {
  color: var(--bjf-yellow);
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* 2. Antes e depois: a linha pontilhada vira seta (2022 → 2023 → 2024 → 2025) */
#antes-depois .before-after-static { gap: 44px 56px; }
#antes-depois .before-after-static figure:nth-child(n)::after {
  content: "";
  position: absolute;
  border: 0;
  background: center / 100% 100% no-repeat;
}
#antes-depois .before-after-static figure:nth-child(1)::after,
#antes-depois .before-after-static figure:nth-child(3)::after {
  top: calc(50% - 8px);
  bottom: auto;
  width: 56px;
  height: 16px;
}
#antes-depois .before-after-static figure:nth-child(1)::after {
  right: -56px;
  left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 16'%3E%3Cpath d='M4 8H40' stroke='%2300523c' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 6'/%3E%3Cpath d='M40 2l12 6-12 6z' fill='%2300523c'/%3E%3C/svg%3E");
}
#antes-depois .before-after-static figure:nth-child(3)::after {
  left: -56px;
  right: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 16'%3E%3Cpath d='M52 8H16' stroke='%2300523c' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 6'/%3E%3Cpath d='M16 2L4 8l12 6z' fill='%2300523c'/%3E%3C/svg%3E");
}
#antes-depois .before-after-static figure:nth-child(2)::after {
  top: auto;
  bottom: -44px;
  left: calc(50% - 8px);
  right: auto;
  width: 16px;
  height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 44'%3E%3Cpath d='M8 4V28' stroke='%2300523c' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 6'/%3E%3Cpath d='M2 28l6 12 6-12z' fill='%2300523c'/%3E%3C/svg%3E");
}

/* 3. Mídias de Marianópolis: a capa é vertical e o card é horizontal; o recorte sobe para o rosto.
      No desktop o card é mais largo (cerca de 2,2:1) e mostra uma faixa mais baixa da foto. */
#mapa video[poster*="cities/marianopolis"] { object-position: 50% 30%; }
@media (max-width: 600px) {
  #mapa video[poster*="cities/marianopolis"] { object-position: 50% 24%; }
}

/* Quebras de linha que só valem no celular */
br.so-celular { display: none; }

@media (max-width: 600px) {
  /* no celular os cards ficam em coluna: todas as setas apontam para baixo */
  #antes-depois .before-after-static figure:nth-child(n)::after {
    top: auto;
    bottom: -44px;
    left: calc(50% - 8px);
    right: auto;
    width: 16px;
    height: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 44'%3E%3Cpath d='M8 4V28' stroke='%2300523c' stroke-width='3' stroke-linecap='round' stroke-dasharray='0 6'/%3E%3Cpath d='M2 28l6 12 6-12z' fill='%2300523c'/%3E%3C/svg%3E");
  }
  #antes-depois .before-after-static figure:last-child::after { display: none; }
}

/* 4. Celular: eyebrow, título e texto centralizados em todos os blocos (padrão do Ciclo).
      Os cards mantêm o alinhamento à esquerda. */
@media (max-width: 720px) {
  br.so-celular { display: inline; }

  /* hero */
  #doar .hero-copy { text-align: center; }
  #doar .hero-copy .brand { margin-inline: auto; background-position: center; }
  #doar .hero-copy h1 { margin-inline: auto; }
  #doar .hero-counter-widget {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 12px 20px;
  }
  #doar .hero-copy { min-width: 0; }
  /* em telas de 320 px o rótulo quebra em duas linhas em vez de alargar a página */
  #doar .hero-counter-widget__tag { font-size: .7rem; white-space: normal; text-align: center; }
  #doar .hero-counter-widget__value { width: auto; justify-content: center; }
  #doar .hero-counter-widget__value strong { font-size: 2.6rem; }

  /* card de doação: eyebrow, título e texto centralizados; contador, valor e botões ficam como estão */
  #doar .donation-card > .eyebrow { display: table; margin-inline: auto; }
  #doar .donation-card > h2,
  #doar .donation-card > .price-note { text-align: center; }

  /* nosso impacto em números */
  #numeros .section-head { justify-items: center; text-align: center; }
  /* "Cada árvore plantada faz parte" precisa caber numa linha: 27 px a 375 px de tela, menor em telas
     estreitas. Folga para navegadores em que a barra de rolagem ocupa parte da largura. */
  #numeros .section-head h2 { max-width: none !important; font-size: min(1.75rem, 7.3vw); }
  #numeros .stat span { font-size: 1.1rem; line-height: 1.4; }
  #numeros .stats-note { font-size: 1rem; line-height: 1.5; }

  /* corredor: 1 milhão de hectares */
  #sobre .about-layout__heading,
  #sobre .about-layout__media > .eyebrow,
  #sobre .about-layout > .section-intro { text-align: center; }
  #sobre .about-layout__media { text-align: center; }
  #sobre .about-layout__media > .video-box { text-align: left; }

  /* ciclo: botão em duas linhas parecidas */
  #processo .section-cta-center a { justify-content: center; text-align: center; }

  /* onde a restauração ganha vida */
  #mapa .territory-heading__copy,
  #mapa .territory-heading__meta { text-align: center; justify-items: center; }
  #mapa .territory-heading__copy .eyebrow { margin-inline: auto; }

  /* perguntas frequentes */
  #faq .faq-layout > div:first-child { text-align: center; }
  #faq .faq-layout > div:first-child .eyebrow { margin-inline: auto; }
  #faq .faq-layout > div:first-child .inline-cta { width: max-content; margin-inline: auto; }

  /* rodapé */
  footer .footer-top > div:first-child { justify-items: center; text-align: center; }
  footer .footer-brand { margin-inline: auto; background-position: center; }
  footer .footer-bottom { flex-direction: column; align-items: center; gap: 8px; text-align: center; }

  /* como apoiar: a coluna dos cards passava 30 px da tela e criava rolagem horizontal (já acontecia antes) */
  #como-apoiar .support-grid { grid-template-columns: minmax(0, 1fr); }

  /* a barra fixa "Doar agora" reservava 86 px no fundo bege da página; o espaço passa para o rodapé */
  body { padding-bottom: 0; }
  footer { padding-bottom: calc(26px + 86px); }
}