/* Identidade visual Unimed MT: fontes Unimed Sans 2020 (servidas pela aplicação), logo oficial e capa do evento. */
@font-face {
  font-family: "Unimed Sans";
  src: url("fontes/UnimedSans2020-Rg.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unimed Sans";
  src: url("fontes/UnimedSans2020-Bd.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --verde: #00995d;
  --verde-escuro: #00704a;
  --texto: #1f2a24;
  --cinza: #f2f3f4;
  --borda: #d5d9dc;
  --erro: #b3261e;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  background: var(--cinza);
  color: var(--texto);
  font: 16px/1.5 "Unimed Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*
 * Capa do evento (1920 × 2160, 8:9; a arte traz título e logos). Normalmente PREENCHE o painel ("cover", camada
 * ::after): a arte tem ~225 px de folga em cima/embaixo e ~125 px nas laterais, o que cobre o corte nas telas comuns
 * (ex.: 1920 × 945 visível corta ~135 px em cima e embaixo). Em janelas extremas, em que o corte passaria da folga
 * e levaria logos ou texto, ela passa a aparecer INTEIRA ("contain"), com a própria arte desfocada na sobra
 * (camada ::before). Limites, pela proporção da janela (painel = meia largura):
 *   - painel mais largo que ~1,09 (janela ≥ 2,15:1): cortaria logos embaixo;
 *   - painel mais estreito que ~0,78 (janela ≤ 1,55:1): cortaria o texto da lateral esquerda.
 */
.painel {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  background: #0b6b45;
}

.painel::before,
.painel::after {
  content: "";
  position: absolute;
}

.painel::before {
  inset: -40px;
  background: url("capa.jpg") center / cover no-repeat;
  filter: blur(28px) brightness(.9);
}

.painel::after {
  inset: 0;
  background: url("capa.jpg") center / cover no-repeat;
}

@media (min-width: 761px) and (min-aspect-ratio: 215/100), (min-width: 761px) and (max-aspect-ratio: 155/100) {
  .painel::after { background-size: contain; }
}

.lado {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.conteudo { width: 100%; max-width: 560px; }

.logo {
  display: block;
  width: 240px;
  max-width: 70%;
  height: auto;
  margin: 0 auto 20px;
}

.instrucao { text-align: center; margin: 0 0 8px; }

label { display: block; font-weight: 700; margin: 12px 0 6px; }

input, select {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 1.05rem;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 4px;
}

input { letter-spacing: .03em; }

input:focus, select:focus { outline: 3px solid rgba(0, 153, 93, .3); border-color: var(--verde); }

button, .botao {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  font: inherit;
  /* 19 px em negrito = "texto grande" (WCAG): branco sobre #00995D (3,7:1) passa. */
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--verde);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

button:hover, .botao:hover { background: var(--verde-escuro); }

.botao.secundario { background: #fff; color: var(--verde-escuro); border: 2px solid var(--verde); }
.botao.secundario:hover { background: var(--cinza); }

.voltar { display: block; margin-top: 18px; text-align: center; color: var(--verde-escuro); }

.erro { color: var(--erro); font-weight: 700; margin: 8px 0 0; }

.contato { margin: 20px 0 0; text-align: center; font-size: .9rem; color: #5a6660; }

.ajuda { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--borda); text-align: center; }
.ajuda p { margin: 0; }

.mais { margin-top: 12px; }

/* ---------- Galeria de fotos ---------- */
body.galeria { display: block; }

.topo {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: #fff;
  border-bottom: 4px solid var(--verde);
}

.topo .logo { width: 160px; margin: 0; }
.topo-texto { flex: 1 1 auto; }
.topo h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; color: var(--verde-escuro); }
.topo p { margin: 0; color: #5a6660; }
.topo .voltar { margin: 0; }

/*
 * Linhas justificadas: flex-grow proporcional à proporção da foto (paisagem 3:2 = 1,5; retrato 2:3 = 0,667,
 * razão 9:4), base = 240 px de altura × proporção. Fotos da mesma linha ficam com a mesma altura, sem cortes.
 */
.grade {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px;
}

/* Impede a última linha (incompleta) de esticar as fotos. */
.grade::after { content: ""; flex-grow: 999; }

.cartao-foto {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cartao-foto.paisagem { flex: 9 1 360px; }
.cartao-foto.retrato { flex: 4 1 160px; }

.cartao-foto:hover, .cartao-foto:focus-within {
  transform: scale(1.03);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
  position: relative;
  z-index: 1;
}

.cartao-foto .foto { display: block; background: #e3e7e5; cursor: zoom-in; }
.cartao-foto.paisagem .foto { aspect-ratio: 3 / 2; }
.cartao-foto.retrato .foto { aspect-ratio: 2 / 3; }
.cartao-foto .foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cartao-foto .baixar { margin: 10px; width: auto; padding: 8px; font-size: 1.2rem; }

.paginacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px 48px;
}

.paginacao a, .paginacao span {
  min-width: 44px;
  padding: 10px 14px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--borda);
  background: #fff;
  color: var(--verde-escuro);
  text-decoration: none;
  font-weight: 700;
}

.paginacao a:hover { border-color: var(--verde); }
.paginacao .atual { background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; }

/* Janela da foto ampliada: quase a tela toda, foto inteira (contain), qualquer proporção. */
.visualizador {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
  overflow: visible;
}

.visualizador::backdrop { background: rgba(0, 0, 0, .88); }

.visualizador img {
  display: block;
  max-width: 96vw;
  max-height: calc(96vh - 64px);
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 4px;
}

.visualizador .baixar-ampliada { width: 200px; margin: 12px auto 0; }

.visualizador .fechar {
  position: fixed;
  top: 12px;
  right: 16px;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
}

.visualizador .fechar:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 600px) {
  .grade { padding: 16px; gap: 12px; }
  .cartao-foto.paisagem { flex-basis: 100%; }
  .cartao-foto.retrato { flex-basis: 40%; }
  .cartao-foto:hover { transform: none; }
}

/* Campo-isca do formulário de contato: fora da tela, invisível para pessoas. */
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Celular: a capa vira uma faixa no topo (8:9, até 55% da altura da tela), sempre inteira. */
@media (max-width: 760px) {
  body { flex-direction: column; }
  .painel { flex: 0 0 auto; width: 100%; aspect-ratio: 8 / 9; max-height: 55vh; }
  .lado { flex: 1 0 auto; align-items: flex-start; padding-top: 24px; }
}