/* ==========================================================================
   Solnovo · landing page (versão editorial, outubro 2026)
   Marca: verde-azulado escuro + creme, uma cor por continente, PP Formula.
   Composição: margem a margem, bandas de cor chapada, arestas retas,
   um título gigante encaixado na largura e palavras enormes em letra fina
   a deslizar atrás dos títulos. Princípios tirados de houseofhoney.com,
   aplicados à identidade da Solnovo (nada copiado: letras, cores e fotos são da marca).
   ========================================================================== */

/* PP Formula Condensed Black (letra da marca, licença web do cliente). Só a Black: nada de Light/Extralight (decisão do cliente).
   Nunca substituir por outra letra web. */
@font-face { font-family: "PP Formula Condensed"; src: url("fonts/PPFormula-CondensedBlack.woff2") format("woff2"); font-weight: 900; font-display: block; }

:root {
  --bg: #233034;
  --bg-2: #2b3b40;
  --bg-3: #182124;
  --cream: #fdfbeb;
  --cream-2: rgba(253, 251, 235, 0.78);
  --cream-3: rgba(253, 251, 235, 0.68);
  --line: rgba(253, 251, 235, 0.16);
  --line-2: rgba(253, 251, 235, 0.34);
  --ink: #1a2427;
  --ink-0: #10181a;

  --europa: #8c78ff;
  --asia: #f73765;
  --oceania: #5aa6cc;
  --america: #60cc9b;
  --africa: #c7a98a;
  --wa: #25d366;
  --c: var(--cream);

  --f-display: "PP Formula Condensed", Impact, "Arial Narrow", sans-serif;
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Estrutura: margem da página proporcional ao ecrã e coluna de conteúdo com largura máxima.
     As faixas de cor e as fotos de fundo continuam de ponta a ponta; o conteúdo fica alinhado nas margens. */
  --gut: clamp(1rem, calc(4vw * var(--k)), 3.5rem);   /* margem da página: 16 px no telemóvel, até 56 no computador */
  --max: 84rem;                                        /* largura máxima do conteúdo */
  --edge: max(var(--gut), calc((100vw - var(--max)) / 2));   /* margem real de elementos de ponta a ponta (carris, cabeçalho), alinhada com a coluna */
  --bar-pad: clamp(0.75rem, calc(1vw * var(--k)), 1rem);    /* folga do cabeçalho em cima e em baixo */
  --gap: clamp(0.5rem, calc(1.2vw * var(--k)), 1.5rem);  /* intervalo entre imagens */
  --pad: var(--gut);
  /* Grelha de espaçamento (em rem, a 16 px): micro em múltiplos de 4 (0.25rem), o resto em múltiplos de 8 (0.5rem).
     No computador a raiz passa a 90%, por isso a grelha encolhe toda por igual e as proporções mantêm-se.
     Exceções documentadas: folgas em em da PP Formula (acentos), casas de ícone (o padding define o tamanho do desenho)
     e correções óticas de ícones, assinaladas onde estão. */
  --ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Escala geral do site. Telemóvel e tablet: 1 (tamanhos de leitura e de toque intactos). Computador: 0.9 (ver @media a seguir).
     Tudo o que está em rem acompanha a letra da raiz; o que está em vw multiplica por --k. */
  --k: 1;

  /* tema por omissão: banda escura */
  --ground: var(--bg);
  --fg: var(--cream);
  --fg-2: var(--cream-2);
  --fg-3: var(--cream-3);
  --ln: var(--line);
  --ln-2: var(--line-2);
  --card: var(--bg-2);
  --btn-bg: var(--cream);
  --btn-fg: var(--ink);
}

@media (min-width: 901px) {
  :root { --k: 0.9; }
  html { font-size: 90%; }
}

/* ---------- bandas (temas) ---------- */
.t-dark, .t-deep, .t-cream, .t-color, .t-luz { background: var(--ground); color: var(--fg); }
/* rodapé claro, como na versão iOS: creme acinzentado, cartões brancos */
.t-luz { --ground: #f2f1ec; --fg: var(--ink-0); --fg-2: rgba(16, 24, 26, 0.74); --fg-3: rgba(16, 24, 26, 0.64); --ln: rgba(16, 24, 26, 0.1); --ln-2: rgba(16, 24, 26, 0.18); --card: #ffffff; --btn-bg: var(--ink); --btn-fg: var(--cream); }
.t-dark { --ground: var(--bg); --fg: var(--cream); --fg-2: var(--cream-2); --fg-3: var(--cream-3); --ln: var(--line); --ln-2: var(--line-2); --card: var(--bg-2); --btn-bg: var(--cream); --btn-fg: var(--ink); }
.t-deep { --ground: var(--bg-3); --fg: var(--cream); --fg-2: var(--cream-2); --fg-3: var(--cream-3); --ln: var(--line); --ln-2: var(--line-2); --card: var(--bg); --btn-bg: var(--cream); --btn-fg: var(--ink); }
.t-cream { --ground: var(--cream); --fg: var(--ink); --fg-2: rgba(26, 36, 39, 0.84); --fg-3: rgba(26, 36, 39, 0.72); --ln: rgba(26, 36, 39, 0.16); --ln-2: rgba(26, 36, 39, 0.36); --card: #f1eed9; --btn-bg: var(--ink); --btn-fg: var(--cream); }
.t-color { --ground: var(--c); --fg: var(--ink-0); --fg-2: var(--ink-0); --fg-3: var(--ink-0); --ln: rgba(16, 24, 26, 0.24); --ln-2: rgba(16, 24, 26, 0.5); --card: rgba(255, 255, 244, 0.5); --btn-bg: var(--ink-0); --btn-fg: var(--cream); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
/* Lenis (scroll suave com rato e trackpad, só ativo em ponteiro fino e sem movimento reduzido) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  hyphens: manual;
  overflow-wrap: normal;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: var(--asia); color: var(--ink-0); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3, .h2, .q-title, .wz-q { text-wrap: balance; }
p, li, dd, small, summary span { text-wrap: pretty; }

.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { position: relative; width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.num { font-variant-numeric: tabular-nums; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
[hidden] { display: none !important; }
.sol-mark {
  display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor;
  -webkit-mask: url("../img/simbolo-creme.png") center / contain no-repeat;
  mask: url("../img/simbolo-creme.png") center / contain no-repeat;
}

/* ---------- tipografia ---------- */
.h2, .mega, .state-txt, .kicker, .ex-title, .q-title, .wz-q, .quick-title, .pass-route b, .ticket-route strong, .stop-n, .pass-price strong, .ex-name, .idea h3, .idea-cta b, .pass-cta b, .q-card b, .month, .stepper input, .drawer nav a, .mq-row {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  font-synthesis: none;
}
.h2 { font-size: clamp(2.5rem, calc(5.6vw * var(--k)), 5.5rem); line-height: 1; }
.lead { font-size: clamp(1.02rem, calc(1.25vw * var(--k)), 1.2rem); color: var(--fg-2); max-width: 46ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.eyebrow .sol-mark { font-size: 1.15em; }
/* cabeçalho de secção ao centro; .left alinha à esquerda (planeador, FAQ, contacto, ofertas) */
.head { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: clamp(0.75rem, calc(1.2vw * var(--k)), 1rem); margin: 0 auto clamp(1.5rem, calc(3.5vw * var(--k)), 3rem); }
.head.left { justify-items: start; text-align: left; margin-inline: 0; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }

/* entradas */
.rv { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.rv.pre { opacity: 0; transform: translateY(2.125rem); }
/* folga em cima para a máscara da animação não cortar os acentos altos da PP Formula (É, Ê, Ó) */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.3em 0.02em 0.08em; margin: -0.3em -0.02em -0.08em; }
.split .w > span { display: inline-block; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 34ms); }
.split.pre .w > span { transform: translateY(108%); }

/* ---------- palavras gigantes ---------- */
.mq { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mq-row { display: flex; gap: 0.2em; width: max-content; font-size: clamp(4rem, calc(10vw * var(--k)), 10rem); line-height: 0.92; padding-top: 0.14em; white-space: nowrap; will-change: transform; }
.mq-row span { flex: none; }

/* ---------- botões ---------- */
/* Retângulo com a seta numa casa própria: nada de pílulas */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  min-height: 3.25rem; padding: 0 1rem; border: 1.5px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 0.98rem; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn:has(> .ic:not(.lead)) { padding-right: 0; }
/* nas casas de ícone o padding define o tamanho do desenho (geometria, fora da grelha de espaçamento) */
.btn > .ic:not(.lead) { box-sizing: border-box; width: 3.25rem; height: 3.25rem; padding: 1.0625rem; margin: -1.5px -1.5px -1.5px 0; background: color-mix(in srgb, var(--btn-fg) 14%, transparent); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.btn:hover > .ic:not(.lead) { background: var(--asia); color: var(--ink-0); }
.btn-line { background: transparent; color: var(--fg); border-color: var(--ln-2); }
.btn-line > .ic:not(.lead) { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.btn-line:hover { border-color: var(--fg); }
.round { width: 3rem; height: 3rem; border: 1.5px solid var(--ln-2); background: transparent; color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease); }
.round:hover { background: var(--fg); color: var(--ground); border-color: var(--fg); }
/* ligação em linha: filete por cima, texto à esquerda, seta numa casa à direita */
.row-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3rem; padding: 0.75rem 0 0; border: 0; border-top: 1px solid var(--ln-2); background: none; color: var(--fg); font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: left; cursor: pointer; }
.row-link .ic { box-sizing: border-box; width: 2rem; height: 2rem; padding: 0.5rem; background: var(--fg); color: var(--ground); transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease); }
.row-link:hover .ic, a:hover > .row-link .ic { background: var(--asia); color: var(--ink-0); transform: translateX(0.25rem); }

/* ---------- abertura ---------- */
/* Abertura suave: o logótipo aparece a desembaciar, a cortina creme dissolve-se (o logótipo cresce e desfoca)
   e o topo entra ao mesmo tempo, num só movimento. Só na primeira visita da sessão. */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--cream); animation: introSai 1.1s cubic-bezier(0.45, 0, 0.25, 1) 1s forwards; }
.intro img { width: min(calc(46vw * var(--k)), 16.25rem); height: auto; animation: introLogo 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both, introLogoSai 1.1s cubic-bezier(0.45, 0, 0.25, 1) 1s forwards; }
.sem-intro .intro { display: none; }
@keyframes introSai { to { opacity: 0; visibility: hidden; } }
@keyframes introLogo { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); filter: blur(0.375rem); } }
@keyframes introLogoSai { to { opacity: 0; transform: scale(1.04); filter: blur(0.25rem); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.sem-intro) .hero-bg { animation: topoFoto 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.9s backwards; }
  html:not(.sem-intro) .hero-type, html:not(.sem-intro) .hero-meta { animation: topoEntra 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1s backwards; }
  html:not(.sem-intro) .bar { animation: topoEntra 1s cubic-bezier(0.22, 1, 0.36, 1) 1.2s backwards; }
}
@keyframes topoFoto { from { transform: scale(1.06); } }
@keyframes topoEntra { from { opacity: 0; transform: translateY(1.25rem); } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- beta ---------- */
html.is-beta { --beta-h: 2rem; }
.beta-bar { position: relative; z-index: 70; padding: 0.5rem var(--gut); line-height: 1rem; background: #f5d76e; color: #3a2c00; font-size: 0.8rem; text-align: center; }

/* ---------- cabeçalho ---------- */
/* Sem barra: logótipo e ligações em pequenas casas retas, coladas ao canto */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; pointer-events: none; }
.is-beta .header { top: var(--beta-h); }
.is-beta.scrolled .header { top: 0; }
.bar { display: flex; align-items: stretch; gap: 0.5rem; padding: var(--bar-pad) var(--edge); }
.bar > * { pointer-events: auto; }
.brand { display: grid; place-items: center; height: 2.5rem; }
/* logótipo pintado com a cor do texto (máscara do PNG): creme sobre fundos escuros, escuro sobre o creme */
.logo { display: block; aspect-ratio: 1400 / 317; background: currentColor; -webkit-mask: url("../img/logo-creme.png") center / contain no-repeat; mask: url("../img/logo-creme.png") center / contain no-repeat; }
.nav { display: flex; align-items: stretch; height: 2.5rem; padding: 0 0.5rem; background: var(--cream); color: var(--ink); box-shadow: 0 0 0 1px rgba(26, 36, 39, 0.1); }
.nav a { position: relative; display: grid; place-items: center; padding: 0 0.5rem; font-size: 0.86rem; font-weight: 500; transition: color 0.3s; }
.nav a::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.bar-cta { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; height: 2.5rem; padding: 0 0 0 1rem; background: var(--cream); color: var(--ink); font-size: 0.86rem; font-weight: 600; box-shadow: 0 0 0 1px rgba(26, 36, 39, 0.1); }
.bar-cta .ic { box-sizing: border-box; width: 2.5rem; height: 2.5rem; padding: 0.75rem; background: var(--ink); color: var(--cream); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.bar-cta:hover .ic { background: var(--asia); color: var(--ink-0); }
.menu-btn { display: none; position: relative; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 0; background: var(--ink); box-shadow: 0 0 0 1px rgba(253, 251, 235, 0.2); cursor: pointer; }
.menu-btn span { position: absolute; left: 0.75rem; right: 0.75rem; height: 2px; background: var(--cream); transition: transform 0.4s var(--ease); }
.menu-btn span:first-child { top: 1.0625rem; } /* dois traços de 2 px centrados na casa de 44 px */
.menu-btn span:last-child { top: 1.5625rem; }
.menu-open .menu-btn span:first-child { transform: translateY(0.25rem) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-0.25rem) rotate(-45deg); }
.drawer {
  position: fixed; inset: 0; z-index: -1; pointer-events: auto;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 7rem var(--gut) 2rem;
  background: var(--cream); color: var(--ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  visibility: hidden;
}
.menu-open .drawer { clip-path: inset(0 0 0 0); visibility: visible; }
.drawer nav { display: grid; }
.drawer nav a { display: flex; align-items: baseline; gap: 1rem; padding: 0.25rem 0; border-top: 1px solid rgba(26, 36, 39, 0.16); font-size: clamp(3rem, calc(15vw * var(--k)), 5.4rem); line-height: 1; opacity: 0; transform: translateY(1.625rem); transition: 0.6s var(--ease-out); transition-delay: calc(0.15s + var(--i) * 55ms); }
.drawer nav a small { min-width: 2.2ch; font-family: var(--f-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(26, 36, 39, 0.72); }
.drawer nav a[aria-current] small { color: #c41c4a; } /* magenta escurecido: contraste 4,5:1 sobre o creme */
.menu-open .drawer nav a { opacity: 1; transform: none; }
.drawer-foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 600; }
.drawer-foot a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80; pointer-events: none; }
/* enche cor a cor: as cinco cores têm lugar fixo ao longo da largura e a barra vai-as destapando com o scroll */
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--europa) 0 20%, var(--asia) 20% 40%, var(--oceania) 40% 60%, var(--america) 60% 80%, var(--africa) 80% 100%); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }

