/* ============================================================
   Rúben Marques — Climatização · página de Contactos
   Vive inteira "no céu". Reutiliza o kit do site (nav, chat,
   fim-chat, gaveta, rodapé) e acrescenta só o que é próprio.
   ============================================================ */

/* fundo azul-céu por baixo do vídeo — garante contraste do texto branco
   mesmo que o vídeo demore ou falhe */
.ct-body{
  background:linear-gradient(180deg,#3f82c4 0%,#6ea9db 46%,#a9d0ee 100%);
  min-height:100svh;
}

/* o céu está SEMPRE à mostra nesta página (na home ele sobe com a intro) */
.ct-body .ceu{
  transform:none;
  opacity:0;
  transition:opacity 1.1s ease;
}
.ct-body.pronto .ceu{ opacity:1; }

/* véu radial: escurece o centro do céu p/ o texto branco respirar sobre as nuvens
   (o mesmo recurso do fecho da home) — fixo, acompanha o scroll como o céu */
.ct-main::before{
  content:'';
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse 92% 72% at 50% 46%,
    rgba(14,34,60,.42), rgba(14,34,60,.16) 54%, rgba(14,34,60,0) 78%);
}

/* ---------- navbar sobre o céu ---------- */
/* no topo, a barra flutua translúcida (texto branco); ao rolar fica sólida (o estado do site) */
.nav.nav--ceu{
  opacity:1; pointer-events:auto;
  color:#fff;
  background:transparent;
  box-shadow:none;
}
.nav--ceu .nav-marca{ opacity:1; pointer-events:auto; color:#fff; }
.nav--ceu .nav-nome,
.nav--ceu .nav-links a,
.nav--ceu .nav-tel{
  color:#fff;
  text-shadow:0 1px 12px rgba(15,35,65,.45);
}
.nav--ceu .nav-links a.e-atual{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; opacity:1; }
.nav--solida .nav-links a.e-atual{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; color:var(--azul); opacity:1; }

/* ---------- o palco central ---------- */
.ct-main{
  position:relative; z-index:1;
  min-height:calc(100svh - 76px);
  display:flex; align-items:center; justify-content:center;
  /* comprimido em vh p/ a secção caber num ecrã sem scroll (encolhe em telas curtas) */
  padding:clamp(80px,10.5vh,110px) 24px clamp(40px,6vh,72px);
}
.ct-sec{
  width:min(94%,1040px);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  color:#fff;
  gap:clamp(18px,3vh,38px);
}
.ct-cab{ display:flex; flex-direction:column; gap:12px; }
.ct-titulo{
  font-size:clamp(34px,5vw,60px);
  font-weight:600; line-height:1.05; letter-spacing:-.02em;
  text-shadow:var(--sombra-texto);
}
.ct-lede{
  font-size:clamp(15px,1.4vw,19px);
  opacity:.94; max-width:62ch; margin:0 auto;
  text-wrap:balance;
  text-shadow:var(--sombra-texto);
}

/* palco: contactos (esq) · atendente (centro) · zona (dir), lado a lado —
   os flancos alinham ao topo do atendente e ficam afastados dele */
.ct-palco{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(28px,4.5vw,80px);
  width:100%;
}
.ct-chat{ width:min(440px,100%); flex:0 0 auto; }
/* o apoio abre com uma saudação só: o log assenta na altura do que tem e só cresce (até ao
   limite, e depois rola) quando a conversa começa — assim o cartão nunca fica oco */
.ct-chat .chat-log{ height:auto; max-height:clamp(144px,18vh,200px); }

/* a zona servida, à direita do atendente */
.ct-zona{
  flex:0 0 auto; max-width:11ch;
  text-align:left;
  font-size:clamp(21px,2.3vw,31px);
  font-weight:600; line-height:1.14; letter-spacing:-.015em;
  color:#fff;
  text-shadow:var(--sombra-texto);
}
/* canais diretos, empilhados — à esquerda do atendente */
.ct-diretos{
  display:flex; flex-direction:column;
  gap:4px;
  flex:0 0 auto;
}
.ct-linha{
  display:flex; align-items:center; gap:13px;
  color:#fff; text-decoration:none;
  padding:8px 10px;
  border-radius:14px;
  transition:background .25s ease, transform .25s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .ct-linha:hover{ background:rgba(247,250,252,.12); transform:translateX(2px); }
}
.ct-linha:active{ background:rgba(247,250,252,.12); }
.ct-ico{
  width:44px; height:44px; flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(16,38,68,.24);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, border-color .25s ease;
}
.ct-ico svg{ width:20px; height:20px; }
@media (hover:hover) and (pointer:fine){
  .ct-linha:hover .ct-ico{ background:rgba(247,250,252,.2); border-color:#fff; }
}
/* `text-align:left` explícito: o cabeçalho da página é centrado e a regra descia por
   herança até aqui. Como cada `.ct-txt` encolhe ao seu próprio conteúdo, o rótulo
   pequeno («TELEFONE») ficava centrado por cima do valor em vez de alinhado com ele —
   e no email, que é o mais largo dos três, o desalinhamento saltava à vista. Medido a
   23-ago-2026: os três blocos começam todos em x=277,5, o que estava torto era só o
   alinhamento do texto lá dentro. */
.ct-txt{ display:flex; flex-direction:column; gap:1px; text-align:left; }
.ct-txt small{
  font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  opacity:.82;
  text-shadow:0 1px 8px rgba(15,35,65,.4);
}
.ct-txt strong{
  font-size:17px; font-weight:600; letter-spacing:.01em;
  text-shadow:0 1px 10px rgba(15,35,65,.45);
}
.ct-txt strong.ct-email{ font-size:15.5px; font-weight:500; word-break:break-all; }

/* a nota serena: zona + horário + morada — vive por baixo da frase da zona,
   separada por uma hairline, no mesmo registo pequeno dos rótulos dos canais */
.ct-lado{
  /* 17ch chegava para «Seg–Sex, 9:00–13:00 e 14:00–18:00» numa linha corrida. O horário
     dia a dia precisa de largura para o dia e as horas caberem lado a lado sem partir. */
  flex:0 0 auto; max-width:25ch;
  display:flex; flex-direction:column; gap:clamp(13px,2vh,19px);
  text-align:left;
}
.ct-nota{
  font-size:13.5px; font-weight:500; letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(10,25,45,.6), 0 1px 18px rgba(10,25,45,.5);
  display:flex; flex-direction:column; gap:clamp(9px,1.4vh,13px);
  padding-top:clamp(11px,1.7vh,15px);
  border-top:1px solid rgba(255,255,255,.24);
}
.ct-nota dt{
  font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  opacity:.72;
  text-shadow:0 1px 8px rgba(15,35,65,.4);
}
.ct-nota dd{ margin-top:2px; line-height:1.4; }

/* o horário dia a dia. Substituiu a linha «Seg–Sex, 9:00–13:00 e 14:00–18:00» a
   23-ago-2026: quem abre os contactos está a decidir se liga agora ou logo, e uma
   lista responde a isso de relance melhor do que uma abreviatura. Os dias fechados
   ficam na lista de propósito — ver «fechado» é uma resposta, não ver nada não é. */
.ct-horario{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:3px; }
.ct-horario li{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ct-horario li > span:first-child{ opacity:.78; flex:0 0 auto; }
.ct-horario li > span:last-child{ font-variant-numeric:tabular-nums; text-align:right; }
/* Os dias fechados NÃO se distinguem por opacidade. Esta coluna é texto branco sobre
   nuvens brancas: o que a .5 fazia não era recuar, era apagar, e «fechado» é uma
   resposta que a pessoa veio cá buscar — sobretudo ao domingo à noite, que é quando
   se abre uma página de contactos. Distingue-se pela palavra, que já diz tudo. */
.ct-horario li.fechado > span:last-child{
  font-variant-numeric:normal;
  opacity:.8;
  font-style:italic;
}
/* o fim de semana começa depois de uma pausa, não a seguir à sexta como se fosse igual */
.ct-horario li.fechado:first-of-type{ margin-top:5px; }

/* ---------- entrada: as coisas assomam em cascata ---------- */
[data-entra]{ opacity:0; transform:translateY(18px); }
.ct-body.pronto [data-entra]{
  animation:ct-entra .8s var(--ease) both;
  animation-delay:calc(var(--i,0) * .11s + .2s);
}
@keyframes ct-entra{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ---------- telemóvel / ecrãs estreitos ---------- */
/* sem espaço p/ o trio lado a lado → empilha: atendente, contactos, zona */
@media (max-width:980px){
  .ct-main{ padding:96px 18px 64px; min-height:calc(100svh - 64px); }
  .ct-palco{ flex-direction:column; align-items:center; gap:22px; }
  /* ⚠️ ERA `order:-1` — «o atendente primeiro». Numa página que se chama Contactos, isso
     empurrava o telefone, o WhatsApp e o email para BAIXO de uma caixa de chat, fora da
     dobra no telemóvel. O atendente continua logo a seguir, que é onde ajuda sem tapar. */
  .ct-chat{ order:0; }
  .ct-zona{ max-width:none; text-align:center; }
  /* A ficha no telemóvel mostrava só as zonas: o horário e a morada estavam escondidos
     porque o rodapé os repetia. A 23-ago-2026 a morada saiu de vez e o horário passou a
     lista dia a dia — e essa lista é a razão de alguém abrir esta página ao domingo à
     noite. Volta a estar à vista; a morada é que já não existe aqui. */
  .ct-lado{ max-width:none; text-align:center; align-items:center; gap:14px; }
  .ct-nota{ align-items:center; max-width:34ch; border-top:none; padding-top:0; }
  .ct-nota::before{
    content:''; display:block; width:52px; height:1px;
    background:rgba(255,255,255,.3); margin-bottom:2px;
  }
  .ct-nota .n-horario{ width:min(280px,86vw); text-align:left; }
  .ct-nota .n-horario dt{ text-align:center; }
  .ct-diretos{ align-items:center; gap:2px; }
  .ct-linha{ width:290px; max-width:90%; padding:9px 10px; }
  .ct-txt strong.ct-email{ font-size:14px; word-break:normal; }
}

/* ---------- sem movimento ---------- */
@media (prefers-reduced-motion: reduce){
  [data-entra]{ opacity:1; transform:none; }
  .ct-body.pronto [data-entra]{ animation:none; }
  .ct-body .ceu{ opacity:1; transition:none; }
}

/* ============================================================
   O ATENDENTE DESTA PÁGINA, ALINHADO COM O CLIMA NOVO — 27-ago-2026
   ============================================================
   Ao vivo, no telemóvel dele: «os contactos têm problema grave. O chatbot tem um logótipo
   super AI. Mete o chatbot dos contactos mais como está no CTA do hero. Isto é válido para
   o desktop e para o mobile.»
   O «logótipo super AI» era o `.fim-marca`: um quadrado arredondado cor de salmão com um
   ícone de ondas lá dentro — o cliché número um dos produtos de IA, e a única coisa no site
   que parecia vinda de outro sítio. Saiu do HTML.
   No lugar fica o mesmo cabeçalho que ele escolheu para o Clima («o céu»): a FOTOGRAFIA do
   céu do site, com o nome e a função por cima. É o que faz este painel ser deste site.
   E o botão de enviar deixa de ser o ponto AZUL — azul não é da palete desta casa, e era
   exatamente a herança do B.Motion que ele mandou acabar. Passa a ser a seta laranja, a
   mesma do campo do hero e a mesma do Clima do canto. */
/* ⚠️ Para a faixa sangrar até aos bordos sem contas de padding: o padding LATERAL sai do
   cartão e passa para os filhos, e o próprio cartão ganha `overflow:hidden` — assim são os
   cantos de 22px do cartão que recortam a fotografia, e não um `border-radius` copiado à
   mão que fica sempre um pixel ao lado. */
.ct-chat{ padding:0 18px 18px; overflow:hidden; }
.ct-chat .fim-cab{
  position:relative;
  margin:0 -18px 12px;
  padding:15px 18px 14px;
  border-radius:0;
  overflow:hidden;
  background:url('../assets/ceu-A-poster-480.jpg') center 62%/cover;
  color:#fff;
}
/* os quatro atalhos desta página não cabiam nos 120px de teto do `.chat-chips` (site.css) e
   o «Pedir orçamento» ficava cortado a meio. O teto sobe; a animação de colapso a escrever
   continua igual, porque é ela que precisa de um teto e não de um teto BAIXO. */
.ct-chat .chat-chips{ max-height:210px; }
.ct-chat .fim-cab::before{
  content:''; position:absolute; inset:0;
  /* ⚠️ .30 não chegava no DESKTOP: a faixa é mais larga, apanha a parte lavada do poster e o
     «Clima» a branco desaparecia no canto claro. Ao telemóvel não se via porque o recorte é
     estreito. Medido a olho nas duas faces — o mesmo scrim tem de servir as duas. */
  background:linear-gradient(180deg, rgba(8,26,48,.52), rgba(8,26,48,.68));
}
.ct-chat .fim-cab > *{ position:relative; }
.ct-chat .fim-nome{ color:#fff; }
.ct-chat .fim-papel{
  color:rgba(255,255,255,.86);
  font-size:var(--t-selo); letter-spacing:var(--ls-alta); text-transform:uppercase;
}
/* o enviar: pastilha laranja com seta, como no hero e no Clima do canto */
.ct-chat .chat-send{
  width:40px; height:40px;
  border:none; border-radius:50%;
  background:var(--quente); color:#111;
  display:grid; place-items:center;
}
.ct-chat .chat-send-ponto{
  width:auto; height:auto; background:none; border-radius:0;
  font-size:17px; font-weight:600; line-height:1;
}
.ct-chat .chat-send-ponto::before{ content:'\2192'; }
@media (hover:hover) and (pointer:fine){
  .ct-chat .chat-send:hover{ background:#C4522A; }
  .ct-chat .chat-send:hover .chat-send-ponto{ transform:none; }
}