/* =========================================================================
   ASA — agência de viagens

   A página inteira é uma noite de voo: fundo azul de altitude, texto branco,
   âmbar do poente como único acento. A textura é uma gratícula de carta de
   navegação, fixa por trás do conteúdo, com um grão fino de emulsão por cima.
   ========================================================================= */

:root{
  /* cor */
  --noite:       #0B1F35;   /* o chão de toda a página */
  --noite-funda: #071726;   /* rodapé */
  --painel:      rgba(232,235,238,.045);
  --nuvem:       #E8EBEE;
  --nuvem-meia:  rgba(232,235,238,.74);
  --nuvem-fraca: rgba(232,235,238,.52);
  --ouro:        #E9B65C;
  --ouro-vivo:   #F2C877;
  --ouro-fosco:  rgba(233,182,92,.30);
  --linha:       rgba(232,235,238,.14);
  --alarme:      #F0A0A0;

  /* medida */
  --goteira:   clamp(1.25rem, 6vw, 5rem);
  --secao-pad: clamp(5.5rem, 11vw, 10rem);
  --medida:    62ch;

  /* tipo */
  --display: "Bodoni Moda", "Bodoni MT", Didot, "Didot LT STD", Georgia, serif;
  --corrido: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; background:var(--noite); }

body{
  margin:0;
  background:var(--noite);
  color:var(--nuvem);
  font-family:var(--corrido);
  font-size:1.0625rem;
  font-weight:400;
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Gratícula de carta de navegação e o último calor do poente, no alto.
   Fica atrás do conteúdo e não acompanha o scroll: lê-se como material da
   página, não como padrão a passar. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(132% 64% at 50% -14%, rgba(233,182,92,.12) 0%, rgba(233,182,92,0) 58%),
    repeating-linear-gradient(90deg, rgba(198,219,240,.05) 0 1px, transparent 1px 132px),
    repeating-linear-gradient(0deg,  rgba(198,219,240,.05) 0 1px, transparent 1px 132px);
}

/* Grão de emulsão por cima de tudo — fotografias incluídas — para a página
   não ter a limpeza plana de um ecrã. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  opacity:.22;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* trava o scroll enquanto a porta está fechada */
body.porta-fechada{ overflow:hidden; }

img,video,canvas,iframe{ display:block; max-width:100%; }
img{ height:auto; }

/* Todos os títulos partilham o mesmo tratamento do nome no hero: o eixo
   óptico da Bodoni fixo num valor de texto. Em automático, aos tamanhos de
   título os traços finos afinam até desaparecerem — ainda mais sobre o azul. */
h1,h2,h3{
  font-family:var(--display);
  font-optical-sizing:none;
  font-variation-settings:"opsz" 11;
  font-weight:500;
  line-height:1.14;
  letter-spacing:-.002em;
  margin:0;
  color:var(--nuvem);
  text-wrap:balance;
}

p{ margin:0; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--ouro);
  outline-offset:3px;
  border-radius:1px;
}

::selection{ background:var(--ouro); color:var(--noite); }

.envelope{
  width:min(1240px, 100% - 2 * var(--goteira));
  margin-inline:auto;
}

.secao{ padding-block:var(--secao-pad); position:relative; }

/* quando uma imagem de bordo a bordo fecha a secção, ela é o chão: a folga
   de baixo passaria a somar-se à da secção seguinte */
.secao--fecha-em-imagem{ padding-bottom:0; }

.salto{
  position:absolute; left:var(--goteira); top:.75rem;
  transform:translateY(-200%);
  background:var(--ouro); color:var(--noite);
  padding:.6rem 1rem; font-size:.8125rem; letter-spacing:.06em;
  z-index:200; transition:transform 180ms ease;
}
.salto:focus{ transform:none; }

/* =========================================================================
   1. HERO — a porta
   ========================================================================= */

.hero{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  background:var(--noite);
}

.hero__filme,
.hero__poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

.hero__poster{ z-index:0; }
.hero__filme{ z-index:1; }

/* véu: escurece o centro o suficiente para garantir AA no texto branco,
   qualquer que seja o frame por baixo */
