/* ═══════════════════════════════════════════════════════════════════════
   LOVE MILES TRAVEL · folha de estilo
   Paleta derivada do logótipo: teal do coração, azeitona do contorno.
   Identidade única e assumida (não segue o claro/escuro do sistema):
   é uma marca, tem de ser igual para toda a gente. Cores todas explícitas.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --abyss:#04222A; --abyss-2:#08303B; --petrol:#0A5061;
  --teal:#10788C; --teal-lift:#1B8FA4; --surf:#38B0C2;
  --olive:#7D9C2E; --olive-lift:#98BC3B; --olive-deep:#5E7722;

  --paper:#EEF3F2; --paper-2:#E3EBEA; --card:#FFFFFF;
  --ink:#10262A; --ink-2:#4A6167; --ink-3:#7B9095;
  --line:#D2E0DE; --line-2:#E1EAE8;

  --on-dark:#E8F1F0; --on-dark-2:#A9C2C4; --on-dark-3:#6F8D91;
  --line-dark:rgba(232,241,240,.16);

  --f-disp:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --f-body:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace;

  --wrap:1260px;
  --gut:clamp(1.25rem,4vw,3rem);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --sh-1:0 1px 2px rgba(4,34,42,.05), 0 10px 28px -16px rgba(4,34,42,.28);
  --sh-2:0 2px 6px rgba(4,34,42,.07), 0 26px 60px -28px rgba(4,34,42,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ─────────────────────────── base ─────────────────────────── */

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100% }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:1rem; font-weight:350; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; display:block }
img{ height:auto }
a{ color:inherit }
button,input,select,textarea{ font:inherit; color:inherit }
[hidden]{ display:none !important }

h1,h2,h3{
  font-family:var(--f-disp);
  font-variation-settings:"opsz" 96,"SOFT" 18,"WONK" 1;
  font-weight:420; line-height:1.05; letter-spacing:-.015em;
  text-wrap:balance; margin:0;
}
p{ margin:0 }

:focus-visible{ outline:2.5px solid var(--olive-lift); outline-offset:3px; border-radius:4px }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

.skip-link{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:200; background:var(--olive); color:#fff; padding:.7rem 1.2rem;
  border-radius:0 0 var(--r-s) var(--r-s); font-weight:500; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:0 }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.mono{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.01em; font-variant-numeric:tabular-nums }

.eyebrow{
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--teal); margin:0 0 1.1rem;
}
.eyebrow--light{ color:var(--surf) }
.eyebrow--rule{ display:flex; align-items:center; gap:.85rem }
.eyebrow--rule::before{ content:""; width:44px; height:1.5px; background:var(--olive-lift); flex:0 0 auto }

/* ─────────────────────────── logótipo ─────────────────────────── */

