/* ==========================================================================
   BOMBAR EVENTOS — COMPONENTES
   Botões, barra do topo, menu do celular, moldura de foto, foto ampliada
   e rodapé. Botões e moldura seguem o site principal ao pé da letra.
   ========================================================================== */

/* ---------------------------------------------------------------- botão -- */

.btn {
  --btn-bg: var(--dourado);
  --btn-cor: var(--preto);
  --btn-borda: var(--dourado);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 48px;
  padding: 1em 1.85em;
  background: var(--btn-bg);
  color: var(--btn-cor);
  border: 1px solid var(--btn-borda);
  border-radius: var(--r-2);
  font-size: var(--t-peq);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    transform var(--padrao) var(--curva),
    box-shadow var(--padrao) var(--curva),
    background-color var(--padrao) var(--curva),
    border-color var(--padrao) var(--curva),
    color var(--padrao) var(--curva);
}

.btn:hover {
  transform: translateY(-2px) scale(1.014);
  box-shadow: 0 10px 28px -12px rgba(201, 162, 39, .55);
}
.btn:active { transform: translateY(0) scale(.995); }

/* Secundário: transparente, borda e texto dourados. */
.btn--linha {
  --btn-bg: transparent;
  --btn-cor: var(--dourado);
  --btn-borda: var(--linha-forte);
}
.btn--linha:hover {
  --btn-borda: var(--dourado);
  background: rgba(201, 162, 39, .09);
  box-shadow: 0 10px 26px -14px rgba(201, 162, 39, .4);
}

.btn--compacto {
  min-height: 40px;
  padding: .8em 1.25em;
  font-size: .7rem;
}

.btn--bloco { width: 100%; }

.btn svg { width: 17px; height: 17px; flex: none; }

/* ----------------------------------------------------- barra do topo ---- */

.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--padrao) var(--curva),
    border-color var(--padrao) var(--curva),
    box-shadow var(--padrao) var(--curva);
}

/* Sólida depois que a página rola, ou com o menu aberto. */
.topo.solido,
.menu-aberto .topo {
  background: rgba(8, 38, 31, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linha);
  box-shadow: 0 10px 30px -22px rgba(4, 12, 9, .9);
}

.topo__env {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--borda);
}

.topo__marca {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 44px;
  flex: none;
}

.topo__marca img {
  height: 34px;
  width: auto;
}

.topo__selo {
  padding-left: .75rem;
  border-left: 1px solid var(--linha-forte);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .28em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--dourado);
}

.topo__menu { display: none; }

.topo__link {
  position: relative;
  padding-block: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-suave);
  transition: color var(--padrao) var(--curva);
}

.topo__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--padrao) var(--curva);
}

.topo__link:hover { color: var(--creme); }
.topo__link:hover::after,
.topo__link.ativo::after { transform: scaleX(1); }
.topo__link.ativo { color: var(--dourado); }

.topo__acoes {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: auto;
  flex: none;
}

.topo__site {
  display: none;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding-inline: .25rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-suave);
  transition: color var(--padrao) var(--curva);
}
.topo__site svg { width: 15px; height: 15px; transition: transform var(--padrao) var(--curva); }
.topo__site:hover { color: var(--creme); }
.topo__site:hover svg { transform: translateX(-3px); }

/* Hambúrguer */
.topo__abrir {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--linha);
  border-radius: var(--r-2);
  color: var(--creme);
  transition: border-color var(--padrao) var(--curva), background-color var(--padrao) var(--curva);
}
.topo__abrir:hover { border-color: var(--dourado); background: rgba(201, 162, 39, .08); }

.topo__abrir span,
.topo__abrir span::before,
.topo__abrir span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}
.topo__abrir span { position: relative; transition: background-color var(--rapido) var(--curva); }
.topo__abrir span::before,
.topo__abrir span::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform var(--padrao) var(--curva);
}
.topo__abrir span::before { top: -6px; }
.topo__abrir span::after  { top: 6px; }

.menu-aberto .topo__abrir span { background: transparent; }
.menu-aberto .topo__abrir span::before { transform: translateY(6px) rotate(45deg); }
.menu-aberto .topo__abrir span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Celular estreito: o selo e o botão precisam caber com o hambúrguer. */
@media (max-width: 389px) {
  .topo__marca { gap: .55rem; }
  .topo__marca img { height: 30px; }
  .topo__selo { padding-left: .55rem; letter-spacing: .22em; }
  .topo .btn--compacto { padding-inline: .95em; letter-spacing: .1em; }
}

@media (min-width: 960px) {
  .topo__marca img { height: 38px; }
}