.hero__veu{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(72% 52% at 50% 48%,
      rgba(5,16,28,.62) 0%,
      rgba(5,16,28,.40) 58%,
      rgba(5,16,28,.30) 100%),
    linear-gradient(to bottom,
      rgba(5,16,28,.34) 0%,
      rgba(5,16,28,0) 26%,
      rgba(5,16,28,0) 62%,
      rgba(5,16,28,.52) 100%);
}

.hero__conteudo{
  position:absolute; inset:0; z-index:4;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  justify-items:center;
  padding:var(--goteira);
  text-align:center;
  color:#fff;
}

.hero__marca{ grid-row:2; align-self:center; }

.hero__nome{
  font-family:var(--display);
  font-optical-sizing:none;
  font-variation-settings:"opsz" 12;
  font-weight:500;
  font-size:clamp(3.75rem, 17vw, 14rem);
  line-height:.92;
  letter-spacing:.36em;
  /* a tracking empurra o bloco para a direita; compensa-se à esquerda */
  margin:0 0 0 .36em;
  color:#fff;
  text-shadow:0 1px 40px rgba(5,16,28,.45);
}

.hero__tagline{
  margin-top:clamp(1.5rem, 3.5vw, 2.75rem);
  font-size:clamp(.8125rem, 1.5vw, 1rem);
  font-weight:300;
  letter-spacing:.34em;
  margin-left:.34em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 24px rgba(5,16,28,.6);
}

.hero__entrar{
  grid-row:3;
  align-self:end;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  padding:1rem 1.5rem;
  margin-bottom:clamp(1rem, 4vh, 3rem);
  background:none;
  border:0;
  color:rgba(255,255,255,.9);
  font-family:var(--corrido);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.3em;
  cursor:pointer;
  text-shadow:0 1px 20px rgba(5,16,28,.7);
}

.hero__entrar span{ margin-left:.3em; }

.hero__entrar i{
  display:block;
  width:1px; height:clamp(2.5rem, 7vh, 4.5rem);
  background:linear-gradient(to bottom, rgba(233,182,92,.9), rgba(233,182,92,0));
}

.hero__entrar:hover i{ background:linear-gradient(to bottom, var(--ouro), rgba(233,182,92,.1)); }

/* as duas metades: só se tornam visíveis no instante da abertura */
.porta{
  position:absolute; top:0; z-index:5;
  width:50%; height:100%;
  overflow:hidden;
  visibility:hidden;
  will-change:transform;
}
.porta--esq{ left:0; }
.porta--dir{ right:0; }

/* Fundo de recurso, caso o canvas não possa ser desenhado. Mesma geometria:
   um ecrã inteiro de largura, ancorado a cada extremo. */
.porta::before{
  content:"";
  position:absolute; top:0;
  width:100vw; height:100%;
  background:url(../media/web/asa-poster.jpg) center / cover no-repeat;
}
.porta--esq::before{ left:0; }
.porta--dir::before{ right:0; }

/* O canvas é de propósito mais largo do que a metade que o contém: mede um
   ecrã inteiro e é a metade que o corta. Sem max-width:none, a regra global
   de média esmagava-o para metade e cada porta mostrava o frame todo
   comprimido a 2:1. */
.porta canvas{
  position:absolute; top:0; z-index:1;
  width:200%; height:100%;
  max-width:none;
}
.porta--esq canvas{ left:0; }
.porta--dir canvas{ right:0; }

/* a luz que passa pela racha, no momento em que abre */
.hero__fresta{
  position:absolute; z-index:6;
  top:0; left:50%; width:2px; height:100%;
  transform:translateX(-1px) scaleY(0);
  background:linear-gradient(to bottom,
    rgba(233,182,92,0), rgba(233,182,92,.55) 30%, rgba(255,236,200,.9) 50%,
    rgba(233,182,92,.55) 70%, rgba(233,182,92,0));
  opacity:0;
}

/* --- estados --- */

.porta-activa .hero{ display:block; }

/* O fundo do hero existe só para não haver flash antes de o vídeo pintar.
   A partir do momento em que abre tem de sair da frente, senão é ele que se
   vê pela abertura em vez da página. */
.hero.a-abrir{ background:transparent; }

.hero.a-abrir .hero__filme,
.hero.a-abrir .hero__poster{ opacity:0; }

