/* Páginas das asas — Happy Soaring
   Isto é um documento, não a interface do site: é feito para se ler de cima a
   baixo e para ser encontrado. Mantém a identidade (o azul, o laranja, a
   tipografia) mas com medida de leitura e hierarquia de títulos a sério. */
:root{
  --azul:#0e3b6d; --azul-esc:#0a2c53; --orange:#ff6a13;
  /* A superficie e azul, como o catalogo e o SmartGround. As fotos das asas
     sao recortes: foram feitas para fundo escuro e e ai que assentam.
     O que precisa de contraste de leitura ganha painel claro proprio. */
  --papel:#071d3a; --tinta:#fff; --tinta-fraca:rgba(255,255,255,.68);
  --linha:rgba(255,255,255,.16);
  --painel:#fff; --painel-tinta:#16202c; --painel-fraca:#5b6878; --painel-linha:#dfe6ef;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.pg{
  background:var(--papel);color:var(--tinta);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.6;
}

.pg-topo{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:rgba(0,0,0,.22);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.09);padding:16px 28px;
}
.pg-marca{font-size:19px;font-weight:900;letter-spacing:-.6px;color:#fff;text-decoration:none}
.pg-marca span{color:var(--orange)}
.pg-dealer{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,.82)}

.pg-cx{max-width:1180px;margin:0 auto;padding:26px 40px 60px}

/* A página é metade catálogo e metade documento. O contentor é largo — o
   selector de cor, a tabela e as asas irmãs precisam disso — mas a prosa
   do fabricante fica com medida de leitura e centrada, senão era uma
   coluna estreita encostada à esquerda num ecrã vazio.
   Largura de página não é largura de linha. */
/* REGRA DA SUPERFICIE
   O que se LE e papel; o que se USA e azul. A tabela e o texto do
   fabricante ganham painel claro; o selector, os cartoes e as faixas ficam
   sobre o azul.

   E o papel vem em DUAS ilhas, nao numa por seccao: o texto do fabricante
   e um documento continuo, e parti-lo em catorze cartoes lia-se como
   catorze coisas diferentes.

   O painel ocupa a largura toda e a prosa fica com medida de leitura la
   dentro. Assim o lado direito deixa de ser vazio e passa a ser margem —
   que era o problema, e nao a falta de colunas. */
.pg-papel{
  background:var(--painel);color:var(--painel-tinta);
  border:1px solid var(--painel-linha);border-radius:16px;
  padding:34px 40px 12px;margin:0 0 24px;
}
.pg-papel:empty{display:none}
/* TITULO A ESQUERDA, TEXTO A DIREITA.
   Com o texto a 72ch encostado a esquerda sobravam 240px de branco de
   um lado so; centrado, sobravam 240 de cada lado. Nenhuma das duas usa
   o cartao — enchem-no de margem.
   Assim a largura e preenchida com CONTEUDO: os titulos formam uma
   coluna que se percorre com os olhos, e o texto mantem uma coluna de
   leitura so. E o que a documentacao tecnica faz, e faz por isto. */
.pg-papel .pg-sec{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  column-gap:48px;max-width:none;margin:0 0 26px;
}
.pg-papel .pg-sec > h2{grid-column:1;grid-row:1;margin:0;font-size:19px;
  letter-spacing:-.3px;border-bottom:0;padding:0;line-height:1.25}
.pg-papel .pg-sec > *:not(h2){grid-column:2}
/* SEM TITULO, SEM COLUNA.
   A coluna da esquerda existe para os titulos. Num bloco que nao tem
   titulo ficava simplesmente meia carta vazia — pior do que o
   problema que a coluna veio resolver. Esses correm a largura toda.
   Nao ate ao fim do cartao: ai eram ~120 caracteres por linha, e
   acima de 75 o olho perde o regresso a linha seguinte. */
/* o bloco inteiro centrado no cartao: a 92ch encostado a esquerda
   sobrava o branco todo de um lado so. Centrado fica margem simetrica. */
.pg-papel .pg-sec.sem-titulo{display:block;max-width:92ch;margin-left:auto;margin-right:auto}
.pg .pg-papel .sem-titulo p,.pg .pg-papel .sem-titulo li{max-width:none}
.pg-papel .pg-sec > *:last-child{margin-bottom:0}
/* separador entre seccoes, ja que os titulos perderam o sublinhado */
.pg-papel .pg-sec + .pg-sec{border-top:1px solid var(--painel-linha);padding-top:26px}
.pg-papel .pg-sec:first-child h2{margin-top:0}
.pg .pg-papel h2{color:var(--painel-tinta);border-bottom-color:var(--painel-linha)}
.pg .pg-papel h3{color:var(--painel-tinta)}
/* 74ch: dentro da faixa legivel (45-75) e enche a coluna da direita.
   A 68 sobravam ainda 200px de branco no fim de cada linha. */
