/* Visual da landing. Tokens: public/M2_Design_Tokens.css é hard link da marca.
 * O cartão empacotado permanece intacto; escala e recorte vivem no index.html.
 */
:root { --focus-color: var(--m2-focus-on-light); }
.site-nav, .hero, .ticker-shell, .receipt-card, .closing, .site-footer {
  --focus-color: var(--m2-focus-on-dark);
}
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible {
  outline: var(--m2-focus-width) solid var(--focus-color);
  outline-offset: var(--m2-focus-offset);
}
.nav-brand { display: flex; align-items: center !important; gap: 14px !important; }
.brand-mark { display: block; width: 74.24px; height: 32px; flex: none; }
.brand-divider { width: 1px; height: 32px; background: var(--m2-border-on-dark); }
.nav-brand > .brand-name {
  display: block;
  font: 500 8.5px/1.25 var(--m2-font-mono);
  letter-spacing: .22em;
  color: var(--m2-leaf);
}
.primary-nav a:not(:last-child) { color: var(--m2-leaf) !important; }
.primary-nav a:not(:last-child):hover { color: var(--m2-mist) !important; }
.hero-inner { max-width: none !important; width: min(100%, calc(1180px + var(--gutter) * 2)); }
/* Pedido de 31/08: +8 pt entre os blocos de texto, mantendo a grade externa.
 * A primeira linha ocupa a mesma coluna do parágrafo e da seta do comprovante.
 * 9.545cqw corresponde à largura da frase em Space Grotesk 700 / -.04em.
 */
.hero-copy { container-type: inline-size; gap: calc(16px + 8pt) !important; }
.hero-copy h1 { font-size: 9.545cqw !important; letter-spacing: -.04em !important; }
.hero-copy > p { max-width: none !important; text-align: justify; text-align-last: left; text-wrap: wrap !important; }
.hero-actions { flex-wrap: wrap; }
.hero-actions > a:first-child { padding-inline: 36px !important; }
.hero-actions > a:last-child { margin-left: auto; padding-inline: 0 !important; text-align: right !important; white-space: nowrap; }
.hero-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
  gap: clamp(8px, 2cqw, 16px) !important;
}
.hero-stats > div { min-width: 0; }
.hero-stats > div:nth-child(2) { text-align: center; }
.hero-stats > div > div:first-child { font-size: clamp(22px, 4.44cqw, 24px) !important; white-space: nowrap; }
.hero-stats > div > div:last-child { font-size: clamp(7.5px, 1.75cqw, 9.5px) !important; letter-spacing: .08em !important; white-space: nowrap; }
/* Exceção de acabamento solicitada para logo e ações da landing; não muda
 * os SVGs sólidos canônicos nem os outros entregáveis da marca. */
.m2-hover-1, .m2-hover-2, .m2-hover-8 { background: var(--m2-thread) !important; }
.m2-hover-1:hover, .m2-hover-2:hover, .m2-hover-8:hover { filter: brightness(1.08); }
.ticker-track > div > span:first-child { color: var(--m2-glow) !important; }
.how-title { max-width: none !important; font-size: clamp(17px, calc((100vw - 36px) / 16), 40px) !important; }
.how-title > span { display: block; white-space: nowrap; }
#como > div > div:first-child > div { flex: none; }
.hero-copy > p, .hero-actions, .hero-stats { width: 100%; }
.hero-actions, .hero-stats { justify-content: space-between; }
.hero-stats > div:last-child { text-align: right; }
.hero > .hero-layer-deep {
  position: absolute; inset: 0;
  clip-path: polygon(76% 100%, 100% 72%, 100% 100%);
  background: var(--m2-layer-deep);
  pointer-events: none;
}
/* Seções 2–4: impressão, papel e curvas. Só o fundo ganha textura;
 * o contexto isolado mantém essas camadas atrás do conteúdo e dentro da seção.
 * Gradientes aqui desenham linhas de uma única cor, não campos do Fio.
 */