/* ---------- topo ---------- */
/* Título encaixado na largura, sobre cor chapada; a foto vem por baixo, de margem a margem */
.hero { position: relative; display: flex; flex-direction: column; min-height: max(100svh, 40rem); padding-top: calc(2 * var(--bar-pad) + 2.75rem); overflow: hidden; } /* começa logo abaixo do cabeçalho */
.hero-type { position: relative; z-index: 1; padding: clamp(0.5rem, calc(2vw * var(--k)), 2rem) var(--edge-topo, var(--edge)) 0; }
/* padding em cima: com entrelinha apertada, o topo das letras sobe acima da caixa da linha */
.mega { display: block; font-size: 6.25rem; line-height: 0.9; padding-top: 0.15em; white-space: nowrap; }
.mega-pre { display: inline-block; color: var(--cream); }
/* sem recorte (overflow visível): os acentos altos cabem na folga entre linhas */
.rot { position: relative; display: block; height: 0.92em; margin-top: 0.12em; } /* 0.92em: cabe a cauda do Q e a cedilha */
.rot-word { position: absolute; left: 0; top: 0; line-height: 0.9; white-space: nowrap; color: var(--c); opacity: 0; transform: translateY(0.16em); transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease), color 0.8s; }
.rot-word.on { opacity: 1; transform: none; }
.rot-word.out { opacity: 0; transform: translateY(-0.16em); }
.hero-cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; padding: clamp(0.75rem, calc(1.4vw * var(--k)), 1rem) 0 clamp(0.75rem, calc(1.4vw * var(--k)), 1rem); }
.kicker { max-width: 32ch; font-size: clamp(1.125rem, calc(1.5vw * var(--k)), 1.5rem); line-height: 1.04; color: var(--cream); text-shadow: 0 1px 1.125rem rgba(16, 24, 26, 0.7); }
/* sobre a foto, o botão secundário leva fundo escuro translúcido para se ler sempre */
.hero .btn-line { background: rgba(16, 24, 26, 0.6); border-color: rgba(253, 251, 235, 0.42); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
/* a foto ocupa o topo inteiro; o véu verde-azulado cobre o título e vai abrindo para a imagem em baixo */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg-3); border-bottom: 3px solid var(--c); transition: border-color 0.8s; }
.hero-slides { position: absolute; inset: -16% 0 0 0; will-change: transform; }
.hero-slide { position: absolute; inset: 0; background: var(--foto) center / cover no-repeat; opacity: 0; transform: scale(1.1); transition: opacity 1.2s var(--ease), transform 7s linear; }
.hero-slide.on { opacity: 1; transform: scale(1); }
@media (max-width: 640px) { .hero-slide { background-image: var(--foto-m, var(--foto)); } } /* no telemóvel usa a versão vertical */
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 48, 52, 0.94) 0%, rgba(35, 48, 52, 0.82) 32%, rgba(35, 48, 52, 0.52) 58%, rgba(35, 48, 52, 0.12) 78%, rgba(16, 24, 26, 0.2) 88%, rgba(16, 24, 26, 0.72) 100%); pointer-events: none; }
.hero-meta { position: absolute; z-index: 2; left: var(--edge); right: var(--edge); bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 0.9rem; color: var(--cream); }
.hero-count b { font-weight: 700; }
.hero-where, .hero-season { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-where .ic, .hero-season .ic { color: var(--c); transition: color 0.8s; }
.hero-dots { display: flex; gap: 0.5rem; margin-left: auto; }
.hero-dots button { width: 2.5rem; height: 1.75rem; border: 0; background: none; padding: 0; cursor: pointer; display: grid; align-items: center; }
.hero-dots i { display: block; height: 3px; background: rgba(253, 251, 235, 0.4); overflow: hidden; position: relative; }
.hero-dots i::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; }
.hero-dots .on i::after { animation: dotFill 4.2s linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }

/* ---------- declaração + nomes gigantes + confiança ---------- */
.state { position: relative; overflow: hidden; padding-top: clamp(4rem, calc(6vw * var(--k)), 6rem); }
.state-in { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: clamp(1rem, calc(2vw * var(--k)), 2rem); padding: 0 var(--gut); }
.state-txt { max-width: 22em; font-size: clamp(1.5rem, calc(2.8vw * var(--k)), 2.75rem); line-height: 1.04; }
.mq-names { position: relative; margin: clamp(1.5rem, calc(3vw * var(--k)), 3rem) 0 clamp(1rem, calc(2vw * var(--k)), 2rem); }
/* cada nome na cor do seu continente */
.mq-names .mq-row { font-size: clamp(3.5rem, calc(8vw * var(--k)), 8rem); line-height: 0.9; }
.mq-names .mq-row span { color: var(--c); }
.trust-list { position: relative; z-index: 1; display: grid; padding-inline: var(--edge); grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ln-2); }
.trust-list li { display: flex; align-items: flex-start; justify-content: center; gap: 1rem; padding: clamp(1rem, calc(1.8vw * var(--k)), 1.5rem) clamp(0.75rem, calc(1.6vw * var(--k)), 1.5rem) clamp(1rem, calc(2.4vw * var(--k)), 2rem); }
.trust-list li + li { border-left: 1px solid var(--ln); }
.trust-ic { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--ink); color: var(--cream); }
.trust-ic .ic { width: 1.25rem; height: 1.25rem; }
.trust-list b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.trust-list small { display: block; margin-top: 0.25rem; font-size: 0.86rem; color: var(--fg-2); line-height: 1.35; }

/* ---------- secções base ---------- */
.sec { position: relative; padding: clamp(4rem, calc(7vw * var(--k)), 7rem) 0; overflow: hidden; }
.small-note { margin-top: 1rem; font-size: 0.85rem; color: var(--fg-3); }

/* ---------- ofertas: cartões de embarque ---------- */
.offers .head-row { align-items: flex-end; }
.rail-ctrl { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; margin-bottom: clamp(1.5rem, calc(3vw * var(--k)), 2.5rem); }
.drag-hint { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--fg-3); }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(17.5rem, calc(25vw * var(--k)), 24rem); gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0 var(--edge) 2rem; scroll-padding: 0 var(--edge);
  scrollbar-width: none; cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.dragging .pass { pointer-events: none; }
