/* style.css — único arquivo de estilo: tokens, tipografia, navegação, hero, caixas, contato, formulários e movimento acessível */

/* ── Fonte autoalojada (Montserrat variável, só latin e latin-ext; CJK usa a pilha do sistema) ── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ── */
:root {
  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans CJK JP', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;

  --branco: #fff;
  --fundo-suave: #f2f8f2;
  --verde: #2e7d32;
  --verde-escuro: #1b5e20;
  --texto: #1a1a1a;
  --texto-2: #333;
  --texto-3: #444;
  --texto-4: #555;
  --borda: #e8e8e8;
  --borda-controle: #767676;
  --erro: #8f1d16;
  --inativo: #595959;

  /* Bandeira de Cusco: sete faixas, usadas só em linhas finas */
  --arco-iris: linear-gradient(90deg,
    #d7263d 0 14.28%, #f26b1d 14.28% 28.57%, #f2c230 28.57% 42.85%,
    #2e7d32 42.85% 57.14%, #3a8fd9 57.14% 71.42%, #1f4fa3 71.42% 85.71%, #7b3fa0 85.71% 100%);

  --raio: 3px;
  --sombra: 0 6px 20px rgba(0, 0, 0, .08);
  --barra: 4rem;
  --largura-texto: 72rem; /* mesma medida do cabeçalho: miolo e menu compartilham as duas bordas */
  --largura-max: 72rem;
  --marca: #1b5e20;
  --dur: .22s;
  --curva: cubic-bezier(.22, .61, .36, 1);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 112.5%; /* 18px */
  scroll-padding-top: calc(var(--barra) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--barra);
  font-family: var(--fonte);
  font-weight: 400;
  line-height: 1.7;
  color: var(--texto);
  background: var(--branco);
}

h1, h2, h3 { line-height: 1.25; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: var(--verde-escuro); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--dur) var(--curva); }
a:hover { color: var(--verde); }

/* Maiúsculas espaçadas — desligadas em coreano, japonês e chinês */
.maiusculas { text-transform: uppercase; letter-spacing: .14em; }
:lang(ko) .maiusculas, :lang(ja) .maiusculas, :lang(zh-Hans) .maiusculas { text-transform: none; letter-spacing: normal; }
:lang(ko) body, :lang(ja) body, :lang(zh-Hans) body { line-height: 1.85; }

.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Faixa fina com as cores de Cusco: topo do cabeçalho e topo do rodapé */
.faixa { height: 4px; background: var(--arco-iris); }

/* ── Foco: sempre visível ── */
:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 3px; }
.botao:focus-visible { outline-offset: 4px; }

/* ── Pular ao conteúdo ── */
.pular {
  position: fixed;
  top: .5rem; left: .5rem;
  z-index: 400;
  padding: .75rem 1.25rem;
  background: var(--verde-escuro);
  color: var(--branco);
  font-weight: 700;
  border-radius: var(--raio);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--curva);
}
.pular:focus { transform: none; outline-color: var(--branco); outline-offset: -5px; }

/* ── Cabeçalho fixo ── */
.cabecalho {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--barra);
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-interno {
  max-width: var(--largura-max);
  height: calc(100% - 4px);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.marca {
  font-size: .875rem;
  font-weight: 800;
  color: var(--verde-escuro);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cabecalho nav { margin-left: auto; }

.nav-lista { display: flex; align-items: center; gap: .25rem; }
.nav-lista > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .85rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--texto-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--dur) var(--curva), border-color var(--dur) var(--curva);
}
.nav-lista > li > a:hover { color: var(--verde-escuro); }
/* A barrinha da página atual segue o arco-íris: home vermelho, voluntariado amarelo, doações verde, áudio azul.
   O amarelo da bandeira (#f2c230) some no branco; aqui ele escurece só o bastante para o contraste. */