#como, #comprovante, #causas { position: relative; isolation: isolate; }
#como::before, #comprovante::before, #causas::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
/* Trama contínua de uma única cor em todo o fundo, sem detalhe de canto. */
#como::before {
  background-image:
    repeating-linear-gradient(45deg, var(--m2-emerald-on-light) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(135deg, var(--m2-emerald-on-light) 0 .6px, transparent .6px 9px);
  opacity: .07;
}
/* Papel vergê: fibras cruzadas finas, sem imagem, filtro ou brilho animado. */
#comprovante::before {
  background-image:
    repeating-linear-gradient(0deg, var(--m2-ink) 0 .6px, transparent .6px 5px),
    repeating-linear-gradient(90deg, var(--m2-ink) 0 .45px, transparent .45px 9px),
    radial-gradient(ellipse 1px .6px at 7px 11px, var(--m2-ink) 80%, transparent 100%);
  background-size: auto, auto, 23px 19px;
  opacity: .035;
}
/* Curvas abertas dão um ritmo orgânico ao espaço ao redor das causas. */
#causas::before {
  background-image: repeating-radial-gradient(ellipse at 95% 125%,
    transparent 0 26px, var(--m2-emerald-on-light) 27px 28px, transparent 29px 52px);
  opacity: .08;
  mask-image: linear-gradient(180deg, transparent 5%, #000 60%);
}
.proof-kicker { display: flex; align-items: center; gap: 16px; }
.proof-seal { width: 80px; height: 80px; flex: none; }
.proof-kicker > span {
  font: 500 10px/1.7 var(--m2-font-mono);
  letter-spacing: .18em;
  color: var(--m2-emerald-on-light);
}
.receipt-card {
  --receipt-cut: 36px;
  position: relative;
  min-width: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--receipt-cut)), calc(100% - var(--receipt-cut)) 100%, 0 100%);
}
/* A costura é ancorada ao corte, não a uma coordenada de desktop. */
.receipt-card::after {
  content: "";
  position: absolute; right: 0; bottom: 0;
  width: var(--receipt-cut); height: var(--receipt-cut);
  background: var(--m2-thread);
  clip-path: polygon(96% 0, 100% 0, 100% 4%, 4% 100%, 0 100%, 0 96%);
  pointer-events: none;
}
.receipt-head { align-items: center !important; gap: 12px; }
.receipt-logo { width: 51.04px; height: 22px; flex: none; }
.receipt-head > div { color: var(--m2-caption-on-dark) !important; text-align: right; }
.receipt-card > div { gap: 12px; }
.receipt-card > div > div:last-child { text-align: right; }
.receipt-card > div > div:first-child { flex-shrink: 0; }
.receipt-card > div:not(.receipt-head) > div[style*="rgba"] { color: var(--m2-caption-on-dark) !important; }
.receipt-footer { padding-right: 16px; }
.receipt-footer > div:last-child { color: var(--m2-caption-on-dark) !important; }

.causes-heading {
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
}
.causes-heading h2 {
  margin: 0; max-width: 620px;
  font: 700 40px/1.1 var(--m2-font-display);
  letter-spacing: -.03em; color: var(--m2-on-light);
  text-wrap: pretty;
}
.causes-heading > a {
  flex: none; padding-bottom: 6px;
  font: 600 13px var(--m2-font-body); color: var(--m2-emerald-on-light);
}
.causes-carousel { position: relative; }
#causas .causes-window {
  max-width: none !important;
  margin: 24px calc(-1 * var(--gutter)) 0;
  padding: 20px var(--gutter) 28px;
  overflow: hidden;
  touch-action: pan-y;
}
.causes-control {
  position: absolute; z-index: 3; top: calc(50% + 12px);
  display: none; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--m2-border-on-light); border-radius: 50%;
  background: var(--m2-card-light); color: var(--m2-on-light);
  box-shadow: 0 8px 24px rgba(6,23,15,.16);
  cursor: pointer; transform: translateY(-50%);
  transition: color var(--m2-motion-control), border-color var(--m2-motion-control), box-shadow var(--m2-motion-control), transform var(--m2-motion-control);
}
.causes-control svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.causes-control:hover { color: var(--m2-emerald-on-light); border-color: var(--m2-emerald-on-light); box-shadow: 0 10px 28px rgba(6,23,15,.22); }
.causes-control:active { transform: translateY(-50%) scale(.94); }
.causes-control-previous { left: 12px; }
.causes-control-next { right: 12px; }
.causes-track, .causes-group { display: flex; gap: 20px; width: max-content; }
.causes-track { align-items: stretch; }
.causes-group { margin: 0; padding: 0; list-style: none; }
.cause-card {
  position: relative; flex: none;
  width: min(392px, calc(100vw - var(--gutter) * 2 - 16px));
  min-height: 300px;
  border: 1px solid var(--m2-border-on-light); border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--m2-card-light);
  box-shadow: 0 12px 28px rgba(6,23,15,.08), 0 2px 6px rgba(6,23,15,.04);
  transition: border-color var(--m2-motion-control), box-shadow var(--m2-motion-control);
}
.cause-card::before { content: ""; position: relative; height: 3px; background: var(--m2-thread); flex: none; }
.cause-card:hover { border-color: var(--m2-emerald-on-light); box-shadow: 0 16px 32px rgba(6,23,15,.14); }
.cause-content { position: relative; z-index: 1; flex: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.cause-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cause-tag { font: 500 9.5px/1.7 var(--m2-font-mono); letter-spacing: .16em; color: var(--m2-emerald-on-light); }
.cause-badge {
  width: 40px; height: 40px; flex: none; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--m2-layer-deep); color: var(--m2-mist);
  font: 600 14px var(--m2-font-mono);
}
.cause-card h3 { margin: 0; max-width: 250px; font: 600 19px/1.3 var(--m2-font-body); color: var(--m2-on-light); text-wrap: pretty; }
.cause-card p { margin: 0; font: 400 12.5px/1.6 var(--m2-font-body); color: var(--m2-muted-on-light); }
.cause-status { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--m2-border-on-light); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cause-status > span:first-child { font: 600 17px var(--m2-font-mono); color: var(--m2-on-light); }
.cause-status > span:last-child { font: 400 9.5px var(--m2-font-mono); letter-spacing: .1em; color: var(--m2-muted-on-light); }
/* Artes decorativas recebidas na entrega; sem logos ou instituições inventados. */
.cause-art { position: absolute; right: 0; top: 0; width: 152px; height: 100%; opacity: .16; color: var(--m2-emerald-on-light); pointer-events: none; }
.closing-pattern { position: absolute; left: var(--gutter); top: 32px; width: clamp(64px,13vw,168px); height: auto; opacity: .65; pointer-events: none; }
.site-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; min-width: 0; max-width: 600px; }
.footer-tile {
  position: relative; width: 66px; height: 66px; flex: none;
  border: 1px solid var(--m2-border-on-dark); border-radius: 16px;
  background: var(--m2-ink);
}
.footer-tile img { position: absolute; left: 18.1%; top: 31.5%; width: 63.8%; height: auto; }
.footer-tile::after {
  content: ""; position: absolute; left: 32.14%; top: 66.13%;
  width: 35.72%; height: 3px; border-radius: 2px; background: var(--m2-thread);
}
.footer-signature { font: 400 10px/1.7 var(--m2-font-mono); color: var(--m2-caption-on-dark); }
.footer-copyright {
  margin: 0; text-align: center; white-space: nowrap;
  font: 400 10px/1.7 var(--m2-font-mono); letter-spacing: .06em;
  color: var(--m2-caption-on-dark);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; justify-self: end; gap: 16px 24px; min-width: 0; }
