/* A página do concierge para alojamento local (31-10-2026).

   Quase tudo vem do bevantai.css e do landing.css, como na página do
   concierge: aqui ficam só as peças que esta página arruma de outra
   maneira. Carrega-se só nela, pela pilha `estilos`.

   No fim, o fundo de prédios do herói (partials/fundo-predio). */

/* as perguntas de sempre: a etiqueta e as setas do cartão âmbar escrevem-se
   no âmbar de texto, que passa AA no papel (a regra da marca: o âmbar de
   enfeite nunca em letra pequena sobre fundo claro) */
.ca-perguntas .topic-tag.c2{color:var(--amber-text)}
.ca-perguntas .topic-qs.c2 li span{color:var(--amber-text)}
.ca-nota{max-width:70ch;margin:clamp(26px,3.4vw,40px) 0 0;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}

/* como responde: o link no fim do cartão do Web Search */
.ca-link{display:inline-flex;align-items:center;gap:.4em;margin-top:.9rem;font-size:.94rem;font-weight:600;color:var(--marine-dk);border-bottom:2px solid rgba(44,111,179,.35)}
.ca-link:hover{color:var(--navy)}
.ca-link:hover .btn-arrow{transform:translateX(4px)}

/* a prova: cada casa numa coluna, a captura por cima e o caso por baixo.
   Cada casa ocupa duas linhas da grelha (subgrid): as duas molduras ficam
   da altura da maior e os dois casos começam à mesma altura, mesmo com
   capturas e textos de tamanhos diferentes. Sem subgrid, empilham-se. */
.ca-casos{grid-template-rows:auto auto}
.ca-caso{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:clamp(14px,2vw,20px)}

/* os quatro passos: o bevantai.css traz a grelha de três e a de cinco. O
   filete vai do centro do primeiro número ao centro do último (o número
   tem 24px e os passos do meio entram 20px) */
.steps-4{grid-template-columns:repeat(4,1fr)}
.steps-4::before{left:12px;right:calc(25% - 32px)}
@media(max-width:920px){.steps-4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps-4{grid-template-columns:1fr}}

/* O fundo do herói (31-10-2026): a rua de um AL à noite, com a história
   que a entrada conta (partials/fundo-predio). Um hóspede chega com a mala
   à porta do prédio com a placa AL e pergunta como se entra; chega a
   resposta, o cofre das chaves acende a verde, a porta abre e ele entra; lá
   em cima acende-se a janela e sai a pergunta do Wi-Fi. A história dura
   18 s e todas as peças dela usam a mesma duração, para andarem juntas. Só
   se animam opacity e transform. Com «reduzir movimento» o bevantai.css
   desliga as animações e fica a cena parada: o hóspede à porta, a pergunta
   da chave e a resposta (ver o fim). */

/* espaço em baixo para a rua: por baixo do texto só há casas baixas */
.phero-fundo-predio .phero-in{padding-bottom:calc(clamp(48px,6vw,80px) + 125px)}

.predio{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:layout paint}

