/* ═══════════════════════════════════════════════════════════════════════════
   QUINTA DO ONDAS — o desenho da página (16-10-2026)
   ═══════════════════════════════════════════════════════════════════════════

   Folha ÚNICA e independente. Carrega depois do `css/styles.css` (que veste o
   cabeçalho e o rodapé comuns do site) e não depende do `v2.css` nem de nada do
   site novo: foi essa mistura que sujou a primeira tentativa.

   A regra que manda, nas palavras da Onda d'Ideias:
       «o layout do Onda Play é que manda — LAYOUT, LETTERING, FORMA DE
        APRESENTAR, FONTS»

   Por isso os valores aqui são COPIADOS do `ondaplay.php`, não aproximados:
   o fundo #0a0e27, os cartões #1a1f3a→#2a2f4a, o ciano #00d4ff, o traço em
   degradé por baixo dos títulos, o brilho a correr nos quadros, as bolinhas do
   CTA. Onde se vê um número estranho (150px, 5px, 25px, 50px 30px) é porque é
   o número que lá está.

   Títulos: TODOS a branco. Nada de uma palavra noutra cor — «AS NOSSAS a
   branco e ATIVIDADES a azul é para tirar, é tudo a branco, e nos outros
   títulos também».
   ═══════════════════════════════════════════════════════════════════════════ */

.pagina-quinta-ondas {
    /* A paleta do Onda Play, num sítio só. */
    --qo-fundo:      #0a0e27;
    --qo-fundo-alto: #1a1f3a;
    --qo-cartao-a:   #1a1f3a;
    --qo-cartao-b:   #2a2f4a;
    --qo-ciano:      #00d4ff;
    --qo-laranja:    #ff6b35;
    --qo-ouro:       #ffd700;
    --qo-tinta:      #ffffff;
    --qo-tinta-fraca: rgba(255, 255, 255, .8);

    background: var(--qo-fundo);
    color: var(--qo-tinta);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    padding-top: 0;  /* não há cabeçalho fixo nesta página */
    margin: 0;
}
.pagina-quinta-ondas *,
.pagina-quinta-ondas *::before,
.pagina-quinta-ondas *::after { box-sizing: border-box; }

/* ───────────────────────────────────────────────────────────────────────────
   O atalho para o site, no canto direito
   ─────────────────────────────────────────────────────────────────────────── */
.qo-voltar {
    position: fixed; top: 20px; right: 20px; z-index: 10003;
    display: block; padding: 10px;
    background: rgba(10, 14, 39, .7);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
    transition: all .3s ease;
}
.qo-voltar:hover {
    background: rgba(10, 14, 39, .9);
    border-color: rgba(0, 212, 255, .5);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 212, 255, .3);
}
.qo-voltar img { height: 40px; width: auto; display: block; transition: transform .3s ease; }
.qo-voltar:hover img { transform: scale(1.1); }

/* ───────────────────────────────────────────────────────────────────────────
   1. O herói — ecrã inteiro, como no Onda Play
   ─────────────────────────────────────────────────────────────────────────── */
.qo-heroi {
    position: relative; width: 100%; height: 100vh; min-height: 600px;
    overflow: hidden;
}
.qo-heroi-media {
    position: absolute; top: 50%; left: 50%;
    min-width: 100%; min-height: 100%; width: auto; height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover; z-index: 1;
}
.qo-heroi-veu {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(135deg, rgba(10, 14, 39, .7) 0%, rgba(0, 156, 166, .5) 100%);
}
/* A marca da Quinta no canto esquerdo, a flutuar — o lugar do logótipo do
   Onda Play. */
.qo-heroi-logo {
    position: absolute; top: 20px; left: 40px; z-index: 10003;
    max-width: 200px; width: auto; height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5));
    animation: qoFlutua 3s ease-in-out infinite;
}
.qo-heroi-texto {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10002; width: 100%; max-width: 1200px; padding: 0 20px;
    text-align: center; color: #fff;
    animation: qoEntra 1.5s ease-out forwards;
}

/* O lettering do herói do Onda Play: maiúsculas, degradé recortado nas letras.

   ARMADILHA, e custou duas rondas: `background:` abreviado REPÕE o
   `background-clip` em `border-box`. Numa afinação anterior redeclarei o
   degradé com a forma curta mais abaixo na folha e o recorte foi-se — o
   degradé saiu como um RECTÂNGULO atrás do título e as letras, transparentes,
   só mostravam a sombra: era o "esborratado". Aqui declara-se UMA vez, e se
   alguma vez for preciso mudar a cor usa-se `background-image`, nunca
   `background`. */