.pagina-home { --marca: #d7263d; }
.pagina-volunteer { --marca: #9a6e00; }
.pagina-donations { --marca: #2e7d32; }
.pagina-audiovideo { --marca: #1f4fa3; }
.nav-lista > li > a[aria-current="page"] { color: var(--marca); border-bottom: 3px solid var(--marca); }

/* Botões de disclosure (menu móvel e idioma) */
.menu-botao, .idioma-botao {
  min-height: 44px;
  padding: 0 1rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  color: var(--texto-2);
  background: var(--branco);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio);
  cursor: pointer;
  transition: color var(--dur) var(--curva), border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.menu-botao:hover, .idioma-botao:hover { color: var(--verde-escuro); border-color: var(--verde-escuro); box-shadow: var(--sombra); }
.menu-botao { display: none; margin-left: auto; }

.idioma { position: relative; margin-left: .75rem; }
.idioma-lista {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 12rem;
  padding: .25rem 0;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.idioma-lista a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  color: var(--texto-2);
  text-decoration: none;
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}
.idioma-lista a:hover { background: var(--fundo-suave); color: var(--verde-escuro); }
.idioma-lista a[aria-current="true"] { font-weight: 700; color: var(--verde-escuro); }
.idioma-lista a:focus-visible { outline-offset: -3px; }

/* Sem JavaScript: cabeçalho normal, sem botões, listas sempre abertas, caixas abertas */
html:not(.js) body { padding-top: 0; }
html:not(.js) .cabecalho { position: static; height: auto; }
html:not(.js) .cabecalho-interno { flex-wrap: wrap; padding: .75rem 1.5rem; height: auto; }
html:not(.js) .menu-botao, html:not(.js) .idioma-botao { display: none; }
html:not(.js) .nav-lista { flex-wrap: wrap; }
html:not(.js) .idioma-lista { position: static; display: flex; flex-wrap: wrap; border: 0; box-shadow: none; padding: 0; }
html:not(.js) .caixa-botao { pointer-events: none; }
html:not(.js) .caixa-botao::after { display: none; }

/* ── Hero (home): cartaz do cliente, h1 só para leitor de tela ── */
.hero { background: var(--branco); }
.hero-interno {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 1.75rem 1.5rem 1.5rem;
  text-align: center;
}
.hero-cartaz { display: block; }
.hero-cartaz img {
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .1);
}
.hero-frase {
  max-width: 65ch;
  margin: 1.15rem auto 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--texto-2);
}

/* ── Topo das páginas internas ── */
.pagina-topo { background: var(--fundo-suave); border-bottom: 1px solid var(--borda); }
.pagina-topo .conteudo { padding-top: 2rem; padding-bottom: 1.75rem; }
.pagina-topo h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--verde-escuro); }
.pagina-topo p { margin-top: .85rem; max-width: 65ch; color: var(--texto-2); }

/* ── Conteúdo ── */
.conteudo {
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* ── Caixas que abrem e fecham: uma aberta por vez, na mesma largura do cabeçalho ── */
.caixas {
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.25rem;
  display: grid;
  gap: .75rem;
}
.caixa {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.caixa::before { content: ''; display: block; height: 4px; background: var(--arco-iris); }
.caixa:hover { border-color: var(--verde); }
.caixa:has(.caixa-botao[aria-expanded="true"]) { border-color: var(--verde); box-shadow: var(--sombra); }
.caixa-titulo { font-size: 1.15rem; }
.caixa-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.25rem;
  font: inherit;
  font-weight: 700;
  text-align: left;
  color: var(--verde-escuro);
  background: var(--branco);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--dur) var(--curva);
}
.caixa-botao:hover { background: var(--fundo-suave); }
.caixa-botao:focus-visible { outline-offset: -4px; }
.caixa-botao::after {
  content: '';
  flex: 0 0 auto;
  width: .6rem; height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva);
}
.caixa-botao[aria-expanded="true"]::after { transform: rotate(-135deg); }
.caixa-painel { padding: .25rem 1.25rem 1.5rem; }
/* Na tela larga o texto abre em duas colunas: a linha fica em torno de 65 caracteres e o bloco usa a largura */
.caixa-painel.texto > * { break-inside: avoid; }
@media (min-width: 60rem) {
  .caixa-painel.texto { columns: 2; column-gap: 2.75rem; }
  .formulario {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    align-items: start;
  }
  .formulario > input[type="hidden"],
  .formulario .nota-obrigatorio,
  .formulario .campo:has(textarea),
  .formulario .campo:has(select),
  .formulario fieldset,
  .formulario .botao,
  .formulario .hp,
  .formulario .paypal { grid-column: 1 / -1; }
}
@media (max-width: 64rem) {
  .contato-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.caixa-painel:not([hidden]) { animation: aparecer .35s var(--curva) both; }
.caixa-painel p + p, .caixa-painel ul + p, .caixa-painel p + ul { margin-top: 1rem; }
.destaque { font-weight: 600; color: var(--verde-escuro); }
.lista { padding-left: 1.25rem; list-style: disc; }
.lista li + li { margin-top: .4rem; }

/* Lugares vazios: vídeo, foto, áudio ainda não recebidos */
.vazios { display: grid; gap: .75rem; margin-top: 1rem; }
.vazios li {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--borda-controle);
  border-radius: var(--raio);
  color: var(--texto-2);
}
.vazios strong { display: block; color: var(--texto); }

/* ── Contato curto: sempre visível, em toda página ── */
.contato { background: var(--fundo-suave); border-top: 1px solid var(--borda); }
.contato-interno { max-width: var(--largura-texto); margin: 0 auto; padding: 1.1rem 1.5rem 1.25rem; }
.contato h2 { font-size: 1.05rem; font-weight: 700; color: var(--verde-escuro); padding-bottom: .35rem; margin-bottom: .7rem; position: relative; }
.contato h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 2px; background: var(--arco-iris); }
.contato-lista {
  display: grid;
  grid-template-columns: minmax(12rem, 1.45fr) repeat(4, minmax(8rem, 1fr));
  gap: .35rem 1.25rem;
  margin: 0;
  align-items: start;
}
.contato-lista dt { font-weight: 700; color: var(--texto); font-size: .95rem; }
.contato-lista dd { margin: .15rem 0 0; color: var(--texto-2); font-size: .95rem; }
.contato-lista dd a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.35; }
.contato-lista ul { display: grid; gap: .2rem; }
.email { font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.email-papel { color: var(--texto-3); }
.externo { font-size: .85em; font-weight: 400; }

/* ── Formulário ── */
.nota-obrigatorio { color: var(--texto-3); margin-bottom: 1.25rem; }
.formulario { max-width: 40rem; }
.campo { margin-bottom: 1.5rem; }
fieldset.campo { border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { display: block; font-weight: 700; margin-bottom: .45rem; padding: 0; }
.req { font-weight: 400; color: var(--texto-3); }
.dica { margin: -.2rem 0 .5rem; color: var(--texto-3); font-size: .95rem; }
.campo input:not([type="radio"]), .campo select, .campo textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .65rem .9rem;
  font: inherit;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--borda-controle);
  border-radius: var(--raio);
  transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.campo textarea { resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--verde-escuro); }