@media (min-width: 1180px) {
  .topo__menu {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 1.9vw, 1.9rem);
    margin-left: auto;
  }
  .topo__acoes { margin-left: clamp(.5rem, 2vw, 2rem); gap: 1.1rem; }
  .topo__site { display: inline-flex; }
  .topo__abrir { display: none; }
}

/* --------------------------------------------------- menu do celular ---- */

.menu {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 1.5rem var(--borda) calc(1.75rem + env(safe-area-inset-bottom));
  background: var(--verde-profundo);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility só atrasa na saída: na abertura ela vira "visible" no mesmo
     instante, e o foco consegue entrar no primeiro link. */
  transition:
    opacity var(--padrao) var(--curva),
    transform var(--padrao) var(--curva),
    visibility 0s linear var(--padrao);
}

.menu-aberto .menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--padrao) var(--curva),
    transform var(--padrao) var(--curva),
    visibility 0s linear 0s;
}

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--linha-fraca);
  font-family: var(--fonte-display);
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--creme);
  transition: color var(--padrao) var(--curva), padding-left var(--padrao) var(--curva);
}
.menu__link:hover { color: var(--dourado); padding-left: .4rem; }

.menu__link[data-num]::before {
  content: attr(data-num);
  content: attr(data-num) / "";
  font-family: var(--fonte-texto);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(201, 162, 39, .75);
}

.menu__pe {
  display: grid;
  gap: .75rem;
  margin-top: auto;
  padding-top: 2rem;
}

.menu__site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  margin-top: .25rem;
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--texto-suave);
}
.menu__site svg { width: 16px; height: 16px; }

@media (max-height: 640px) {
  .menu__link { font-size: 1.35rem; padding-block: .7rem; }
  .menu__pe { padding-top: 1.25rem; }
}

@media (min-width: 1180px) {
  .menu { display: none; }
}

/* ------------------------------------------------------------- foto ---- */
/* Moldura de cada foto da galeria. É um <button>: abre a foto ampliada. */

.foto {
  --sombra-anel: 0 0 0 0 transparent;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-3);
  background: var(--cor, var(--verde-escuro));
  box-shadow: var(--sombra-anel);
  cursor: zoom-in;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.foto picture { display: contents; }

/* A foto preenche a moldura; quem define o tamanho é a composição
   (proporção ou altura da linha do grid), nunca o tamanho do arquivo. */
.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  filter: var(--trato-foto);
  opacity: 0;
  transition:
    opacity 700ms var(--curva-suave),
    transform 900ms var(--curva),
    filter var(--lento) var(--curva);
}

.foto img.carregada { opacity: 1; }

/* Fio interno: assinatura discreta das molduras do BomBar. */
.foto::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 2;
  border: 1px solid rgba(241, 230, 200, .14);
  border-radius: var(--r-2);
  pointer-events: none;
  transition: border-color var(--lento) var(--curva), inset var(--lento) var(--curva);
}

/* Granulação. */
.foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--grao);
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Ícone de ampliar: só aparece no hover ou no foco do teclado. */
.foto__lupa {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(8, 8, 7, .62);
  color: var(--creme);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--padrao) var(--curva), transform var(--padrao) var(--curva);
}
.foto__lupa svg { width: 17px; height: 17px; }

@media (hover: hover) {
  .foto:hover img {
    transform: scale(1.04);
    filter: var(--trato-foto-quente);
  }
  .foto:hover::before { border-color: var(--linha-forte); }
  .foto:hover .foto__lupa { opacity: 1; transform: none; }
}

.foto:focus-visible {
  outline: 2px solid var(--dourado);
  outline-offset: 4px;
}
.foto:focus-visible .foto__lupa { opacity: 1; transform: none; }

/* ---------------------------------------------------- foto ampliada ---- */

.lupa {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(5, 9, 7, .97);
  color: var(--creme);
  overflow: hidden;
}

.lupa::backdrop { background: rgba(5, 9, 7, .85); }

.lupa[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: lupa-entra var(--padrao) var(--curva-suave);
}

@keyframes lupa-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lupa__barra {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
  padding: max(.5rem, env(safe-area-inset-top)) var(--borda) .5rem;
}

.lupa__titulo {
  display: grid;
  gap: .2rem;
  min-width: 0;
}

.lupa__categoria {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dourado);
}

/* Mesmo itálico dos nomes de grupo da galeria (ex.: Dia das Mães). */
.lupa__grupo {
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.2;
  color: var(--creme);
}

.lupa__conta {
  margin-left: auto;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--texto-tenue);
  white-space: nowrap;
}

.lupa__fechar,
.lupa__nav {
  display: grid;
  place-items: center;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: rgba(8, 38, 31, .55);
  color: var(--creme);
  transition: border-color var(--padrao) var(--curva), background-color var(--padrao) var(--curva), color var(--padrao) var(--curva);
}