.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto }
.brand__logo{ height:54px; width:auto; transition:filter .3s var(--ease) }
.brand__fb{ display:inline-flex; align-items:center; gap:.6rem }
.brand__mark{ width:38px; height:38px; flex:0 0 auto; overflow:visible }
.brand__heart{ fill:url(#lmHeart) }
.brand__arc{ fill:none; stroke:var(--olive); stroke-width:2.6; stroke-linecap:round }
.brand__route{ fill:none; stroke:var(--olive); stroke-width:1.9; stroke-linecap:round; stroke-dasharray:2.5 3.2 }
.brand__dot{ fill:var(--olive) }
.brand__type{ display:flex; flex-direction:column; line-height:1 }
.brand__word{ font-family:var(--f-body); font-size:1.16rem; font-weight:700; letter-spacing:-.02em; text-transform:uppercase }
.brand__word b{ color:var(--teal); font-weight:700 }
.brand__word i{ color:var(--olive); font-style:normal; font-weight:700 }
.brand__sub{ font-family:var(--f-mono); font-size:.53rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-top:.28rem }

/* Sobre escuro o logótipo passa a branco: o "Travel by Andy" é azul-escuro
   e desaparecia. Volta à cor assim que a barra fica em papel. */
.nav .brand__logo, .brand--foot .brand__logo{ filter:brightness(0) invert(1) opacity(.94) }
.nav.is-stuck .brand__logo{ filter:none }
.nav .brand__word b, .nav .brand__word i, .nav .brand__sub{ color:#fff; transition:color .3s var(--ease) }
.nav .brand__word i{ color:var(--olive-lift) }
.nav .brand__heart{ fill:#fff }
.nav .brand__arc, .nav .brand__route{ stroke:var(--olive-lift) }
.nav .brand__dot{ fill:var(--olive-lift) }

/* ─────────────────────────── navegação ─────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__in{ max-width:var(--wrap); margin-inline:auto; padding:.7rem var(--gut); display:flex; align-items:center; gap:1.4rem }

.nav__links{ margin-inline:auto; display:flex; align-items:center; gap:1.85rem }
.nav__links a{
  text-decoration:none; font-size:.92rem; font-weight:400;
  color:rgba(255,255,255,.9); position:relative; padding:.3rem 0;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--olive-lift); transform:scaleX(0); transform-origin:left;
  transition:transform .26s var(--ease);
}
.nav__links a:hover::after{ transform:scaleX(1) }

.nav__dir{ display:flex; align-items:center; gap:.8rem; flex:0 0 auto }

.lang{ display:flex; border:1px solid rgba(255,255,255,.32); border-radius:999px; padding:2px; background:rgba(4,34,42,.3) }
.lang__b{
  border:0; background:none; cursor:pointer; border-radius:999px;
  font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.08em;
  padding:.34rem .62rem; color:rgba(255,255,255,.7);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.lang__b:hover{ color:#fff }
.lang__b.is-on{ background:var(--olive); color:#fff }

.nav__cta{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--olive); color:#fff; text-decoration:none;
  font-size:.9rem; font-weight:500; padding:.66rem 1.2rem; border-radius:999px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.nav__cta:hover{ background:var(--olive-lift); transform:translateY(-1px) }
.nav__cta--mob{ display:none }

.nav__burger{ display:none; background:none; border:0; padding:.4rem; cursor:pointer }
.nav__burger-box{ display:block; width:26px }
.nav__burger-box i{ display:block; height:2px; border-radius:2px; background:#fff; margin:5px 0; transition:transform .28s var(--ease), opacity .2s var(--ease) }

.nav.is-stuck{
  background:rgba(238,243,242,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 8px 30px -22px rgba(4,34,42,.6);
}
.nav.is-stuck .brand__word b{ color:var(--teal) }
.nav.is-stuck .brand__word i{ color:var(--olive) }
.nav.is-stuck .brand__sub{ color:var(--ink-3) }
.nav.is-stuck .brand__heart{ fill:url(#lmHeart) }
.nav.is-stuck .brand__arc, .nav.is-stuck .brand__route{ stroke:var(--olive) }
.nav.is-stuck .brand__dot{ fill:var(--olive) }
.nav.is-stuck .nav__links a{ color:var(--ink-2) }
.nav.is-stuck .nav__links a:hover{ color:var(--ink) }
.nav.is-stuck .nav__burger-box i{ background:var(--ink) }
.nav.is-stuck .lang{ border-color:var(--line); background:var(--paper-2) }
.nav.is-stuck .lang__b{ color:var(--ink-3) }
.nav.is-stuck .lang__b.is-on{ background:var(--olive); color:#fff }

/* ─────────────────────────── botões ─────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.95rem; font-weight:500; line-height:1;
  padding:.95rem 1.5rem; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn--olive{ background:var(--olive); color:#fff }
.btn--olive:hover{ background:var(--olive-lift) }
.btn--teal{ background:var(--teal); color:#fff }
.btn--teal:hover{ background:var(--teal-lift) }
.btn--quiet{ background:none; color:inherit; opacity:.75; padding-inline:.9rem }
.btn--quiet:hover{ opacity:1 }
.ico-zap{ width:18px; height:18px; fill:currentColor; flex:0 0 auto }

.play{ display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; color:#fff }
.play__c{
  width:46px; height:46px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  border:1.5px solid rgba(255,255,255,.45); background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.play__c svg{ width:18px; height:18px; fill:#fff; margin-left:2px }
.play:hover .play__c{ background:var(--olive); border-color:var(--olive); transform:scale(1.06) }
.play__t{ display:flex; flex-direction:column; gap:.15rem; line-height:1.25 }
.play__t b{ font-size:.95rem; font-weight:500 }
.play__t i{ font-style:normal; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.06em; color:rgba(255,255,255,.62) }

.lnk-out{
  display:inline-flex; align-items:center; gap:.4rem; color:var(--surf); text-decoration:none;
  font-size:.92rem; font-weight:450; border-bottom:1px solid rgba(56,176,194,.45); padding-bottom:2px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lnk-out:hover{ color:#fff; border-color:#fff }

/* ═══════════ o motivo: a rota de voo do logótipo ═══════════
   A linha tracejada está sempre visível; anima o segmento claro, e só
   quando a rota entra no ecrã. */

.rota__base{ fill:none; stroke:var(--olive); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:6 9; opacity:.4; vector-effect:non-scaling-stroke }
.rota__luz{
  fill:none; stroke:var(--olive-lift); stroke-width:2.4; stroke-linecap:round;
  vector-effect:non-scaling-stroke; stroke-dasharray:12 88; stroke-dashoffset:100; opacity:0;
}
.is-flying .rota__luz{ opacity:.95; animation:voar 6s linear infinite }
@keyframes voar{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }

.rota-sep{ background:var(--paper); line-height:0 }
.rota-sep svg{ width:100%; height:clamp(48px,7vw,90px) }

/* O avião. O `g` de fora é posicionado e rodado pelo animateMotion ao longo
   da rota. O de dentro faz o resto: a inclinação lateral de quem vira, e um
   achatamento em Y que dá a leitura ligeiramente isométrica, como se o
   víssemos de cima e de lado ao mesmo tempo. */
.rota__aviao{ opacity:0; transition:opacity .8s var(--ease) }
.is-flying .rota__aviao{ opacity:1 }
.rota__aviao-in{
  --esc:1.25;
  transform-box:fill-box; transform-origin:center;
  animation:inclinar 7s ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(4,34,42,.55));
}
@keyframes inclinar{
  0%   { transform:scale(var(--esc)) rotate(-7deg) scaleY(.82) }
  50%  { transform:scale(var(--esc)) rotate(6deg)  scaleY(.96) }
  100% { transform:scale(var(--esc)) rotate(-7deg) scaleY(.82) }
}
.rota__aviao-corpo{ fill:var(--olive-lift) }
.rota__aviao-luz{ fill:#C6E06A }        /* asa virada à luz, dá volume */

/* As escalas. Ficam apagadas até o avião lá chegar, acendem, e voltam a
   apagar-se quando ele segue viagem. O atraso de cada uma é posto pelo JS,
   a partir do mesmo ciclo de 20 s do avião. */
.rota__pin{ opacity:0; transition:opacity .8s var(--ease) }
.is-flying .rota__pin{ opacity:1 }
.rota__pin-corpo{ fill:var(--olive-lift) }
.rota__pin-olho{ fill:var(--abyss) }
.rota__pin-halo{ fill:var(--olive-lift); opacity:0; transform-box:fill-box; transform-origin:center }

.rota__pin-in{
  transform-box:fill-box; transform-origin:center bottom;
  transform:scale(.48); opacity:.3;
}
.is-flying .rota__pin-in{ animation:chegada 20s linear infinite both }
.is-flying .rota__pin-halo{ animation:halo 20s linear infinite both }

@keyframes chegada{
  0%   { transform:scale(.48); opacity:.3 }
  2%   { transform:scale(1.16); opacity:1 }
  5%   { transform:scale(1);    opacity:1 }
  24%  { transform:scale(1);    opacity:1 }
  32%  { transform:scale(.48);  opacity:.3 }
  100% { transform:scale(.48);  opacity:.3 }
}
@keyframes halo{
  0%   { transform:scale(.35); opacity:0 }
  2%   { transform:scale(.7);  opacity:.4 }
  11%  { transform:scale(2.4); opacity:0 }
  100% { transform:scale(2.4); opacity:0 }
}

/* ─────────────────────────── hero ─────────────────────────── */

.hero{
  position:relative; background:var(--abyss); overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:8.5rem 0 0; min-height:min(1010px,98svh);
}
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 44%;
  animation:heroIn 1.5s var(--ease) both; will-change:transform;
}
@keyframes heroIn{ from{ transform:scale(1.07) } to{ transform:scale(1) } }

.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(4,34,42,.95) 0%, rgba(4,34,42,.8) 36%, rgba(4,34,42,.34) 60%, rgba(4,34,42,.6) 100%),
    linear-gradient(to bottom, rgba(4,34,42,.75) 0%, rgba(4,34,42,0) 26%, rgba(4,34,42,.2) 58%, rgba(4,34,42,.92) 100%);
}
.hero__rota{ position:absolute; inset:0; width:100%; height:100% }
.hero__rota .rota__base{ opacity:.3 }

.hero__in{
  position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut); padding-bottom:clamp(2rem,4vw,3.4rem);
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero__copy{ color:#fff; max-width:37rem; animation:riseIn .8s .1s var(--ease) both }
.hero__title{
  font-size:clamp(2.8rem,5.8vw,4.9rem);
  font-variation-settings:"opsz" 144,"SOFT" 22,"WONK" 1;
  font-weight:380; letter-spacing:-.025em; margin-bottom:1.25rem;
  text-shadow:0 2px 30px rgba(4,34,42,.4);
}
.hero__title em{ font-style:italic; font-weight:400; color:var(--olive-lift) }
.hero__lede{ font-size:clamp(1rem,1.2vw,1.13rem); color:rgba(255,255,255,.87); max-width:33rem; line-height:1.62 }
.hero__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:2rem }
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* faixa inferior do hero */
.hero__baixo{ position:relative; padding-bottom:clamp(1.6rem,3vw,2.6rem) }
.hero__baixo-in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(1.2rem,3vw,2.4rem); align-items:end;
}

.pop__cab{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.9rem }
.pop__t{ font-family:var(--f-body); font-size:1.02rem; font-weight:500; color:#fff; letter-spacing:0 }
.pop__todos{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--olive-lift); text-decoration:none; display:inline-flex; gap:.4rem; align-items:center;
}
.pop__todos:hover{ color:#fff }
.pop__lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem }
.pop__c{
  position:relative; width:100%; aspect-ratio:4/3.4; border:0; padding:0; margin:0; cursor:pointer;
  border-radius:var(--r-m); overflow:hidden; background:var(--abyss-2); isolation:isolate;
  text-align:left; font:inherit; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pop__c:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -20px rgba(0,0,0,.8) }