.hero.a-abrir .porta{
  visibility:visible;
  transition:transform 1500ms cubic-bezier(.66,0,.2,1);
}
.hero.a-abrir .porta--esq{ transform:translate3d(-100.5%,0,0); }
.hero.a-abrir .porta--dir{ transform:translate3d(100.5%,0,0); }

.hero.a-abrir .hero__veu{
  opacity:0;
  transition:opacity 700ms ease-out;
}

.hero.a-abrir .hero__conteudo{
  opacity:0;
  transform:scale(1.16);
  filter:blur(7px);
  transition:opacity 780ms ease-in, transform 1400ms cubic-bezier(.5,0,.75,0), filter 780ms ease-in;
}

@keyframes fresta{
  0%   { opacity:0; transform:translateX(-1px) scaleY(.15); }
  20%  { opacity:1; transform:translateX(-1px) scaleY(1); }
  100% { opacity:0; transform:translateX(-1px) scaleY(1); }
}
.hero.a-abrir .hero__fresta{ animation:fresta 1050ms ease-out both; }

.porta-activa .hero.terminado{ display:none; }

/* a página, atrás da porta */
.pagina{ transform:none; opacity:1; }
.porta-activa .pagina{
  transform:scale(1.055);
  opacity:.5;
}
.porta-activa.aberto .pagina{
  transform:none;
  opacity:1;
  transition:transform 1700ms cubic-bezier(.16,1,.3,1), opacity 1100ms ease-out;
}

/* --- coreografia de entrada do nome --- */

@keyframes condensar{
  from{ opacity:0; filter:blur(18px); transform:scale(1.055); }
  to  { opacity:1; filter:blur(0);    transform:none; }
}
@keyframes surgir{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

.hero__nome   { animation:condensar 2300ms 1900ms cubic-bezier(.22,1,.36,1) both; }
.hero__tagline{ animation:condensar 1700ms 2500ms cubic-bezier(.22,1,.36,1) both; }
.hero__entrar { animation:surgir    1300ms 4400ms ease-out both; }

/* =========================================================================
   2. CABEÇALHO
   ========================================================================= */

.cabecalho{
  position:sticky; top:0; z-index:50;
  background:rgba(11,31,53,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}

.cabecalho__interior{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  min-height:4.5rem;
}

.marca{
  font-family:var(--display);
  font-optical-sizing:none;
  font-variation-settings:"opsz" 11;
  font-weight:500;
  font-size:1.25rem;
  letter-spacing:.42em;
  margin-left:.42em;
  text-decoration:none;
  color:var(--nuvem);
}

.navegacao{
  display:flex; gap:clamp(1.25rem, 2.6vw, 2.5rem);
  font-size:.8125rem;
  letter-spacing:.09em;
}

.navegacao a{
  text-decoration:none;
  color:var(--nuvem-meia);
  padding-block:.35rem;
  border-bottom:1px solid transparent;
  transition:color 160ms ease, border-color 160ms ease;
}
.navegacao a:hover{ color:var(--nuvem); border-bottom-color:var(--ouro); }

/* em ecrã estreito guardam-se os dois links que interessam */
@media (max-width:720px){
  .navegacao a:nth-child(1),
  .navegacao a:nth-child(3){ display:none; }
}

/* =========================================================================
   3. SOBRE
   ========================================================================= */

.sobre__grelha{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem, 6vw, 5rem);
}

@media (min-width:900px){
  .sobre__grelha{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; }
}

.sobre__abertura{
  font-size:clamp(1.875rem, 4.4vw, 3.35rem);
  line-height:1.16;
  letter-spacing:-.012em;
  max-width:17ch;
}

.sobre__desde{
  margin-top:2.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--linha);
  font-size:.8125rem;
  letter-spacing:.14em;
  color:var(--nuvem-fraca);
}

.sobre__texto{ max-width:var(--medida); color:var(--nuvem-meia); }
.sobre__texto p + p{ margin-top:1.35rem; }

/* a fotografia atravessa a página de bordo a bordo e fecha a secção; é a
   única imagem que não respeita a goteira */
.sobre__imagem{
  position:relative;
  overflow:hidden;
  aspect-ratio:21 / 10;
  margin-top:clamp(4rem, 8vw, 7rem);
  background:var(--noite-funda);
}