/* cartões fora do ecrã no carril não esperam pela animação de entrada */
.rail .rv.pre { opacity: 1; transform: none; }
.pass { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--cream); color: var(--ink); transition: transform 0.5s var(--ease-out); user-select: none; }
.pass-photo { position: relative; height: 14.5rem; overflow: hidden; background: var(--bg-2); }
.pass-photo::before { content: ""; position: absolute; inset: 0; background: var(--foto) center / cover no-repeat; transition: transform 0.9s var(--ease); }
.pass:hover .pass-photo::before { transform: scale(1.06); }
/* partilhar a partida: casa escura no canto de baixo da foto */
.pass-share { position: absolute; z-index: 1; right: 0.5rem; bottom: 0.5rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: rgba(26, 36, 39, 0.78); color: var(--cream); cursor: pointer; box-shadow: inset 0 1px 0 rgba(253, 251, 235, 0.16); transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.pass-share .ic { width: 1.125rem; height: 1.125rem; }
.pass-share:hover { background: var(--asia); color: var(--ink-0); }
.pass-share.feito { background: var(--america); color: var(--ink-0); }
.pass-share.feito::after { content: "Ligação copiada"; position: absolute; right: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); padding: 0.25rem 0.5rem; background: var(--ink); color: var(--cream); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.pass-cont, .pass-count { position: absolute; z-index: 1; top: 0.5rem; padding: 0.25rem 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pass-cont { top: auto; left: 0.5rem; bottom: 0.5rem; background: var(--c); color: var(--ink-0); } /* em baixo à esquerda: em cima chocava com a data limite em cartões estreitos */
.pass-count { right: 0.5rem; background: var(--ink); color: var(--cream); }
.pass-count.hot { background: var(--asia); color: var(--ink-0); }
.pass-body { padding: 1rem 1rem 1rem; display: grid; gap: 1rem; }
.pass-route { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 0.75rem; }
.pass-route small, .pass-info dt, .pass-price small { display: block; font-family: var(--f-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26, 36, 39, 0.76); }
.pass-route b { display: block; font-size: 2rem; line-height: 1; white-space: nowrap; }
.pass-route .r { text-align: right; }
.pass-line { position: relative; height: 1.5rem; display: grid; place-items: center; }
.pass-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(26, 36, 39, 0.28); }
.pass-line .ic { position: relative; box-sizing: border-box; width: 1.5rem; height: 1.5rem; padding: 0.25rem; background: var(--c); transform: rotate(45deg); transition: transform 0.6s var(--ease-out); }
.pass:hover .pass-line .ic { transform: rotate(45deg) translate(0.375rem, -0.375rem); }
.pass-info { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0; border-block: 1px solid rgba(26, 36, 39, 0.16); }
.pass-info dd { font-weight: 600; font-size: 0.95rem; }
.pass-inc { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pass-inc li { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: rgba(26, 36, 39, 0.07); font-size: 0.8rem; font-weight: 500; }
.pass-inc .ic { width: 0.95em; height: 0.95em; stroke-width: 2.5; }
.pass-stub { position: relative; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1rem 1rem; border-top: 2px dashed rgba(26, 36, 39, 0.24); }
/* o picotado do bilhete: dois recortes redondos na cor da banda */
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; top: -0.8125rem; /* −12 − 1: o centro do círculo cai no meio do traço de 2 px */ width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ground); }
.pass-stub::before { left: -0.75rem; }
.pass-stub::after { right: -0.75rem; }
.pass-price strong { display: block; margin-top: 0.5rem; font-size: 2.5rem; line-height: 1; }
.pass-go { display: inline-flex; align-items: center; gap: 0.75rem; white-space: nowrap; min-height: 3rem; padding: 0 0 0 1rem; border: 0; background: var(--ink); color: var(--cream); font-weight: 600; cursor: pointer; }
.pass-go .ic { box-sizing: border-box; width: 3rem; height: 3rem; padding: 0.9375rem; background: rgba(253, 251, 235, 0.14); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.pass-go:hover .ic { background: var(--c); color: var(--ink-0); }
.pass-cta { justify-content: flex-end; gap: 0.75rem; padding: 1.5rem; min-height: 20rem; background: transparent; color: var(--fg); border: 1px solid var(--ln-2); user-select: auto; }
.pass-cta .sol-mark { font-size: 2.4rem; margin-bottom: auto; color: var(--america); }
.pass-cta b { font-size: 2.25rem; line-height: 1; }
.pass-cta p { color: var(--fg-2); font-size: 0.97rem; }
.pass-cta .row-link { margin-top: 0.5rem; }
@media (min-width: 901px) {
  .drag-hint { display: none; } /* com rato há setas; o aviso de deslizar é só para ecrãs táteis */
  /* com uma ou duas ofertas não há nada para arrastar: grelha fixa, sem setas */
  .rail-ctrl.poucas { display: none; }
  .rail.poucas { grid-auto-columns: minmax(0, 24rem); overflow: visible; cursor: default; }
}

/* ---------- sugestões da equipa ---------- */
.sug .mq-mes { position: relative; overflow: visible; height: clamp(3rem, calc(6.5vw * var(--k)), 6.5rem); margin: 0 calc((100% - 100vw) / 2); }
.sug .mq-row { color: var(--asia); }
.mes-nome, .mes-q { color: var(--asia); }
.months { position: relative; z-index: 1; display: flex; justify-content: center; margin: 0 0 clamp(1.5rem, calc(3vw * var(--k)), 3rem); overflow-x: auto; scrollbar-width: none; border-block: 1px solid var(--ln-2); }
.months::-webkit-scrollbar { display: none; }
.month { flex: 1 0 auto; display: grid; justify-items: center; align-content: center; gap: 0.25rem; min-width: 4rem; min-height: 4rem; padding: 0.5rem 0.5rem 0.5rem; border: 0; border-left: 1px solid var(--ln); background: var(--ground); cursor: pointer; font-size: 1.45rem; line-height: 1; color: var(--fg-2); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.month:first-child { border-left: 0; }
.month small { font-family: var(--f-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: var(--fg-3); min-height: 0.8em; }
.month:hover { color: var(--fg); background: var(--card); }
.month[aria-selected="true"] { background: var(--fg); color: var(--ground); }
.month[aria-selected="true"] small { color: var(--ground); }
/* grelha apertada de imagens, legenda simples por baixo (sem cartão) */
.ideas { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, calc(3.5vw * var(--k)), 3rem) var(--gap); transition: opacity 0.18s; }
#ideas.troca { opacity: 0; }
#ideas .idea { animation: cardIn 0.7s var(--ease-out) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(1.625rem); } }
.idea { display: flex; flex-direction: column; }
/* camada própria e máscara: no Safari o zoom dentro da moldura piscava e saía do recorte */
.idea-img, .pass-photo, .ex-photo { isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.idea-img::before, .pass-photo::before, .ex-photo::before { z-index: -1; backface-visibility: hidden; will-change: transform; }
.idea-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.idea-img::before { content: ""; position: absolute; inset: 0; background: var(--foto) center / cover no-repeat; transition: transform 0.9s var(--ease); }
.idea:hover .idea-img::before { transform: scale(1.05); }
.idea-tag, .idea-trend { position: absolute; z-index: 1; top: 0.5rem; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.idea-tag { left: 0.5rem; background: var(--ink); color: var(--cream); }
.idea-tag.ep-baixa { background: var(--america); color: var(--ink-0); }
.idea-tag.ep-ideal { background: var(--cream); color: var(--ink); }
.idea-trend { right: 0.5rem; background: var(--asia); color: var(--ink-0); }
.idea-trend .ic { width: 1em; height: 1em; }
.idea-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0 0; flex: 1; }
.idea h3 { font-size: clamp(1.75rem, calc(2.4vw * var(--k)), 2.25rem); line-height: 1; }
.idea-where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.idea-where::before { content: ""; flex: none; width: 0.5625rem; height: 0.5625rem; background: var(--c); } /* quadrado do tamanho das maiúsculas ao lado (0,7 × 0,8rem ≈ 9 px) */
.idea-where .num { font-weight: 500; letter-spacing: 0.04em; color: var(--fg-3); }
.idea p { color: var(--fg-2); font-size: 0.98rem; max-width: 44ch; }
.idea-event { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; background: var(--card); color: var(--fg) !important; font-size: 0.9rem !important; font-weight: 600; }
/* texto que pode partir em duas linhas: o ícone fica centrado na primeira (1lh = altura da linha) */
.idea-event .ic, .wz-resumo .ic { flex: none; margin-top: calc((1lh - 1.15em) / 2); }
.idea-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.idea-meta li { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; background: var(--card); font-size: 0.82rem; font-weight: 500; }
.idea-meta li.good { background: var(--america); color: var(--ink-0); }
.idea-meta li.good .ic { stroke-width: 2.5; }
.idea-go { margin-top: auto; }
/* fecho da grelha: pergunta em toda a largura */
.idea-cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 1rem 2.5rem; padding: clamp(1.5rem, calc(3vw * var(--k)), 3rem) 0 0; border-top: 1px solid var(--ln-2); }
.idea-cta .sol-mark { display: none; }
.idea-cta b { flex: 1 1 12em; font-size: clamp(2rem, calc(3.6vw * var(--k)), 3.5rem); line-height: 1; }
.idea-cta p { flex: 0 1 30ch; }
.idea-cta .row-link { flex: 1 1 100%; }
.idea-more { position: relative; z-index: 1; margin-top: 1.5rem; font-size: 0.92rem; color: var(--fg-2); }
.idea-more a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- explorador por continente ---------- */
/* a banda inteira toma a cor do continente escolhido */
.explore { transition: background 0.8s var(--ease); }
.ex-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, calc(3vw * var(--k)), 3rem) clamp(1.5rem, calc(3vw * var(--k)), 3rem); align-items: start; }
.ex-list { display: grid; border-bottom: 1px solid var(--ln-2); }
.ex-list button { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.25rem 0 0; border: 0; border-top: 1px solid var(--ln-2); background: none; cursor: pointer; text-align: left; color: var(--fg); }
.ex-num { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; width: 2.4ch; }
/* por escolher: um pouco esbatido (contraste mínimo de 3:1 em letra grande); escolhido: cheio, com seta */
.ex-name { font-size: clamp(2.5rem, calc(4.8vw * var(--k)), 4.75rem); line-height: 1; padding-top: 0.25em; margin-bottom: -0.1em; opacity: 0.72; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out); }
.ex-list .ic { box-sizing: border-box; margin-left: auto; width: 2.5rem; height: 2.5rem; padding: 0.625rem; background: var(--ink-0); color: var(--cream); opacity: 0; transform: translateX(-1rem); transition: 0.5s var(--ease-out); }
.ex-list button:hover .ex-name, .ex-list button[aria-selected="true"] .ex-name { opacity: 1; }
.ex-list button[aria-selected="true"] .ex-name { transform: translateX(0.625rem); }
.ex-list button[aria-selected="true"] .ic { opacity: 1; transform: none; }
.ex-panels { position: relative; display: grid; }
.ex-panel { grid-area: 1 / 1; display: grid; gap: var(--gap); align-content: start; opacity: 0; visibility: hidden; transform: translateY(1.125rem); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease-out), visibility 0.6s; }
.ex-panel.on { opacity: 1; visibility: visible; transform: none; }
.ex-visual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.ex-photo { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: rgba(16, 24, 26, 0.16); }
.ex-photo::before { content: ""; position: absolute; inset: 0; background: var(--foto) center / cover no-repeat; transition: transform 0.9s var(--ease); }
.ex-photo:hover::before { transform: scale(1.05); }
.ex-photo figcaption { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.25rem 0.5rem; background: var(--cream); color: var(--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ex-card { display: grid; gap: 1rem; padding-top: clamp(1rem, calc(1.6vw * var(--k)), 1.5rem); }
.ex-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.ex-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* o nome já está em grande na lista ao lado */
.ex-card p { font-size: 1.06rem; font-weight: 500; max-width: 46ch; }
.ex-dest { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); border-top: 1px solid var(--ln-2); }
/* cada cidade é um botão: leva ao planeador já com a cidade escolhida */
.ex-dest li { border-bottom: 1px solid var(--ln); }
.ex-dest li button { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--fg); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; }
.ex-dest li button span { flex: 1; }
.ex-voo { flex: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
.ex-dest li button i { width: 0.5625rem; height: 0.5625rem; background: var(--ink-0); }
.ex-dest li button .ic:last-child { display: none; width: 1rem; height: 1rem; opacity: 0.55; } /* a seta só aparece no telemóvel, onde não há rato para mostrar que é um botão */
.ex-dest li button:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ex-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; font-size: 0.86rem !important; }
.ex-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.ex-legend i { width: 0.5625rem; height: 0.5625rem; background: var(--ink-0); }

