/* =========================================================================
   POPUP DA HOME — a página de 25 anos dentro de uma moldura.

   O desenho (node 13408:7100) é a página real dentro de um card de 1416px,
   não uma prévia redesenhada. Por isso esta folha quase não desenha conteúdo:
   ela monta a moldura, a barra do topo e o bloqueio do fim, e o miolo é o
   mesmo CSS das seções, em 25anos.css.

   Depende de 25anos.css (tokens, blocos, botões). Carrega só na home e só
   quando o popup está ativo com a página de destino publicada.
   ========================================================================= */

.atl25-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  /* No desenho o card cola no alto (31px) e desce até sair da tela. */
  align-items: flex-start;
  justify-content: center;
  padding: 31px clamp(16px, 4vw, 60px) 24px;
  font-family: var(--c25-fonte-corpo);
}

.atl25-popup[hidden] { display: none; }

.atl25-popup__veu {
  position: absolute;
  inset: 0;
  background: rgba(12, 22, 52, .72);
  opacity: 0;
  transition: opacity var(--c25-entrada) var(--c25-ease);
}

.atl25-popup.is-aberto .atl25-popup__veu { opacity: 1; }

/* A moldura é a "página dentro da página": raio de 50px e o filete de 6px na
   base vêm do desenho (node 13420:1199). Coluna flex para a barra do topo ficar
   fixa e só o miolo rolar.

   Largura: o desenho tem 1416 numa tela de 1920 — 73,75% dela, não 1416 fixos.
   Travar em 1416 dava um card certo em 1920 e cada vez menor daí para cima: num
   monitor de 2560 ele ocupava 55% da tela e parecia uma janelinha no meio do
   escuro. `max(1416px, 73.75vw)` mantém o desenho até 1920 e segue a proporção
   dele acima disso; o teto de 1800 existe porque numa ultrawide 73,75% viraria
   uma linha de texto larga demais para ler. */
.atl25-popup__moldura {
  position: relative;
  display: flex;
  flex-direction: column;
  /* O reset do 25anos.css vale para `.atl25 *`, e a moldura está por fora dele:
     sem isto, os 6px do filete somariam à altura máxima. */
  box-sizing: border-box;
  width: 100%;
  max-width: min(1800px, max(1416px, 73.75vw));
  max-height: calc(100vh - 55px);
  max-height: calc(100dvh - 55px);
  /* O espaço do filete da base. Não é `border-bottom` porque o filete é
     degradê: `border-image` ignora o raio de 50px e devolveria a base em
     quinas retas. Como padding, o fundo branco e o recorte arredondado
     continuam valendo, e o filete entra por cima no ::after. */
  padding-bottom: 6px;
  background: #fff;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(12, 22, 52, .6);
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity var(--c25-entrada) var(--c25-ease),
              transform var(--c25-entrada) var(--c25-ease);
}

/* O filete da base é o mesmo grafismo dos blocos (`--c25-filete`): laranja,
   cinza, azul e azul claro se apagando à direita. No desenho a base do card
   tem exatamente esses quatro segmentos, nas mesmas proporções — o laranja
   sozinho era leitura minha, não do arquivo. */
.atl25-popup__moldura::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--c25-filete);
  pointer-events: none;
}

.atl25-popup.is-aberto .atl25-popup__moldura {
  opacity: 1;
  transform: none;
}

/* A moldura recebe o foco na abertura (tabindex="-1"). Ela não é um controle:
   o anel iria em volta do popup inteiro sem dizer nada a quem enxerga. Quem
   marca posição no teclado são os controles, que mantêm o foco visível. */
.atl25-popup__moldura:focus { outline: none; }

/* --- Barra do topo (node 13420:1238) ---

   Numa barra de 1416: logo recuada 100px à esquerda, o botão terminando a
   100px da direita e o fechar sozinho a 29px da borda. Os 47px entre o botão
   e o fechar saem do gap de 24 mais a margem de 23 abaixo — assim as três
   medidas do desenho fecham sem posicionamento absoluto. */
.atl25-popup__topo {
  flex: 0 0 auto;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: clamp(20px, 5.2vw, 100px);
  padding-right: clamp(12px, 1.5vw, 29px);
  background: #fff;
}

.atl25-popup__topo-logo {
  display: block;
  width: 171px;
  height: 32px;
  flex: 0 0 auto;
}

/* `margin-left:auto` e não só o space-between: sem o arquivo da logo no tema a
   barra fica com um filho só, e o grupo escorregaria para a esquerda. */
.atl25-popup__topo-acoes {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

/* A assinatura sai como <span> ou como <a>, conforme o painel tenha ou não
   link. No desenho ela é texto puro em qualquer um dos dois casos: quem
   sublinha é o hover, para o link se anunciar sem virar um segundo botão ao
   lado do "Fale Conosco". */
.atl25-popup__topo-marca {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c25-texto-corpo);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--c25-rapido) var(--c25-ease);
}