.pop__c img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s var(--ease) }
.pop__c:hover img{ transform:scale(1.07) }
.pop__c::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(4,34,42,.9) 6%, rgba(4,34,42,.12) 62%) }
.pop__txt{ position:absolute; inset:auto 0 0; padding:.7rem .8rem; display:flex; flex-direction:column; gap:.1rem }
.pop__txt b{ color:#fff; font-size:.92rem; font-weight:500; line-height:1.2 }
.pop__txt i{ font-style:normal; font-size:.6rem; letter-spacing:.08em; color:var(--olive-lift) }

.conf{
  list-style:none; margin:0; padding:1.1rem;
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  background:rgba(6,38,46,.55); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-m);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.conf li{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:.1rem .6rem; align-items:start }
.conf svg{
  grid-row:1 / 3; width:26px; height:26px; fill:none; stroke:var(--olive-lift);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-top:.15rem;
}
.conf .conf__in{ stroke:var(--surf) }
.conf b{ color:#fff; font-size:.85rem; font-weight:500; line-height:1.3 }
.conf span{ color:var(--on-dark-2); font-size:.72rem; line-height:1.42 }

/* ─────────────────────────── questionário ─────────────────────────── */

.quiz{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(1.3rem,2.2vw,1.85rem); box-shadow:var(--sh-2);
}
.quiz--glass{
  background:rgba(6,38,46,.64); border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25);
  color:#fff; animation:riseIn .8s .28s var(--ease) both;
}

.quiz__head{ margin-bottom:1rem }
.quiz__title{ font-size:1.52rem; font-variation-settings:"opsz" 60,"SOFT" 16,"WONK" 1; margin-bottom:.25rem }
.quiz--glass .quiz__title{ color:#fff }
.quiz__hint{ font-size:.84rem; color:var(--ink-2) }
.quiz--glass .quiz__hint{ color:rgba(255,255,255,.66) }

.quiz__barra{
  position:relative; height:3px; border-radius:2px; margin-bottom:1.35rem;
  background:var(--line);
}
.quiz--glass .quiz__barra{ background:rgba(255,255,255,.2) }
.quiz__barra span{ display:block; height:100%; border-radius:2px; background:var(--olive); transition:width .35s var(--ease) }
.quiz__barra i{
  position:absolute; right:0; top:9px; font-style:normal; font-size:.6rem;
  letter-spacing:.1em; color:var(--ink-3);
}
.quiz--glass .quiz__barra i{ color:rgba(255,255,255,.5) }

.quiz__corpo{ animation:passoIn .3s var(--ease) both }
@keyframes passoIn{ from{ opacity:0; transform:translateX(10px) } to{ opacity:1; transform:none } }
.quiz__q{ font-size:1.06rem; font-weight:500; color:var(--ink); margin-bottom:.3rem; line-height:1.35 }
.quiz--glass .quiz__q{ color:#fff }
.quiz__a{ font-size:.82rem; color:var(--ink-3); margin-bottom:1rem; line-height:1.5 }
.quiz--glass .quiz__a{ color:rgba(255,255,255,.55) }

.opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:.55rem }
.opts--linha{ display:flex; flex-wrap:wrap; gap:.45rem }
.opts--orc{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }

.opt{
  display:flex; flex-direction:column; gap:.15rem; text-align:left; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-m); background:var(--paper);
  padding:.72rem .85rem; color:var(--ink-2); font:inherit;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.quiz--glass .opt{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.9) }
.opt b{ font-size:.92rem; font-weight:500; color:var(--ink); line-height:1.25 }
.quiz--glass .opt b{ color:#fff }
.opt i{ font-style:normal; font-size:.72rem; color:var(--ink-3); line-height:1.35 }
.quiz--glass .opt i{ color:rgba(255,255,255,.5) }
.opt:hover{ border-color:var(--olive); transform:translateY(-1px) }
.opt.is-on{ background:var(--olive); border-color:var(--olive) }
.opt.is-on b, .opt.is-on i, .opt.is-on{ color:#fff }

.opt--pil{ display:inline-flex; flex-direction:row; border-radius:999px; padding:.55rem .95rem; font-size:.86rem }
.opt--orc i{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.04em }
.opt--orc.is-on i{ color:rgba(255,255,255,.8) }

.fld{ display:flex; flex-direction:column; gap:.35rem; min-width:0 }
.fld label{ font-size:.76rem; font-weight:450; color:var(--ink-2) }
.quiz--glass .fld label{ color:rgba(255,255,255,.7) }
.fld__opt{ color:var(--ink-3); font-weight:350 }
.quiz--glass .fld__opt{ color:rgba(255,255,255,.45) }
.fld input, .fld select{
  width:100%; padding:.68rem .8rem; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--card); color:var(--ink); font-size:.92rem;
  transition:border-color .18s var(--ease);
}
.quiz--glass .fld input, .quiz--glass .fld select{ background:rgba(4,34,42,.5); border-color:rgba(255,255,255,.26); color:#fff }
.quiz--glass .fld select option{ background:var(--abyss-2); color:#fff }
.quiz--glass .fld input::-webkit-calendar-picker-indicator{ filter:invert(1) opacity(.6) }
.fld input::placeholder{ color:var(--ink-3) }
.quiz--glass .fld input::placeholder{ color:rgba(255,255,255,.42) }
.fld input:focus, .fld select:focus{ border-color:var(--olive); outline:none }
.fld input[aria-invalid="true"]{ border-color:#C2513F }
.fld input:disabled{ opacity:.45 }

.fld-row{ display:grid; gap:.7rem }
.fld-row--2{ grid-template-columns:1fr 1fr }
.noites{ margin:.5rem 0 .85rem; color:var(--olive-deep); font-size:.72rem; min-height:1em }
.quiz--glass .noites{ color:var(--olive-lift) }

.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.78rem; line-height:1.5; color:var(--ink-2); margin-top:.5rem; cursor:pointer }
.quiz--glass .consent{ color:rgba(255,255,255,.68) }
.consent input{ width:17px; height:17px; margin:.16rem 0 0; flex:0 0 auto; accent-color:var(--olive); cursor:pointer }

/* painel de sugestão */
.sug-p{
  margin-top:1.1rem; padding-top:1rem; border-top:1px dashed var(--line);
}
.quiz--glass .sug-p{ border-top-color:rgba(255,255,255,.2) }
.sug-p__t{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-deep); margin-bottom:.5rem }
.quiz--glass .sug-p__t{ color:var(--olive-lift) }
.sug-p__t--fora{ margin-top:.8rem; color:var(--ink-3) }
.quiz--glass .sug-p__t--fora{ color:rgba(255,255,255,.45) }
.sug-p__l{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem }
.sug-p__l li{
  display:grid; grid-template-columns:1fr auto; gap:.15rem .8rem; align-items:baseline;
  padding:.5rem .7rem; border-radius:var(--r-s); background:var(--paper);
}
.quiz--glass .sug-p__l li{ background:rgba(255,255,255,.06) }
.sug-p__l li.is-fora{ opacity:.62 }
.sug-p__l b{ font-size:.88rem; font-weight:500; color:var(--ink) }
.quiz--glass .sug-p__l b{ color:#fff }
.sug-p__l i{ grid-column:1 / -1; font-style:normal; font-size:.72rem; color:var(--ink-2); line-height:1.35 }
.quiz--glass .sug-p__l i{ color:rgba(255,255,255,.6) }
.sug-p__l span{ font-size:.68rem; color:var(--olive-deep); white-space:nowrap }
.quiz--glass .sug-p__l span{ color:var(--olive-lift) }
.sug-p__n{ margin-top:.55rem; font-size:.66rem; color:var(--ink-3); line-height:1.4 }
.quiz--glass .sug-p__n{ color:rgba(255,255,255,.42) }
.sug-p__vazio{ font-size:.78rem; color:var(--ink-3); line-height:1.5 }
.quiz--glass .sug-p__vazio{ color:rgba(255,255,255,.5) }

.quiz__err{
  margin-top:.85rem; font-size:.8rem; color:#C2513F;
  background:rgba(194,81,63,.1); border-left:2.5px solid #C2513F;
  padding:.5rem .7rem; border-radius:0 var(--r-s) var(--r-s) 0;
}
.quiz--glass .quiz__err{ color:#FFB3A3; background:rgba(255,140,120,.14) }

.quiz__nav{ display:flex; align-items:center; gap:.5rem; margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line-2) }
.quiz--glass .quiz__nav{ border-top-color:rgba(255,255,255,.16) }
.quiz__go{ margin-left:auto }

.quiz__done{ text-align:center; padding:1.6rem .5rem .8rem }
.quiz__done-mark{ width:56px; height:56px; margin:0 auto 1.1rem; border-radius:50%; background:var(--olive); display:grid; place-items:center; animation:pop .45s var(--ease) both }
@keyframes pop{ from{ transform:scale(.5); opacity:0 } to{ transform:none; opacity:1 } }
.quiz__done-mark svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round }
.quiz__done h3{ font-size:1.4rem; margin-bottom:.5rem }
.quiz--glass .quiz__done h3{ color:#fff }
.quiz__done p{ font-size:.9rem; color:var(--ink-2) }
.quiz--glass .quiz__done p{ color:rgba(255,255,255,.75) }
.quiz__done-alt{ margin-top:.9rem; font-size:.8rem !important }
.quiz__done-alt a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px }
.quiz--glass .quiz__done-alt a{ color:var(--surf) }

/* ─────────────────────────── números ─────────────────────────── */

.prova{ background:var(--abyss); border-top:1px solid var(--line-dark); padding:2.6rem 0 }
.prova__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem 2rem }
.prova__i{ display:flex; flex-direction:column; gap:.35rem; padding-left:1.1rem; border-left:2px solid rgba(125,156,46,.55) }
.prova__i b{
  font-family:var(--f-disp); font-variation-settings:"opsz" 72,"SOFT" 14,"WONK" 1;
  font-size:clamp(1.9rem,3vw,2.5rem); font-weight:400; color:#fff; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.prova__i b i{ font-style:normal; color:var(--olive-lift); font-size:.65em; margin-left:.12em }
.prova__i span{ font-size:.84rem; color:var(--on-dark-2); line-height:1.45 }

/* ─────────────────────────── secções ─────────────────────────── */

.sec{ padding:clamp(4.5rem,8vw,7.5rem) 0; background:var(--paper) }
.sec--paper2{ background:var(--paper-2) }
.sec--form{ background:var(--paper) }
.sec--dark{ background:var(--abyss); color:var(--on-dark) }
.sec--dark .sec__lede, .sec--dark .sec__aside p{ color:var(--on-dark-2) }

.sec__head{ max-width:47rem; margin:0 auto clamp(2.5rem,4vw,3.8rem); text-align:center }
.sec__head--left{ margin-inline:0; text-align:left }
.sec__head--row{ max-width:none; text-align:left; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem); gap:2rem 3rem; align-items:end }
.sec__title{ font-size:clamp(1.95rem,3.5vw,3rem) }
.sec--dark .sec__title{ color:#fff }
.sec__lede{ margin-top:1.15rem; font-size:clamp(1rem,1.25vw,1.11rem); color:var(--ink-2); line-height:1.65 }
.sec__head--left .sec__lede{ max-width:32rem }
.sec__aside{ display:flex; flex-direction:column; gap:1.3rem; align-items:flex-start }
.sec__aside p{ font-size:.98rem; color:var(--ink-2) }

/* ─────────────────────────── serviços ─────────────────────────── */

.serv{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.6rem) }
.serv__c{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r-m); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.serv__c:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--line) }
.serv__img{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2) }
.serv__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease) }
.serv__c:hover .serv__img img{ transform:scale(1.055) }
.serv__body{ padding:1.35rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.55rem }
.serv__body h3{ font-size:1.3rem; font-variation-settings:"opsz" 48,"SOFT" 16,"WONK" 1; color:var(--teal) }
.serv__body p{ font-size:.93rem; color:var(--ink-2); line-height:1.6 }