/* moldura do parallax: a imagem é 18% mais alta do que a caixa e fica
   centrada, para que o deslocamento de ±4% nunca descubra as bordas */
.sobre__imagem img{
  position:absolute;
  left:0; top:-9%;
  width:100%; height:118%;
  object-fit:cover;
  object-position:center 38%;
  will-change:transform;
}

/* =========================================================================
   4. DESTINOS
   ========================================================================= */

.destinos__cabeca{ margin-bottom:clamp(3rem, 7vw, 5.5rem); }

.titulo{
  font-size:clamp(1.75rem, 3.6vw, 2.85rem);
  max-width:20ch;
}

.subtitulo{
  margin-top:1.1rem;
  max-width:46ch;
  color:var(--nuvem-meia);
}

.destinos__grelha{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(3rem, 7vw, 5rem);
}

/* colunas mais estreitas do que o envelope: com a largura toda, os retratos
   ficavam mais altos do que o ecrã */
@media (min-width:860px){
  .destinos__grelha{
    max-width:1010px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(2rem, 5vw, 4.5rem);
  }
  .destinos__coluna--b{ margin-top:clamp(3.5rem, 9vw, 9.5rem); }
}

.destinos__coluna{
  display:flex;
  flex-direction:column;
  gap:clamp(3rem, 7vw, 5.5rem);
}

.destino{ margin:0; }

.destino img{
  width:100%;
  height:auto;
  background:rgba(232,235,238,.06);
}

.destino figcaption{
  display:flex;
  align-items:baseline;
  gap:1rem;
  margin-top:1.25rem;
}

.destino__nome{
  flex:none;
  font-size:1.375rem;
  letter-spacing:.01em;
}

.destino__nota{
  color:var(--nuvem-meia);
  font-size:.9375rem;
  line-height:1.5;
  max-width:38ch;
}

@media (max-width:520px){
  .destino figcaption{ flex-direction:column; gap:.4rem; }
}

/* =========================================================================
   5. MÉTODO — o único plano levantado do fundo
   ========================================================================= */

.metodo{
  background:var(--painel);
  border-block:1px solid var(--linha);
}

.metodo__lista{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin-top:clamp(3rem, 6vw, 4.5rem);
}

@media (min-width:760px){
  .metodo__lista{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .metodo__item{ padding-inline:clamp(1.25rem, 2.4vw, 2.25rem); }
  .metodo__item:first-child{ padding-left:0; }
  .metodo__item:last-child{ padding-right:0; }
  .metodo__item + .metodo__item{ border-left:1px solid var(--ouro-fosco); }
}

@media (max-width:759px){
  .metodo__item + .metodo__item{
    margin-top:2.5rem; padding-top:2.5rem;
    border-top:1px solid var(--ouro-fosco);
  }
}

.metodo__item svg{
  width:32px; height:32px;
  stroke:var(--ouro);
  stroke-width:1;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  margin-bottom:1.5rem;
}

.metodo__titulo{
  font-size:1.25rem;
  margin-bottom:.7rem;
  line-height:1.25;
}

.metodo__item p{
  color:var(--nuvem-meia);
  font-size:.9375rem;
  line-height:1.6;
}

/* =========================================================================
   6. CONTACTO
   ========================================================================= */

.contacto__grelha{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem, 6vw, 5rem);
}

@media (min-width:900px){
  .contacto__grelha{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); align-items:start; }
}

.formulario{
  display:flex;
  flex-direction:column;
  gap:2rem;
  max-width:34rem;
}

.campo{ display:flex; flex-direction:column; gap:.55rem; }

.campo label{
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--nuvem-fraca);
}

.campo input,
.campo textarea{
  width:100%;
  font:inherit;
  color:var(--nuvem);
  background:transparent;
  border:0;
  border-radius:0;
  border-bottom:1px solid rgba(232,235,238,.28);
  padding:.6rem 0;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}

.campo textarea{ resize:vertical; min-height:7rem; line-height:1.55; }

.campo input:hover,
.campo textarea:hover{ border-bottom-color:rgba(232,235,238,.5); }

.campo input:focus,
.campo textarea:focus{
  border-bottom-color:var(--ouro);
  box-shadow:0 1px 0 0 var(--ouro);
}

