/* style.css — único arquivo de estilo: tokens, tipografia, navegação, páginas, formulário e movimento acessível */

/* ── Fonte autoalojada (Montserrat variável, só latin e latin-ext) ── */
@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', 'Hiragino Sans', 'Yu Gothic', 'PingFang SC', 'Microsoft YaHei', 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: #b3261e;

  --raio: 3px;
  --sombra: 0 6px 20px rgba(0, 0, 0, .08);
  --barra: 4rem;
  --largura-texto: 42rem;
  --largura-max: 72rem;
  --dur: .22s;
  --curva: cubic-bezier(.22, .61, .36, 1);

  /* Hero: quando houver foto, definir a imagem aqui e adicionar a classe "com-foto" na div.hero */
  --hero-image: none;
  --hero-overlay: rgba(0, 0, 0, .45);
}

/* ── 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; }

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) .maiusculas { text-transform: none; letter-spacing: normal; }
:lang(ko) body, :lang(ja) body, :lang(zh) 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;
}

/* ── Foco: sempre visível ── */
:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 3px; }
.hero :focus-visible { outline-color: var(--branco); }
.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: 100%;
  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: 2px solid transparent;
  transition: color var(--dur) var(--curva), border-color var(--dur) var(--curva);
}
.nav-lista > li > a:hover { color: var(--verde-escuro); }
.nav-lista > li > a[aria-current="page"] { color: var(--verde-escuro); border-bottom-color: var(--verde); }

/* 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 */
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; }
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; }

/* ── Hero (home) ── */
.hero {
  position: relative;
  background-color: var(--verde-escuro);
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  color: var(--branco);
}
.hero.com-foto::before { content: ''; position: absolute; inset: 0; background: var(--hero-overlay); }
.hero-interno {
  position: relative;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 6.5rem 1.5rem 5.5rem;
}
.hero-titulo {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: .2em;
}
:lang(ko) .hero-titulo, :lang(ja) .hero-titulo, :lang(zh) .hero-titulo { font-weight: 400; }
.hero-frase {
  max-width: 36rem;
  margin-top: 1.5rem;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
}

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

/* ── Conteúdo ── */
.conteudo {
  max-width: var(--largura-texto);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.conteudo-suave { max-width: none; background: var(--fundo-suave); }
.conteudo-suave > * { max-width: var(--largura-texto); margin-left: auto; margin-right: auto; }

.conteudo h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--verde-escuro);
  padding-bottom: .75rem;
  margin-bottom: 1.5rem;
  position: relative;
}
.conteudo h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 2.5rem; height: 1px;
  background: var(--verde);
}
.conteudo p + p { margin-top: 1rem; }

/* Links em bloco (home) */
.blocos { display: grid; gap: 1rem; }
.bloco {
  display: block;
  padding: 1.5rem 1.75rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva), border-color var(--dur) var(--curva);
}
.bloco:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--verde); color: inherit; }
.bloco-titulo {
  display: block;
  font-weight: 700;
  color: var(--verde-escuro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.bloco-desc { display: block; margin-top: .4rem; color: var(--texto-4); }

/* Lista de patrocinadores */
.patrocinadores { display: grid; gap: .75rem; }
.patrocinadores li {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-weight: 600;
  color: var(--texto-2);
}

/* ── Formulário ── */
.nota-obrigatorio { color: var(--texto-3); margin-bottom: 1.75rem; }
.campo { margin-bottom: 1.5rem; }
.campo label { display: block; font-weight: 700; margin-bottom: .45rem; }
.req { font-weight: 400; color: var(--texto-3); }
.campo input, .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); }

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

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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);
  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); transform: translateY(-2px); box-shadow: var(--sombra); }
.botao:disabled { cursor: default; opacity: .7; transform: none; box-shadow: none; }

.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: 2.5rem 1.5rem;
  background: var(--fundo-suave);
  border-top: 1px solid var(--borda);
  color: var(--texto-2);
  font-size: .95rem;
  text-align: center;
}

/* ── 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; }
.atraso-3 { --i: 3; }
.atraso-4 { --i: 4; }
.atraso-5 { --i: 5; }

/* 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(--verde); }

  .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: 4.5rem 1.25rem 4rem; }
  .conteudo { padding: 3rem 1.25rem; }
  .pagina-topo .conteudo { padding-top: 3.5rem; padding-bottom: 2.75rem; }
}

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