/* ─────────────────────────── destinos ─────────────────────────── */

.carr__btns{ display:flex; gap:.55rem }
.carr__b{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:transparent; border:1.5px solid var(--line-dark); color:var(--on-dark);
  font-size:1.05rem; line-height:1; display:grid; place-items:center;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.carr__b:hover{ background:var(--olive); border-color:var(--olive); color:#fff }

.carr{
  margin-top:clamp(2.2rem,4vw,3.2rem); overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab;
}
.carr::-webkit-scrollbar{ display:none }
.carr.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto }
.carr.is-dragging .dest{ pointer-events:none }
.carr__track{ list-style:none; margin:0; display:flex; gap:1.1rem; padding:.25rem max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))) }
.carr__track > li{ flex:0 0 auto; display:flex }

.dest{
  position:relative; width:clamp(240px,27vw,320px); aspect-ratio:3/4;
  border:0; padding:0; margin:0; background:var(--abyss-2);
  border-radius:var(--r-m); overflow:hidden; scroll-snap-align:start; isolation:isolate;
  cursor:pointer; text-align:left; font:inherit; color:inherit;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dest:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(0,0,0,.7) }
.dest img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .7s var(--ease); pointer-events:none }
.dest::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(4,34,42,.93) 0%, rgba(4,34,42,.5) 40%, rgba(4,34,42,.06) 72%) }
.dest:hover img{ transform:scale(1.07) }
.dest__tag{
  position:absolute; top:.9rem; left:.9rem; font-family:var(--f-mono); font-size:.6rem;
  letter-spacing:.13em; text-transform:uppercase; color:#fff;
  background:rgba(4,34,42,.5); border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:.34rem .68rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.dest__foot{
  position:absolute; inset:auto 0 0; padding:1.15rem 1.2rem 1.3rem;
  display:flex; flex-direction:column; gap:.3rem; transition:transform .3s var(--ease);
}
.dest__h{ font-family:var(--f-disp); font-size:1.45rem; font-weight:420; line-height:1.05; color:#fff; font-variation-settings:"opsz" 60,"SOFT" 18,"WONK" 1 }
.dest__m{ color:var(--olive-lift); font-size:.7rem; letter-spacing:.03em }
.dest__mais{
  position:absolute; inset:auto 0 -3rem; padding:0 1.2rem 1.3rem;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.dest:hover .dest__mais, .dest:focus-visible .dest__mais{ opacity:1; transform:translateY(-3.1rem) }
.dest:hover .dest__foot, .dest:focus-visible .dest__foot{ transform:translateY(-1.6rem) }
.carr__note{ margin-top:1.4rem; color:var(--on-dark-3); font-size:.72rem }

/* ─────────────────────────── janela de destino ─────────────────────────── */

.dlg{
  width:min(940px, calc(100vw - 2rem)); max-height:min(88svh,900px);
  padding:0; border:0; border-radius:var(--r-l); background:var(--card); color:var(--ink);
  box-shadow:0 40px 100px -30px rgba(4,34,42,.7); overflow:hidden;
}
.dlg::backdrop{ background:rgba(4,34,42,.72); backdrop-filter:blur(4px) }
/* Com a janela aberta a página por trás fica trancada. O `top` do body é posto
   pelo JS com a posição de scroll, e reposto ao fechar. */
html.sem-scroll{ scroll-behavior:auto; overflow:hidden }
html.sem-scroll body{ position:fixed; left:0; right:0; width:100%; overflow:hidden }
.dlg__in{ overscroll-behavior:contain }
.dlg[open]{ animation:dlgIn .3s var(--ease) both }
@keyframes dlgIn{ from{ opacity:0; transform:translateY(14px) scale(.98) } to{ opacity:1; transform:none } }
.dlg__x{
  position:absolute; top:1rem; right:1rem; z-index:3; width:40px; height:40px; border-radius:50%;
  cursor:pointer; background:rgba(4,34,42,.55); border:1px solid rgba(255,255,255,.3);
  display:grid; place-items:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .2s var(--ease);
}
.dlg__x:hover{ background:var(--olive); border-color:var(--olive) }
.dlg__x svg{ width:17px; height:17px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round }
.dlg__in{ max-height:inherit; overflow-y:auto }
.dlg__capa{ position:relative; aspect-ratio:21/9; background:var(--abyss-2) }
.dlg__capa img{ width:100%; height:100%; object-fit:cover }
.dlg__capa::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(4,34,42,.95) 0%, rgba(4,34,42,.7) 22%, rgba(4,34,42,.12) 62%) }
.dlg__cabeca{ position:absolute; inset:auto 0 0; padding:1.6rem clamp(1.4rem,3vw,2.4rem) }
.dlg__cabeca h2{ font-size:clamp(1.9rem,4vw,2.9rem); color:#fff; font-variation-settings:"opsz" 96,"SOFT" 20,"WONK" 1 }
.dlg__meta{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:.55rem;
  font-family:var(--f-body); font-size:.74rem; font-weight:450;
  letter-spacing:.06em; color:var(--olive-lift); font-variant-numeric:tabular-nums;
}
.dlg__corpo{ padding:clamp(1.5rem,3vw,2.4rem); display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(1.6rem,3vw,2.6rem) }
.dlg__frase{
  font-family:var(--f-disp); font-style:italic; font-size:1.25rem; font-weight:380; line-height:1.45;
  font-variation-settings:"opsz" 60,"SOFT" 30,"WONK" 1; color:var(--teal); margin-bottom:1.1rem;
}
.dlg__texto{ font-size:.98rem; color:var(--ink-2); line-height:1.72 }
.dlg__bloco{ margin-top:1.7rem }
.dlg__bloco h3, .dlg__rot, .dlg__precos h3{
  font-family:var(--f-body); font-size:.72rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .7rem;
}
.dlg__para{ font-size:.95rem; color:var(--ink); line-height:1.6 }
.dlg__cur{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem }
.dlg__cur li{ position:relative; padding-left:1.5rem; font-size:.93rem; color:var(--ink-2); line-height:1.6 }
.dlg__cur li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--olive) }
.dlg__lado{ display:flex; flex-direction:column; gap:1.2rem }
.dlg__precos{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:1.2rem }
.dlg__precos h3{ margin-bottom:.9rem }
.dlg__linha{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--line-2) }
.dlg__linha:last-of-type{ border-bottom:0 }
.dlg__linha span{ font-size:.85rem; color:var(--ink-2) }
.dlg__linha b{ font-family:var(--f-disp); font-size:1.3rem; font-weight:420; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.dlg__linha--alta b{ color:var(--ink-3) }
.dlg__nota{ margin-top:.8rem; font-size:.68rem; color:var(--ink-3); line-height:1.5 }
.dlg__oferta{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:.9rem;
  background:var(--olive); color:#fff; border-radius:999px; padding:.4rem .85rem;
  font-family:var(--f-body); font-size:.7rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
}
.dlg__quando{ font-size:.9rem; color:var(--ink-2); line-height:1.6 }
.dlg .btn{ width:100% }

/* ─────────────────────────── processo ─────────────────────────── */

.proc{ list-style:none; margin:0; padding:0; position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem,2.5vw,2.4rem) }
.proc__rota{ position:absolute; inset:-14px 4% auto; height:60px; width:92%; pointer-events:none }
.proc__s{ display:flex; flex-direction:column; gap:.6rem; padding-top:2.4rem }
.proc__n{ font-size:.72rem; font-weight:500; letter-spacing:.14em; color:var(--olive-deep); display:inline-flex; align-items:center; gap:.6rem }
.proc__n::after{ content:""; width:26px; height:1.5px; background:var(--olive); opacity:.55 }
.proc__s h3{ font-size:1.28rem; color:var(--teal); font-variation-settings:"opsz" 48,"SOFT" 16,"WONK" 1 }
.proc__s p{ font-size:.93rem; color:var(--ink-2); line-height:1.62 }