.campo [aria-invalid="true"] { border: 2px solid var(--erro); }
.campo-erro { margin-top: .45rem; font-weight: 600; color: var(--erro); }

.opcoes { display: grid; gap: .25rem; }
.opcao {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  margin: 0;
  padding: .35rem .5rem;
  font-weight: 400;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--dur) var(--curva);
}
.opcao:hover { background: var(--fundo-suave); }
.opcao input { width: 1.35rem; height: 1.35rem; margin: 0; flex: 0 0 auto; accent-color: var(--verde-escuro); cursor: pointer; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  min-width: 44px;
  padding: 0 2rem;
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  color: var(--branco);
  background: var(--verde-escuro);
  border: 0;
  border-radius: var(--raio);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--curva), transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.botao:hover { background: var(--verde); color: var(--branco); transform: translateY(-2px); box-shadow: var(--sombra); }
.botao:disabled { cursor: default; opacity: .7; transform: none; box-shadow: none; }
.botao[aria-disabled="true"] { background: var(--inativo); cursor: not-allowed; transform: none; box-shadow: none; }
.botao-leve { margin-top: .5rem; color: var(--verde-escuro); background: var(--branco); border: 1px solid var(--verde-escuro); line-height: 1.3; }
.botao-leve:hover { color: var(--branco); }

/* Controle do PayPal: nasce escondido, aparece com o formulário válido */
.paypal { margin-top: .5rem; }
.paypal:not([hidden]) { animation: aparecer .35s var(--curva) both; }

.alerta, .estado {
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 3px solid var(--verde);
  background: var(--fundo-suave);
  border-radius: var(--raio);
}
.alerta { border-left-color: var(--erro); color: var(--erro); font-weight: 600; }
.estado { color: var(--texto); }

/* ── Rodapé ── */
.rodape {
  padding: 0 1.5rem 2.5rem;
  background: var(--fundo-suave);
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
  font-size: .95rem;
  text-align: center;
}
.rodape .faixa { margin: 0 -1.5rem 2.25rem; }
.rodape p + p { margin-top: .5rem; }

/* ── Movimento: aparição ao carregar (estado final sempre visível) ── */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.entra { animation: aparecer .7s var(--curva) both; animation-delay: calc(var(--i, 0) * 80ms); }
.atraso-1 { --i: 1; }
.atraso-2 { --i: 2; }

/* Transição entre documentos: fundido curto, só onde há suporte */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }

/* ── Móvel ── */
@media (max-width: 47.99rem) {
  .cabecalho-interno { gap: 1rem; padding: 0 1rem; }
  .marca { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: .8rem; letter-spacing: .08em; line-height: 1.2; }
  .cabecalho nav { margin-left: 0; }
  html.js .menu-botao { display: inline-flex; align-items: center; flex-shrink: 0; }

  html.js .nav-lista {
    display: none;
    position: fixed;
    top: var(--barra); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0 1rem;
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra);
    max-height: calc(100vh - var(--barra));
    overflow-y: auto;
  }
  html.js .nav-lista.aberto { display: flex; }
  html.js .nav-lista > li > a { min-height: 48px; padding: 0 1.5rem; border-bottom: 0; border-left: 3px solid transparent; }
  html.js .nav-lista > li > a[aria-current="page"] { border-left-color: var(--marca); border-bottom-color: transparent; }

  .idioma { margin: .75rem 1.5rem 0; }
  .idioma-botao { width: 100%; text-align: left; }
  html.js .idioma-lista { position: static; margin-top: .5rem; box-shadow: none; }

  .hero-interno { padding: 1rem 1rem 1.35rem; }
  .hero-cartaz img { border-radius: 4px; }
  .conteudo { padding: 1.75rem 1.25rem; }
  .pagina-topo .conteudo { padding-top: 1.5rem; padding-bottom: 1.35rem; }
  .caixas, .contato-interno { padding-left: 1.25rem; padding-right: 1.25rem; }
  .contato-lista { grid-template-columns: 1fr; }
  .caixa-painel.texto { columns: 1; }
  .caixa-botao { padding: .9rem 1rem; }
  .caixa-painel { padding: .25rem 1rem 1.25rem; }
}

/* ── Movimento reduzido: tudo parado, só muda cor ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .botao:hover { transform: none; box-shadow: none; }
  .pular { transition: none; }
  @view-transition { navigation: none; }
}