/* ---------- quiz ---------- */
.quiz-box { position: relative; }
.quiz-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.quiz-top .eyebrow, .quiz-step { white-space: nowrap; }
.quiz-step { font-size: 0.86rem; color: var(--fg-2); }
.quiz-title { margin: 0.34em 0 clamp(1rem, calc(2vw * var(--k)), 2rem); } /* folga em cima para o acento de TRÊS */
.quiz-prog { height: 3px; background: var(--ln); overflow: hidden; margin-bottom: clamp(1.5rem, calc(3vw * var(--k)), 3rem); }
.quiz-prog i { display: block; height: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.6s var(--ease); }
.quiz-stage { position: relative; }
.q { display: none; }
.q.on { display: block; animation: qIn 0.6s var(--ease-out); }
@keyframes qIn { from { opacity: 0; transform: translateX(2.125rem); } }
.q-title { display: block; font-size: clamp(1.75rem, calc(3vw * var(--k)), 2.75rem); line-height: 1; margin-bottom: clamp(1rem, calc(2vw * var(--k)), 1.5rem); }
/* quatro casas coladas, separadas por filetes: ao escolher, a casa enche-se de cor */
.q-opts { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ln-2); }
.q-opt { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-height: clamp(8rem, calc(11vw * var(--k)), 10rem); padding: 1rem; border: 0; border-left: 1px solid var(--ln-2); background: none; color: var(--fg); text-align: left; cursor: pointer; overflow: hidden; isolation: isolate; transition: color 0.4s var(--ease); }
.q-opt:first-child { border-left: 0; }
.q-opt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: translateY(101%); transition: transform 0.5s var(--ease); }
.q-opt:hover, .q-opt.sel { color: var(--ink-0); }
.q-opt:hover::before, .q-opt.sel::before { transform: none; }
.q-ic { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: color-mix(in srgb, currentColor 12%, transparent); }
.q-ic .ic { width: 1.5rem; height: 1.5rem; }
.q-t { font-size: 1.14rem; font-weight: 600; line-height: 1.25; }
.q-result { animation: qIn 0.6s var(--ease-out); }
.q-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: 1.5rem; }
.q-card { position: relative; min-height: clamp(12rem, calc(18vw * var(--k)), 16rem); padding: 1rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.25rem; color: var(--cream); background: linear-gradient(180deg, transparent 35%, rgba(16, 24, 26, 0.9)), var(--foto, none) center / cover no-repeat, var(--c); animation: cardIn 0.7s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms); }
.q-card b { font-size: clamp(1.9rem, calc(2.6vw * var(--k)), 2.5rem); line-height: 1; }
.q-card small { color: var(--cream-2); }
.q-card-cont { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.25rem 0.5rem; background: var(--c); color: var(--ink-0); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.q-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.q-back { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; border: 0; background: none; color: var(--fg-2); cursor: pointer; padding: 0; }
.q-back:hover { color: var(--fg); }

/* ---------- como funciona ---------- */
.route { position: relative; padding-top: 7.5rem; }
.como .route-svg { left: calc((100% - 100vw) / 2); width: 100vw; } /* a rota vai de ponta a ponta do ecrã */
.route-svg { position: absolute; top: 0; left: 0; width: 100%; height: 5.5rem; overflow: visible; }
.route-svg path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.route-bg { stroke: var(--ln-2); stroke-dasharray: 6 8; }
.route-fg { stroke: var(--fg); }
/* linha já percorrida: destapada da esquerda até --rp (folga em cima e em baixo para não cortar a espessura do traço) */
.route-done { clip-path: inset(-1rem calc(100% - var(--rp, 0%)) -1rem 0); }
.route-plane { position: absolute; top: 0; left: 0; width: 2.75rem; height: 2.75rem; background: var(--cream); color: var(--ink); display: grid; place-items: center; will-change: transform; }
.route-plane .ic { width: 1.5rem; height: 1.5rem; transform: rotate(-45deg); }
.stops { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ln-2); }
.stop { display: grid; gap: 0.5rem; align-content: start; padding: 1rem clamp(1rem, calc(2vw * var(--k)), 2rem) 0; opacity: 0.62; transition: opacity 0.6s; }
.stop + .stop { border-left: 1px solid var(--ln); }
.stop:first-child { padding-left: 0; } /* a primeira coluna começa na margem, como o resto da página */
.stop.lit { opacity: 1; }
.stop-n { font-size: clamp(3rem, calc(4.6vw * var(--k)), 4.5rem); line-height: 0.9; color: var(--fg-3); transition: color 0.5s; }
.stop:nth-child(1).lit .stop-n { color: var(--europa); }
.stop:nth-child(2).lit .stop-n { color: var(--america); }
.stop:nth-child(3).lit .stop-n { color: var(--africa); }
.stop:nth-child(4).lit .stop-n { color: var(--asia); }
.stop h3 { font-size: 1.2rem; font-weight: 600; }
.stop p { color: var(--fg-2); font-size: 0.98rem; }