/* ─────────────────────────── tabela ─────────────────────────── */

.tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:var(--card); box-shadow:var(--sh-1) }
.tbl{ width:100%; min-width:660px; border-collapse:collapse; text-align:left }
.tbl th, .tbl td{ padding:1.05rem 1.3rem; vertical-align:top; border-bottom:1px solid var(--line-2) }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td{ border-bottom:0 }
.tbl thead th{ font-family:var(--f-mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-block:.95rem; background:var(--paper); border-bottom:1px solid var(--line) }
.tbl thead th.tbl__us{ color:#fff; background:var(--teal) }
.tbl tbody th{ font-family:var(--f-body); font-size:.88rem; font-weight:500; color:var(--ink); width:9.5rem }
.tbl td{ font-size:.92rem; color:var(--ink-2); line-height:1.55; width:calc((100% - 9.5rem) / 2) }
.tbl td.tbl__us{ color:var(--ink); background:rgba(16,120,140,.055); border-left:2px solid var(--teal); border-right:2px solid var(--teal) }
.tbl tbody tr:last-child td.tbl__us{ border-bottom:2px solid var(--teal) }
.tbl td.tbl__us b{ color:var(--olive-deep); font-weight:600 }

/* ─────────────────────────── equipa ─────────────────────────── */

.equipa{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,4.5rem); align-items:center }
.equipa__fig{ margin:0 }
.equipa__fig img{ width:100%; border-radius:var(--r-m); box-shadow:var(--sh-2); aspect-ratio:4/3; object-fit:cover }
.equipa__fig figcaption{ margin-top:.7rem; color:var(--ink-3); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase }
.equipa__txt{ display:flex; flex-direction:column; gap:1.05rem; max-width:36rem }
.equipa__txt p{ font-size:1rem; color:var(--ink-2); line-height:1.72 }
.equipa__txt .sec__title{ margin-bottom:.35rem }
.equipa__tiles{ list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.9rem }
.equipa__tiles li{ display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:1rem; align-items:baseline }
.equipa__tiles b{ font-size:.8rem; font-weight:500; color:var(--olive-deep); letter-spacing:.02em }
.equipa__tiles span{ font-size:.92rem; color:var(--ink-2); line-height:1.55 }

/* ─────────────────────────── avaliações ─────────────────────────── */

.voz{ background:var(--abyss); padding:clamp(4rem,7vw,6rem) 0 }
.voz__top{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.5rem 2.5rem; align-items:end; margin-bottom:clamp(2rem,4vw,3rem) }
.voz__score{ display:flex; flex-direction:column; gap:.35rem }
.voz__score b{ font-family:var(--f-disp); font-size:clamp(3rem,6vw,4.4rem); font-weight:400; font-variation-settings:"opsz" 96,"SOFT" 14,"WONK" 1; color:#fff; line-height:1 }
.voz__stars{ color:var(--olive-lift); font-size:1rem; letter-spacing:.26em }
.voz__intro{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem }
.voz__intro .sec__title{ color:#fff }
.voz__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.1rem }
.voz__c{ display:flex; flex-direction:column; gap:1rem; background:rgba(232,241,240,.055); border:1px solid var(--line-dark); border-radius:var(--r-m); padding:1.5rem }
.voz__c p{
  font-family:var(--f-disp); font-style:italic; font-weight:350; font-size:1.02rem; line-height:1.55;
  font-variation-settings:"opsz" 48,"SOFT" 26,"WONK" 1; color:var(--on-dark); flex:1;
}
.voz__falta{
  font-family:var(--f-mono) !important; font-style:normal !important; font-size:.8rem !important;
  line-height:1.65; color:var(--on-dark-3) !important;
  border:1.5px dashed rgba(111,141,145,.5); border-radius:var(--r-s); padding:.9rem 1rem;
}
.voz__quem{ display:flex; flex-direction:column; gap:.15rem; border-top:1px solid var(--line-dark); padding-top:.9rem }
.voz__quem b{ font-family:var(--f-body); font-style:normal; font-size:.9rem; font-weight:500; color:#fff }
.voz__quem span{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em; color:var(--on-dark-3) }
.voz__link{
  margin-top:.55rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--f-body); font-size:.78rem; font-weight:450; text-decoration:none;
  color:var(--surf); border-bottom:1px solid rgba(56,176,194,.38); padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.voz__link:hover{ color:#fff; border-color:#fff }
.voz__link:focus-visible{ outline:2px solid var(--surf); outline-offset:3px; border-radius:2px }

/* ─────────────────────────── perguntas ─────────────────────────── */

.faq{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4.5rem); align-items:start }
.faq .sec__head{ margin-bottom:0; position:sticky; top:110px }
.faq .btn{ margin-top:1.8rem }
.faq__list{ display:flex; flex-direction:column; gap:.6rem }
.qa{ background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-m); overflow:hidden; transition:border-color .22s var(--ease), box-shadow .22s var(--ease) }
.qa[open]{ border-color:var(--line); box-shadow:var(--sh-1) }
.qa summary{ display:flex; align-items:flex-start; gap:1rem; cursor:pointer; padding:1.15rem 1.35rem; list-style:none; font-size:1rem; font-weight:450; color:var(--ink) }
.qa summary::-webkit-details-marker{ display:none }
.qa summary span{ flex:1; min-width:0 }
.qa summary::after{
  content:""; flex:0 0 auto; width:13px; height:13px; margin-top:.35rem; background:currentColor; color:var(--olive);
  clip-path:polygon(45% 0,55% 0,55% 45%,100% 45%,100% 55%,55% 55%,55% 100%,45% 100%,45% 55%,0 55%,0 45%,45% 45%);
  transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:rotate(135deg) }
.qa summary:hover{ color:var(--teal) }
.qa__a{ padding:0 1.35rem 1.35rem }
.qa__a p{ font-size:.93rem; color:var(--ink-2); line-height:1.68; max-width:42rem }

/* ─────────────────────────── faixa CTA ─────────────────────────── */

.cta-band{ position:relative; height:clamp(280px,36vw,420px); display:grid; place-items:center; overflow:hidden; background:var(--abyss) }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cta-band__veil{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(4,34,42,.62), rgba(4,34,42,.5) 55%, rgba(4,34,42,.85)) }
.cta-band__rota{ position:absolute; inset:0; width:100%; height:100% }
.cta-band__t{
  position:relative; text-align:center; color:#fff; font-family:var(--f-disp);
  font-variation-settings:"opsz" 144,"SOFT" 22,"WONK" 1;
  font-size:clamp(1.7rem,4vw,3rem); font-weight:380; line-height:1.12; letter-spacing:-.02em;
  padding-inline:var(--gut); text-shadow:0 2px 30px rgba(4,34,42,.5);
}
.cta-band__t em{ font-style:italic; color:var(--olive-lift) }

/* ─────────────────────────── planear ─────────────────────────── */

.orc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,30rem); gap:clamp(2rem,5vw,4.5rem); align-items:start }
.orc__side{ max-width:34rem }
.orc__side .sec__lede{ margin-bottom:2.2rem }
.orc__facts{ list-style:none; margin:0 0 2.4rem; padding:0; display:flex; flex-direction:column; gap:1rem }
.orc__facts li{ display:flex; align-items:baseline; gap:1rem }
.orc__facts b{ flex:0 0 5.6rem; font-size:.9rem; font-weight:500; color:var(--olive-deep); letter-spacing:.02em }
.orc__facts span{ font-size:.94rem; color:var(--ink-2); line-height:1.55 }
.orc__alt{ border-top:1px solid var(--line); padding-top:1.7rem; display:flex; flex-direction:column; align-items:flex-start; gap:.9rem }
.orc__alt p{ font-size:.94rem; color:var(--ink-2) }
.orc__mail a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px }
.orc__mail a:hover{ color:var(--teal-lift) }