.pg .pg-papel p,.pg .pg-papel li{color:var(--painel-tinta);max-width:74ch}
/* Texto justificado, mas so com hifenizacao: sem ela o justificado abre
   rios de branco no meio do paragrafo, e o portugues tem palavras
   compridas que agravam isso. O lang="pt" do <html> e que diz ao
   browser onde pode cortar. */
.pg .pg-papel p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* nos ecras estreitos a medida e curta de mais para justificar sem
   estragar: volta a alinhado a esquerda */
@media(max-width:680px){.pg .pg-papel p{text-align:left;hyphens:manual}}
.pg .pg-papel strong{color:#0b1520}
.pg .pg-papel a{color:#0b5fb0}
.pg .pg-papel a:hover{color:var(--orange)}
.pg-papel .pg-fich a{font-weight:700}

/* ABAIXO DE 900px NAO HA LARGURA PARA DUAS COLUNAS.
   A coluna dos titulos e 230px FIXOS. Num telemovel de 375px, tirando o
   contentor e o cartao sobram ~215px de conteudo — menos do que os 230 que
   a primeira coluna exige. O grid nao encolhe uma coluna fixa: transborda.
   Era isso que se via, com o texto a sair pela direita do ecra, uma palavra
   por linha e cortado.

   O 900 nao e escolhido a olho: 230 do titulo + 48 do intervalo + cerca de
   460px de texto (~50 caracteres, o minimo de uma medida legivel) mais os
   80px do cartao e os 80px do contentor dao 898. Abaixo disso a coluna da
   direita ja nao tem medida, mesmo quando cabe.

   E o mesmo ponto de corte das listas em duas colunas aqui em baixo: as
   duas regras respondem a mesma pergunta — ha largura para dividir? */
@media(max-width:899px){
  .pg-papel .pg-sec{display:block}
  .pg .pg-papel .pg-sec > h2{margin:0 0 12px}
}
@media(max-width:600px){
  .pg-papel{padding:22px 20px 8px;border-radius:14px}
}

/* Listas curtas em duas colunas, so no desktop. Em prosa isto seria uma
   armadilha — encher a coluna 1 obriga a descer e voltar a subir para
   comecar a 2 — mas os pontos fortes sao itens de uma linha. */
@media(min-width:900px){
  .pg-papel ul{columns:2;column-gap:44px}
  .pg-papel li{break-inside:avoid;max-width:none}
}
.pg-sec.pg-largo,.pg-pedir,.pg-irmas,.pg-metodo{max-width:none}
.pg-cab,.pg-oferta,.pg-aviso,.pg-dealer-nota,.pg-voltar{max-width:none}

.pg-migalhas{font-size:12.5px;color:var(--tinta-fraca);margin-bottom:26px}
.pg-migalhas a{color:var(--tinta-fraca)}
.pg-migalhas a:hover{color:var(--orange)}

.pg-cab{display:flex;gap:56px;align-items:center;flex-wrap:wrap;margin-bottom:44px}
.pg-cab-txt{flex:1 1 380px;min-width:0}
.pg-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--orange);margin-bottom:6px}
.pg h1{font-size:clamp(34px,6vw,52px);font-weight:800;letter-spacing:-1.6px;line-height:1.02}
.pg-tagline{font-size:18px;color:var(--tinta-fraca);margin-top:12px;max-width:34ch}
/* min-width:0 é obrigatório: num item flex, uma <img> assume por omissão
   a largura intrínseca (1200px) como mínimo, o que partia o cabeçalho em
   duas linhas e empurrava o selector de cor para fora do primeiro ecrã. */
/* min-width:0 é obrigatório: num item flex, uma <img> assume por omissão
   a largura intrínseca (1200px) como mínimo, o que partia o cabeçalho */
.pg-foto{flex:1 1 440px;min-width:0;max-width:100%;max-height:420px;
  height:auto;object-fit:contain}

/* .pg a.pg-wa e nao .pg-wa: com a superficie escura, ".pg a{color:laranja}"
   ganha o desempate por vir depois no ficheiro, e punha texto laranja
   sobre verde. Duas classes resolvem sem depender da ordem. */
.pg a.pg-wa{display:inline-block;margin-top:20px;background:#25d366;color:#08351a;
  font-weight:800;font-size:14.5px;padding:13px 24px;border-radius:100px;text-decoration:none}