.lupa__fechar { width: 44px; height: 44px; flex: none; }
.lupa__fechar svg { width: 20px; height: 20px; }

.lupa__fechar:hover,
.lupa__nav:hover {
  border-color: var(--dourado);
  background: rgba(201, 162, 39, .14);
  color: var(--dourado);
}

.lupa__palco {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 clamp(.75rem, 3vw, 1.5rem);
  /* Só a pinça fica com o navegador: arrastar para o lado ou para baixo
     chega inteiro ao script (com pan-y, o arrasto vertical era cancelado
     e o gesto de fechar não funcionava). */
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.lupa__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-2);
  box-shadow: var(--s-alta);
  transition: opacity 260ms var(--curva-suave);
  -webkit-user-drag: none;
}

.lupa__img.trocando { opacity: 0; }

/* Carregando: um fio que corre embaixo da foto, sem roda girando. */
.lupa__palco::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 64px;
  height: 1px;
  margin-left: -32px;
  background: var(--dourado);
  opacity: 0;
  transition: opacity var(--padrao) var(--curva);
}
.lupa__palco.carregando::after {
  opacity: .9;
  animation: lupa-carrega 1.1s var(--curva-suave) infinite alternate;
}
@keyframes lupa-carrega {
  from { transform: translateX(-60px) scaleX(.4); }
  to   { transform: translateX(60px) scaleX(1); }
}

/* Celular: setas embaixo, no alcance do polegar. */
.lupa__nav {
  width: 52px;
  height: 52px;
  margin: .75rem 0 max(1rem, env(safe-area-inset-bottom));
}
.lupa__nav svg { width: 22px; height: 22px; }
.lupa__nav--ant  { grid-column: 1; grid-row: 3; justify-self: end; margin-right: .75rem; }
.lupa__nav--prox { grid-column: 2; grid-row: 3; justify-self: start; margin-left: .75rem; }

/* Tela larga: setas nas laterais, centralizadas na foto. */
@media (min-width: 760px) {
  .lupa[open] { grid-template-rows: auto minmax(0, 1fr); }
  .lupa__palco { padding: 0 clamp(5rem, 8vw, 7.5rem) clamp(1rem, 3vh, 2rem); }
  /* grid-area na grade inteira: sem isso a seta herdava a linha 3 do
     layout do celular e ia parar cortada no pé da tela. */
  .lupa__nav {
    position: absolute;
    grid-area: 1 / 1 / -1 / -1;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
  }
  .lupa__nav--ant  { left: clamp(1rem, 2.5vw, 2.25rem); }
  .lupa__nav--prox { right: clamp(1rem, 2.5vw, 2.25rem); }
}

.lupa--unica .lupa__nav,
.lupa--unica .lupa__conta { display: none; }

/* --------------------------------------------------------------- rodapé -- */

.rodape {
  position: relative;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) calc(1.5rem + env(safe-area-inset-bottom));
  background: var(--verde-vinheta);
  border-top: 1px solid var(--linha);
  font-size: .92rem;
  color: var(--texto-suave);
}

.rodape__grade {
  display: grid;
  gap: 1.75rem;
}

.rodape__marca img { height: 46px; width: auto; }
.rodape__marca p { margin-top: .9rem; max-width: 30ch; }

.rodape__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: .35rem 2.25rem;
}

.rodape__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition: color var(--padrao) var(--curva);
}
.rodape__links a:hover { color: var(--creme); }

.rodape__endereco { line-height: 1.75; }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linha-fraca);
  font-size: .78rem;
  color: var(--texto-tenue);
}

.rodape__assinatura {
  font-family: var(--fonte-display);
  font-size: .98rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--creme);
}
.rodape__assinatura span { color: var(--dourado); }

@media (min-width: 760px) {
  .rodape__grade {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);
    align-items: start;
  }
}

/* ------------------------------------------------- avisos (só local) --- */
/* Aparece só em localhost ou com o arquivo aberto direto: lista foto sem
   descrição, pasta vazia e afins. Nunca no site publicado.               */

.avisos-dev {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 400;
  max-width: min(420px, calc(100vw - 24px));
  padding: .4rem .7rem;
  opacity: .85;
  border: 1px solid var(--linha-forte);
  border-radius: var(--r-2);
  background: rgba(8, 8, 7, .94);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--creme);
  box-shadow: var(--s-media);
}
.avisos-dev[open] { opacity: 1; }
.avisos-dev summary { cursor: pointer; font-size: .7rem; font-weight: 700; color: var(--dourado); }
.avisos-dev ul { margin: .6rem 0 .4rem 1rem; list-style: disc; display: grid; gap: .35rem; }
.avisos-dev p { color: var(--texto-tenue); font-size: .7rem; }
.avisos-dev__fechar {
  margin-left: .35rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--dourado);
}