.campo input:user-invalid,
.campo textarea:user-invalid{
  border-bottom-color:var(--alarme);
  box-shadow:0 1px 0 0 var(--alarme);
}

/* o preenchimento automático do Chrome força um fundo claro */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--nuvem);
  -webkit-box-shadow:0 0 0 1000px var(--noite) inset;
  caret-color:var(--nuvem);
}

.campo__erro{
  font-size:.8125rem;
  color:var(--alarme);
  min-height:1.2em;
}

.botao{
  align-self:flex-start;
  display:inline-block;
  background:var(--ouro);
  color:var(--noite);
  border:0;
  border-radius:0;
  padding:1.05rem 2.6rem;
  font-family:var(--corrido);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.2em;
  cursor:pointer;
  transition:background-color 180ms ease;
}
.botao:hover{ background:var(--ouro-vivo); }
.botao[disabled]{ opacity:.5; cursor:progress; }

.formulario__estado{
  font-size:.9375rem;
  line-height:1.5;
  color:var(--nuvem-fraca);
}
.formulario__estado[data-tom="ok"]{ color:var(--ouro); }
.formulario__estado[data-tom="erro"]{ color:var(--alarme); }

/* =========================================================================
   7. MORADA
   ========================================================================= */

.morada{ border-top:1px solid var(--linha); }

.morada__grelha{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem, 5vw, 4rem);
  align-items:start;
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width:900px){
  .morada__grelha{ grid-template-columns:minmax(0,.72fr) minmax(0,1fr); }
}

.morada__linhas{
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.morada__bloco h3{
  font-size:.8125rem;
  font-family:var(--corrido);
  font-variation-settings:normal;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--nuvem-fraca);
  margin-bottom:.5rem;
}

.morada__bloco p,
.morada__bloco a{ color:var(--nuvem); text-decoration:none; }

.morada__bloco a{
  border-bottom:1px solid rgba(232,235,238,.3);
  transition:border-color 160ms ease, color 160ms ease;
}
.morada__bloco a:hover{ color:var(--ouro); border-bottom-color:var(--ouro); }

.morada__mapa{
  aspect-ratio:4 / 3;
  background:var(--noite-funda);
  border:1px solid var(--linha);
}

/* o mapa do OpenStreetMap é claro; inverte-se para não abrir um buraco de
   luz no meio da página */
.morada__mapa iframe{
  width:100%; height:100%;
  border:0;
  filter:invert(.92) hue-rotate(180deg) saturate(.5) brightness(1.06) contrast(.92);
}

@media (max-width:640px){ .morada__mapa{ aspect-ratio:1 / 1; } }

/* =========================================================================
   8. RODAPÉ
   ========================================================================= */

.rodape{
  background:var(--noite-funda);
  color:var(--nuvem-meia);
  padding-block:clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size:.875rem;
  position:relative;
}

.rodape__topo{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid var(--ouro-fosco);
}

.rodape .marca{
  font-size:1.5rem;
  letter-spacing:.45em;
  margin-left:.45em;
}

.rodape__redes{
  display:flex;
  gap:1.5rem;
  align-items:center;
}

.rodape__redes a{
  display:grid;
  place-items:center;
  width:2.5rem; height:2.5rem;
  color:var(--nuvem-meia);
  border:1px solid var(--ouro-fosco);
  transition:color 160ms ease, border-color 160ms ease;
}
.rodape__redes a:hover{ color:var(--ouro); border-color:var(--ouro); }
.rodape__redes svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.2; }

.rodape__base{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 2rem;
  padding-top:2rem;
  font-size:.8125rem;
  color:var(--nuvem-fraca);
}

.rodape__base a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(232,235,238,.25); }
.rodape__base a:hover{ color:var(--ouro); border-bottom-color:var(--ouro); }

/* =========================================================================
   9. UTILITÁRIOS E MOVIMENTO REDUZIDO
   ========================================================================= */

.oculto-visual{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

html{ scroll-behavior:smooth; }
:target{ scroll-margin-top:6rem; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  /* a porta nunca chega a existir: entra-se directamente na página */
  .hero{ display:none !important; }
  .pagina{ transform:none !important; opacity:1 !important; }

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}