.site-footer a, .footer-links button { color: var(--m2-leaf) !important; }
.footer-policies {
  padding: 0; font: 400 11px var(--m2-font-mono);
  opacity: 1; -webkit-text-fill-color: var(--m2-leaf); cursor: not-allowed;
}
.site-footer a:hover { color: var(--m2-mist) !important; }
@media (max-width: 1100px) {
  .site-footer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-links { order: 2; }
  .footer-copyright { order: 3; grid-column: 1 / -1; }
}
@media (min-width: 1048px) {
  .causes-control { display: grid; }
}
@media (max-width: 980px) {
  .causes-heading { align-items: flex-start; flex-wrap: wrap; gap: 20px; }
  #como > div > div:first-child { align-items: flex-start !important; flex-direction: column; gap: 16px !important; }
  #como > div > div:first-child > div { order: -1; }
}
@media (max-width: 760px) {
  .site-footer { grid-template-columns: minmax(0, 1fr); }
  .footer-links { gap: 16px 20px; justify-self: center; justify-content: center; align-items: center; }
  .footer-brand { flex-direction: column; justify-self: center; justify-content: center; text-align: center; }
  .hero-copy { gap: calc(14px + 8pt) !important; }
  .hero-stats { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hero-stats > div > div:first-child { font-size: 18px !important; }
  .proof-kicker { gap: 14px; }
  .proof-seal { width: 72px; height: 72px; }
  .causes-heading { flex-direction: column; }
  .causes-heading > a { order: -1; }
  .footer-brand { width: 100%; }
}
@media (max-width: 600px) {
  .brand-mark { width: 51.04px; height: 22px; }
  .nav-brand { gap: 10px !important; }
  .brand-divider { height: 28px; }
  .nav-brand > .brand-name { font-size: 8px; }
  .hero-copy { gap: calc(12px + 8pt) !important; }
  .hero-stats > div > div:first-child { font-size: clamp(16px, 4.4vw, 18px) !important; }
  .hero-stats > div:first-child { text-align: left; }
  .hero-stats > div:nth-child(2) { text-align: center; }
  .receipt-footer { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .receipt-footer > div:last-child { text-align: left; }
  .cause-content { padding: 20px; }
  .closing-pattern { top: 20px; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .cause-card, .causes-control { transition: none; }
}
@media (forced-colors: active), (prefers-contrast: more) {
  #como::before, #comprovante::before, #causas::before { display: none; }
}