/* ═══════════════════════════════════════════════════════════
   Travelcare — camada de efeitos das páginas interiores.

   O objectivo é dar às páginas interiores a mesma vida que a
   página inicial tem, sem obrigar a mexer no conteúdo: as
   classes são aplicadas por JavaScript, secção a secção.

   Tudo é bidireccional — acontece a descer e desfaz-se a subir.
   Tudo respeita "reduzir movimento" nas definições do sistema.
   ═══════════════════════════════════════════════════════════ */

/* ── Revelação com atraso em cadeia ─────────────────────── */
.tcx{
  opacity:0;
  transform:translateY(30px) scale(.988);
  transition:
    opacity .78s var(--ez) calc(var(--i,0) * 80ms),
    transform .78s var(--ez) calc(var(--i,0) * 80ms);
  will-change:opacity,transform;
}
.tcx.in{opacity:1;transform:none}

/* Cartões de módulo: entram com uma leve inclinação */
.mod.tcx{transform:translateY(38px) rotate(.5deg)}
.mod.tcx.in{transform:none}

/* Linhas da lista-índice: entram da esquerda */
.idx .tcx{transform:translateX(-26px);opacity:0}
.idx .tcx.in{transform:none;opacity:1}

/* Perguntas frequentes: uma a uma */
.faq details.tcx{transform:translateY(18px)}

/* ── Títulos que sobem palavra a palavra ────────────────── */
.wl{display:inline-block;overflow:hidden;vertical-align:top;padding-block-end:.06em}
.wl>span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .82s cubic-bezier(.16,.84,.24,1) calc(var(--w,0) * 55ms);
}
.wl.in>span{transform:none}

/* ── Parallax ───────────────────────────────────────────── */
.ph__i,.phero__bg{will-change:transform}
.tcpx{transform:translate3d(0,var(--py,0),0) scale(1.12)}

/* ── Barra de progresso da secção ───────────────────────── */
.tcbar{
  position:absolute;inset-inline:0;inset-block-start:0;height:2px;
  background:var(--line);overflow:hidden;z-index:2;
}
.tcbar i{
  display:block;height:100%;background:var(--brass);
  transform:scaleX(var(--p,0));transform-origin:0 50%;
}
.bg-teal .tcbar{background:rgba(255,255,255,.18)}

/* ── Topo de página: a fotografia afasta-se devagar ─────── */
.phero__in{will-change:transform,opacity}

/* ── Formulário ─────────────────────────────────────────── */
.tcform{display:grid;grid-template-columns:1fr;gap:var(--s-xl)}
@media(min-width:60em){
  .tcform{grid-template-columns:1fr 1.15fr;gap:clamp(3rem,6vw,6rem);align-items:start}
}
.tcform h2{max-width:16ch}
.tcform__c{display:grid;gap:1.5rem;margin-block-start:var(--s-l)}
.tcform__c dt{font-size:.6875rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal-700);margin-block-end:.4rem}
.tcform__c dd{margin:0;font-size:1.0625rem;line-height:1.5}
.tcform__c .cost{color:var(--slate);margin-block-start:.35rem}
.tcform__f{background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:clamp(1.5rem,3.5vw,2.75rem)}
.bg-stone .tcform__f{box-shadow:0 24px 60px rgba(16,38,43,.06)}

/* Fluent Forms a falar a língua da marca */
.tcform__f .ff-el-group{margin-block-end:1.15rem}
.tcform__f .ff-el-input--label label{
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate);margin-block-end:.45rem;display:block}
.tcform__f input[type=text],
.tcform__f input[type=email],
.tcform__f input[type=tel],
.tcform__f input[type=url],
.tcform__f select,
.tcform__f textarea{
  width:100%;font-family:var(--ui);font-size:1rem;color:var(--ink);
  background:var(--stone);border:1.5px solid transparent;border-radius:9px;
  padding:.9rem 1.05rem;line-height:1.4;
  transition:border-color .25s var(--ez),background-color .25s var(--ez)}
.tcform__f textarea{min-height:9rem;resize:vertical}
.tcform__f input:focus,.tcform__f select:focus,.tcform__f textarea:focus{
  outline:none;background:var(--paper);border-color:var(--teal-700)}