/* a lua em quarto crescente e as estrelas, sete delas a cintilar */
.predio-lua{position:absolute;top:calc(var(--topo-h) + 30px);right:9%;width:46px;height:46px;border-radius:50%;
  box-shadow:inset 13px -7px 0 0 #F2E3C4;filter:drop-shadow(0 0 16px rgba(242,227,196,.35))}
.predio-estrela{position:absolute;border-radius:50%;background:#EAF2FB;opacity:.7}
.predio-estrela:is(.e1,.e2,.e3,.e4,.e5,.e6,.e7){animation:predio-cintila 3.6s ease-in-out infinite alternate}
.predio-estrela.e2{animation-duration:4.4s;animation-delay:-1.3s}
.predio-estrela.e3{animation-duration:5.2s;animation-delay:-2.1s}
.predio-estrela.e4{animation-duration:3.9s;animation-delay:-.7s}
.predio-estrela.e5{animation-duration:4.8s;animation-delay:-3.4s}
.predio-estrela.e6{animation-duration:4.1s;animation-delay:-2.6s}
.predio-estrela.e7{animation-duration:5.6s;animation-delay:-1.8s}
@keyframes predio-cintila{from{opacity:.25}to{opacity:.95}}

/* o brilho da cidade, por trás dos prédios */
.predio-brilho{position:absolute;left:0;right:0;bottom:0;height:min(60%,380px);
  background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(246,168,96,.1),transparent 70%),
    radial-gradient(ellipse 40% 50% at 78% 100%,rgba(127,180,230,.12),transparent 70%)}

/* a rua: 2800 x 400 px, presa à direita. O prédio do AL (x 1780 a 2040)
   fica com o lado direito 40 px para lá da coluna do texto, ou a 16 px da
   borda quando o ecrã é estreito, e a rua baixa fica por baixo do texto */
.predio-rua{position:absolute;bottom:0;right:calc(max(16px,50% - 640px) - 760px);width:2800px;height:400px;transform-origin:2040px 100%}
.predio-rua svg{display:block}
.predio-longe{fill:#0B2139}
.predio-fachada{fill:#0A1F35}
.predio-fachada.b{fill:#0C2238}
.predio-fachada.c{fill:#0B1C30}
.predio-trapeira{fill:#0E2B48}
.predio-pedra{fill:#16314D}
.predio-telhado,.predio-telhado-trapeira{fill:#081A2C}
.predio-vidro{fill:#071626}
.predio-acesa,.predio-lume{fill:#F3C17E}
.predio-tv{fill:#BFD6EE;opacity:.85}
.predio-cortina{fill:#B97A41;opacity:.75}
.predio-caixilho{fill:none;stroke:#5A3D22;stroke-width:1.3}
.predio-ferro{fill:none;stroke:#24486C;stroke-width:1.2}
.predio-estore{fill:none;stroke:#14314E;stroke-width:1.5}
.predio-toldo{fill:#1D3A57}
.predio-porta-fixa,.predio-poste,.predio-silhueta{fill:#050F1A}
.predio-bandeira{fill:#F3C17E;opacity:.55}
.predio-placa{fill:#2C6FB3}
.predio-placa-letras{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.predio-cofre-caixa{fill:#1E3046}
.predio-cofre-teclas{fill:#4A6380}
.predio-cofre-led{fill:#E2574C}
.predio-carro{fill:#06121E}
.predio-carro-vidro{fill:#12304E}
.predio-tlm-carro{fill:#D6E8F8}
.predio-planta{fill:#0F3A2E}

/* a porta de madeira, de duas folhas; abre para dentro, a encolher para o
   lado das dobradiças */
.predio-porta{position:absolute;transform-origin:0 50%;box-shadow:inset 0 0 0 2px #1E1713;
  background:radial-gradient(circle at 76% 56%,#C9A06A 0 1.4px,transparent 1.9px),linear-gradient(90deg,#2B211C 0 49%,#1E1713 49% 51%,#2B211C 51%)}
/* a luz verde do cofre das chaves, quando chega a resposta */
.predio-cofre-luz{position:absolute;width:3px;height:3px;border-radius:50%;background:#4ADE80;box-shadow:0 0 6px 2px rgba(74,222,128,.6);opacity:0}
/* o hóspede com a mala; o ecrã do telemóvel acende-se quando pergunta */
.predio-hospede{position:absolute;width:29px;height:46px;opacity:0}
.predio-hospede svg{display:block;width:100%;height:100%;fill:#030C16}
.predio-hospede .predio-bracos,.predio-hospede .predio-mala-pega{fill:none;stroke:#030C16;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.predio-hospede .predio-mala-pega{stroke-width:1.5}
.predio-ecra{position:absolute;left:12px;top:2px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,rgba(214,232,248,.7),rgba(214,232,248,0) 65%);opacity:0}
/* a janela do apartamento, que se acende quando ele entra: as cortinas e
   a grade da varanda à frente, como nas outras janelas acesas */
.predio-janela-hospede{position:absolute;opacity:0;box-shadow:0 0 16px 3px rgba(243,193,126,.35);
  background:linear-gradient(#24486C,#24486C) 0 calc(100% - 10px)/100% 1.2px no-repeat,
    repeating-linear-gradient(90deg,#24486C 0 1.2px,transparent 1.2px 4px) 0 100%/100% 10px no-repeat,
    linear-gradient(90deg,#B97A41 0 20%,#F3C17E 20% 80%,#B97A41 80%)}

/* os balões desta página levam o desenho da pergunta e as respostas um
   visto, com o bico do outro lado, como numa conversa */
.balao-escrita.icone{width:28px;height:22px;color:var(--navy)}
.balao-escrita.icone::before{content:none}
.balao-escrita.icone svg{position:absolute;left:7px;top:4px;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.balao-escrita.resposta::after{left:auto;right:4px}

/* a história, em 18 s: chega, pergunta, a resposta, o cofre, a porta, entra,
   a janela, o Wi-Fi e a resposta */
.predio-hospede{animation:predio-hospede 18s infinite}
.predio-ecra{animation:predio-ecra 18s infinite}
.predio-balao.q1{animation:predio-q1 18s infinite}
.predio-balao.r1{animation:predio-r1 18s infinite}
.predio-cofre-luz{animation:predio-cofre 18s infinite}
.predio-porta{animation:predio-porta 18s infinite}
.predio-janela-hospede{animation:predio-janela 18s infinite}
.predio-balao.q2{animation:predio-q2 18s infinite}
.predio-balao.r2{animation:predio-r2 18s infinite}
/* o carro e o vizinho, cada um ao seu ritmo */
.predio-balao.q3{animation:predio-pergunta 14s -2s infinite}
.predio-balao.r3{animation:predio-resposta 14s -2s infinite}
.predio-balao.q4{animation:predio-pergunta 16s -9s infinite}
.predio-balao.r4{animation:predio-resposta 16s -9s infinite}

/* as entradas com a curva do site (--ease), as subidas a direito */
@keyframes predio-hospede{
  0%{opacity:0;transform:translateX(-18px);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  6%,38%{opacity:1;transform:translateX(0);animation-timing-function:ease-in-out}
  44%{opacity:1;transform:translateX(16px);animation-timing-function:linear}
  47%,100%{opacity:0;transform:translateX(20px)}
}
@keyframes predio-ecra{0%,8%{opacity:0}10%,34%{opacity:1}37%,100%{opacity:0}}
@keyframes predio-cofre{0%,23%{opacity:0}25%,50%{opacity:1}53%,100%{opacity:0}}
@keyframes predio-porta{
  0%,30%{transform:scaleX(1);animation-timing-function:ease-in-out}
  34%,50%{transform:scaleX(.14);animation-timing-function:ease-in-out}
  54%,100%{transform:scaleX(1)}
}
@keyframes predio-janela{0%,55%{opacity:0}57%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes predio-q1{
  0%,11%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  14%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  30%{opacity:1;transform:translateY(-10px) scale(1);animation-timing-function:linear}
  34%,100%{opacity:0;transform:translateY(-14px) scale(1)}
}
@keyframes predio-r1{
  0%,19%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  22%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  34%{opacity:1;transform:translateY(-8px) scale(1);animation-timing-function:linear}
  38%,100%{opacity:0;transform:translateY(-12px) scale(1)}
}
@keyframes predio-q2{
  0%,62%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  65%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  78%{opacity:1;transform:translateY(-10px) scale(1);animation-timing-function:linear}
  82%,100%{opacity:0;transform:translateY(-14px) scale(1)}
}
@keyframes predio-r2{
  0%,70%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  73%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  84%{opacity:1;transform:translateY(-8px) scale(1);animation-timing-function:linear}
  88%,100%{opacity:0;transform:translateY(-12px) scale(1)}
}
@keyframes predio-pergunta{
  0%,8%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  12%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  32%{opacity:1;transform:translateY(-12px) scale(1);animation-timing-function:linear}
  38%,100%{opacity:0;transform:translateY(-16px) scale(1)}
}
@keyframes predio-resposta{
  0%,18%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  22%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  38%{opacity:1;transform:translateY(-8px) scale(1);animation-timing-function:linear}
  44%,100%{opacity:0;transform:translateY(-12px) scale(1)}
}

/* nos ecrãs entre 1001 e 1180 px a coluna do texto chega perto do prédio:
   encolhe um pouco, preso ao lado direito */
@media(min-width:1001px) and (max-width:1180px){.predio-rua{transform:scale(.85)}}
/* no tablet, o prédio encosta à direita e encolhe; ficam só as estrelas da
   faixa de cima, para nenhuma cair entre as letras */
@media(max-width:1000px){
  .predio-rua{right:-744px;transform:scale(.8)}
  .phero-fundo-predio .phero-in{padding-bottom:calc(clamp(48px,6vw,80px) + 110px)}
  .predio-estrela:is(.e1,.e3,.e6,.e7,.e8,.e10,.e11,.e12,.e13,.e14){display:none}
}
/* no telemóvel, o prédio do AL ao centro (x 1910) */
@media(max-width:600px){
  .predio-rua{right:auto;left:50%;margin-left:-1910px;transform-origin:1910px 100%;transform:scale(.76)}
  .phero-fundo-predio .phero-in{padding-bottom:252px}
  .predio-lua{top:calc(var(--topo-h) + 6px);right:22px;width:34px;height:34px;box-shadow:inset 10px -5px 0 0 #F2E3C4}
}
/* parado: o hóspede à porta, com a pergunta da chave e a resposta */
@media(prefers-reduced-motion:reduce){
  .predio-hospede,.predio-ecra,.predio-balao.q1,.predio-balao.r1,.predio-cofre-luz{opacity:1}
}