/* A página do concierge para hotéis (01-11-2026).

   Quase tudo vem do bevantai.css e do landing.css, como nas outras páginas
   do concierge. Aqui ficam as peças que esta página partilha com a do
   alojamento local (as mesmas regras do concierge-alojamento.css, que só se
   carrega lá) e, no fim, o fundo do herói (partials/fundo-hotel). Carrega-se
   só nesta página, pela pilha `estilos`. */

/* as perguntas de sempre: a etiqueta e as setas do cartão âmbar escrevem-se
   no âmbar de texto, que passa AA no papel */
.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,
   com os dois casos a começar à mesma altura (subgrid) */
.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 */
.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}}

/* os balões com o desenho da pergunta e as respostas com um visto, com o
   bico do outro lado (os mesmos da página do AL) */
.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}

/* O fundo do herói (01-11-2026): a fachada de um hotel à noite. Há fila no
   balcão: a rececionista entrega o cartão ao hóspede da frente, ele segue
   para dentro e a fila anda. Lá em cima, os quartos perguntam ao mesmo tempo
   e cada pergunta tem logo resposta; quando o hóspede chega ao quarto, a
   janela acende-se e sai a pergunta do Wi-Fi. A história dura 20 s: a fila,
   o cartão, o telefone e a janela contam o tempo a partir do zero; os
   balões e os ecrãs usam a mesma volta de 20 s, cada um com o seu atraso
   negativo, para já estarem a meio quando a página abre. Só se animam
   opacity e transform. Com «reduzir movimento» o bevantai.css desliga as
   animações e fica a cena parada: a fila no balcão e duas perguntas com a
   resposta (ver o fim). */

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

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