.qo-heroi-titulo {
    margin: 0 0 20px;
    font-size: clamp(1.9rem, 5vw, 2.5em);
    font-weight: bold; text-transform: uppercase; letter-spacing: 3px;
    line-height: 1.15;
    text-shadow: 0 5px 20px rgba(0, 0, 0, .8);
    /* AS CORES: laranja → dourado, sem azul à esquerda.
       O degradé do Onda Play é `45deg, #00d4ff, #ff6b35, #ffd700` — mas lá o
       ciano NUNCA SE VÊ, e a razão é geométrica: "Diversão Sem Limites" é
       curto e as letras ficam no meio de uma caixa larga, por isso só apanham
       a parte do meio do degradé. O nosso título é comprido, atravessa a caixa
       toda e apanhava o ciano do canto esquerdo. Copiar a regra dava um
       resultado diferente do original.
       Então copia-se o que SE VÊ, não o que está escrito: o mesmo laranja e o
       mesmo dourado, na mesma diagonal. */
    background: linear-gradient(45deg, #ff5722 0%, #ff6b35 38%, #ffd700 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

.qo-desce {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 3; color: #fff; font-size: 2em; text-decoration: none;
    animation: qoSalta 2s infinite;
}

/* ───────────────────────────────────────────────────────────────────────────
   O esqueleto das secções
   ─────────────────────────────────────────────────────────────────────────── */
.qo-sec { padding: 100px 40px; position: relative; overflow: hidden; }
.qo-caixa { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.qo-caixa-estreita { max-width: 900px; }

/* As secções alternam o sentido do degradé, como no Onda Play: o fundo nunca
   dá um degrau entre blocos. */
.qo-sec-intro,
.qo-sec-aprender,
.qo-sec-espaco   { background: linear-gradient(180deg, #0a0e27 0%, #1a1f3a 100%); }
.qo-sec-trilho,
.qo-sec-publicos,
.qo-sec-faq,
.qo-sec-galeria  { background: linear-gradient(180deg, #1a1f3a 0%, #0a0e27 100%); }

/* O pontilhado a andar devagar por trás — o `videos-section::before` do Onda
   Play. Só nas secções de fundo mais claro, para não pesar. */
.qo-sec-aprender::before,
.qo-sec-espaco::before {
    content: ''; position: absolute; inset: 0; opacity: .3; pointer-events: none;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(0,212,255,0.1)"/></svg>');
    animation: qoFundoAnda 20s linear infinite;
}

/* O título e o traço em degradé por baixo: a assinatura do Onda Play.
   TUDO A BRANCO — nenhuma palavra em cor diferente. */
/* O AR POR BAIXO DO TÍTULO.
   São 80px até ao que vem a seguir, e o traço em degradé fica a 20 — sobram
   **60px entre a linha e o conteúdo**. Eram 40, que é o que dá a margem de 60
   do Onda Play depois de descontar a linha; chegava enquanto havia uma frase
   debaixo do título a fazer de almofada. Tiradas as frases (17-10-2026), o
   conteúdo encostou-se à linha. */
.qo-titulo {
    position: relative; z-index: 1;
    margin: 0 0 80px;
    font-size: clamp(2rem, 4vw, 3.5em);
    color: #fff; text-align: center;
    text-transform: uppercase; letter-spacing: 4px; font-weight: 700;
    line-height: 1.15;
}
.qo-titulo::after {
    content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
    width: 150px; height: 5px; border-radius: 3px;
    background: linear-gradient(90deg, #00d4ff, #ff6b35, #ffd700);
}
/* A frase debaixo do título é a mesma em todos os blocos — e é a do Onda Play
   (o `about-text`): 1.3em, entrelinha 2, branco de 90%. Está aqui numa classe
   só de propósito; mudar aqui muda no "O que aprendemos", no "Descobre cada
   momento" e em todos os outros ao mesmo tempo. */
.qo-lead {
    max-width: 1000px; margin: 0 auto 10px; text-align: center;
    color: rgba(255, 255, 255, .9); font-size: 1.3em; line-height: 2;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. Apresentação
   ─────────────────────────────────────────────────────────────────────────── */
/* Este bloco é o "Sobre o Onda Play", à letra: a primeira frase a CIANO, a
   segunda a branco de 90%, as duas a 1.3em com entrelinha 2, tudo centrado
   numa caixa de 1000px. Foi o que a Onda d'Ideias pediu — «o lettering e cores
   desse bloco deveria ser igual ao bloco SOBRE O ONDA PLAY» —, e por isso a
   letra é a do Onda Play (Segoe UI), não uma fonte à parte. */
.qo-sec-intro { padding-top: 100px; padding-bottom: 100px; }
.qo-intro { max-width: 1000px; text-align: center; }
/* O logótipo abre a apresentação. Sem moldura nenhuma à volta — a Onda d'Ideias
   foi clara sobre isso: «não coloques o logo dentro de uma caixa». A moldura
   ciano do `about-image` é para FOTOGRAFIAS; uma marca não leva caixa. */
.qo-intro-marca { display: block; width: min(380px, 72%); height: auto; margin: 0 auto 40px; }
/* A frase parte-se em duas cores: "Na nossa quinta," a branco e só
   "aprender é uma aventura!" a ciano. É o mesmo par do "Sobre o Onda Play",
   onde o ciano marca o que interessa e o resto fica branco. */
.qo-intro-destaque {
    margin: 0 0 15px;
    color: rgba(255, 255, 255, .9); font-size: 1.3em; line-height: 2;
}
.qo-intro-destaque strong { color: #00d4ff; font-weight: bold; }
.qo-intro-texto {
    margin: 0;
    color: rgba(255, 255, 255, .9); font-size: 1.3em; line-height: 2;
}

/* ───────────────────────────────────────────────────────────────────────────
   3. O trilho das atividades
   ───────────────────────────────────────────────────────────────────────────
   Isto é a única coisa da página antiga que se trouxe tal e qual, porque eles
   disseram que gostaram: a vereda picotada que se vai enchendo à medida que se
   desce. O caminho é desenhado pelo JavaScript pelas posições reais dos marcos.
*/
.qo-trilho { position: relative; max-width: 1040px; margin: 54px auto 0; padding: 10px 0 40px; }
.qo-trilho-linha { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; overflow: visible; }
/* O `vector-effect` é o que mantém a vereda com a MESMA grossura seja qual for
   a largura do ecrã: sem ele o SVG estica o traço com o viewBox. */
.qo-trilho-linha path { fill: none; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.qo-trilho-base  { stroke: rgba(255, 255, 255, .18); stroke-dasharray: 2 26; }
/* O TRAÇO SEGUE O SCROLL, SEM ATRASO NENHUM.
   Duas coisas o travavam, e as duas eram minhas:

   1. um `filter: drop-shadow` para o fazer brilhar. Um filtro num caminho que
      MUDA a cada frame obriga o browser a redesenhar a área do filtro toda de
      cada vez — e o desenho não chega a acompanhar o dedo;
   2. uma `transition: .1s`. Numa propriedade que se actualiza a cada scroll,
      a transição não suaviza nada: faz a linha chegar sempre um décimo de
      segundo ATRÁS, que é a sensação de "mede primeiro e só depois preenche".

   Sem os dois, o `stroke-dashoffset` é escrito e desenhado no mesmo frame.
   O brilho fica por conta do ciano sobre o fundo escuro, que já chega. */
.qo-trilho-feito {
    stroke: var(--qo-ciano);
    stroke-dasharray: var(--comprimento, 2000);
    stroke-dashoffset: var(--falta, var(--comprimento, 2000));
}

.qo-paragem { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; margin-bottom: 72px; }
.qo-paragem:last-child { margin-bottom: 0; }
.qo-paragem-marco {
    grid-column: 2; z-index: 2;
    width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
    font-size: 34px; color: #06121f;
    background: var(--qo-cor-paragem, var(--qo-ciano));
    /* O aro grosso da cor do fundo é o que "abre" um buraco na vereda para o
       marco assentar: a linha passa por trás e parece entrar nele. */
    box-shadow: 0 0 0 10px #151a33, 0 18px 34px -12px rgba(0, 0, 0, .7);
}
.qo-paragem-corpo {
    grid-column: 1; text-align: right;
    background: linear-gradient(135deg, var(--qo-cartao-a) 0%, var(--qo-cartao-b) 100%);
    border-radius: 26px; padding: 28px 32px; margin-right: 96px; padding-right: 54px;
    box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .7);
    border-top: 5px solid var(--qo-cor-paragem, var(--qo-ciano));
}
.qo-paragem:nth-of-type(even) .qo-paragem-corpo { grid-column: 3; text-align: left; margin-right: 0; margin-left: 96px; padding-right: 32px; padding-left: 54px; }

/* O MARCO DESVIA-SE PARA O LADO DO SEU CARTÃO.
   É ISTO que faz a vereda serpentear: o JavaScript desenha o caminho pela
   posição REAL de cada marco, por isso basta deslocá-los aqui — o trilho
   curva-se sozinho, e no telemóvel, onde não há desvio, endireita-se.
   Sem estas duas linhas os marcos ficam todos na mesma coluna e o trilho sai
   um RISCO A DIREITO. Foi o que aconteceu quando reescrevi isto de memória. */
.qo-paragem:nth-of-type(odd)  .qo-paragem-marco { transform: translateX(-56px); }
.qo-paragem:nth-of-type(even) .qo-paragem-marco { transform: translateX(56px); }

/* Cada paragem com a sua cor, e ela pinta o marco, o friso do cartão, o título
   e as pastilhas das atividades. */
.qo-paragem:nth-of-type(1) { --qo-cor-paragem: #00d4ff; }
.qo-paragem:nth-of-type(2) { --qo-cor-paragem: #ffd700; }
.qo-paragem:nth-of-type(3) { --qo-cor-paragem: #ff6b35; }

.qo-paragem-corpo h3 {
    margin: 0 0 16px; font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    color: var(--qo-cor-paragem, #fff);
    text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; line-height: 1.2;
}
.qo-frutos {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end;
}
.qo-paragem:nth-of-type(even) .qo-frutos { justify-content: flex-start; }
/* As atividades são o conteúdo desta secção — aparecem sempre. Na primeira
   tentativa dependiam de uma classe que outro script punha, e como esse script
   não estava nesta página ficaram invisíveis: havia títulos e não havia
   atividades nenhumas. Não voltam a depender de JavaScript para se verem. */
.qo-frutos li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 99px; font-weight: 600; font-size: .96rem;
    color: #fff;
    background: color-mix(in srgb, var(--qo-cor-paragem) 16%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--qo-cor-paragem) 45%, transparent);
    transition: background .25s, transform .25s;
}
.qo-frutos li:hover { background: color-mix(in srgb, var(--qo-cor-paragem) 30%, transparent); transform: translateY(-2px); }
.qo-frutos li i { font-size: 1.05em; color: var(--qo-cor-paragem); }

/* ───────────────────────────────────────────────────────────────────────────
   4. O que aprendemos na quinta — os quadros do Onda Play
   ───────────────────────────────────────────────────────────────────────────
   Três por linha e TODOS DA MESMA ALTURA. O `grid-auto-rows: 1fr` é o que
   iguala as linhas entre si; sem ele a segunda linha encolhia ao seu conteúdo e
   um quadro sozinho ficava mais baixo do que os outros cinco. */
.qo-grelha {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
    gap: 30px; max-width: 1200px; margin: 60px auto 0;
}
.qo-quadro {
    position: relative; overflow: hidden; height: 100%;
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(135deg, var(--qo-cartao-a) 0%, var(--qo-cartao-b) 100%);
    border: 3px solid transparent; border-radius: 25px;
    padding: 40px 28px; text-align: center;
    transition: all .4s cubic-bezier(.175, .885, .32, 1.275);
}
/* O brilho que corre na diagonal ao passar o rato — `shine`, do Onda Play. */
.qo-quadro::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(0, 212, 255, .1), transparent);
    transform: rotate(45deg); transition: all .6s; pointer-events: none;
}
.qo-quadro:hover::before { animation: qoBrilho 1.5s infinite; }
.qo-quadro:hover { transform: translateY(-14px); }
/* O ícone fica em 3.2em e não nos 5em do Onda Play: lá os quadros são quatro
   numa linha com títulos de uma palavra ("PAINTBALL"), aqui são três com
   frases inteiras, e a 5em os cartões ficavam, nas palavras da Onda d'Ideias,
   "gigantérrimos". */
.qo-quadro-icone {
    font-size: 3.2em; margin-bottom: 22px; display: block;
    transition: all .4s; position: relative; z-index: 2;
}
.qo-quadro:hover .qo-quadro-icone { transform: scale(1.25) rotate(10deg); filter: drop-shadow(0 0 20px currentColor); }
/* O LETTERING é o do `activity-title` e do `activity-description` do Onda Play,
   à letra: título a 1.8em, maiúsculas, espaçado a 2px; texto a 1em com
   entrelinha 1.6 e branco de 80%. */
.qo-quadro h3 {
    position: relative; z-index: 2; margin: 0 0 15px;
    font-size: 1.8em; color: #fff; font-weight: bold;
    text-transform: uppercase; letter-spacing: 2px; line-height: 1.2;
}
.qo-quadro p {
    position: relative; z-index: 2; margin: 0;
    color: rgba(255, 255, 255, .8); font-size: 1em; line-height: 1.6;
}

/* Cada atividade com a SUA cor: o fundo, o ícone, a moldura e a sombra do
   hover. Era o que faltava — antes só o ícone mudava de cor e os seis quadros
   pareciam todos o mesmo. */
.qo-quadro:nth-child(1) { background: linear-gradient(135deg, #16243f 0%, #1e3350 100%); }
.qo-quadro:nth-child(1) .qo-quadro-icone { color: #00d4ff; }
.qo-quadro:nth-child(1):hover { border-color: #00d4ff; box-shadow: 0 20px 60px rgba(0, 212, 255, .4); }

.qo-quadro:nth-child(2) { background: linear-gradient(135deg, #2a1d1a 0%, #3d2a22 100%); }
.qo-quadro:nth-child(2) .qo-quadro-icone { color: #ff6b35; }
.qo-quadro:nth-child(2):hover { border-color: #ff6b35; box-shadow: 0 20px 60px rgba(255, 107, 53, .4); }

.qo-quadro:nth-child(3) { background: linear-gradient(135deg, #2b2718 0%, #3d3722 100%); }
.qo-quadro:nth-child(3) .qo-quadro-icone { color: #ffd700; }
.qo-quadro:nth-child(3):hover { border-color: #ffd700; box-shadow: 0 20px 60px rgba(255, 215, 0, .4); }

.qo-quadro:nth-child(4) { background: linear-gradient(135deg, #15291f 0%, #1d3a2c 100%); }
.qo-quadro:nth-child(4) .qo-quadro-icone { color: #00ff88; }
.qo-quadro:nth-child(4):hover { border-color: #00ff88; box-shadow: 0 20px 60px rgba(0, 255, 136, .4); }

.qo-quadro:nth-child(5) { background: linear-gradient(135deg, #2b1726 0%, #3d2035 100%); }
.qo-quadro:nth-child(5) .qo-quadro-icone { color: #ff1493; }
.qo-quadro:nth-child(5):hover { border-color: #ff1493; box-shadow: 0 20px 60px rgba(255, 20, 147, .4); }

.qo-quadro:nth-child(6) { background: linear-gradient(135deg, #14262b 0%, #1c373e 100%); }
.qo-quadro:nth-child(6) .qo-quadro-icone { color: #00bfff; }
.qo-quadro:nth-child(6):hover { border-color: #00bfff; box-shadow: 0 20px 60px rgba(0, 191, 255, .4); }

/* ───────────────────────────────────────────────────────────────────────────
   5. Para quem são os nossos programas
   ───────────────────────────────────────────────────────────────────────────
   Uma grelha DIREITA. A primeira versão era um leque de cartas tortas que se
   endireitavam ao passar o rato: «não quero este baralho de cartas, quero
   direito». */
.qo-publicos {
    display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr;
    gap: 26px; max-width: 1300px; margin: 60px auto 0;
}
.qo-publico {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: linear-gradient(135deg, var(--qo-cartao-a) 0%, var(--qo-cartao-b) 100%);
    border: 2px solid rgba(255, 255, 255, .07); border-radius: 22px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .5);
    transition: transform .4s, box-shadow .4s, border-color .4s;
}
.qo-publico:hover { transform: translateY(-12px); border-color: var(--qo-ciano); box-shadow: 0 25px 60px rgba(0, 212, 255, .35); }
/* A moldura manda, não a fotografia: com a imagem em `absolute` ela deixa de
   contar para a altura e o `aspect-ratio` fica a mandar. */
.qo-publico-imagem { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0d1226; }
.qo-publico-imagem img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.qo-publico:hover .qo-publico-imagem img { transform: scale(1.07); }
/* o lugar da fotografia que ainda não existe */
.qo-sem-foto {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 2.4rem; color: rgba(0, 212, 255, .45);
    background: repeating-linear-gradient(135deg, #121a33 0 14px, #0d1226 14px 28px);
}
.qo-publico-texto { padding: 22px 22px 26px; }
.qo-publico-texto h3 {
    margin: 0 0 10px; color: #fff; font-size: 1rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 1px; line-height: 1.3;
}
.qo-publico-texto p { margin: 0; color: var(--qo-tinta-fraca); font-size: .9rem; line-height: 1.6; }

/* ───────────────────────────────────────────────────────────────────────────
   6. O mapa do espaço
   ─────────────────────────────────────────────────────────────────────────── */
.qo-mapa-fora { position: relative; max-width: 1400px; margin: 60px auto 0; }
/* O "container": os pontos e os cartões medem-se em `cqw` — a largura DO MAPA.
   Em `vw` ficavam enormes em ecrã inteiro e minúsculos aqui. */
.qo-mapa-quadro { container-type: inline-size; }
.qo-mapa {
    position: relative; border-radius: 26px; overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .1);
    box-shadow: 0 28px 60px -26px rgba(0, 0, 0, .8);
    background: #0d1226;
}
.qo-mapa > img { width: 100%; height: auto; display: block; }

/* ── O ponto ────────────────────────────────────────────────────────────
   Discreto até lhe tocarem: VIDRO FOSCO com um aro fino, para DEIXAR VER O
   MAPA por baixo. A sombra do ícone é o que o faz ler-se tanto sobre a relva
   como sobre um telhado. Um pino opaco tapa o desenho que é a graça do mapa —
   e o desenho é do cliente. */
.qo-ponto {
    --d: clamp(24px, 4.6cqw, 34px);
    position: absolute; width: var(--d); height: var(--d);
    margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
    border: 0; border-radius: 50%; cursor: pointer; padding: 0;
    display: grid; place-items: center; font-size: calc(var(--d) * .42);
    color: #fff;
    background: rgba(10, 14, 39, .38);
    backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 4px 10px -4px rgba(0, 0, 0, .45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s ease, box-shadow .25s ease;
    z-index: 3;
}
/* No telemóvel o pino fica com 24px — bonito, mas pequeno para o dedo. Este
   anel invisível dá-lhe ~40px de área de toque sem o engordar à vista. */
.qo-ponto::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.qo-ponto:hover, .qo-ponto:focus-visible, .qo-ponto.aceso {
    transform: scale(1.35);
    background: var(--qo-ouro); color: #2b1600;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 10px 22px -8px rgba(0, 0, 0, .55);
    text-shadow: none; outline: none; z-index: 5;
}
.qo-ponto-eco {
    position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 2px rgba(0, 212, 255, .7);
    animation: qoEco 2.6s ease-out infinite;
}
.qo-ponto.aceso .qo-ponto-eco { box-shadow: 0 0 0 2px rgba(255, 215, 0, .8); }

/* O nome, por cima do mapa. Sem ele o mapa é bonito e mudo. */
.qo-ponto-nome {
    position: absolute; bottom: calc(100% + 9px); left: 50%;
    transform: translate(-50%, 4px);
    padding: 5px 11px; border-radius: 999px;
    background: rgba(10, 14, 39, .94); color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
    font-weight: 600; font-size: .78rem; line-height: 1.2; white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .7);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
/* Junto às bordas o rótulo centrado era cortado pelo `overflow: hidden` que
   arredonda o mapa: encosta-se ao lado de dentro. */
.qo-ponto[data-lado="direita"]  .qo-ponto-nome { left: auto; right: 0; transform: translate(0, 4px); }
.qo-ponto[data-lado="esquerda"] .qo-ponto-nome { left: 0; transform: translate(0, 4px); }
/* O ponto cresce 1.35 no hover e levaria o nome com ele: o `scale` ao contrário
   devolve-lhe o tamanho certo. */
.qo-ponto:hover .qo-ponto-nome,
.qo-ponto:focus-visible .qo-ponto-nome { opacity: 1; transform: translate(-50%, 0); scale: calc(1 / 1.35); }
.qo-ponto[data-lado="direita"]:hover .qo-ponto-nome,
.qo-ponto[data-lado="direita"]:focus-visible .qo-ponto-nome,
.qo-ponto[data-lado="esquerda"]:hover .qo-ponto-nome,
.qo-ponto[data-lado="esquerda"]:focus-visible .qo-ponto-nome { transform: translate(0, 0); }
/* Com o cartão aberto o nome sai da frente: já está escrito no cartão. */
.qo-ponto.aceso .qo-ponto-nome { opacity: 0; }

/* ── O cartão, em cima do mapa ──────────────────────────────────────────
   SEM JavaScript ficam todos visíveis por baixo do mapa, como uma lista — é
   conteúdo, tem de se ler sempre. É o `html.js` que os encosta ao ponto e os
   esconde à espera do clique. */
.qo-info {
    background: linear-gradient(135deg, rgba(26, 31, 58, .98) 0%, rgba(42, 47, 74, .98) 100%);
    border: 1px solid rgba(0, 212, 255, .35);
    border-radius: 16px; padding: 14px 16px; margin-bottom: 12px;
    box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .85);
}
.qo-info h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .8px; }
.qo-info-icone { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: rgba(0, 212, 255, .18); color: var(--qo-ciano); }
.qo-info p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--qo-tinta-fraca); }
.qo-info-fechar { display: none; }

/* As três variáveis arrumam as doze combinações de lado e altura numa regra
   só: `--tx`/`--ty` escolhem o canto por onde o cartão se agarra ao ponto e
   `--mt` afasta-o. */
html.js .qo-info {
    position: absolute; z-index: 6;
    width: min(290px, 74cqw); margin-bottom: 0;
    --tx: -50%; --ty: 0%; --mt: 22px;
    transform: translate(var(--tx), var(--ty));
    margin-top: var(--mt);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility .2s;
}
html.js .qo-info[data-lado="direita"]  { --tx: -100%; }
html.js .qo-info[data-lado="esquerda"] { --tx: 0%; }
html.js .qo-info[data-alto="cima"]     { --ty: -100%; --mt: -22px; }
html.js .qo-info.aberto { opacity: 1; visibility: visible; pointer-events: auto; }
html.js .qo-info-fechar {
    display: grid; place-items: center;
    position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px;
}
html.js .qo-info-fechar:hover { background: var(--qo-ciano); color: #06121f; }
html.js .qo-info h3 { padding-right: 26px; }

/* A caixa onde o cartão do mapa aterra no telemóvel. Vazia não ocupa nada —
   no computador está sempre vazia, porque lá o cartão fica em cima do mapa. */
.qo-info-abaixo:empty { display: none; }

.qo-mapa-rodape {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px;
}
.qo-mapa-dica { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .88rem; color: var(--qo-tinta-fraca); }
.qo-mapa-dica i { color: var(--qo-ciano); }
.qo-mapa-abrir {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 9px 18px; border-radius: 999px;
    background: rgba(0, 212, 255, .14); border: 1px solid rgba(0, 212, 255, .45);
    color: #fff; font-family: inherit; font-weight: 600; font-size: .88rem;
    transition: background .2s, border-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.qo-mapa-abrir:hover, .qo-mapa-abrir:focus-visible { background: var(--qo-ciano); color: #06121f; border-color: var(--qo-ciano); transform: translateY(-2px); }
.qo-mapa-fechar { display: none; }

/* ── O mapa em ecrã inteiro ──────────────────────────────────────────────
   No telemóvel o mapa não cabe: quinze pontos em 343px é um aperto. Assim
   ocupa o ecrã todo, arrasta-se à vontade e sai-se pela cruz.

   O elemento é mudado para o fim do `<body>` pelo JavaScript antes de abrir:
   dentro de uma secção com `position: relative` ficava preso num contexto de
   empilhamento e as secções seguintes desenhavam-se por cima dele. Nenhum
   `z-index` resolve isso — tem de SAIR de lá. */
.qo-mapa-fora.ecra-inteiro {
    position: fixed; inset: 0; z-index: 10050; margin: 0; max-width: none;
    background: #070b1c;
    display: flex; flex-direction: column; justify-content: center;
    padding: 56px 0 16px;
}
.qo-mapa-fora.ecra-inteiro .qo-mapa-quadro { overflow: auto; -webkit-overflow-scrolling: touch; }
.qo-mapa-fora.ecra-inteiro .qo-mapa { min-width: 900px; border-radius: 0; border: 0; box-shadow: none; }
.qo-mapa-fora.ecra-inteiro .qo-mapa-rodape { padding: 0 16px; }
.qo-mapa-fora.ecra-inteiro .qo-mapa-abrir { display: none; }
.qo-mapa-fora.ecra-inteiro .qo-mapa-fechar {
    display: grid; place-items: center;
    position: absolute; top: 12px; right: 12px; width: 44px; height: 44px;
    border: 0; border-radius: 50%; cursor: pointer; z-index: 10;
    background: #fff; color: #0a0e27; font-size: 19px;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8);
}
body.qo-sem-scroll { overflow: hidden; }
/* Com o mapa aberto, tudo o que é FIXO sai da frente: o atalho para o site, o
   botão de voltar ao topo e o assistente Ondinhas. São fixos, ficavam por cima
   da cruz, e sem a cruz não há como fechar o mapa.
   Os nomes são os do rodapé DESTE site (`#backToTop`, `#chatWidget`) — eu
   tinha aqui os do site novo (`.voltar-topo`, `.ondinhas`), que nesta página
   não existem e não escondiam nada. */
body.qo-mapa-aberto .qo-voltar,
body.qo-mapa-aberto #backToTop,
body.qo-mapa-aberto .back-to-top,
body.qo-mapa-aberto #ondaai { display: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   7. As perguntas, em acordeão
   ─────────────────────────────────────────────────────────────────────────── */
.qo-faq { margin-top: 56px; display: grid; gap: 14px; }
.qo-faq-item {
    background: linear-gradient(135deg, var(--qo-cartao-a) 0%, var(--qo-cartao-b) 100%);
    border: 2px solid rgba(255, 255, 255, .07); border-radius: 18px;
    overflow: hidden; transition: border-color .3s, box-shadow .3s;
}
.qo-faq-item[open] { border-color: rgba(0, 212, 255, .45); box-shadow: 0 16px 40px rgba(0, 212, 255, .16); }
/* A pergunta a CIANO e a resposta a branco — o par do "Sobre o Onda Play",
   onde a primeira frase é ciano e o texto que a segue é branco. */
.qo-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 24px; cursor: pointer; list-style: none;
    color: #00d4ff; font-weight: 700; font-size: 1rem;
    text-transform: uppercase; letter-spacing: .8px; line-height: 1.4;
}
.qo-faq-item summary::-webkit-details-marker { display: none; }
.qo-faq-item summary i { color: var(--qo-ciano); transition: transform .3s; flex: 0 0 auto; }
.qo-faq-item[open] summary i { transform: rotate(180deg); }
/* A resposta NÃO depende de animação nenhuma para se ver: numa página anterior
   dependia, a animação não corria naquela vista e as respostas ficavam
   invisíveis — abria-se a pergunta e não aparecia nada. */
.qo-faq-resposta { padding: 0 24px 22px; }
.qo-faq-resposta p { margin: 0; color: rgba(255, 255, 255, .9); font-size: .95rem; line-height: 1.75; }

/* ───────────────────────────────────────────────────────────────────────────
   8. A galeria — duas tiras em sentidos contrários
   ───────────────────────────────────────────────────────────────────────────
   Eles gostaram desta: a de cima corre para um lado, a de baixo para o outro, e
   ao passar o rato a tira PÁRA e a fotografia cresce. */
/* A tira desvanece nas pontas, para as fotografias entrarem e saírem em vez de
   aparecerem do nada contra a margem. */
.qo-tira {
    margin-top: 26px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.qo-tira-correr { display: flex; gap: 18px; width: max-content; animation: qoCorre 46s linear infinite; }
.qo-tira-volta .qo-tira-correr { animation-direction: reverse; animation-duration: 54s; }
.qo-tira:hover .qo-tira-correr { animation-play-state: paused; }

.qo-foto {
    position: relative; flex: 0 0 auto; width: clamp(200px, 24vw, 300px); aspect-ratio: 4 / 3;
    margin: 0; border-radius: 20px; overflow: hidden; background: #0d1226;
    border: 2px solid rgba(255, 255, 255, .08);
    box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .9);
    transition: border-color .4s, box-shadow .4s;
}
/* O ZOOM É DA IMAGEM, NÃO DA MOLDURA.
   A tira tem `overflow: hidden` (é o que a faz parecer uma tira) e uma
   `mask-image`, que cria um contexto de empilhamento próprio. Uma moldura que
   CRESÇA é cortada em cima e em baixo, e nenhum z-index a tira de lá: está
   presa dentro do contexto da tira. Crescendo a imagem por dentro, a moldura
   não se mexe, nada é cortado e o efeito continua lá.
   (Eu tinha posto `transform: scale()` na moldura. Cortava.) */
.qo-foto:hover { z-index: 3; border-color: var(--qo-ciano); box-shadow: 0 24px 50px -16px rgba(0, 212, 255, .5); }
.qo-foto img, .qo-foto .qo-sem-foto {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.34, 1.3, .64, 1);
}
.qo-foto:hover img, .qo-foto:hover .qo-sem-foto { transform: scale(1.09); }
/* A legenda saiu da galeria a 17-10-2026, a pedido da Onda d'Ideias: as
   fotografias falam por si. Continua a escrever-se no backoffice e continua a
   servir de `alt` quando não há texto alternativo próprio — o que saiu foi o
   `<figcaption>`, não o texto. */

/* ───────────────────────────────────────────────────────────────────────────
   9. O CTA — o "Pronto para a Aventura" do Onda Play
   ───────────────────────────────────────────────────────────────────────────
   De ponta a ponta do ecrã, com as bolinhas a andar por trás. */
.qo-cta {
    position: relative; overflow: hidden; width: 100%;
    padding: 100px 40px; text-align: center;
    background: linear-gradient(135deg, #00d4ff 0%, #ff6b35 50%, #ffd700 100%);
}
.qo-cta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><circle cx="30" cy="30" r="3" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: qoFundoAnda 15s linear infinite;
}
.qo-cta-dentro { position: relative; z-index: 1; }
.qo-cta h2 {
    margin: 0 0 30px; font-size: clamp(1.6rem, 4vw, 3.5em);
    color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 3px;
    text-shadow: 0 5px 20px rgba(0, 0, 0, .3); line-height: 1.15;
}
.qo-cta p { margin: 0 0 40px; font-size: clamp(1rem, 2vw, 1.5em); color: #fff; opacity: .95; }
.qo-cta-botao {
    display: inline-block; position: relative; overflow: hidden;
    padding: 20px 60px; border-radius: 50px;
    background: #fff; color: #0a0e27; text-decoration: none;
    font-weight: bold; font-size: 1.3em; text-transform: uppercase; letter-spacing: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3); transition: all .3s;
}
/* A onda que abre a partir do meio do botão. */
.qo-cta-botao::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0;
    border-radius: 50%; background: rgba(0, 212, 255, .3);
    transform: translate(-50%, -50%); transition: width .6s, height .6s;
}
.qo-cta-botao:hover::before { width: 300px; height: 300px; }
.qo-cta-botao:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(0, 0, 0, .4); color: #0a0e27; }
.qo-cta-botao span { position: relative; z-index: 1; }

/* ───────────────────────────────────────────────────────────────────────────
   O rodapé: é o de TODAS as páginas, com a letra das outras páginas
   ───────────────────────────────────────────────────────────────────────────
   Só se garante que nada daqui lhe muda os tamanhos. */
.pagina-quinta-ondas footer.footer { font-size: 16px; }

/* ───────────────────────────────────────────────────────────────────────────
   As animações
   ─────────────────────────────────────────────────────────────────────────── */
@keyframes qoEntra {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes qoFlutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes qoFlutuaCurto { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes qoDegrade { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes qoSalta { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-20px); } }
@keyframes qoFundoAnda { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 100px); } }
@keyframes qoBrilho {
    0%   { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}
@keyframes qoEco {
    0%   { transform: scale(.9); opacity: .9; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
}
@keyframes qoCorre { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ───────────────────────────────────────────────────────────────────────────
   Ecrãs pequenos
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .qo-grelha   { grid-template-columns: repeat(2, 1fr); }
    .qo-publicos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .qo-sec { padding: 60px 20px; }
    .qo-cta { padding: 60px 20px; }
    .qo-heroi-logo { max-width: 150px; top: 20px; left: 20px; animation: qoFlutuaCurto 3s ease-in-out infinite; }
    .qo-grelha, .qo-publicos { grid-template-columns: 1fr; }
    .qo-cta-botao { padding: 15px 40px; font-size: 1em; letter-spacing: 1px; }

    /* O TRILHO ENDIREITA-SE: os marcos ficam todos na coluna da esquerda e os
       cartões à direita, senão em 375px sobravam cartões de 140px.
       E o DESVIO de 56px tem de ser desfeito — é ele que faz a vereda
       serpentear no ecrã grande; aqui empurrava os marcos para fora. */
    .qo-paragem { grid-template-columns: 60px 1fr; gap: 14px; margin-bottom: 44px; }
    .qo-paragem-marco {
        grid-column: 1; grid-row: 1; width: 60px; height: 60px; font-size: 23px;
        box-shadow: 0 0 0 7px #151a33, 0 14px 26px -12px rgba(0, 0, 0, .7);
    }
    .qo-paragem:nth-of-type(odd)  .qo-paragem-marco,
    .qo-paragem:nth-of-type(even) .qo-paragem-marco { transform: none; }
    .qo-paragem-corpo,
    .qo-paragem:nth-of-type(even) .qo-paragem-corpo {
        grid-column: 2; grid-row: 1; text-align: left;
        margin: 0; padding: 22px 20px;
    }
    .qo-paragem-corpo h3 { font-size: 1.15rem; }
    .qo-frutos,
    .qo-paragem:nth-of-type(even) .qo-frutos { justify-content: flex-start; }
    .qo-frutos li { font-size: .88rem; padding: 8px 13px; }
    .qo-trilho { padding-left: 4px; }

    /* A letra do Onda Play é grande para ecrãs grandes: em 375px o título de
       um quadro a 1.8em ocupava quatro linhas. */
    .qo-quadro h3 { font-size: 1.35em; letter-spacing: 1.5px; }
    .qo-quadro-icone { font-size: 2.8em; margin-bottom: 16px; }
    .qo-lead, .qo-intro-destaque, .qo-intro-texto { font-size: 1.05em; line-height: 1.75; }

    .qo-foto { width: 230px; }
    .qo-foto img { height: 165px; }

    /* O CARTÃO DO MAPA, NO TELEMÓVEL, FICA DEBAIXO DO MAPA.
       O mapa é uma paisagem larga: a 335px fica com 225px de altura, e o
       cartão do sítio é quase tão alto como ele. Encostado ao ponto tapava o
       mapa quase todo — lia-se o texto e deixava de se ver ONDE fica aquilo,
       que é a graça de haver um mapa. Tentei primeiro encostá-lo ao fundo, de
       lado a lado; continuava a engolir o desenho.
       Agora o JavaScript MUDA-O para aqui, para fora do mapa. O mapa fica
       inteiro à vista com o ponto aceso, e o texto lê-se por baixo. */
    .qo-info-abaixo { margin-top: 14px; }
    html.js .qo-info-abaixo .qo-info {
        /* `relative`, não `static`: no fluxo normal na mesma, mas continua a
           ser a âncora do × (que é `absolute`). Com `static` o botão passava a
           contar a partir da secção e ia parar ao cimo da página.
           E o `inset: auto` é obrigatório: cada cartão traz EM LINHA, no HTML,
           o `left`/`top` do seu ponto no mapa (ex.: `left: 91%`). Em `static`
           isso era ignorado; em `relative` passa a DESLOCÁ-LO, e o cartão ia
           parar fora do ecrã. Leva `!important` porque o estilo em linha ganha
           sempre a uma folha. */
        position: relative; inset: auto !important; width: auto; margin: 0;
        transform: none; max-height: none;
        opacity: 1; visibility: visible; pointer-events: auto;
        border-radius: 18px;
    }
    /* EM ECRÃ INTEIRO, no telemóvel, o cartão fixa-se ao fundo do ECRÃ.
       Aqui o mapa tem 900px e arrasta-se dentro de uma janela de 375: o cartão
       agarrado ao ponto ficava quase sempre FORA do que se está a ver. Medido
       com os quinze pontos: treze caíam fora, um deles 444px à direita.
       E o `data-lado`, que encosta o cartão ao lado de dentro, foi calculado
       com a posição no MAPA — não sabe onde está a janela.
       Fixo ao fundo do ecrã, está sempre à vista, venha o toque de onde vier.
       O `fixed` escapa ao `overflow` do mapa porque o seu bloco de referência
       passa a ser o ecrã. */
    .qo-mapa-fora.ecra-inteiro .qo-info.aberto {
        position: fixed;
        inset: auto 10px 10px 10px !important;
        width: auto; max-height: 45vh; overflow-y: auto;
        transform: none; z-index: 10070;
        border-radius: 18px;
    }
}
@media (max-width: 480px) {
    .qo-heroi-logo { max-width: 120px; top: 15px; left: 15px; }
    .qo-voltar { top: 15px; right: 15px; padding: 8px; }
    .qo-voltar img { height: 35px; }
}

/* Quem pediu ao sistema para não haver movimento, não tem movimento. */
@media (prefers-reduced-motion: reduce) {
    .pagina-quinta-ondas * { animation: none !important; transition: none !important; }
    .qo-trilho-feito { stroke-dashoffset: 0 !important; }
}