a.atl25-popup__topo-marca:hover,
.atl25-popup.is-teclado a.atl25-popup__topo-marca:focus-visible {
  color: var(--c25-azul);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.atl25-popup.is-teclado a.atl25-popup__topo-marca:focus-visible {
  outline: 3px solid var(--c25-laranja);
  outline-offset: 3px;
  border-radius: 4px;
}

.atl25-popup__topo-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--c25-laranja);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--c25-rapido) var(--c25-ease);
}

.atl25-popup__topo-botao:hover,
.atl25-popup__topo-botao:focus {
  background: var(--c25-laranja-escuro);
  color: #fff;
}

/* O fechar mora na barra branca, como no desenho: um disco de 24px em cinza
   claro, sem moldura nem fundo próprio.

   A caixa clicável é maior que o ícone — 40px, o mínimo confortável para o
   toque — e as margens negativas descontam a folga, para o desenho de 24px
   continuar caindo a 29px da borda da moldura e a 47px do botão. */
.atl25-popup__fechar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-left: 15px;
  margin-right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.atl25-popup__fechar svg { display: block; }

/* O disco fica no #E0E0E0 do desenho — aqui pelo `--c25-borda` (#DEDEDE), que
   é o token do manual mais próximo e, a olho, o mesmo cinza. O X, que no Figma
   é o branco de trás, ganha o cinza do manual: 6:1 sobre o disco, contra os
   1,3:1 do vazado. */
.atl25-popup__fechar-disco {
  fill: var(--c25-borda);
  transition: fill var(--c25-rapido) var(--c25-ease);
}

.atl25-popup__fechar-x {
  fill: var(--c25-cinza);
  transition: fill var(--c25-rapido) var(--c25-ease);
}

/* Laranja é estado de ação: hover do mouse ou foco vindo do teclado. Nunca na
   abertura — ver a nota do `.is-teclado` mais abaixo. */
.atl25-popup__fechar:hover .atl25-popup__fechar-disco,
.atl25-popup.is-teclado .atl25-popup__fechar:focus-visible .atl25-popup__fechar-disco {
  fill: var(--c25-laranja);
}

.atl25-popup__fechar:hover .atl25-popup__fechar-x,
.atl25-popup.is-teclado .atl25-popup__fechar:focus-visible .atl25-popup__fechar-x {
  fill: #fff;
}

/* O ícone é um disco: um anel quadrado em volta dele fica torto — e como a
   caixa clicável é maior que o desenho, o anel acompanha o ícone, não a caixa.

   `.is-teclado` é uma trava a mais em cima do `:focus-visible`: o `popup.js`
   só põe essa classe quando alguém aperta Tab dentro do popup. Sem ela nenhum
   controle daqui desenha anel de foco.

   O motivo é concreto: com o popup abrindo sozinho por temporizador, o
   navegador tratava o foco de abertura como foco de teclado e o X nascia
   laranja e circulado, como se estivesse selecionado. O critério do
   `:focus-visible` varia entre navegadores; o do Tab, não. */
.atl25-popup__fechar:focus,
.atl25-popup__fechar:focus-visible {
  outline: none;
}

.atl25-popup.is-teclado .atl25-popup__fechar:focus-visible svg {
  outline: 3px solid var(--c25-laranja);
  outline-offset: 3px;
  border-radius: 50%;
}

.atl25-popup__rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* A moldura tem quina de 50px, e a barra de rolagem padrão do Windows desenha
     um trilho quadrado por cima dela. Fina e sem trilho, ela convive com o raio
     sem deixar de avisar que há mais conteúdo abaixo. */
  scrollbar-width: thin;
  scrollbar-color: var(--c25-cinza-linha) transparent;
}

.atl25-popup__rolagem::-webkit-scrollbar { width: 8px; }
.atl25-popup__rolagem::-webkit-scrollbar-track { background: transparent; }

.atl25-popup__rolagem::-webkit-scrollbar-thumb {
  background: var(--c25-cinza-linha);
  border-radius: 999px;
}

/* --- A página dentro do popup ---

   As seções são as mesmas do template-25-anos.php e chegam aqui com o CSS
   delas, na escala delas. O respiro entre seções, a tipografia e os botões não
   são tocados: a moldura é um recorte da página, não uma miniatura. A única
   diferença é a coluna — no desenho ela tem 100px de margem em cada lado da
   moldura (1216 de conteúdo), contra os 1240 da página em tela cheia. */

.atl25-popup__pagina {
  background: #fff;
  --c25-largura: 1216px;
}