.tcform__f .ff-btn-submit{
  display:inline-flex;align-items:center;gap:.65rem;font-family:var(--ui);
  font-size:.875rem;font-weight:600;padding:1rem 1.9rem;border-radius:999px;
  border:0;cursor:pointer;background:var(--teal-700);color:#fff;
  transition:background-color .3s var(--ez)}
.tcform__f .ff-btn-submit:hover{background:var(--teal-900)}
.tcform__f .ff-el-form-check-label{font-size:.9375rem;line-height:1.5;color:var(--slate)}
.tcform__f .ff-el-form-check{display:flex;gap:.6rem;align-items:flex-start}
.tcform__f .error,.tcform__f .text-danger{color:#B4472F;font-size:.8125rem}

/* ── Páginas legais ─────────────────────────────────────── */
.legal{max-width:76ch}
.legal h2{font-size:var(--f-h3);margin-block:var(--s-xl) 1rem;letter-spacing:-.024em}
.legal h2:first-child{margin-block-start:0}
.legal h3{font-size:1.1875rem;font-weight:500;margin-block:var(--s-l) .8rem;
  color:var(--teal-700)}
.legal p{margin-block-end:1rem;color:var(--slate);line-height:1.68}
.legal ul{margin-block-end:1.25rem;display:grid;gap:.55rem}
.legal li{position:relative;padding-inline-start:1.35rem;color:var(--slate);
  line-height:1.6}
.legal li::before{content:"";position:absolute;inset-inline-start:0;
  inset-block-start:.62em;width:.4rem;height:.4rem;border-radius:50%;
  background:var(--brass)}
.legal strong{color:var(--ink);font-weight:600}

@media(prefers-reduced-motion:reduce){
  .tcx,.mod.tcx,.idx .tcx,.faq details.tcx{
    opacity:1!important;transform:none!important;transition:none!important}
  .wl>span{transform:none!important;transition:none!important}
  .tcpx{transform:none!important}
}

/* ═══════════════════════════════════════════════════════════
   TOPO DE PÁGINA — tratamento cinematográfico

   O objectivo é duplo: dar movimento e, sobretudo, unificar.
   As fotografias do arquivo do cliente têm luzes e temperaturas
   muito diferentes umas das outras. As camadas abaixo puxam-nas
   todas para a paleta teal da marca, o que faz o site parecer
   fotografado de propósito mesmo quando não foi.
   ═══════════════════════════════════════════════════════════ */

.phero{isolation:isolate;overflow:hidden}

.phero__bg{
  z-index:0;inset:-3%;
  transform:translate3d(0,var(--py,0),0) scale(var(--pz,1));
  transform-origin:50% 45%;
  filter:saturate(.82) contrast(1.06);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}

/* Camada 1 — banho teal. Multiply escurece e tinge sem apagar
   os detalhes claros da fotografia. */
.phero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(202deg,
      color-mix(in srgb, var(--teal-700) 58%, transparent) 0%,
      color-mix(in srgb, var(--teal-900) 34%, transparent) 48%,
      transparent 78%),
    radial-gradient(130% 88% at 14% 108%,
      var(--teal-900) 0%,
      color-mix(in srgb, var(--teal-900) 42%, transparent) 44%,
      transparent 70%);
  mix-blend-mode:multiply;
}

/* Camada 2 — a que o tema já tinha, para o texto assentar */
.phero::after{z-index:2}
.phero__in{z-index:3}

/* Fio de brass a fechar o topo. Detalhe pequeno, lê-se como cuidado. */
.phero__line{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:4;height:2px;
  background:linear-gradient(90deg,
    transparent, var(--brass) 22%, var(--brass) 62%, transparent);
  transform:scaleX(var(--lp,0));transform-origin:0 50%;
  transition:transform 1.4s cubic-bezier(.16,.84,.24,1) .25s;
}

/* Migalhas e título entram por baixo de uma máscara */
.phero .crumb{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ez) .15s,transform .7s var(--ez) .15s}
.phero.pronto .crumb{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .phero__bg{transform:none!important;filter:none}
  .phero .crumb{opacity:1!important;transform:none!important}
  .phero__line{transform:scaleX(1)!important}
}

/* ═══════════════ Formulário integrado ═══════════════ */

.tcform__f label{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate);margin-block-end:.45rem}
.tcform__f label span{color:var(--brass)}
.tcf__c{margin-block-end:1.15rem}
.tcf__par{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:36em){.tcf__par{grid-template-columns:1fr 1fr;gap:0 1rem}}

