/* ═══════════════════════════════════════════════════════════
   TRAVELCARE — slider do topo da página inicial

   Cada slide é um bloco "Topo grande". O JavaScript encontra os
   blocos seguidos e junta-os num só slider. O cliente acrescenta
   um slide duplicando o bloco — sem tocar em código.

   O efeito de cortina do hero original mantém-se: o slider fica
   fixo e o corpo da página sobe por cima.
   ═══════════════════════════════════════════════════════════ */

/* Antes de o JavaScript correr, só o primeiro se vê — evita ver os três
   empilhados durante meio segundo. A classe tc-hsl é posta pelo JavaScript
   mal o slider fica montado, e a partir daí esta regra deixa de valer. */
html:not(.tc-hsl) .tcb:has(> .hero) ~ .tcb:has(> .hero){display:none}

.hsl{position:sticky;inset-block-start:0;z-index:0;
  min-height:100svh;overflow:hidden;isolation:isolate}
.hsl > .tcb{display:block}

.hsl .hero{position:absolute;inset:0;min-height:0;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1s var(--ez),visibility 0s linear 1s}
.hsl .hero.on{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity 1s var(--ez),visibility 0s}

/* A fotografia aproxima-se devagar enquanto o slide está activo.

   Começa em escala 1, não em 1.1. A diferença não é estética: uma imagem
   de fundo que aparece já ampliada é desenhada uma vez na resolução da
   caixa e só depois redesenhada na resolução ampliada — e nesse intervalo
   vê-se um fotograma pixelado. Começando sem ampliação, o primeiro
   fotograma é sempre nítido. */
.hsl .hero__bg{animation:none;transform:none;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hsl .hero.on .hero__bg{animation:hslZoom 11s ease-out forwards}
@keyframes hslZoom{from{transform:scale(1)}to{transform:scale(1.07)}}

/* A caixa da fotografia é ligeiramente maior do que o slide, para a
   aproximação nunca deixar ver as bordas. */
.hsl .hero__bg{inset:-4%}

/* O texto sobe quando o slide entra, não quando a página carrega */
.hsl .hero .rl > span{animation:none;transform:translateY(110%)}
.hsl .hero.on .rl > span{animation:rlin 1.1s var(--ez) .15s both}
.hsl .hero .fu{animation:none;opacity:0}
.hsl .hero.on .fu{animation:fu 1.05s var(--ez) both}
.hsl .hero .cue{display:none}

/* Nos slides fica o título e a frase curta. O parágrafo longo repetia-se de
   slide para slide e roubava o protagonismo à fotografia. */
.hsl .hero__t{display:none}
.hsl .hero.on:last-of-type .cue,
.hsl .hero.on .cue{display:none}

/* ── Setas ───────────────────────────────────────────────── */
.hsl__nav{position:absolute;inset-block:0;z-index:6;display:none;
  place-items:center;width:clamp(3.5rem,6vw,5.5rem);
  background:none;border:0;cursor:pointer;color:#fff;
  transition:background-color .4s var(--ez)}
@media(min-width:48em){.hsl__nav{display:grid}}
.hsl__nav:hover{background:linear-gradient(90deg,rgba(14,67,75,.34),transparent)}
.hsl__nav--n{inset-inline-end:0}
.hsl__nav--n:hover{background:linear-gradient(270deg,rgba(14,67,75,.34),transparent)}
.hsl__nav svg{width:1.6rem;height:1.6rem;opacity:.7;
  transition:opacity .3s var(--ez),transform .4s var(--ez)}
.hsl__nav:hover svg{opacity:1}
.hsl__nav--p:hover svg{transform:translateX(-4px)}
.hsl__nav--n:hover svg{transform:translateX(4px)}

/* ── Contadores em baixo ─────────────────────────────────── */
.hsl__dots{position:absolute;inset-block-end:clamp(1.5rem,4vh,2.75rem);
  inset-inline-start:var(--gut);z-index:6;display:flex;gap:.7rem;
  align-items:center}
@media(min-width:80em){
  .hsl__dots{inset-inline-start:50%;transform:translateX(-50%);
    max-width:var(--wrap);width:100%;padding-inline:var(--gut);
    justify-content:flex-start}
}
.hsl__dot{position:relative;width:2.75rem;height:2px;background:none;
  border:0;padding:0;cursor:pointer;overflow:hidden}
.hsl__dot::before{content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.28)}
.hsl__dot i{position:absolute;inset:0;background:var(--brass);
  transform:scaleX(0);transform-origin:0 50%}
.hsl__dot.feito i{transform:scaleX(1)}
.hsl__dot.on i{animation:hslBarra var(--t,6s) linear forwards}
@keyframes hslBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hsl.parado .hsl__dot.on i{animation-play-state:paused}

/* ── Legenda do slide ────────────────────────────────────── */
.hsl__conta{font-size:.6875rem;font-weight:600;letter-spacing:.18em;
  color:rgba(255,255,255,.62);margin-inline-start:.5rem;
  font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .hsl .hero{transition:none}
  .hsl .hero.on .hero__bg,
  .hsl .hero.on .rl > span,
  .hsl .hero.on .fu{animation:none;transform:none;opacity:1}
  .hsl__dot.on i{animation:none;transform:scaleX(1)}
}


/* ── Slider em telemóvel ─────────────────────────────────────
   Sem setas: passa-se com o dedo. Os traços sobem um pouco, para
   não ficarem debaixo da barra do navegador no iPhone. */
@media(max-width:47.99em){
  .hsl__dots{inset-block-end:calc(env(safe-area-inset-bottom, 0px) + 1.75rem);
    gap:.5rem}
  .hsl__dot{width:2rem}
  .hsl__conta{font-size:.625rem;margin-inline-start:.35rem}
}