/* ─────────────────────────── rodapé ─────────────────────────── */

.foot{ background:var(--abyss); color:var(--on-dark-2); padding:clamp(3.5rem,6vw,5rem) 0 0 }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:2.5rem 3rem; padding-bottom:3rem }
.brand--foot .brand__word b{ color:#fff }
.brand--foot .brand__word i{ color:var(--olive-lift) }
.brand--foot .brand__sub{ color:var(--on-dark-3) }
.brand--foot .brand__heart{ fill:#fff }
.brand--foot .brand__arc, .brand--foot .brand__route{ stroke:var(--olive-lift) }
.brand--foot .brand__dot{ fill:var(--olive-lift) }
.foot__tag{ margin-top:1.2rem; font-size:.95rem; color:var(--on-dark-2); line-height:1.6 }
.foot__social{ display:flex; gap:.6rem; margin-top:1.5rem }
.foot__social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-dark); display:grid; place-items:center; transition:background .2s var(--ease), border-color .2s var(--ease) }
.foot__social svg{ width:17px; height:17px; fill:var(--on-dark-2); transition:fill .2s var(--ease) }
.foot__social a:hover{ background:var(--olive); border-color:var(--olive) }
.foot__social a:hover svg{ fill:#fff }
.foot__col{ display:flex; flex-direction:column; gap:.55rem; align-items:flex-start }
.foot__col h2{ font-family:var(--f-mono); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:.6rem }
.foot__col a{ font-size:.9rem; color:var(--on-dark-2); text-decoration:none; transition:color .18s var(--ease) }
.foot__col a:hover{ color:var(--surf) }
.foot__addr{ font-size:.86rem; color:var(--on-dark-3); line-height:1.6; margin-top:.5rem }
.foot__equipa{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line-dark); font-size:.82rem; color:var(--on-dark-3); line-height:1.6 }
.foot__equipa b{ color:var(--on-dark-2); font-weight:500 }
.foot__equipa a{ color:var(--surf); text-decoration:underline; text-underline-offset:3px; font-size:inherit }
.foot__bar{ border-top:1px solid var(--line-dark); padding-block:1.4rem; display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:space-between; color:var(--on-dark-3); font-size:.7rem }