/* Campo-armadilha: fora do ecrã, invisível para leitores de ecrã */
.tcf__hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;
  overflow:hidden}

.tcf__consent{margin-block:1.5rem}
.tcf__consent label{display:flex;gap:.7rem;align-items:flex-start;
  text-transform:none;letter-spacing:0;font-size:.9375rem;font-weight:400;
  line-height:1.5;color:var(--slate)}
.tcf__consent input{margin-block-start:.28rem;width:1.05rem;height:1.05rem;
  accent-color:var(--teal-700);flex:none}
.tcf__consent a{color:var(--teal-700);text-decoration:underline;
  text-underline-offset:3px}
.tcf__ob{color:var(--brass)}

.tcf__enviar{margin-block-start:.5rem}
.tcf__nota{font-size:.75rem;color:var(--slate);margin-block-start:1rem}
.tcf__nota span{color:var(--brass)}

.tcf__ok,.tcf__erro{border-radius:10px;padding:1.1rem 1.35rem;
  margin-block-end:1.5rem;font-size:.9375rem;line-height:1.55}
.tcf__ok{background:color-mix(in srgb,var(--teal-100) 80%,transparent);
  border:1px solid var(--teal-200);color:var(--teal-900)}
.tcf__ok p+p{margin-block-start:.35rem}
.tcf__erro{background:#FBEFEC;border:1px solid #E8C7BD;color:#8A3423}

/* Separadores são botões, não ligações falsas */
.pt__tab{background:none;font-family:inherit;cursor:pointer;line-height:1.2}

/* Aviso RGPD do formulário */
.tcf__rgpd{margin-block-start:var(--s-l);padding-block-start:1.35rem;
  border-block-start:1px solid var(--line);display:grid;gap:.7rem}
.tcf__rgpd p{font-size:.8125rem;line-height:1.6;color:var(--slate);margin:0}
.tcf__rgpd strong{color:var(--ink);font-weight:600}
.tcf__rgpd a{color:var(--teal-700);text-decoration:underline;
  text-underline-offset:3px}

/* ── Animações compostas ─────────────────────────────────────
   O PageSpeed acusa "animações não compostas" quando se anima
   largura, altura ou posição. Estas propriedades obrigam o
   navegador a refazer o layout a cada fotograma. As linhas
   abaixo empurram os três casos para a GPU. */
.expand__f,.expand__i,.hs__track,.sd__card{will-change:transform}
.tcbar i,.hs__rail i{will-change:transform}

/* Reserva de espaço: evita o salto de layout enquanto as
   fotografias externas não chegam. */
.phero{background:var(--teal-900)}
.ph{background:var(--stone)}
.sd__p,.tile{background:var(--ink)}


/* ── Efeitos em telemóvel ────────────────────────────────────
   A entrada em cadeia mantém-se, mas mais curta: com 80ms por item
   e cinco itens no ecrã, o último chegava tarde de mais. */
@media(max-width:47.99em){
  .tcx{transition-delay:calc(var(--i,0) * 45ms)!important;
    transform:translateY(22px)}
  .mod.tcx{transform:translateY(24px)}
  .idx .tcx{transform:translateX(-14px)}
  .wl>span{transition-duration:.62s}

  /* O parallax é imperceptível em ecrã pequeno e custa fotogramas */
  .tcpx{transform:none!important}

  .tcbar{height:1.5px}
  .tcform__f{padding:1.35rem 1.15rem}
  .tcf__par{grid-template-columns:1fr}
}

/* Aviso legal do custo da chamada, acrescentado automaticamente a
   qualquer secção que mostre um número de telefone. */
.tcb-custo{margin:0;padding-block:0 var(--s-l)}
.tcb-custo>span{display:block;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gut);font-size:.75rem;line-height:1.5;color:var(--slate)}
.bg-teal + .tcb-custo>span,
.cta + .tcb-custo>span{color:rgba(255,255,255,.45)}
.tcb:has(.bg-teal) .tcb-custo>span,
.tcb:has(.cta) .tcb-custo>span{color:rgba(255,255,255,.45)}
.tcb:has(.bg-teal) .tcb-custo,
.tcb:has(.cta) .tcb-custo{background:var(--teal-900);padding-block-start:0}