/* ---------- planeador ---------- */
.plan-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, calc(4vw * var(--k)), 4rem); align-items: start; }
.wizard { padding-top: 1rem; border-top: 1px solid var(--ln-2); }
.wz-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.86rem; color: var(--fg-2); }
.wz-count b { color: var(--fg); }
.wz-prog { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
.wz-prog i { height: 3px; background: var(--ln); transition: background 0.4s; }
.wz-prog i.on { background: var(--fg); }
.wz-prog i.on:nth-child(1) { background: var(--europa); }
.wz-prog i.on:nth-child(2) { background: var(--asia); }
.wz-prog i.on:nth-child(3) { background: var(--oceania); }
.wz-prog i.on:nth-child(4) { background: var(--america); }
.wz-prog i.on:nth-child(5) { background: var(--africa); }
.plan .wz-prog i { height: 0.25rem; }
.plan .wz-q { color: var(--asia); }
.wz-resumo, .wz-wa, .rail-pos { display: none; } /* só no telemóvel */
.wz-step { display: none; gap: 1rem; }
.wz-step.on { display: grid; animation: qIn 0.5s var(--ease-out); }
.wz-q { font-size: clamp(2rem, calc(3.4vw * var(--k)), 3.25rem); line-height: 1; margin-bottom: 0.5rem; }
.label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.field { display: grid; gap: 0.5rem; min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.input { width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem; border: 1.5px solid var(--ln-2); background: transparent; color: var(--fg); font-size: 1rem; transition: border-color 0.3s, background 0.3s; }
.t-dark .input, .t-deep .input { color-scheme: dark; }
.input::placeholder { color: var(--fg-3); }
.input:focus { outline: none; border-color: var(--fg); background: var(--card); }
.input.big { min-height: 4.5rem; font-size: 1.35rem; }
textarea.input { resize: vertical; min-height: 6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span, .chip-btn { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--ln-2); background: none; color: var(--fg); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.chip:hover span, .chip-btn:hover { border-color: var(--fg); }
.chip input:checked + span { background: var(--fg); color: var(--ground); border-color: var(--fg); }
.plan .chip input:checked + span { background: var(--asia); color: var(--ink-0); border-color: var(--asia); }
.plan .chip:hover span, .plan .chip-btn:hover { border-color: var(--asia); }
.plan .chip-btn:hover { background: color-mix(in srgb, var(--asia) 16%, transparent); }
.chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.wz-step .label { margin-top: 0.5rem; }
.stepper-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ln); font-size: 1.1rem; font-weight: 500; }
.stepper { display: grid; grid-template-columns: 3rem 3.75rem 3rem; align-items: center; }
.stepper button { width: 3rem; height: 3rem; border: 1.5px solid var(--ln-2); background: none; color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: background 0.3s, color 0.3s; }
.stepper button:hover { background: var(--fg); color: var(--ground); }
.stepper input { border: 0; background: none; text-align: center; font-size: 2.2rem; width: 100%; }
.check { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.94rem; color: var(--fg-2); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: 2px; /* correção ótica medida: centra a caixa na altura das maiúsculas da 1.ª linha (desvio final ≤ 1 px) */ accent-color: var(--fg); flex: none; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.wz-nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; }
.wz-nav [data-wz="1"], .wz-nav [data-send] { margin-left: auto; }
.form-msg { margin-top: 1rem; padding: 0.75rem 1rem; font-size: 0.95rem; font-weight: 500; }
.form-msg.ok { background: var(--america); color: var(--ink-0); }
.form-msg.warn { background: var(--asia); color: var(--ink-0); }
.form-msg.info { background: var(--card); color: var(--fg); }
button:disabled { opacity: 0.6; cursor: wait; }

/* cartão de embarque (escuro, sobre a banda creme) */
.ticket { --c: var(--cream-3); position: sticky; top: 5.5rem; background: var(--bg); color: var(--cream); overflow: hidden; transform: rotate(1.5deg); transition: transform 0.6s var(--ease-out); }
.ticket:hover { transform: rotate(0); }
.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 1rem; background: var(--bg-3); }
.ticket-top img { height: 1.375rem; width: auto; }
.ticket-top span { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.ticket-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.5rem; padding: 1.5rem 1rem 0.75rem; border-top: 0.375rem solid var(--c); transition: border-color 0.5s; }
.ticket-route small, .ticket-grid dt { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); }
.ticket-route strong { display: block; font-size: clamp(1.75rem, calc(2.4vw * var(--k)), 2.25rem); line-height: 1; }
.ticket-route .r { text-align: right; }
.ticket-plane { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--cream); color: var(--ink); }
.ticket-plane .ic { transform: rotate(45deg); }
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 1rem 1.5rem; }
.ticket-grid dd { font-weight: 600; margin-top: 0.25rem; }
.ticket .empty { color: var(--cream-3); }
.ticket-cut { position: relative; border-top: 2px dashed var(--line-2); margin: 0 1rem; }
.ticket-cut::before, .ticket-cut::after { content: ""; position: absolute; top: -0.8125rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ground); }
.ticket-cut::before { left: -1.75rem; }
.ticket-cut::after { right: -1.75rem; }
.ticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 1.5rem; }
.barcode { width: 7.5rem; height: 2.5rem; background: repeating-linear-gradient(90deg, var(--cream) 0 2px, transparent 2px 0.25rem, var(--cream) 0.25rem 0.4375rem, transparent 0.4375rem 0.5625rem, var(--cream) 0.5625rem 0.625rem, transparent 0.625rem 0.8125rem); opacity: 0.85; }
.ticket-wa { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 0.92rem; font-weight: 600; }
.ticket-wa .ic { color: var(--wa); width: 1.3em; height: 1.3em; }
.ticket-wa:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, calc(4vw * var(--k)), 4rem); align-items: start; }
.faq-list { border-bottom: 1px solid var(--ln-2); }
/* a pergunta ao WhatsApp é a última linha da lista: o filete de cima substitui o de baixo da lista */
.faq-col .faq-list { border-bottom: 0; }
.faq-more { min-height: 4rem; padding: 0; border-bottom: 1px solid var(--ln-2); }
.faq-item { border-top: 1px solid var(--ln-2); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; padding: 1rem 0; cursor: pointer; list-style: none; font-size: clamp(1rem, calc(1.2vw * var(--k)), 1.15rem); font-weight: 600; line-height: 1.3; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-ic { box-sizing: border-box; width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; background: var(--fg); color: var(--ground); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.faq-ic .ic { transition: transform 0.5s var(--ease); }
.faq-item[open] .faq-ic { background: var(--asia); color: var(--ink-0); }
.faq-item[open] .faq-ic .ic { transform: rotate(135deg); }
.faq-item p { padding: 0 4rem 1.5rem 0; color: var(--fg-2); max-width: 62ch; }

/* ---------- contacto ---------- */
/* foto de margem a margem, a palavra gigante por cima e um painel creme sobreposto */
.contact { position: relative; overflow: hidden; background: var(--bg-3); padding: clamp(4rem, calc(8vw * var(--k)), 8rem) 0; border-top: 3px solid var(--asia); }
.contact-bg { position: absolute; inset: 0; background: var(--foto, none) center / cover no-repeat; }
.contact-bg::after { content: ""; position: absolute; inset: 0; background: rgba(16, 24, 26, 0.36); }
.contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, calc(4vw * var(--k)), 4.5rem); align-items: start; width: min(100% - 2 * var(--gut), var(--max)); margin: 0 auto; padding: clamp(1rem, calc(3vw * var(--k)), 3rem); }
.contact-grid .head { margin-bottom: clamp(1.5rem, calc(3vw * var(--k)), 2.5rem); }
.c-tiles { display: grid; border-bottom: 1px solid var(--ln-2); }
.c-tile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-content: center; align-items: center; column-gap: 1rem; min-height: 4.25rem; padding: 0.5rem 0; border-top: 1px solid var(--ln-2); }
/* o ícone fica na linha do título (centrado na altura das maiúsculas), não no meio do bloco de duas linhas */
.c-tile > span { display: contents; }
.c-tile > .ic:first-child { grid-area: 1 / 1; width: 1.5rem; height: 1.5rem; }
.c-tile.wa > .ic:first-child { color: #128c4b; }
.c-tile b { grid-area: 1 / 2; }
.c-tile small { grid-area: 2 / 2; }
.c-tile > .ic:last-child { grid-area: 1 / 3 / 3 / 4; }
.c-tile b { display: block; font-weight: 600; font-size: 1.08rem; line-height: 1.25; overflow-wrap: anywhere; }
.c-tile small { display: block; color: var(--fg-3); font-size: 0.86rem; }
.c-tile > .ic:last-child { box-sizing: border-box; width: 2rem; height: 2rem; padding: 0.5rem; background: var(--fg); color: var(--ground); transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease); }
.c-tile:hover > .ic:last-child { background: var(--asia); color: var(--ink-0); transform: translateX(0.25rem); }
.quick { display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--ln-2); }
.quick-title { font-size: clamp(1.9rem, calc(2.6vw * var(--k)), 2.5rem); line-height: 1; }
.quick .btn { justify-self: start; }
.quick .form-msg { margin-top: 0; }

