/* Página inicial do ALPS — a paisagem ocupa a tela e a bandeira é a entrada do sistema */
:root{
  --carvao:#0e1116;
  --marfim:#f2f3ee;
  --salvia:#7cc3a4;
  --borda:rgba(255,255,255,.28);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--carvao);color:var(--marfim);overflow:hidden;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.palco{position:fixed;inset:0;overflow:hidden}

/* O quadro guarda a proporção 16:9 do banner. Em telas largas ele cobre a tela inteira;
   em telas estreitas ele encolhe para a bandeira continuar visível. */
.quadro{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100vw, calc(100vh * 16 / 9));
  height:max(100vh, calc(100vw * 9 / 16));
}
.cena{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#cena-video{z-index:1}
.quadro::after{           /* véu suave no topo: mantém a marca legível sem cobrir a paisagem */
  content:"";position:absolute;left:0;right:0;top:0;height:34%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(8,11,16,.55),rgba(8,11,16,.16) 55%,transparent);
}

/* Área clicável sobre a bandeira, com folga para a ondulação do tecido */
.bandeira{
  position:absolute;z-index:4;display:block;border-radius:14px;
  left:69.4%;top:5.6%;width:29.4%;height:31.4%;
  -webkit-tap-highlight-color:transparent;
}
.bandeira-luz{
  position:absolute;inset:0;border-radius:14px;border:1.5px solid transparent;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.bandeira:hover .bandeira-luz,
.bandeira:focus-visible .bandeira-luz{
  border-color:var(--borda);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 1px rgba(0,0,0,.18),0 10px 40px rgba(0,0,0,.25);
}
.bandeira:focus-visible{outline:none}
.bandeira:focus-visible .bandeira-luz{border-color:var(--salvia);box-shadow:0 0 0 3px rgba(124,195,164,.35)}
.bandeira:active .bandeira-luz{background:rgba(255,255,255,.12)}

/* Indicação junto à bandeira */
.dica{
  position:absolute;z-index:4;margin:0;right:31.6%;top:21%;
  display:flex;align-items:flex-end;gap:10px;
  font-size:clamp(12px,1.05vw,17px);letter-spacing:.02em;color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(6,10,16,.55);white-space:nowrap;pointer-events:none;
  animation:respira 3.4s ease-in-out infinite;
}
.dica-seta{flex:none;width:clamp(32px,2.8vw,52px);height:auto;opacity:.85;margin-bottom:-2px}
@keyframes respira{0%,100%{opacity:.78}50%{opacity:1}}

/* Marca no canto superior esquerdo */
.marca{position:absolute;z-index:5;left:clamp(18px,3.2vw,52px);top:clamp(16px,2.8vw,40px)}
.marca img{
  display:block;height:auto;width:clamp(124px,13vw,210px);
  filter:drop-shadow(0 2px 14px rgba(6,10,16,.55));
}

/* Rodapé: o botão só aparece quando a bandeira fica pequena demais para clicar */
.rodape{
  position:absolute;z-index:5;left:0;right:0;bottom:clamp(16px,3vh,34px);
  display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;
}
.botao{
  display:none;pointer-events:auto;
  padding:13px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.34);
  background:rgba(12,16,22,.62);backdrop-filter:blur(8px);
  color:var(--marfim);font-size:15px;font-weight:600;letter-spacing:.02em;text-decoration:none;
}
.botao:hover{background:rgba(12,16,22,.8);border-color:var(--salvia)}
.botao:focus-visible{outline:2px solid var(--salvia);outline-offset:3px}
.assinatura{
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);
  text-shadow:0 1px 8px rgba(6,10,16,.6);
}

/* Telas estreitas: o quadro cabe inteiro na largura, a bandeira continua visível
   e o botão de entrar aparece embaixo */
@media (max-width:820px), (orientation:portrait){
  /* a faixa 16:9 cabe inteira na largura, com a própria cena desfocada preenchendo o resto */
  .palco::before{
    content:"";position:absolute;inset:-6%;z-index:0;
    background:url("/site/alpes-poster.jpg") center/cover no-repeat;
    filter:blur(46px) brightness(.42) saturate(.9);
  }
  .palco::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(10,13,18,.82),rgba(10,13,18,.35) 32%,rgba(10,13,18,.35) 68%,rgba(10,13,18,.88));
  }
  .quadro{width:100vw;height:calc(100vw * 9 / 16);top:46%;box-shadow:0 24px 70px rgba(0,0,0,.55)}
  .quadro::after{height:46%}
  .dica{right:31.6%;top:14%;font-size:12px}
  .botao{display:inline-flex}
  .rodape{bottom:clamp(28px,8vh,64px);gap:14px}
  .marca{left:50%;top:clamp(26px,9vh,74px);transform:translateX(-50%)}
  .marca img{width:150px}
}
@media (max-width:560px){
  .dica span{display:none}
  .dica{right:29%;top:11%}
  .marca img{width:128px}
}

@media (prefers-reduced-motion:reduce){
  .dica{animation:none;opacity:.95}
  .bandeira-luz{transition:none}
}