/* Só a seção atrás do vidro continua travada por CSS — ela também carrega
   `inert` no HTML (rede pra navegador antigo sem suporte). A prévia
   (`.atl25-popup__previa`) NÃO bloqueia mais por `pointer-events`: toque,
   roda do mouse e clique chegam normal nela, pra dar pra arrastar os trilhos
   que rolam nativo (linha do tempo, fotos, ações, reconhecimentos). Quem
   impede o clique de navegar/ativar algo é o `popup.js` (`travarCliques()`),
   não o CSS — mais simples e sem depender de acertar `pointer-events` em
   cascata em cada filho de cada trilho. */
.atl25-popup__borrado {
  pointer-events: none;
}

/* Arraste por mouse (popup.js, `arrastavel()`) — mesma troca de
   `scroll-behavior: smooth` (25anos.css) pra `auto` que o arraste de
   polaroides já faz na página real (`.atl25-trilho--polaroides.is-arrastando`
   cobre esse caso sozinho): sem isso, cada `scrollLeft` do pointermove vira
   uma mini-animação e o arraste fica com atraso sensível em relação ao
   cursor. Aqui generaliza pros outros três trilhos da prévia, que na página
   nunca tiveram arraste por mouse — só a rolagem nativa. */
.atl25-popup__previa .atl25-timeline__trilha,
.atl25-popup__previa .atl25-trilho {
  cursor: grab;
}

.atl25-popup__previa .atl25-timeline__trilha.is-arrastando,
.atl25-popup__previa .atl25-trilho.is-arrastando {
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

/* O banner da página abre em 700px de altura mínima. No desenho (node
   13421:1380) ele tem 595 dentro da moldura, e é essa a medida aqui.

   Não há trava em `vh`: encolher o banner com a tela achatava o selo e o
   título, e era o que fazia o popup parecer uma miniatura do layout em vez do
   layout. Quem está no popup rola dentro dele — a única coisa que a altura da
   tela decide é quanto se vê de uma vez, como na página. */
.atl25-popup__pagina .atl25-banner {
  min-height: 595px;
}

/* --- Bloqueio do fim: vidro sobre a seção seguinte --- */

.atl25-popup__bloqueado {
  position: relative;
  background: var(--c25-azul);
  min-height: 300px;
  /* A seção bloqueada é inteira, mas atrás do vidro basta a primeira tela dela:
     o resto só alongaria a rolagem até o convite. */
  max-height: min(460px, 52vh);
  overflow: hidden;
}

.atl25-popup__borrado {
  /* O blur é o que "tranca" o conteúdo: dá pra ver que existe, não dá pra ler */
  filter: blur(7px);
  transform: scale(1.04);
  opacity: .85;
  user-select: none;
}

/* O vidro é regra do manual: só sobre azul, nunca sobre branco. A seção que
   cai aqui pode ter qualquer tom, então o fundo dela sai e quem pinta é o
   bloqueado — o atl25-on-dark do PHP cuida do texto. */
.atl25-popup__borrado .atl25-bloco {
  background: transparent;
}

.atl25-popup__vidro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px 24px;
  text-align: center;
  background: rgba(33, 61, 147, .58);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.atl25-popup__cadeado {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.atl25-popup__apoio {
  margin: 0;
  max-width: 46ch;
  font-weight: 300;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
  text-wrap: pretty;
}

.atl25-popup__cta {
  font-size: 16px;
  padding: 15px 28px;
}

.atl25-popup__cta:hover { color: #fff; }

/* Trava a rolagem do site enquanto o popup está aberto */
body.atl25-popup-aberto { overflow: hidden; }

@media (max-width: 900px) {
  .atl25-popup { padding: 16px 16px 16px; }

  .atl25-popup__moldura {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    border-radius: 32px;
  }

  .atl25-popup__topo { padding-left: 20px; }
}

@media (max-width: 560px) {
  .atl25-popup { padding: 0; }

  .atl25-popup__moldura {
    max-width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100%;
    /* Ocupando a tela inteira, o raio de 50px viraria um recorte estranho nas
       quinas do aparelho. O filete fica: é ele que assina o rodapé. */
    border-radius: 0;
  }

  /* Sem espaço para a assinatura ao lado do botão e do fechar. */
  .atl25-popup__topo-marca { display: none; }

  .atl25-popup__topo {
    padding-left: 16px;
    padding-right: 14px;
  }

  .atl25-popup__topo-logo { width: 140px; height: 26px; }

  /* Mesma conta da barra grande: 6 + os 8 da folga da caixa dão os 14 do
     desenho entre o botão e o ícone. */
  .atl25-popup__fechar { margin-left: 6px; }

  /* Os 595 do desenho são a altura numa moldura de 1416. No aparelho a moldura
     é a tela inteira, e 595 de banner não deixariam nem sinal de que há mais
     coisa abaixo. A página comemorativa mantém os 700 dela porque lá o banner é
     a entrada do site; aqui ele é a amostra. O desenho não trata mobile. */
  .atl25-popup__pagina .atl25-banner { min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .atl25-popup__veu,
  .atl25-popup__moldura {
    transition: none;
    opacity: 1;
    transform: none;
  }
}