/* as estrelas, seis delas a cintilar */
.hotel-estrela{position:absolute;border-radius:50%;background:#EAF2FB;opacity:.7}
.hotel-estrela:is(.e1,.e2,.e3,.e4,.e5,.e6){animation:hotel-cintila 3.8s ease-in-out infinite alternate}
.hotel-estrela.e2{animation-duration:4.6s;animation-delay:-1.4s}
.hotel-estrela.e3{animation-duration:5.3s;animation-delay:-2.2s}
.hotel-estrela.e4{animation-duration:4s;animation-delay:-.8s}
.hotel-estrela.e5{animation-duration:4.9s;animation-delay:-3.1s}
.hotel-estrela.e6{animation-duration:4.3s;animation-delay:-2.7s}
@keyframes hotel-cintila{from{opacity:.25}to{opacity:.95}}

/* o brilho da cidade, por trás dos prédios */
.hotel-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 hotel (x 1720 a 2100) fica com
   o lado direito na borda da coluna do texto, ou a 16 px da borda quando o
   ecrã é estreito, e a rua baixa fica por baixo do texto */
.hotel-rua{position:absolute;bottom:0;right:calc(max(16px,50% - 640px) - 700px);width:2800px;height:400px;transform-origin:2100px 100%}
.hotel-rua svg{display:block}
.hotel-longe{fill:#0B2139}
.hotel-fachada{fill:#0A1F35}
.hotel-fachada.b{fill:#0C2238}
.hotel-fachada.c{fill:#0B1C30}
.hotel-pilastra,.hotel-friso{fill:#14304D}
.hotel-pedra{fill:#17334F}
.hotel-telhado{fill:#081A2C}
.hotel-vidro{fill:#071626}
.hotel-acesa,.hotel-lume{fill:#F3C17E}
.hotel-tv{fill:#BFD6EE;opacity:.85}
.hotel-cortina{fill:#B97A41;opacity:.75}
.hotel-caixilho{fill:none;stroke:#5A3D22;stroke-width:1.3}
.hotel-ferro{fill:none;stroke:#24486C;stroke-width:1.2}
.hotel-estore{fill:none;stroke:#14314E;stroke-width:1.5}
.hotel-toldo{fill:#1D3A57}
.hotel-porta-fixa,.hotel-poste,.hotel-dentro-rua{fill:#050F1A}
/* o átrio aceso: a sala e o balcão, em silhuetas castanhas sobre a luz */
.hotel-parede{fill:#D49A5C}
.hotel-cacifos{fill:#8E5D30}
.hotel-dentro{fill:#2A1A0E}
.hotel-relogio{fill:#FCE6BE;stroke:#2A1A0E;stroke-width:1.4}
.hotel-relogio-ponteiros{fill:none;stroke:#2A1A0E;stroke-width:1.1;stroke-linecap:round}
.hotel-abajur{fill:#FFE9BF}
.hotel-planta{fill:#3B2A14}
.hotel-balcao-madeira{fill:#3A2414}
.hotel-balcao-tampo{fill:#6A4524}
/* a marquise, o letreiro e a placa H com as estrelas */
.hotel-marquise,.hotel-letreiro-caixa{fill:#06121E}
.hotel-letreiro{fill:none;stroke:#FFE2AE;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hotel-letreiro-brilho{fill:none;stroke:#F3C17E;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;opacity:.3}
.hotel-placa{fill:#2C6FB3}
.hotel-placa-letras{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
.hotel-placa-estrelas{fill:#fff}
/* o táxi, o carrinho das malas */
.hotel-carro{fill:#06121E}
.hotel-carro-vidro{fill:#12304E}
.hotel-taxi-luz{fill:#FFE7B8}
.hotel-latao{fill:none;stroke:#C9A35B;stroke-width:2;stroke-linecap:round}
.hotel-latao-base{fill:#C9A35B}
.hotel-malas{fill:#0B1C30}

/* as bandeiras por cima da marquise, cada uma ao seu ritmo */
.hotel-bandeira{position:absolute;width:18px;height:11px;border-radius:0 1px 1px 0;transform-origin:0 50%;opacity:.92;animation:hotel-bandeira 3.4s ease-in-out infinite alternate}
.hotel-bandeira.b1{background:linear-gradient(90deg,#E9B36C,#F3C17E 60%,#E9B36C)}
.hotel-bandeira.b2{background:linear-gradient(90deg,#D8E4F0,#EAF2FB 60%,#D8E4F0);animation-delay:-1.1s}
.hotel-bandeira.b3{background:linear-gradient(90deg,#6FA5D8,#7FB4E6 60%,#6FA5D8);animation-delay:-2.3s}
@keyframes hotel-bandeira{from{transform:skewY(0deg) scaleX(1)}to{transform:skewY(-5deg) scaleX(.9)}}

/* o balcão: a fila, o cartão que passa de mão e o telefone que toca, dentro
   da montra da direita (o que sai dela não se vê) */
.hotel-balcao{position:absolute;overflow:hidden}
.hotel-pessoa{position:absolute;width:20px;height:36px}
.hotel-pessoa svg{display:block;width:100%;height:100%;fill:#2A1A0E}
.hotel-pessoa.pd{opacity:0}
.hotel-cartao{position:absolute;width:5px;height:3.5px;border-radius:1px;background:#FFF6E2;box-shadow:0 0 5px 1px rgba(255,246,226,.85);opacity:0}
.hotel-toque{position:absolute;width:11px;height:6px;border:1.5px solid #2A1A0E;border-bottom:0;border-radius:11px 11px 0 0;opacity:0}
/* a janela do quarto do hóspede do balcão, que se acende quando ele chega */
.hotel-quarto{position:absolute;opacity:0;box-shadow:0 0 16px 3px rgba(243,193,126,.35);
  background:linear-gradient(#5A3D22,#5A3D22) 50% 0/1.3px 100% no-repeat,
    linear-gradient(#5A3D22,#5A3D22) 0 38%/100% 1.3px no-repeat,
    linear-gradient(90deg,#B97A41 0 20%,#F3C17E 20% 80%,#B97A41 80%)}
/* o ecrã do telemóvel de quem pergunta, aceso dentro da janela */
.hotel-ecra{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,rgba(226,240,252,.95),rgba(226,240,252,0) 70%);opacity:0}
.hotel-balao{opacity:0}

/* a história, em 20 s */
.hotel-pessoa.pa{animation:hotel-pa 20s infinite}
.hotel-pessoa.pb{animation:hotel-pb 20s infinite}
.hotel-pessoa.pc{animation:hotel-pc 20s infinite}
.hotel-pessoa.pd{animation:hotel-pd 20s infinite}
.hotel-cartao{animation:hotel-cartao 20s infinite}
.hotel-toque{animation:hotel-toque 20s infinite}
.hotel-quarto{animation:hotel-quarto 20s infinite}
/* as perguntas e as respostas: cada uma entra no seu segundo da história */
.hotel-balao:is(.q1,.q2,.q3,.q4,.q5,.q6){animation:hotel-q 20s infinite}
.hotel-balao:is(.r1,.r2,.r3,.r4,.r5,.r6){animation:hotel-r 20s infinite}
.hotel-ecra{animation:hotel-e 20s infinite}
.hotel-balao.q1{animation-delay:-18.4s}.hotel-balao.r1{animation-delay:-17.4s}.hotel-ecra.e1{animation-delay:-18.8s}
.hotel-balao.q2{animation-delay:-16s}.hotel-balao.r2{animation-delay:-15s}.hotel-ecra.e2{animation-delay:-16.4s}
.hotel-balao.q3{animation-delay:-13.6s}.hotel-balao.r3{animation-delay:-12.6s}.hotel-ecra.e3{animation-delay:-14s}
.hotel-balao.q4{animation-delay:-10.8s}.hotel-balao.r4{animation-delay:-9.8s}.hotel-ecra.e4{animation-delay:-11.2s}
.hotel-balao.q5{animation-delay:-8.2s}.hotel-balao.r5{animation-delay:-7.2s}.hotel-ecra.e5{animation-delay:-8.6s}
.hotel-balao.q6{animation-delay:-5.4s}.hotel-balao.r6{animation-delay:-4.4s}.hotel-ecra.e6{animation-delay:-5.8s}

/* o hóspede da frente recebe o cartão, vira-se e segue para dentro do átrio;
   os outros dão um passo e entra mais um pela porta. No fim da volta a fila
   está como no princípio, por isso o recomeço não se vê */
@keyframes hotel-pa{
  0%,31%{opacity:1;transform:none}
  32.5%{opacity:1;transform:scaleX(-1);animation-timing-function:ease-in}
  44%,100%{opacity:0;transform:translate(-12px,-3px) scale(-.86,.86)}
}
@keyframes hotel-pb{0%,46%{transform:none;animation-timing-function:ease-in-out}54%,100%{transform:translateX(22px)}}
@keyframes hotel-pc{0%,50%{transform:none;animation-timing-function:ease-in-out}58%,100%{transform:translateX(22px)}}
@keyframes hotel-pd{
  0%,56%{opacity:0;transform:translateX(8px);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  64%,100%{opacity:1;transform:translateX(22px)}
}
@keyframes hotel-cartao{
  0%,21%{opacity:0;transform:none}
  23%{opacity:1;transform:none;animation-timing-function:ease-in-out}
  29%{opacity:1;transform:translateX(-10px)}
  31%,100%{opacity:0;transform:translateX(-10px)}
}
@keyframes hotel-toque{
  0%,8%{opacity:0}
  9%,11%,13%,15%{opacity:1}
  10%,12%,14%,16%{opacity:.15}
  17%,59%{opacity:0}
  60%,62%,64%{opacity:1}
  61%,63%,65%{opacity:.15}
  66%,100%{opacity:0}
}
@keyframes hotel-quarto{0%,49%{opacity:0}52%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes hotel-q{
  0%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  3%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  17%{opacity:1;transform:translateY(-10px) scale(1);animation-timing-function:linear}
  20%,100%{opacity:0;transform:translateY(-14px) scale(1)}
}
@keyframes hotel-r{
  0%{opacity:0;transform:translateY(8px) scale(.9);animation-timing-function:cubic-bezier(.22,.61,.36,1)}
  3%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:linear}
  16%{opacity:1;transform:translateY(-8px) scale(1);animation-timing-function:linear}
  19%,100%{opacity:0;transform:translateY(-12px) scale(1)}
}
@keyframes hotel-e{0%{opacity:0}2%,20%{opacity:1}23%,100%{opacity:0}}

/* nos ecrãs entre 1001 e 1180 px a coluna do texto chega perto do hotel:
   encolhe um pouco, preso ao lado direito */
@media(min-width:1001px) and (max-width:1180px){.hotel-rua{transform:scale(.85)}}
/* no tablet, o hotel encosta à direita e encolhe; é mais largo do que o
   prédio do AL e, com o letreiro, chegava aos botões: desce para baixo
   deles. Ficam só as estrelas da faixa de cima, para nenhuma cair entre as
   letras */
@media(max-width:1000px){
  .hotel-rua{right:-684px;transform:scale(.8)}
  .phero-fundo-hotel .phero-in{padding-bottom:calc(clamp(48px,6vw,80px) + 195px)}
  .hotel-estrela:is(.e1,.e3,.e6,.e7,.e9,.e10,.e11,.e12){display:none}
}
/* no telemóvel, o hotel ao centro (x 1910) */
@media(max-width:600px){
  .hotel-rua{right:auto;left:50%;margin-left:-1910px;transform-origin:1910px 100%;transform:scale(.76)}
  .phero-fundo-hotel .phero-in{padding-bottom:236px}
}
/* parado: a fila no balcão, com a pergunta do pequeno-almoço e a da piscina
   respondidas */
@media(prefers-reduced-motion:reduce){
  .hotel-balao:is(.q1,.r1,.q4,.r4),.hotel-ecra:is(.e1,.e4){opacity:1}
}