.pg a.pg-wa:hover{background:#1fbe5b;color:#08351a}

.pg-sec{margin:0 0 30px}
.pg h2{font-size:21px;font-weight:800;letter-spacing:-.4px;margin:34px 0 12px;
  padding-bottom:8px;border-bottom:2px solid var(--linha)}
.pg-sec:first-of-type h2{margin-top:0}
.pg p{margin-bottom:14px;max-width:68ch}
.pg ul{margin:0 0 14px 20px}
.pg li{margin-bottom:6px}
.pg a{color:var(--orange)}
.pg a:hover{color:#ff8a45}
.pg strong{color:#fff}

.pg-tams{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.pg-tams span{border:1px solid var(--linha);border-radius:8px;padding:5px 13px;
  font-size:13.5px;font-weight:700;background:rgba(255,255,255,.06)}

/* A TABELA E A ILHA CLARA DA PAGINA.
   Tudo o resto e azul, mas isto le-se a serio — nove colunas de numeros
   comparam-se melhor sobre papel. E rola dentro da sua caixa: num telemovel
   nao ha largura, e a pagina inteira nao pode passar a rolar de lado. */
.pg-tabela{overflow-x:auto;margin-bottom:8px;background:var(--painel);
  border:1px solid var(--painel-linha);border-radius:12px;color:var(--painel-tinta)}
.pg-tabela table{border-collapse:collapse;width:100%;min-width:520px;font-size:13.5px}
.pg-tabela caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.pg-tabela th,.pg-tabela td{padding:9px 14px;text-align:left;
  border-top:1px solid var(--painel-linha);color:var(--painel-tinta)}
.pg-tabela thead th{background:#f4f8fc;font-size:11.5px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--painel-fraca);border-top:none}
.pg-tabela tbody th{font-weight:800}

.pg-cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pg-cores figure{margin:0}
.pg-cores img{width:100%;height:auto;background:rgba(255,255,255,.05);border:1px solid var(--linha);
  border-radius:12px;display:block}
.pg-cores figcaption{font-size:12.5px;color:var(--tinta-fraca);margin-top:6px;text-transform:capitalize}

.pg-fich{list-style:none;margin-left:0}
.pg-fich li{margin-bottom:8px}

.pg-voltar{margin-top:38px;padding-top:22px;border-top:1px solid var(--linha)}
.pg-voltar a{font-weight:700}

.pg-rodape{background:var(--azul-esc);color:rgba(255,255,255,.75);
  font-size:12.5px;text-align:center;padding:22px}

@media(max-width:600px){
  .pg-topo{padding:14px 18px}
  .pg-cx{padding:20px 18px 44px}
  .pg-cab{gap:18px}
  .pg h1{letter-spacing:-1px}
}

/* ---- aviso -----------------------------------------------------------
   Amarelo com tinta escura: em fundo claro, texto branco sobre amarelo não
   chega ao contraste mínimo. A cor chama a atenção, o texto lê-se. */
.pg-aviso{
  background:#fff8e1;border-left:4px solid #f5c518;border-radius:0 10px 10px 0;
  padding:13px 16px;margin:0 0 22px;font-size:14.5px;color:#4a3800;max-width:68ch;
}
.pg-aviso::before{content:"⚠ ";font-weight:800}

/* ---- vídeo -----------------------------------------------------------
   A miniatura é uma ligação até alguém carregar; o guião troca-a pelo
   leitor. As duas ocupam a mesma caixa 16:9, por isso nada salta. */
.pg-video{
  display:block;position:relative;width:100%;aspect-ratio:16/9;
  border:0;border-radius:14px;overflow:hidden;background:#0a2c53;
}
a.pg-video{cursor:pointer}
.pg-video img{width:100%;height:100%;object-fit:cover;display:block}
.pg-video-play{
  position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;
  background:rgba(255,106,19,.94);box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.pg-video-play::after{
  content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:22px solid #fff;border-top:14px solid transparent;
  border-bottom:14px solid transparent;transform:translateX(4px);
}
a.pg-video:hover .pg-video-play{background:#ff7c31}

/* ---- gama de vento ---------------------------------------------------
   Tabela a sério, não divs: cada linha é um tamanho e um intervalo, o que
   é exactamente o que uma tabela diz. A barra é decoração por cima; quem
   usa leitor de ecrã ouve os números, que é o que interessa. */
/* O cabeçalho leva o traço da secção em vez do h2: com o h2 dentro de um
   flex, a borda dele encolhia até ao tamanho do texto. Duas classes em cada
   regra do h2, para ganhar ao `.pg h2` que vem antes. */
.pg-vento-cab{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:34px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--linha);
}
.pg-sec:first-of-type .pg-vento-cab{margin-top:0}
.pg .pg-vento-cab h2{margin:0;padding:0;border:0}
.pg-un{
  display:inline-flex;background:rgba(255,255,255,.08);
  border:1px solid var(--linha);border-radius:100px;padding:3px;
}
.pg .pg-un-b{
  border:0;background:none;font:inherit;font-size:12px;font-weight:800;letter-spacing:.3px;
  color:var(--tinta-fraca);padding:6px 16px;border-radius:100px;cursor:pointer;
}
.pg .pg-un-b:hover{color:var(--tinta)}
.pg .pg-un-b.on{background:var(--orange);color:#fff}

.pg-vento-g{margin-bottom:26px}
.pg-vento-g h3{font-size:14px;font-weight:800;letter-spacing:.3px;margin-bottom:8px;
  color:var(--tinta-fraca);text-transform:uppercase}
.pg-vento-t{border-collapse:collapse;width:100%}
.pg-vento-t th[scope=row]{
  width:52px;text-align:left;font-size:13px;font-weight:800;padding:5px 8px 5px 0;
}
.pg-vento-barra{padding:5px 10px 5px 0;width:100%}
.pg-vento-trilho{
  display:block;position:relative;height:14px;border-radius:7px;background:rgba(255,255,255,.1);
}
.pg-vento-b{
  position:absolute;top:0;bottom:0;border-radius:7px;
  /* as pontas esbatidas são de propósito: não há limites bruscos de vento,
     e uma barra de extremos duros dizia uma coisa que não é verdade */
  background:linear-gradient(90deg,rgba(255,106,19,.35),var(--orange) 22%,
    var(--orange) 78%,rgba(255,106,19,.35));
}
.pg-vento-val{
  white-space:nowrap;text-align:right;font-size:13px;font-weight:700;
  padding:5px 0;line-height:1.25;
}
.pg-vento-eixo td{border:0;padding:0}
/* o padding vive na CELULA e a regua no interior: um `left:%` resolve-se
   contra a caixa de PADDING, por isso as marcas colocadas na celula caíam
   10px à direita do fim do trilho. A régua interior não tem padding. */
.pg-vento-marcas{padding:0 10px 0 0 !important}
.pg-vento-reg{position:relative;display:block;height:17px}
.pg-vento-reg[hidden]{display:none}
.pg-vento-reg span{
  position:absolute;top:1px;transform:translateX(-50%);
  font-size:10.5px;color:var(--tinta-fraca);font-variant-numeric:tabular-nums;
}
/* a marca do zero e a do fim do trilho encostam-se em vez de saírem fora.
   Só essas: em km/h a última marca redonda fica a meio caminho da ponta e
   tem de continuar centrada como as outras. */
.pg-vento-reg .pg-vento-i{transform:none}
.pg-vento-reg .pg-vento-f{transform:translateX(-100%)}
.pg-vento-un{
  text-align:right;font-size:10.5px;color:var(--tinta-fraca);
  text-transform:uppercase;letter-spacing:.6px;vertical-align:top;padding-top:1px
}

@media(max-width:600px){
  .pg-video-play{width:56px;height:56px}
  .pg-video-play::after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
}

/* ---- escolher e pedir preço ------------------------------------------
   A secção que faz da página uma montra e não só um folheto. Fica logo a
   seguir à foto porque é ela que comanda a foto. */
.pg-pedir{
  background:rgba(255,255,255,.05);border:1px solid var(--linha);border-radius:16px;
  padding:22px 22px 24px;margin-bottom:34px;
}
.pg-pedir h2{margin-top:0}
.pg-pedir h3{
  font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--tinta-fraca);margin:20px 0 9px;
}
.pg-pedir h3:first-of-type{margin-top:4px}

/* esquemas standard: a foto é o rótulo, o nome vai por baixo */
.pg-esq{display:flex;flex-wrap:wrap;gap:10px}
.pg-esq-b{
  flex:0 0 auto;width:150px;padding:6px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.06);border:2px solid var(--linha);font-family:inherit;
}
.pg-esq-b img{width:100%;height:auto;display:block;border-radius:7px}
.pg-esq-b span{
  display:block;margin-top:5px;font-size:11.5px;font-weight:700;
  text-transform:capitalize;color:var(--tinta-fraca);
}
.pg-esq-b:hover{border-color:rgba(255,255,255,.42)}
.pg-esq-b.on{border-color:var(--orange);background:rgba(255,106,19,.16)}
.pg-esq-b.on span{color:var(--tinta)}

/* cor à medida */
.pg-cust{display:flex;flex-wrap:wrap;gap:9px}
.pg-cust-b{
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(0,0,0,.16);box-shadow:0 1px 3px rgba(0,0,0,.14);
}
.pg-cust-b:hover{transform:scale(1.09)}
/* o anel de seleção é desenhado FORA do círculo, para não tapar a cor —
   que é justamente o que a pessoa está a tentar ver */
.pg-cust-b.on{border-color:#fff;box-shadow:0 0 0 3px var(--orange)}
.pg-cor-nome{
  min-height:19px;margin:9px 0 0;font-size:13.5px;font-weight:700;color:var(--orange);
}
.pg-nota{font-size:12.5px;color:var(--tinta-fraca);margin:6px 0 0;max-width:62ch;line-height:1.5}

/* tamanhos */
.pg-tsel{display:flex;flex-wrap:wrap;gap:8px}
.pg-tsel-b{
  min-width:52px;padding:9px 14px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.06);border:2px solid var(--linha);
  font-family:inherit;font-size:14px;font-weight:800;color:var(--tinta);
}
.pg-tsel-b:hover{border-color:rgba(255,255,255,.42)}
.pg-tsel-b.on{background:var(--orange);border-color:var(--orange);color:#fff}

/* país */
.pg-pais{margin-top:20px}
.pg-pais label{
  display:block;font-size:12px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:8px;
}
.pg-pais input{
  width:100%;max-width:340px;padding:11px 14px;border-radius:10px;
  border:2px solid var(--linha);background:rgba(255,255,255,.06);
  font-family:inherit;font-size:15px;color:var(--tinta);
}
.pg-pais input:focus{outline:none;border-color:var(--orange)}
.pg-dica{font-size:12.5px;color:var(--tinta-fraca);margin:7px 0 0}

/* enviar: sem href enquanto faltar alguma coisa, por isso não é clicável nem
   focável. O aspecto acompanha o estado — não há botão morto a fingir. */
.pg-enviar{margin-top:20px}
.pg-wa.desativado{
  background:#dfe6ef;color:#8d9aab;cursor:not-allowed;pointer-events:none;
}

@media(max-width:600px){
  .pg-pedir{padding:18px 16px 20px;border-radius:14px}
  .pg-esq-b{width:calc(50% - 5px)}
  .pg-cust-b{width:38px;height:38px}
  .pg-enviar{display:block;text-align:center}
}

/* ---- selo de oferta --------------------------------------------------
   Faixa discreta por baixo da tagline, não a faixa larga da página inicial:
   lá ela grita porque abrange o site todo; aqui é sobre esta asa e não deve
   falar mais alto do que o produto. */
.pg-oferta{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin:16px 0 0;padding:10px 14px;border-radius:10px;
  background:#fff1e9;border-left:4px solid #c2410c;
  font-size:14px;color:#5c2a10;max-width:52ch;
}
.pg-oferta-et{
  background:#c2410c;color:#fff;   /* 5.18:1 */
  padding:3px 9px;border-radius:100px;
  font-size:10.5px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;
}
.pg-oferta-fim{font-size:12.5px;font-weight:700;color:#8a4a25;white-space:nowrap}
.pg-oferta.t-promocao{background:#fff0f4;border-left-color:#b3123f;color:#5e0b22}
.pg-oferta.t-promocao .pg-oferta-et{background:#b3123f}
/* o amarelo guarda a tinta escura: branco sobre amarelo não passa contraste */
.pg-oferta.t-aviso{background:#fff8e1;border-left-color:#f5c518;color:#4a3800}
.pg-oferta.t-aviso .pg-oferta-et{background:#f5c518;color:#3a2c00}

/* ---- outras asas da família ----
   Mesmo cartão do carril do catálogo: foto à esquerda, nome e classe à
   direita. Quem percorre a lista reconhece a forma antes de ler o nome. */
.pg-irmas-l{list-style:none;margin-left:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pg-irmas-l li{margin:0}
.pg-irmas-l a{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:#fff;
  border:1px solid var(--linha);border-radius:13px;padding:11px 14px;
  background:rgba(255,255,255,.05);transition:border-color .18s,background .18s;
}
.pg-irmas-l a:hover{border-color:var(--orange);background:rgba(255,106,19,.14);color:#fff}
.pg-irmas-l img{width:64px;height:42px;object-fit:contain;flex:none}
.pg-irmas-tx{min-width:0}
.pg-irmas-l b{display:block;font-size:14.5px;font-weight:800}
.pg-irmas-l span span{display:block;font-size:11.5px;font-weight:600;
  color:var(--tinta-fraca);margin-top:2px}

/* ======================================================================
   /smartground/ — o método
   Escura, ao contrário das páginas das asas, que são papel. É deliberado:
   uma é um documento de produto, esta é um argumento.
   ====================================================================== */
body.sg{background:#071d3a;color:#fff}
body.sg .pg-topo{border-bottom:1px solid rgba(255,255,255,.09);background:none}
body.sg a{color:#ff6a13}
body.sg a:hover{color:#ff8a45}
body.sg h1,body.sg h2,body.sg h3{color:#fff}

/* ---- herói ---- */
.sg-heroi{
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;
  max-width:1440px;margin:0 auto;padding:76px 72px 60px;
}
.sg-heroi h1{font-size:clamp(38px,5vw,68px);font-weight:800;letter-spacing:-2.6px;
  line-height:.99;margin:0 0 28px}
.sg-heroi h1 span{color:#ff6a13}
.sg-tese{
  font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.7px;line-height:1.28;
  color:rgba(255,255,255,.9);margin:0;padding-left:22px;border-left:4px solid #ff6a13;
  /* a tese vem do CMS com uma quebra de linha a separar as duas frases */
  white-space:pre-line;
}
.sg-heroi-fig{display:flex;align-items:flex-end;justify-content:center}
.sg-heroi-fig video{height:620px;width:auto;max-width:100%;display:block}

/* ---- duas abordagens ---- */
.sg-abordagens{max-width:1440px;margin:0 auto;padding:0 72px 78px}
.sg-duas{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.sg-abord{
  border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:44px 48px;
  background:rgba(255,255,255,.03);
}
.sg-abord-nossa{border:2px solid #ff6a13;padding:43px 47px;background:rgba(255,106,19,.09)}
.sg-abord-et{
  font-size:11.5px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 22px;
}
.sg-abord-nossa .sg-abord-et{color:#ff6a13}
.sg-abord-tx{font-size:clamp(18px,1.9vw,25px);font-weight:700;letter-spacing:-.7px;
  line-height:1.32;color:rgba(255,255,255,.86);margin:0;max-width:none}
.sg-abord-nossa .sg-abord-tx{color:#fff}

/* ---- as cinco etapas ---- */
.sg-espinha{background:#0a2c53;border-top:1px solid rgba(255,255,255,.08);padding:72px 0 78px}
.sg-espinha-cab{
  max-width:1440px;margin:0 auto 44px;padding:0 72px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:60px;
}
.sg-espinha-cab h2{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-1.6px;
  line-height:1.08;margin:0;border:0;padding:0}
.sg-espinha-dir{flex-shrink:0;text-align:right;padding-bottom:6px}
.sg-espinha-dir p{font-size:16.5px;color:rgba(255,255,255,.6);margin:0 0 16px;max-width:32ch}
.sg-cadeia{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:flex-end}
.sg-cadeia span{font-size:12.5px;font-weight:800;color:rgba(255,255,255,.68)}
.sg-cadeia span.fim{color:#ff6a13}
.sg-cadeia i{color:rgba(255,255,255,.28);font-style:normal}

.sg-etapas{
  list-style:none;margin:0 auto;padding:0 72px;max-width:1440px;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;
}
/* os rótulos das fases por cima dos cartões: 3 + 1 + 1, a espelhar quantas
   etapas cada fase tem */
.sg-fase{display:flex;align-items:center;gap:14px;padding-bottom:4px;margin:0}
.sg-fase-1{grid-column:span 3}
.sg-fase span{font-size:12.5px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;
  white-space:nowrap}
.sg-fase::after{content:"";flex-grow:1;height:2px}
.sg-fase-1 span{color:#fff}
.sg-fase-1::after{background:rgba(255,255,255,.18)}
.sg-fase-2 span{color:#ffc9a6}
.sg-fase-2::after{background:rgba(255,201,166,.3)}
.sg-fase-3 span{color:#ff6a13}
.sg-fase-3::after{background:rgba(255,106,19,.45)}

.sg-etapa{border-radius:18px;padding:30px 26px 32px;margin:0}
.sg-etapa-n{display:block;font-size:40px;font-weight:800;letter-spacing:-1.4px;
  line-height:1;margin-bottom:18px}
.sg-etapa h3{font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1.2;
  margin:0 0 12px}
.sg-etapa p{font-size:15px;color:rgba(255,255,255,.7);margin:0;max-width:none}

/* ---- a transição para o curso ----
   Não é rodapé: é a informação que separa o método do curso. */
.sg-transicao{
  max-width:1440px;margin:46px auto 0;padding:36px 72px 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
}
.sg-trans-et{font-size:11.5px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.sg-transicao i{color:rgba(255,255,255,.28);font-size:20px;font-style:normal}
.sg-transicao strong{font-size:22px;font-weight:800;letter-spacing:-.5px;color:#fff}
.sg-trans-lista{display:flex;gap:8px;flex-wrap:wrap}
.sg-trans-lista b{
  border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:6px 15px;
  font-size:12.5px;font-weight:800;color:rgba(255,255,255,.82);
}

/* ---- perigo + piloto de parapente ---- */
.sg-duplo{
  max-width:1440px;margin:0 auto;padding:72px;
  display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:stretch;
}
.sg-perigo{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);
  border-radius:22px;padding:38px 42px}
.sg-perigo h2{font-size:clamp(24px,2.4vw,32px);font-weight:800;letter-spacing:-1.1px;
  line-height:1.16;margin:0 0 14px;border:0;padding:0}
.sg-perigo p{font-size:16.5px;color:rgba(255,255,255,.74);margin:0;max-width:none}
.sg-parapente{background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.35);
  border-radius:22px;padding:38px 40px}
.sg-parapente h2{font-size:24px;font-weight:800;letter-spacing:-.6px;color:#ffd75e;
  margin:0 0 14px;border:0;padding:0}
.sg-parapente p{font-size:16.5px;color:rgba(255,255,255,.84);margin:0;max-width:none}

/* ---- o princípio + quem o desenvolveu ---- */
.sg-principio{
  background:rgba(255,106,19,.07);
  border-top:1px solid rgba(255,106,19,.22);border-bottom:1px solid rgba(255,106,19,.22);
  padding:76px 72px;display:grid;grid-template-columns:1.5fr 1fr;gap:70px;align-items:center;
}
.sg-principio-tx{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-1.8px;
  line-height:1.1;color:#fff;margin:0;max-width:none}
.sg-autor{border-left:3px solid rgba(255,106,19,.5);padding-left:30px}
.sg-autor-et{font-size:11.5px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 12px}
.sg-autor-n{font-size:21px;font-weight:800;letter-spacing:-.5px;color:#fff;margin:0 0 10px}
.sg-autor p{font-size:16px;color:rgba(255,255,255,.74);margin:0;max-width:none}

/* ---- a asa do curso ---- */
.sg-asa{
  max-width:1440px;margin:0 auto;padding:68px 72px;
  display:flex;gap:70px;align-items:center;
}
.sg-asa-txt{flex:1 1 auto;min-width:0}
.sg-asa h2{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-1.8px;
  line-height:1.08;margin:0 0 16px;border:0;padding:0}
.sg-asa p{font-size:17.5px;color:rgba(255,255,255,.8);margin:0 0 26px;max-width:54ch}
.sg-asa img{flex:0 0 auto;width:520px;max-width:45%;height:auto}
.sg-acoes{display:flex;gap:12px;flex-wrap:wrap;margin:0 !important}
.sg-cta,.sg-cta-2{
  display:inline-block;font-weight:800;font-size:15.5px;padding:15px 32px;
  border-radius:100px;text-decoration:none;
}
.sg-cta{background:#ff6a13;color:#fff}
.sg-cta:hover{background:#ff7c31;color:#fff}
.sg-cta-2{border:2px solid rgba(255,255,255,.3);color:#fff;padding:13px 28px}
.sg-cta-2:hover{border-color:#ff6a13;color:#fff}

body.sg .pg-voltar{max-width:1440px;margin:0 auto;padding:26px 72px 60px;
  border-top:1px solid rgba(255,255,255,.12)}

/* ---- telemóvel e tablet ---- */
@media(max-width:1100px){
  .sg-heroi,.sg-principio{grid-template-columns:1fr;gap:40px}
  .sg-duas,.sg-duplo{grid-template-columns:1fr}
  .sg-espinha-cab{flex-direction:column;align-items:flex-start;gap:26px}
  .sg-espinha-dir{text-align:left}
  .sg-cadeia{justify-content:flex-start}
  .sg-etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-fase-1,.sg-fase-2,.sg-fase-3{grid-column:1/-1}
  .sg-asa{flex-direction:column;align-items:flex-start;gap:34px}
  .sg-asa img{width:100%;max-width:100%}
  .sg-autor{border-left:0;border-top:3px solid rgba(255,106,19,.5);padding:26px 0 0}
}
@media(max-width:680px){
  .sg-heroi,.sg-abordagens,.sg-duplo,.sg-principio,.sg-asa,.sg-etapas,
  .sg-espinha-cab,.sg-transicao,body.sg .pg-voltar{padding-left:20px;padding-right:20px}
  .sg-heroi{padding-top:44px}
  .sg-heroi-fig video{height:420px}
  .sg-etapas{grid-template-columns:1fr}
  .sg-abord,.sg-abord-nossa{padding:28px 24px}
  .sg-transicao{justify-content:flex-start}
}

/* ---- a asa do curso (só na Mullet 2) ---- */
.pg-metodo{background:rgba(255,106,19,.1);border:1px solid rgba(255,106,19,.3);
  border-radius:16px;padding:28px 32px;color:#fff}
.pg-metodo-et{font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:#ff6a13;margin:0 0 10px}
.pg-metodo-tx{font-size:17px;color:rgba(255,255,255,.86);margin:0 0 16px;max-width:62ch}
.pg-metodo a.pg-metodo-a{display:inline-block;background:#ff6a13;color:#fff;font-weight:800;
  font-size:14.5px;padding:12px 24px;border-radius:100px;text-decoration:none}
.pg-metodo a.pg-metodo-a:hover{background:#ff7c31;color:#fff}


/* ======================================================================
   /flow-paragliders-portugal/ — largura de desktop
   As páginas das asas são 820px porque são para LER de cima a baixo. Esta
   é um catálogo: usa a largura, e a prosa é que fica com medida legível.
   ====================================================================== */
.fl-cx{max-width:1320px;padding:26px 56px 0}

/* ---- cabeçalho: texto à esquerda, a marca à direita ---- */
.fl-cab{
  display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center;
  margin:8px 0 54px;
}
.fl-cab-txt h1{margin-bottom:16px}
.fl-entrada{font-size:19px;color:var(--tinta-fraca);max-width:46ch;margin:0 0 24px}
.fl-cab-marca{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  background:linear-gradient(160deg,var(--azul),var(--azul-esc));
  border-radius:20px;padding:44px 40px;
}
.fl-cab-marca img{width:100%;max-width:300px;height:auto}
.fl-cab-marca span{
  font-size:11.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.8);text-align:center;
}

/* a prosa mantém medida de leitura mesmo com o contentor largo */
.fl-oficial p{max-width:68ch}

/* ---- catálogo ---- */
.fl-gama-cab{margin-bottom:22px}
.fl-gama-cab h2{margin-top:0}
.fl-gama-cab p{margin-bottom:0;color:var(--tinta-fraca)}
.fl-catalogo{display:flex;flex-direction:column;gap:26px}
.fl-fam h3{
  font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--tinta-fraca);margin:0 0 10px;display:flex;align-items:baseline;gap:10px;
}
.fl-fam h3 span{font-size:11px;font-weight:700;color:rgba(255,255,255,.42);letter-spacing:.4px;
  text-transform:none}
.fl-lista{list-style:none;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.fl-lista li{margin:0}
.fl-lista a{
  display:block;font-weight:800;font-size:15px;text-decoration:none;color:var(--tinta);
  border:1px solid var(--linha);border-radius:10px;padding:12px 15px;background:rgba(255,255,255,.05);
}
.fl-lista a:hover{border-color:var(--orange);background:rgba(255,106,19,.14);color:var(--tinta)}
.fl-lista a span{display:block;font-size:12px;font-weight:600;color:var(--tinta-fraca);
  margin-top:2px}

/* ---- três colunas: escolher, experimentar, apoio ---- */
.fl-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:44px 0}
.fl-cartao{border:1px solid var(--linha);border-radius:16px;padding:28px 30px;
  background:rgba(255,255,255,.04)}
.fl-cartao h2{font-size:19px;margin:0 0 12px;padding:0;border:0;letter-spacing:-.3px}
.fl-cartao p{font-size:15.5px;color:var(--tinta-fraca);margin:0;max-width:none}

/* ---- cor à medida ---- */
.fl-cor{
  display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;
  background:rgba(255,106,19,.09);border:1px solid rgba(255,106,19,.32);border-radius:20px;
  padding:40px 44px;margin-bottom:44px;
}
.fl-cor-tx{font-size:17px;color:rgba(255,255,255,.82);margin:10px 0 22px;max-width:52ch}
.fl-cor img{width:100%;height:auto}
a.fl-cor-a{
  display:inline-block;background:var(--orange);color:#fff;font-weight:800;
  font-size:14.5px;padding:13px 26px;border-radius:100px;text-decoration:none;
}
a.fl-cor-a:hover{background:#ff7c31;color:#fff}

/* ---- fecho ---- */
.fl-fecho{
  background:linear-gradient(160deg,var(--azul),var(--azul-esc));border-radius:20px;
  padding:48px 56px;display:flex;gap:44px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:20px;
}
.fl-fecho p{font-size:21px;font-weight:700;letter-spacing:-.4px;color:#fff;
  margin:0;max-width:52ch}
.fl-fecho .pg-wa{margin-top:0;flex-shrink:0}

.fl-cx .pg-voltar{margin-top:30px;padding-bottom:56px}

@media(max-width:1000px){
  .fl-cab,.fl-cor{grid-template-columns:1fr;gap:34px}
  .fl-tres{grid-template-columns:1fr}
  .fl-cab-marca{padding:32px}
  .fl-cab-marca img{max-width:220px}
}
@media(max-width:600px){
  .fl-cx{padding-left:20px;padding-right:20px}
  .fl-lista{grid-template-columns:1fr}
  .fl-cor,.fl-fecho{padding:26px 22px}
  .fl-fecho p{font-size:18px}
}

/* ---- a nota de revendedor nas páginas de produto ----
   Contextual e no corpo, não escondida no rodapé: quem está a olhar para
   uma asa é quem quer saber de onde ela vem. */
.pg-dealer-nota{
  background:rgba(255,255,255,.05);border-left:4px solid var(--orange);border-radius:0 10px 10px 0;
  padding:13px 16px;margin:0 0 22px;font-size:14.5px;color:var(--tinta-fraca);max-width:68ch;
}
.pg-dealer-nota a{font-weight:800}

/* ---- seletor de idioma -------------------------------------------------
   Códigos e não bandeiras: uma bandeira é um país, e o inglês não é dos
   Estados Unidos. O que se vê é PT · EN · ES · FR · DE; o que um leitor de
   ecrã ouve é o nome da língua na própria língua.

   A língua actual não se distingue só pelo laranja — leva também o traço
   por baixo, mais peso, e o aria-current. Quem não separa o laranja do
   branco continua a ver onde está.

   margin-left:auto encosta o seletor à direita nas duas situações: no fim
   da barra quando tudo cabe numa linha, e no fim da segunda linha quando o
   flex-wrap parte. Sem isto, ao partir ficava sozinho à esquerda por baixo
   da marca, a parecer um item de navegação órfão. */
.pg-idiomas{
  display:flex;align-items:center;margin-left:auto;
  font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
}
.pg .pg-idiomas a{
  color:rgba(255,255,255,.72);text-decoration:none;
  padding:2px 0 3px;border-bottom:2px solid transparent;
}
.pg .pg-idiomas a:hover{color:#fff}
.pg .pg-idiomas a[aria-current]{
  color:var(--orange);font-weight:800;border-bottom-color:var(--orange);
}
.pg .pg-idiomas a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.pg-idiomas i{font-style:normal;opacity:.32;padding:0 8px}

/* o nome da língua existe para ser ouvido, não para ser visto */
.pg-so-leitor{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* uma asa cuja página descreve uma versão que já não se vende: o aviso deixa
   de ser uma nota e passa a ser a primeira coisa que se lê, porque é ele que
   explica por que razão não há aqui um botão de pedir preço */
.pg-aviso-hist{
  display:block;border-left:4px solid var(--orange);
  background:rgba(255,106,19,.1);border-radius:0 10px 10px 0;
  padding:14px 18px;max-width:80ch;
}
.pg .pg-aviso-hist b{
  display:block;color:var(--orange);font-size:11.5px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;margin-bottom:5px;
}