/* ---------- rodapé ---------- */
.footer { padding: clamp(3rem, calc(5vw * var(--k)), 4.5rem) 0 1.5rem; }
.f-grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1.3fr 1.3fr; gap: clamp(1.5rem, calc(3vw * var(--k)), 3rem) var(--gap); padding: 0 0 clamp(2rem, calc(4vw * var(--k)), 3.5rem); }
.f-brand { display: grid; gap: 1rem; align-content: start; }
.f-brand img { height: 1.875rem; width: auto; }
.f-brand p { color: var(--fg-2); font-size: 0.96rem; max-width: 34ch; }
.f-social { display: flex; gap: 0.5rem; }
.f-social a { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(118, 118, 128, 0.12); display: grid; place-items: center; color: var(--fg); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.f-social a:hover { background: var(--teal, #233034); color: var(--cream); }
.f-col h3 { margin: 0 0 1rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.f-col ul { display: grid; }
.f-col li { font-size: 0.96rem; color: var(--fg-2); }
.f-col li a, .f-col li > span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; color: var(--fg-2); transition: color 0.2s; }
.f-col li a:hover { color: var(--fg); }
.f-col li .ic { width: 1.05em; height: 1.05em; color: var(--fg-3); }
.f-col li small { display: block; margin: -0.25rem 0 0.25rem 1.5rem; font-size: 0.78rem; color: var(--fg-3); }
.f-legal-list li { padding: 0.25rem 0; line-height: 1.45; }
.f-badge { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.75rem; margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 1.25rem; background: var(--card); box-shadow: 0 1px 2px rgba(16, 24, 26, 0.04), 0 0.75rem 2rem rgba(16, 24, 26, 0.06); }
.f-badge > span { display: contents; }
.f-badge .ic { grid-area: 1 / 1; width: 1.5rem; height: 1.5rem; color: #1fa15a; }
.f-badge b { grid-area: 1 / 2; }
.f-badge small { grid-area: 2 / 2; }
.f-badge b { display: block; font-size: 0.96rem; font-weight: 700; letter-spacing: 0.02em; }
.f-badge small { display: block; font-size: 0.76rem; color: var(--fg-3); line-height: 1.35; }
.f-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding: 1rem 0 0; border-top: 1px solid var(--ln); font-size: 0.82rem; color: var(--fg-3); }
.f-bottom nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-left: auto; }
/* voltar ao topo: cápsula cinzenta com a seta num círculo branco (como na versão iOS) */
.f-top { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.25rem 0 1rem; border-radius: 62rem; background: rgba(118, 118, 128, 0.12); color: var(--fg); font-weight: 600; transition: background 0.3s var(--ease); }
.f-top .ic { box-sizing: border-box; width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%; background: var(--card); transition: transform 0.4s var(--ease-out); }
.f-top:hover .ic { transform: translateY(-0.125rem); }
.f-bottom nav a { padding: 0.5rem 0; transition: color 0.2s; }
.f-bottom nav a:hover { color: var(--fg); }

/* ---------- flutuantes ---------- */
.mobile-bar { display: none; }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .q-opts { grid-template-columns: 1fr 1fr; }
  .q-opt:nth-child(3) { border-left: 0; }
  .q-opt:nth-child(n + 3) { border-top: 1px solid var(--ln-2); }
  .stops { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .stop:nth-child(3) { border-left: 0; padding-left: 0; }
  .plan-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .ticket { position: relative; top: 0; max-width: 32.5rem; }
  .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-list { grid-template-columns: 1fr 1fr; }
  .trust-list li:nth-child(3) { border-left: 0; }
  .trust-list li:nth-child(n + 3) { border-top: 1px solid var(--ln); }
  .f-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav, .bar-cta { display: none; }
  .menu-btn { display: block; }
  .brand { height: 2.75rem; }
  .hero { padding-top: calc(2 * var(--bar-pad) + 2.75rem); } /* a altura do cabeçalho (folga + casa de 44 px + folga) */
  .ex-grid { grid-template-columns: 1fr; }
  /* os cinco continentes sempre à vista, em grelha (uma tira a deslizar escondia os dois últimos) */
  .ex-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1.5px solid var(--ln-2); }
  .ex-list button { justify-content: center; min-height: 3.25rem; padding: 0 0.125rem 0.25rem; border: 0; border-left: 1.5px solid var(--ln-2); }
  .ex-list button:first-child { border-left: 0; }
  .ex-list button[aria-selected="true"] { background: var(--ink-0); border-color: var(--ink-0); color: var(--cream); }
  .ex-list button[aria-selected="true"] .ex-name { transform: none; }
  .ex-name { font-size: 1.9rem; opacity: 1; padding-top: 0.26em; margin-bottom: 0; }
  .ex-num, .ex-list .ic { display: none; }
  .route { padding-top: 0; }
  .route-svg, .route-plane { display: none; }
  .head-row { display: block; }
  .rail-ctrl .round { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero-cap { flex-direction: column; align-items: stretch; }
  .kicker { max-width: none; font-size: 1.25rem; }
  .hero-cta { justify-content: stretch; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: space-between; }
  .hero-meta { gap: 0.5rem 1rem; font-size: 0.82rem; }
  .hero-coord { display: none; }
  .hero-dots { flex: 1 1 100%; margin: 0; gap: 2px; }
  .hero-dots button { flex: 1; width: auto; height: 2.25rem; }
  .h2 { font-size: clamp(2.25rem, calc(10.5vw * var(--k)), 3.25rem); }
  .sec { padding: 4.5rem 0; }
  .head { margin-bottom: 1.5rem; }
  .head-row .head { margin-bottom: 0.75rem; }
  .rail-ctrl { margin-bottom: 1rem; }
  .rail { grid-auto-columns: calc(84vw * var(--k)); }
  .state { padding-top: 3.5rem; }
  .trust-list li { flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
  .trust-ic { width: 2rem; height: 2rem; }
  .trust-ic .ic { width: 1rem; height: 1rem; }
  .trust-list b { font-size: 0.94rem; }
  .trust-list small { font-size: 0.8rem; }
  /* 1rem nos campos: abaixo disso o iPhone faz zoom sozinho ao tocar */
  .input, .input.big { font-size: 1rem; }
  .input.big { min-height: 3.75rem; }
  .months { justify-content: flex-start; margin-inline: calc(var(--gut) * -1); }
  .month { flex: none; min-width: 3.75rem; min-height: 3.5rem; }
  /* no telemóvel os cartões passam a carril horizontal */
  .ideas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(82vw * var(--k)); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 1rem; scroll-padding: 0 var(--gut); scrollbar-width: none; }
  .ideas::-webkit-scrollbar { display: none; }
  .ideas .idea { scroll-snap-align: start; }
  .idea-cta { grid-column: auto; flex-direction: column; align-items: stretch; justify-content: flex-end; padding: 1rem; border: 1px solid var(--ln-2); }
  .idea-cta b { flex: 0 0 auto; }
  .idea-cta p, .idea-cta .row-link { flex: 0 0 auto; }
  .ex-dest { grid-template-columns: 1fr; }
  .q-opts { grid-template-columns: 1fr 1fr; }
  .q-opt { min-height: 8.25rem; padding: 1rem; gap: 1rem; }
  .q-t { font-size: 1rem; }
  .q-cards { grid-template-columns: 1fr; }
  .q-card { min-height: 10.5rem; }
  .stops { grid-template-columns: 1fr; row-gap: 0; }
  .stop { grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.25rem; padding: 1rem 0; opacity: 1; border-top: 1px solid var(--ln); }
  .stop:first-child { border-top: 0; }
  .stop + .stop { padding-left: 0; border-left: 0; }
  .stop-n { grid-row: span 2; font-size: 3rem; }
  .stop:nth-child(1) .stop-n { color: var(--europa); }
  .stop:nth-child(2) .stop-n { color: var(--america); }
  .stop:nth-child(3) .stop-n { color: var(--africa); }
  .stop:nth-child(4) .stop-n { color: var(--asia); }
  .two { grid-template-columns: 1fr; }
  .wz-nav .btn { flex: 1; justify-content: space-between; }
  .wz-nav .btn-line { flex: 0 0 auto; justify-content: center; }
  .stepper-row { font-size: 1rem; }
  .ticket { transform: none; }
  .faq-item p { padding-right: 0; }
  .contact-grid { width: auto; margin: 0 var(--gut); padding: 1rem; }
  /* o email tem de caber numa linha: letra e intervalos um pouco menores */
  .c-tile { column-gap: 0.75rem; }
  .c-tile b { font-size: clamp(0.875rem, 4.1vw, 1.0625rem); overflow-wrap: normal; }
  .f-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
  .f-col h3 { margin-bottom: 0.5rem; }
  /* ligações do rodapé em duas colunas: metade da altura, alvos de toque com 2.75rem */
  .f-col:nth-child(2) ul { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .f-col li a, .f-col li > span { min-height: 2.75rem; padding: 0; }
  .f-bottom { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .f-bottom nav { margin-left: 0; }
  .f-bottom nav a { min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0; }
  .footer { padding-bottom: 2rem; }
  /* barra fixa: dois retângulos colados, só depois do topo e nunca sobre formulários (classe bar-on) */
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-template-columns: 1fr 1.4fr; padding-bottom: env(safe-area-inset-bottom);
    background: var(--ink-0); border-top: 1px solid var(--line-2);
    transform: translateY(110%); visibility: hidden; transition: transform 0.5s var(--ease), visibility 0.5s;
  }
  .bar-on .mobile-bar { transform: none; visibility: visible; }
  .menu-open .mobile-bar { transform: translateY(110%); visibility: hidden; }
  .mobile-bar a { min-height: 3.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; font-size: clamp(0.84rem, 4vw, 0.96rem); white-space: nowrap; }
  .mobile-bar a:first-child { color: var(--wa); }
  .mobile-bar .m-main { justify-content: space-between; padding-left: 1rem; background: var(--cream); color: var(--ink); }
  .mobile-bar .m-main .ic { box-sizing: border-box; width: 3.5rem; height: 3.5rem; padding: 1.125rem; background: var(--ink); color: var(--cream); }

  /* ===== Pensado para o telemóvel (outubro 2026) ===== */

  /* Topo: cabe inteiro no primeiro ecrã, mesmo com a faixa beta; troca-se de cidade a deslizar o dedo */
  .hero { min-height: calc(100svh - var(--beta-h, 0px)); }
  .hero-dots button { height: 1.25rem; pointer-events: none; }

  /* Letra mínima: nada abaixo de 11 px (havia etiquetas a 9,6 px) */
  .month small { font-size: 0.7rem; }
  .pass-route small, .pass-info dt, .pass-price small, .label, .f-col h3 { font-size: 0.75rem; }
  .pass-cont, .pass-count, .idea-tag, .idea-trend, .q-card-cont, .ex-photo figcaption { font-size: 0.75rem; }
  .eyebrow { font-size: 0.8rem; }

  /* Carris: um cartão tem de caber inteiro no ecrã (antes tinham 620 a 690 px de altura num ecrã de 660) */
  .rail, .ideas { grid-auto-columns: 80vw; }
  .drag-hint { display: none; }
  .pass-photo { height: 9.5rem; }
  .pass-body { padding: 1rem 1rem 0.75rem; gap: 0.75rem; }
  .pass-route b { font-size: 1.55rem; }
  .pass-info { padding: 0.5rem 0; }
  .pass-stub { padding: 1rem 1rem 1rem; }
  .pass-price small { white-space: nowrap; }
  .pass-price strong { margin-top: 0.25rem; font-size: 2.3rem; }
  .pass-go { min-height: 2.75rem; padding-left: 1rem; gap: 0.5rem; }
  .pass-go .ic { width: 2.75rem; height: 2.75rem; padding: 0.875rem; }
  .pass-cta { min-height: 0; padding: 1rem; }
  .idea-img { aspect-ratio: 3 / 2; }
  .idea-body { padding-top: 0.75rem; gap: 0.5rem; }
  .idea h3 { font-size: 1.75rem; }
  .idea p { font-size: 0.95rem; }
  .idea-event { padding: 0.5rem 0.5rem; }
  .idea-go { min-height: 2.75rem; padding-top: 0.5rem; }
  .idea-more a { min-height: 2.75rem; }
  .idea-cta { background: var(--ground); } /* tapa a palavra gigante que passa por trás */
  .idea-cta .sol-mark { display: block; font-size: 2.4rem; margin-bottom: auto; color: var(--asia); }

  /* Onde estou no carril: barra, "2 de 5" e setas (dá para avançar sem deslizar) */
  .rail-pos { display: flex; align-items: center; gap: 0.75rem; padding: 0.25rem var(--gut) 0; font-size: 0.9rem; color: var(--fg-2); }
  .ideas + .rail-pos { padding-inline: 0; }
  .rail-bar { flex: 1; height: 3px; background: var(--ln); }
  .rail-bar i { display: block; height: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0.2); transition: transform 0.4s var(--ease); }
  .rail-n { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .rail-n b { color: var(--fg); }
  .rail-pos .round { display: grid; width: 2.75rem; height: 2.75rem; margin-left: -0.5rem; }
  .rail-pos .round:first-of-type { margin-left: 0; }
  .rail-pos .round:disabled { opacity: 0.35; cursor: default; }

  .ex-dest li button .ic:last-child { display: block; }
  /* Continentes: letra que deixa caber os cinco (encolhe em ecrãs muito estreitos) */
  .ex-name { font-size: clamp(0.9rem, 4.6vw, 1.12rem); }

  /* Cabeçalho: no topo são duas casas soltas sobre a foto; depois de começar a descer passa a barra cheia,
     para o texto da página não passar por trás do logótipo e do botão do menu */
  .bar { transition: background 0.4s var(--ease), padding 0.4s var(--ease); }
  .scrolled .bar, .menu-open .bar { padding-block: 0.5rem; background: var(--bg-3); box-shadow: 0 1px 0 var(--line); }
  .menu-open .bar { background: transparent; box-shadow: none; }
  .scrolled .menu-btn { box-shadow: none; }

  /* Planeador: o cartão de embarque ficava depois do formulário, onde ninguém o via.
     No telemóvel dá lugar a um resumo numa linha, dentro do formulário, que se atualiza ao preencher. */
  .ticket { display: none; }
  .wizard { scroll-margin-top: 0.5rem; } /* soma-se aos 72 px que a página já reserva para o cabeçalho */
  /* Botões do formulário sempre à mão: ficam colados ao fundo do ecrã enquanto o passo for mais alto do que ele */
  .plan { overflow: hidden; overflow: clip; } /* "clip" não cria zona de scroll, senão o "sticky" não funcionava */
  .wz-nav { position: sticky; bottom: 0; z-index: 3; margin: 1rem calc(var(--gut) * -1) 0; padding: 0.5rem var(--gut) calc(0.5rem + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--ln-2); }
  .wz-top { margin-bottom: 0.75rem; }
  .wz-resumo { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0 0 1rem; padding: 0.5rem 0.75rem; background: var(--bg); color: var(--cream); font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
  .wz-resumo .ic { color: var(--asia); }
  .wz-wa { display: flex; align-items: center; gap: 0.5rem; min-height: 3rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--ln-2); font-weight: 600; }
  .wz-wa .ic:first-child { width: 1.5rem; height: 1.5rem; color: #128c4b; }
  .wz-wa span { flex: 1; }

  /* Rodapé: os contactos acabaram de aparecer na secção de cima, não se repetem */
  .f-col:nth-child(3) { display: none; }
  .sec { padding: 3.5rem 0; }
}

/* ==========================================================================
   Camada de vidro do iOS 26 (22 out. 2026)
   Regra: tudo o que é controlo ou flutua (cabeçalho, botões, setas, etiquetas sobre fotos,
   seletor de meses, opções, campos, menu, barras do telemóvel, painel do contacto) é vidro em
   cápsula ou círculo, como no iOS; o conteúdo (bandas, cartões, fotos) mantém as arestas retas.
   O vidro muda com o fundo: claro nas bandas creme, translúcido nas escuras, branco sobre as cores
   dos continentes e transparente sobre as fotos. Desfoque verdadeiro só no que é fixo ou está
   sobre fotos (no resto o fundo é liso e o desfoque só pesaria no telemóvel).
   ========================================================================== */
:root {
  --pill: 62rem;
  --vidro-creme: rgba(253, 251, 235, 0.9);
  --vidro-escuro: rgba(26, 36, 39, 0.84);
  --vidro-desfoque: blur(1rem) saturate(1.6);
  --brilho: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 45%);
  --luz-creme: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(26, 36, 39, 0.08);
  --luz-escura: inset 0 1px 0 rgba(253, 251, 235, 0.18), inset 0 0 0 1px rgba(253, 251, 235, 0.12);
  --sombra-suave: 0 0.5rem 1.5rem rgba(16, 24, 26, 0.14);
  /* vidro transparente sobre fotografias (letra branca) */
  --vc: linear-gradient(160deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.04) 50%), rgba(16, 22, 24, 0.38);
  --vc-luz: inset 1px 1.5px 0 -0.5px rgba(255, 255, 255, 0.7), inset -1px -1px 0 -0.5px rgba(255, 255, 255, 0.25), 0 0.25rem 1rem rgba(0, 0, 0, 0.18);
}
/* vidro dos controlos, conforme a banda */
.t-dark, .t-deep { --vg: rgba(253, 251, 235, 0.08); --vg-on: rgba(253, 251, 235, 0.16); --vg-luz: inset 0 1px 0 rgba(253, 251, 235, 0.16), inset 0 0 0 1px rgba(253, 251, 235, 0.12); }
.t-cream { --vg: rgba(255, 255, 255, 0.66); --vg-on: #ffffff; --vg-luz: inset 0 1px 0 #ffffff, inset 0 0 0 1px rgba(26, 36, 39, 0.1), 0 0.25rem 0.75rem rgba(16, 24, 26, 0.06); }
.t-color { --vg: rgba(255, 255, 255, 0.32); --vg-on: rgba(255, 255, 255, 0.55); --vg-luz: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(16, 24, 26, 0.12), 0 0.25rem 0.75rem rgba(16, 24, 26, 0.08); }

/* ---- cabeçalho: três grupos de vidro — marca à esquerda, menu ao centro, ação à direita ---- */
/* o topo e o cabeçalho usam a margem da página (o resto do site fica na coluna); só se contêm em ecrãs muito largos */
:root { --edge-topo: max(var(--gut), calc((100vw - 120rem) / 2)); }
/* o vidro do menu adapta-se ao que está por baixo (classe cab-claro posta pelo app.js), como no iOS */
.header {
  --cab-vidro: rgba(26, 36, 39, 0.55); --cab-fg: var(--cream); --cab-luz: var(--luz-escura);
  --cab-hover: rgba(253, 251, 235, 0.1); --cab-atual: rgba(253, 251, 235, 0.18);
  --cab-cta: var(--cream); --cab-cta-fg: var(--ink); --cab-cta-ic: var(--ink); --cab-cta-ic-fg: var(--cream); --cab-solido: var(--ink); --cab-marca: rgba(26, 36, 39, 0.84); --cab-wa: var(--wa);
}
.cab-claro .header, .menu-open .header {
  --cab-vidro: rgba(253, 251, 235, 0.8); --cab-fg: var(--ink); --cab-luz: var(--luz-creme);
  --cab-hover: rgba(26, 36, 39, 0.06); --cab-atual: rgba(26, 36, 39, 0.1);
  --cab-cta: var(--ink); --cab-cta-fg: var(--cream); --cab-cta-ic: rgba(253, 251, 235, 0.16); --cab-cta-ic-fg: var(--cream); --cab-solido: var(--cream); --cab-marca: rgba(26, 36, 39, 0.94); --cab-wa: #128c4b;
}
.bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; padding: var(--bar-pad) var(--edge-topo); transition: padding 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.scrolled .bar { padding-block: 0.5rem; } /* ao descer, o cabeçalho aproxima-se do topo */
.nav, .menu-btn { -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); transition: background 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
/* logótipo solto, sem cápsula, alinhado com o título do topo; muda de cor com o fundo, como o menu */
.brand { justify-self: start; height: 2.75rem; color: var(--cab-fg); transition: color 0.4s var(--ease); }
.brand .logo { height: 1.5rem; transition: filter 0.4s var(--ease); }
.brand .logo { filter: drop-shadow(0 1px 0.75rem rgba(16, 24, 26, 0.35)); } /* lê-se sobre qualquer foto */
.cab-claro .brand .logo, .menu-open .brand .logo { filter: none; }
.nav { grid-column: 2; height: 2.75rem; padding: 0.25rem; border-radius: var(--pill); background: var(--brilho), var(--cab-vidro); color: var(--cab-fg); box-shadow: var(--cab-luz), var(--sombra-suave); }
.nav a { height: 2.25rem; padding: 0 1rem; border-radius: var(--pill); font-size: 0.9rem; transition: background 0.3s var(--ease); }
.nav a::after { display: none; } /* sem sublinhado: a secção onde se está fica numa pílula, como no iOS */
.nav a:hover { background: var(--cab-hover); }
.nav a[aria-current] { background: var(--cab-atual); font-weight: 600; }
.cab-acoes { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
.bar-cta, .menu-btn { margin-left: 0; }
/* WhatsApp no cabeçalho: círculo de vidro com o ícone verde (o botão flutuante do canto tapava controlos) */
.cab-wa { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--brilho), var(--cab-vidro); color: var(--cab-wa); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); box-shadow: var(--cab-luz), var(--sombra-suave); transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.cab-wa .ic { width: 1.375rem; height: 1.375rem; }
.cab-wa:hover { transform: translateY(-0.125rem); }
.bar-cta { height: 2.75rem; padding: 0 0.25rem 0 1.125rem; border-radius: var(--pill); background: var(--cab-cta); color: var(--cab-cta-fg); font-size: 0.9rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--sombra-suave); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.bar-cta .ic { width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%; background: var(--cab-cta-ic); color: var(--cab-cta-ic-fg); } /* 36 dentro de 44 */
.bar-cta:hover .ic { background: var(--asia); color: var(--ink-0); }
.menu-btn { border-radius: 50%; background: var(--brilho), var(--cab-vidro); color: var(--cab-fg); box-shadow: var(--cab-luz), var(--sombra-suave); }
.menu-btn span { background: currentColor; }
/* efeito de borda do iOS 26: ao descer, o conteúdo esbate-se por baixo do cabeçalho */
.header::before { content: ""; position: absolute; inset: 0 0 -1rem 0; -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); -webkit-mask: linear-gradient(#000 45%, transparent); mask: linear-gradient(#000 45%, transparent); opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.scrolled .header::before { opacity: 1; }
.menu-open .header::before { opacity: 0; }
/* menu do telemóvel: folha de vidro creme espesso, recolhida 8 px do ecrã e com cantos redondos */
.drawer { inset: 0.5rem; border-radius: 2rem; padding: 6.5rem 1.5rem 1.5rem; background: var(--brilho), rgba(253, 251, 235, 0.86); -webkit-backdrop-filter: blur(1.5rem) saturate(1.5); backdrop-filter: blur(1.5rem) saturate(1.5); box-shadow: var(--luz-creme), var(--sombra-suave); clip-path: inset(0 0 100% 0 round 2rem); }
.menu-open .drawer { clip-path: inset(0 0 0 0 round 2rem); }
.drawer-foot { gap: 0.5rem; }
.drawer-foot a { padding: 0 1rem; border-radius: var(--pill); background: rgba(26, 36, 39, 0.07); }

/* ---- botões: cápsulas, a seta num círculo concêntrico (4 px de folga) ---- */
.btn { border: 0; border-radius: var(--pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0.375rem 1rem rgba(16, 24, 26, 0.14); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), background 0.4s var(--ease), color 0.4s var(--ease); }
.btn:has(> .ic:not(.lead)) { padding-right: 0.25rem; }
.btn > .ic:not(.lead) { width: 2.75rem; height: 2.75rem; padding: 0.75rem; margin: 0; border-radius: 50%; } /* 44 dentro de 52 */
.btn-line { background: var(--vg); box-shadow: var(--vg-luz); }
.btn-line:hover { background: var(--vg-on); }
.btn:active, .pass-go:active, .round:active, .chip-btn:active, .q-back:active, .stepper button:active, .f-top:active { transform: scale(0.96); }
.hero .btn-line { background: var(--vc); -webkit-backdrop-filter: blur(0.75rem) saturate(1.6); backdrop-filter: blur(0.75rem) saturate(1.6); box-shadow: var(--vc-luz); color: #fff; }
.hero .btn-line > .ic:not(.lead) { background: rgba(255, 255, 255, 0.18); }
.pass-go { padding: 0 0.25rem 0 1rem; border-radius: var(--pill); box-shadow: inset 0 1px 0 rgba(253, 251, 235, 0.14); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.pass-go .ic { width: 2.5rem; height: 2.5rem; padding: 0.625rem; border-radius: 50%; } /* 40 dentro de 48; o padding define o desenho de 20 px */
.row-link .ic, .c-tile > .ic:last-child, .faq-ic, .ex-list .ic, .pass-line .ic, .ticket-plane { border-radius: 50%; }
.route-plane { border-radius: 50%; background: var(--brilho), var(--vidro-creme); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); box-shadow: var(--luz-creme), var(--sombra-suave); }
.round { border: 0; border-radius: 50%; background: var(--vg); box-shadow: var(--vg-luz); transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
.round:hover { background: var(--fg); color: var(--ground); }
.q-back { padding: 0 1rem 0 0.75rem; border-radius: var(--pill); background: var(--vg); box-shadow: var(--vg-luz); }
.ticket-wa { padding: 0 1rem; border-radius: var(--pill); background: rgba(253, 251, 235, 0.1); }

/* ---- etiquetas e botões sobre fotografias: vidro transparente ---- */
.pass-cont, .pass-count, .idea-tag, .idea-trend, .q-card-cont, .ex-photo figcaption, .pass-share { background: var(--vc); -webkit-backdrop-filter: blur(0.5rem) saturate(1.6); backdrop-filter: blur(0.5rem) saturate(1.6); box-shadow: var(--vc-luz); color: #fff; }
.pass-cont, .pass-count, .idea-tag, .idea-trend, .q-card-cont, .ex-photo figcaption { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; padding: 0 0.75rem; border-radius: var(--pill); }
.pass-cont::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.6); }
.q-card-cont::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c); }
.pass-count.hot, .idea-tag.ep-baixa, .idea-tag.ep-ideal { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.pass-count.hot { background: var(--asia); color: var(--ink-0); }
.idea-tag.ep-baixa { background: var(--america); color: var(--ink-0); }
.idea-tag.ep-ideal { background: var(--cream); color: var(--ink); }
.idea-trend .ic { color: var(--asia); }
.pass-share { border-radius: 50%; }
.pass-share:hover { background: var(--asia); color: var(--ink-0); }
.pass-share.feito::after { border-radius: var(--pill); padding: 0.25rem 0.75rem; }
/* rodapé do topo: cápsula de vidro com o lugar e a época; à direita, o indicador de páginas do iOS */
.hero-meta { left: var(--edge-topo); right: var(--edge-topo); gap: 0.25rem 1rem; min-height: 2.5rem; padding: 0.25rem 0.5rem 0.25rem 1rem; border-radius: 1.25rem; background: var(--vc); -webkit-backdrop-filter: blur(0.75rem) saturate(1.6); backdrop-filter: blur(0.75rem) saturate(1.6); box-shadow: var(--vc-luz); font-size: 0.875rem; }
.hero-dots { gap: 0; align-items: center; }
.hero-dots button { width: 1rem; height: 1.75rem; display: grid; place-items: center; transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.hero-dots i { width: 0.4375rem; height: 0.4375rem; border-radius: var(--pill); background: rgba(255, 255, 255, 0.5); transition: width 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.hero-dots .on { width: 2rem; }
.hero-dots .on i { width: 1.5rem; }
.hero-dots i::after { border-radius: inherit; background: #fff; }

/* ---- controlos segmentados, opções e campos ---- */
.months { gap: 0.25rem; padding: 0.25rem; border-block: 0; border-radius: var(--pill); background: var(--vg); box-shadow: var(--vg-luz); }
.month, .month:first-child { border-left: 0; border-radius: var(--pill); min-height: 3.5rem; background: transparent; transition: background 0.4s cubic-bezier(0.32, 0.72, 0, 1), color 0.3s, box-shadow 0.4s; }
.month:hover { background: var(--vg-on); }
.month[aria-selected="true"] { background: var(--fg); color: var(--ground); box-shadow: 0 0.125rem 0.5rem rgba(16, 24, 26, 0.18); }
.chip span, .chip-btn { border: 0; border-radius: var(--pill); background: var(--vg); box-shadow: var(--vg-luz); }
.chip:hover span { background: var(--vg-on); }
.chip input:checked + span, .plan .chip input:checked + span { box-shadow: none; }
.input { border: 0; border-radius: 0.875rem; background: var(--vg); box-shadow: var(--vg-luz); transition: box-shadow 0.3s, background 0.3s; }
.input:focus { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--fg), 0 0 0 4px color-mix(in srgb, var(--fg) 12%, transparent); }
.stepper button { border: 0; border-radius: 50%; background: var(--vg); box-shadow: var(--vg-luz); transition: background 0.3s, color 0.3s, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
/* caixa de verificação redonda, como no iOS (continua a ser uma caixa de verificação de verdade) */
.check input { appearance: none; -webkit-appearance: none; width: 1.375rem; height: 1.375rem; margin-top: 1px; border-radius: 50%; background: var(--vg) center / 0.875rem no-repeat; box-shadow: inset 0 0 0 1.5px var(--ln-2); cursor: pointer; transition: background-color 0.25s, box-shadow 0.25s; }
.check input:checked { background-color: var(--asia); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310181a' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.check input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.quiz-prog { height: 0.375rem; border-radius: var(--pill); }
.quiz-prog i { border-radius: inherit; }
.wz-prog i { border-radius: var(--pill); }
.q-ic { border-radius: 0.75rem; }
.trust-ic { border-radius: 0.75rem; }
.pass-inc li, .idea-meta li { min-height: 1.75rem; padding: 0 0.75rem; border-radius: var(--pill); }
.idea-event, .form-msg { border-radius: 0.875rem; }

/* ---- painel do contacto: vidro creme espesso sobre a foto ---- */
.contact-grid.t-cream { border-radius: 2rem; background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 45%), rgba(253, 251, 235, 0.8); -webkit-backdrop-filter: blur(1.75rem) saturate(1.6); backdrop-filter: blur(1.75rem) saturate(1.6); box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(253, 251, 235, 0.4), 0 1.5rem 3rem rgba(16, 24, 26, 0.25); }

/* entradas: além de subir, os blocos ganham nitidez (como vidro a desembaciar) */
.rv { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); }
.rv.pre { filter: blur(0.375rem); }
.rail .rv.pre { filter: none; }

@media (min-width: 901px) and (max-width: 1099px) {
  /* ecrãs médios: o menu centra-se no espaço entre o logótipo e os botões (centrado no ecrã ficava a 7 px do WhatsApp) */
  .bar { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; }
  .nav { justify-self: center; }
  .nav a { padding: 0 0.75rem; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero-coord { display: none; } /* no tablet a cápsula do topo cabe numa linha sem as coordenadas */
}
@media (max-width: 900px) {
  /* continentes no telemóvel e no tablet: controlo segmentado de vidro sobre a cor do continente */
  .ex-list { gap: 0.25rem; padding: 0.25rem; border: 0; border-radius: var(--pill); background: var(--vg); box-shadow: var(--vg-luz); }
  .ex-list button, .ex-list button:first-child { min-height: 3rem; border: 0; border-radius: var(--pill); }
  .ex-list button[aria-selected="true"] { box-shadow: 0 0.125rem 0.5rem rgba(16, 24, 26, 0.2); }
}
@media (max-width: 640px) {
  /* o cabeçalho continua em cápsulas a flutuar depois de descer (o conteúdo esbate-se por baixo) */
  .scrolled .bar, .menu-open .bar { padding-block: var(--bar-pad); background: transparent; box-shadow: none; }
  .bar { grid-template-columns: 1fr auto; }
  .cab-acoes { grid-column: 2; }
  .cab-wa { display: none; } /* no telemóvel o WhatsApp está na barra de baixo */
  .scrolled .menu-btn { box-shadow: var(--cab-luz), var(--sombra-suave); }
  .hero-meta { left: var(--gut); right: var(--gut); bottom: 0.75rem; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; border-radius: 1.25rem; font-size: 0.82rem; } /* alinhada com a coluna (16 px) */
  .hero-dots { flex: 1 1 100%; justify-content: center; margin: 0; gap: 0; }
  .hero-dots button { flex: none; width: 1rem; height: 1.25rem; }
  .hero-dots .on { width: 2rem; }
  .months { margin-inline: 0; }
  .month { min-height: 3rem; }
  .pass-go { padding-left: 1rem; }
  .pass-go .ic { width: 2.25rem; height: 2.25rem; padding: 0.5rem; } /* 36 dentro de 44 */
  .rail-pos .round { margin-left: 0; }
  .rail-bar, .rail-bar i { border-radius: var(--pill); }
  .wz-resumo { border-radius: 0.875rem; }
  /* barra de baixo: cápsula de vidro escuro a flutuar, com o WhatsApp e o botão principal */
  .mobile-bar { left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); grid-template-columns: auto 1fr; align-items: center; gap: 0.25rem; padding: 0.25rem; border-top: 0; border-radius: var(--pill); background: var(--brilho), rgba(16, 24, 26, 0.78); -webkit-backdrop-filter: blur(1rem) saturate(1.6); backdrop-filter: blur(1rem) saturate(1.6); box-shadow: var(--luz-escura), var(--sombra-suave); transform: translateY(calc(100% + 2rem)); }
  .bar-on .mobile-bar { transform: none; }
  .menu-open .mobile-bar { transform: translateY(calc(100% + 2rem)); }
  .mobile-bar a { min-height: 3rem; border-radius: var(--pill); }
  .mobile-bar a:first-child { padding: 0 1rem 0 0.75rem; }
  .mobile-bar .m-main { padding: 0 0.25rem 0 1rem; box-shadow: var(--luz-creme); }
  .mobile-bar .m-main .ic { width: 2.5rem; height: 2.5rem; padding: 0.625rem; border-radius: 50%; } /* 40 dentro de 48 */
  .footer { padding-bottom: 6.5rem; } /* a barra a flutuar não tapa a última linha */
  /* botões do formulário colados ao fundo: cápsula de vidro na cor da banda */
  .wz-nav { margin: 1rem -0.5rem 0; padding: 0.25rem; border-top: 0; border-radius: var(--pill); bottom: calc(0.5rem + env(safe-area-inset-bottom)); background: var(--brilho), color-mix(in srgb, var(--ground) 80%, transparent); -webkit-backdrop-filter: blur(1rem) saturate(1.5); backdrop-filter: blur(1rem) saturate(1.5); box-shadow: var(--vg-luz), var(--sombra-suave); }
  .contact-grid.t-cream { border-radius: 1.5rem; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav, .menu-btn { background: var(--cab-solido); }
  .drawer { background: var(--cream); }
  .mobile-bar { background: var(--ink-0); }
  .wz-nav { background: var(--ground); }
  .contact-grid.t-cream { background: var(--cream); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .menu-btn { background: var(--cab-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .drawer { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobile-bar { background: var(--ink-0); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wz-nav { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .contact-grid.t-cream { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero .btn-line, .hero-meta, .pass-cont, .pass-count, .idea-tag, .idea-trend, .q-card-cont, .ex-photo figcaption, .pass-share { background: rgba(16, 22, 24, 0.82); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* páginas legais (privacidade, termos, cookies): título contido na coluna de leitura */
.legal .h2 { font-size: clamp(2.6rem, calc(7vw * var(--k)), 4.8rem); }

/* texto só para leitores de ecrã (avisos como "Ligação copiada") */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Acessibilidade: ligação para saltar para o conteúdo (visível só com o teclado) */
.skip-link { position: fixed; left: 0.75rem; top: -3.75rem; z-index: 1000; padding: 0.5rem 1rem;
  background: #0d0d0d; color: #fff; font-weight: 600; text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 0.75rem; outline: 3px solid #fff; outline-offset: 2px; }