/* ─────────────────────────── WhatsApp flutuante ─────────────────────────── */

.zap-float{
  position:fixed; right:clamp(1rem,2.5vw,1.8rem); bottom:clamp(1rem,2.5vw,1.8rem);
  z-index:90; width:54px; height:54px; border-radius:50%; background:#25D366;
  display:grid; place-items:center; box-shadow:0 6px 24px -6px rgba(4,34,42,.5);
  transform:translateY(90px); opacity:0; pointer-events:none;
  transition:transform .35s var(--ease), opacity .35s var(--ease), background .2s var(--ease);
}
.zap-float.is-on{ transform:none; opacity:1; pointer-events:auto }
.zap-float:hover{ background:#1DB954 }
.zap-float svg{ width:27px; height:27px; fill:#fff }

/* ═══════════════════════════ responsivo ═══════════════════════════ */

@media (max-width: 1180px){
  .hero__baixo-in{ grid-template-columns:1fr; gap:1.4rem }
  .conf{ grid-template-columns:repeat(4,1fr) }
  .conf li{ grid-template-columns:1fr; grid-template-rows:auto auto auto; gap:.3rem }
  .conf svg{ grid-row:auto }
}

@media (max-width: 1080px){
  .hero{ min-height:0; padding:7.5rem 0 0 }
  .hero__in{ grid-template-columns:1fr; gap:2.6rem }
  .hero__copy{ max-width:none }
  .quiz--glass{ max-width:34rem }
  .serv{ grid-template-columns:repeat(2,1fr) }
  .proc{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem }
  .proc__rota{ display:none }
  .equipa{ grid-template-columns:1fr; gap:2.2rem }
  .equipa__fig img{ aspect-ratio:16/9 }
  .faq{ grid-template-columns:1fr; gap:2.4rem }
  .faq .sec__head{ position:static }
  .orc{ grid-template-columns:1fr }
  .sec__head--row{ grid-template-columns:1fr }
  .foot__grid{ grid-template-columns:repeat(2,1fr) }
  .dlg__corpo{ grid-template-columns:1fr }
  .voz__top{ grid-template-columns:1fr; align-items:start }
}

@media (max-width: 860px){
  html{ scroll-padding-top:74px }
  .brand__logo{ height:44px }

  /* Barra: logótipo à esquerda, idioma e hambúrguer encostados à direita.
     Antes o hambúrguer também tinha margin-left auto e ficava ao meio. */
  .nav__in{ gap:.7rem }
  .nav__dir{ margin-left:auto; gap:.5rem }
  .nav__dir .nav__cta{ display:none }
  .nav__burger{ display:block; margin-left:0 }
  .nav__cta--mob{ display:inline-flex; margin-top:.8rem; justify-content:center }

  /* O pin fica desproporcionado quando o viewBox do hero é cortado numa
     janela estreita, e ainda por cima cai por cima dos botões. */
  .rota__pin{ display:none }
  .rota__aviao-in{ --esc:1.15 }
  /* Numa janela estreita a rota passa por cima do texto: fica mais discreta,
     e o aviao, que e o que se quer ver, mantem-se cheio. */
  .rota__base{ opacity:.2 }
  .nav__links{
    position:fixed; inset:58px 0 auto; margin:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--abyss); padding:1.2rem var(--gut) 2rem; border-bottom:1px solid var(--line-dark);
    transform:translateY(-130%); transition:transform .34s var(--ease);
    max-height:calc(100svh - 58px); overflow-y:auto;
  }
  .nav__links.is-open{ transform:none }
  .nav__links a{ color:var(--on-dark) !important; padding:.85rem 0; border-bottom:1px solid var(--line-dark); font-size:1rem }
  .nav__links a::after{ display:none }
  .nav__links a.nav__cta--mob{ border-bottom:0; color:#fff !important; padding:.85rem 1.2rem }
  .nav.is-open{ background:var(--abyss); border-bottom-color:transparent }
  .nav.is-open .brand__logo{ filter:brightness(0) invert(1) opacity(.94) }
  .nav.is-open .brand__word b, .nav.is-open .brand__word i{ color:#fff }
  .nav.is-open .brand__word i{ color:var(--olive-lift) }
  .nav.is-open .brand__sub{ color:var(--on-dark-3) }
  .nav.is-open .brand__heart{ fill:#fff }
  .nav.is-open .nav__burger-box i{ background:#fff }
  .nav.is-open .nav__burger-box i:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .nav.is-open .nav__burger-box i:nth-child(2){ opacity:0 }
  .nav.is-open .nav__burger-box i:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

  .pop__lista{ grid-template-columns:repeat(2,1fr) }
  .conf{ grid-template-columns:repeat(2,1fr) }
  .serv{ grid-template-columns:1fr }
  .serv__img{ aspect-ratio:16/9 }
  .equipa__tiles li{ grid-template-columns:1fr; gap:.15rem }
  .dlg__capa{ aspect-ratio:16/9 }

  /* Números em quatro colunas. Empilhados ocupavam meio ecrã de altura.
     A barra da esquerda passa a traço em cima, que é onde há espaço. */
  .prova{ padding:1.9rem 0 }
  .prova__grid{ grid-template-columns:repeat(4,1fr); gap:.9rem .7rem }
  .prova__i{ padding:.7rem 0 0; border-left:0; border-top:2px solid rgba(125,156,46,.55); gap:.25rem }
  .prova__i b{ font-size:1.42rem }
  .prova__i b i{ font-size:.6em; margin-left:.06em }
  .prova__i span{ font-size:.64rem; line-height:1.32 }

  /* Rodapé em duas colunas: a marca e os contactos ocupam a linha toda,
     as duas listas de links ficam lado a lado. Corta metade do comprimento. */
  .foot__grid{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem }
  .foot__brand{ grid-column:1 / -1 }
  .foot__col:last-child{ grid-column:1 / -1 }
  .brand--foot .brand__logo{ height:72px }
  .brand--foot .brand__mark{ width:52px; height:52px }
  .brand--foot .brand__word{ font-size:1.42rem }
  .brand--foot .brand__sub{ font-size:.6rem; letter-spacing:.2em }

  /* ─── a tabela deixa de ser tabela ───
     Empilhar em cartões é a única forma de isto se ler num telemóvel. O
     rótulo de cada célula vem do atributo data-col, que o JS preenche a
     partir do cabeçalho, para acompanhar o idioma. */
  .tbl-wrap{ overflow:visible; border:0; background:none; box-shadow:none; border-radius:0 }
  .tbl{ min-width:0; width:100% }
  .tbl thead{ display:none }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td{ display:block; width:auto }
  .tbl tbody tr{
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
    margin-bottom:.85rem; overflow:hidden;
  }
  .tbl tbody tr:last-child{ margin-bottom:0 }
  .tbl tbody th{
    width:auto; font-family:var(--f-disp); font-size:1.15rem; font-weight:420;
    font-variation-settings:"opsz" 40,"SOFT" 16,"WONK" 1;
    color:var(--teal); padding:1rem 1.15rem .2rem; border-bottom:0;
  }
  .tbl tbody td{
    width:auto; padding:.75rem 1.15rem 1rem; border-bottom:0;
    border-left:0 !important; border-right:0 !important;
  }
  .tbl tbody td::before{
    content:attr(data-col); display:block; margin-bottom:.28rem;
    font-family:var(--f-mono); font-size:.6rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  }
  .tbl tbody td.tbl__us{
    background:rgba(16,120,140,.07); border-top:1px solid var(--line-2) !important;
    border-bottom:0 !important; color:var(--ink);
  }
  .tbl tbody td.tbl__us::before{ color:var(--teal) }
  .tbl tbody tr:last-child td.tbl__us{ border-bottom:0 !important }
}

/* Telemóvel: o hero tinha demasiada altura antes do questionário. Aperta-se
   tudo o que está por cima dele para o cartão aparecer sem tanto scroll. */
@media (max-width: 700px){
  /* ─── a fotografia do hero ───
     Em ecrã estreito e alto, o `cover` cortava a imagem a 12% da largura e
     ficava um borrão sem assunto. Passa a uma faixa no topo, quase inteira,
     e o resto do hero fica no petróleo da marca com a rota por cima. */
  .hero__bg{
    inset:0 0 auto; height:auto; aspect-ratio:3/2;
    object-position:center 42%;
  }
  /* O véu tem de ter exactamente a altura da faixa, senão fica uma costura
     clara na dobra entre a fotografia e o fundo. */
  .hero__veil{
    inset:0 0 auto; height:auto; aspect-ratio:3/2;
    background:linear-gradient(to bottom,
      rgba(4,34,42,.66) 0,
      rgba(4,34,42,.32) 24%,
      rgba(4,34,42,.72) 60%,
      rgba(4,34,42,.97) 92%,
      var(--abyss) 100%);
  }
  .hero{ background:var(--abyss); padding-top:calc(66.7vw + 1.6rem) }
  .hero__in{ padding-top:0 }
  .hero__bg{ animation:none }
  .hero__in{ gap:1.6rem; padding-bottom:1.6rem }
  .hero .eyebrow{ margin-bottom:.7rem; font-size:.62rem; letter-spacing:.14em }
  .eyebrow--rule::before{ width:26px }
  .hero__title{ margin-bottom:.85rem }
  .hero__lede{ font-size:.95rem; line-height:1.55 }
  .hero__acts{ margin-top:1.3rem; gap:.9rem }
  .play__c{ width:38px; height:38px }
  .play__t b{ font-size:.88rem }
  .play__t i{ font-size:.58rem }

  .quiz{ padding:1.1rem }
  .quiz__head{ margin-bottom:.7rem }
  .quiz__title{ font-size:1.3rem }
  .quiz__hint{ font-size:.78rem }
  .quiz__barra{ margin-bottom:1rem }
  .quiz__q{ font-size:.98rem }
  .quiz__a{ font-size:.76rem; margin-bottom:.8rem }
  .opt{ padding:.6rem .75rem }
  .opt b{ font-size:.88rem }
  .opt i{ font-size:.68rem }
  .quiz__nav{ margin-top:1rem; padding-top:.9rem }
  .quiz__nav .btn{ padding:.8rem 1.2rem; font-size:.9rem }
  .sug-p{ margin-top:.9rem; padding-top:.8rem }
}

@media (max-width: 560px){
  .hero__title{ font-size:clamp(2.2rem,10.5vw,3rem) }
  .hero__acts .btn{ width:100% }
  .opts{ grid-template-columns:1fr }
  .opts--orc{ grid-template-columns:1fr 1fr }
  .proc{ grid-template-columns:1fr; row-gap:1.8rem }
  .proc__s{ padding-top:0 }
  .prova__grid{ gap:.8rem .55rem }
  .prova__i b{ font-size:1.26rem }
  .prova__i span{ font-size:.6rem }
  .dest{ width:78vw }
  .cta-band{ height:clamp(230px,54vw,320px) }
  .dlg{ width:100vw; max-height:100svh; height:100svh; border-radius:0 }
}

/* ═══════════════════════════ movimento reduzido ═══════════════════════════ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .hero__bg{ animation:none }
  .is-flying .rota__luz{ animation:none; opacity:.7; stroke-dashoffset:50 }
  /* Sem animação as escalas ficariam apagadas para sempre. Ficam acesas. */
  .rota__pin-in, .is-flying .rota__pin-in{ transform:none; opacity:1 }
  .rota__pin-halo, .is-flying .rota__pin-halo{ opacity:.16; transform:scale(1) }
}

/* ═══════════════════════════ impressão ═══════════════════════════ */

@media print{
  .nav, .zap-float, .quiz, .carr__btns, .rota-sep, .dlg{ display:none !important }
  body{ background:#fff; color:#000 }
  .sec, .sec--dark, .voz, .foot, .prova, .hero{ background:#fff !important; color:#000 !important }
}

/* ═══════════ alvos de toque no telemóvel ═══════════
   Num ecrã táctil o dedo acerta num alvo de 44×44 px; abaixo disso falha e a
   pessoa carrega duas vezes. Vários controlos aqui são pequenos de propósito,
   por desenho, por isso não os engordamos: estendemos a área sensível com um
   ::after invisível, centrado, que não mexe no layout nem no aspecto. */
@media (hover:none) and (pointer:coarse){
  .lang__b, .nav__burger, .pop__todos, .play, .lnk-out,
  .quiz__go, .car__b, .foot a, .foot__cols a,
  footer a, .fbar a, .rodape a{
    position:relative;
  }
  .lang__b::after, .nav__burger::after, .pop__todos::after, .play::after,
  .lnk-out::after, .quiz__go::after, .car__b::after,
  .foot a::after, .foot__cols a::after, footer a::after,
  .fbar a::after, .rodape a::after{
    content:""; position:absolute; left:50%; top:50%;
    transform:translate(-50%,-50%);
    width:max(100%, 44px); height:max(100%, 44px);
  }
  /* O burger é o alvo mais usado da página: esse cresce mesmo. */
  .nav__burger{ padding:.65rem; }
}

/* ═══════════ assinatura The APE ═══════════
   O mesmo selo que usamos nos outros projectos, com a liana a balançar ao
   passar o rato e as letras a saltar uma a uma. Discreto parado, vivo ao
   toque: é uma assinatura, não um anúncio. */

.selva{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 9px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(232,241,240,.14); color:rgba(232,241,240,.72);
  font-size:.78rem; line-height:1;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.selva:hover{ background:rgba(232,241,240,.06); border-color:rgba(232,241,240,.3); color:#fff }
.selva:focus-visible{ outline:2px solid var(--olive-lift); outline-offset:3px }

.selva .liana{ width:22px; height:26px; transform-origin:50% 0; color:var(--olive-lift); flex:none }
.selva:hover .liana{ animation:liana 1.1s ease-in-out infinite alternate }
@keyframes liana{ from{ transform:rotate(-14deg) } to{ transform:rotate(14deg) } }

.selva b{ display:inline-flex; font-weight:700; letter-spacing:.06em; color:#fff }
.selva b i{ font-style:normal; display:inline-block }
.selva:hover b i{ animation:apeSalta .5s ease-in-out both; animation-delay:calc(var(--i) * 45ms) }
@keyframes apeSalta{ 0%,100%{ transform:translateY(0) } 40%{ transform:translateY(-4px) } }

@media (prefers-reduced-motion:reduce){
  .selva:hover .liana, .selva:hover b i{ animation:none }
}