/* ============================================================
   TASCO — deck de ecrãs, boutique
   Ameixa profundo, magenta e dourado — a paleta de tokens-1.css,
   a mesma das duas webapps.
   Desktop: um ecrã de cada vez, sem barra de scroll.
   Mobile: scroll normal.
   ============================================================ */

/* ── Tema escuro (padrão da direção) ───────────────────────── */
:root{
  /* Fundos, tinta, dourado, luzes e vidros vivem em tokens-1.css,
     partilhados com as duas webapps. Aqui ficam só os apelidos dos
     nomes que este ficheiro já usava e as medidas do deck. */

  /* O dourado continua a ser a cor do texto de destaque do site: é o
     único dos três acentos que se lê a 10:1 e aguenta corpo de texto.
     O magenta entrou para a acção — ver --grad-btn. */
  --gold-deep: var(--gold-dp);
  --gold-txt:  var(--gold);
  /* Estado de erro. Nao e um segundo acento decorativo: so aparece
     num filete de campo invalido, sempre acompanhado de texto. */
  --erro:      var(--err);
  --on-gold-fixo: #190614; /* superfícies que são sempre dourado claro */
  /* O botão do site passou a ser o mesmo das webapps: magenta. Era
     dourado, e o portal das hosts já lhe chamava "idêntico ao site
     público" enquanto desenhava um magenta — a divergência acaba aqui. */
  --grad-btn:  var(--grad-cta);

  --r:         2px;
  --r-card:    4px;
  --ease:      cubic-bezier(.23, 1, .32, 1);
  --ease-io:   cubic-bezier(.77, 0, .175, 1);

  /* --ff-d e --ff-b vêm de tokens-1.css, agora partilhados. */

  --t-hero: clamp(2.5rem, 1rem + 4.4vw, 4.9rem);
  --t-fim:  clamp(2.5rem, 1rem + 5vw, 5.25rem);
  --t-sec:  clamp(1.6rem, .9rem + 2.1vw, 2.9rem);
  --t-body: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
  --t-lbl:  clamp(.6875rem, .66rem + .12vw, .75rem);

  --bleed: clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw:  1380px;
  --navh:  68px;
  --bandh: 40px;
  --logo-h: 58px;
  /* A marca nova é quadrada e o anel é concêntrico com ela: largura igual
     à altura, e o centro do círculo no centro da caixa. */
  --logo-w: var(--logo-h);
  --logo-cy: calc(var(--logo-h) * .5);
  --bolha: calc(var(--logo-w) * 1.25);
  --bolha-topo: calc(var(--navh) + var(--bandh) / 2 - var(--bolha) / 2);
  --luz-h: 100vh;
  --painel-h: 100vh;

  color-scheme: dark;
}

/* O tema claro não precisa de bloco próprio aqui: os apelidos acima
   apontam para tokens que já trocam de valor em tokens-1.css. */

/* lvh = altura do ecra com a barra do navegador recolhida. */
@supports (height:100lvh){ :root{ --luz-h: 100lvh; } }
/* svh = altura do ecra com a barra do navegador a vista: a estavel. */
@supports (height:100svh){ :root{ --painel-h: 100svh; } }

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

html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-b);
  font-size:var(--t-body);
  line-height:1.6;
}

/* Luz quente, para o fundo não ficar em chapa lisa. Camada própria em vez
   de background-attachment:fixed no body: essa propriedade e mal suportada
   em movel, onde a imagem fica presa ao documento e cortada a altura do
   primeiro ecra. Aqui e mesmo o viewport, e acompanha o scroll todo. */
.luz{
  position:fixed;top:0;left:0;right:0;height:var(--luz-h);
  z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(90% 60% at 72% -8%, var(--luz-1) 0%, var(--luz-1-0) 60%),
    radial-gradient(60% 50% at 8% 104%, var(--luz-2) 0%, var(--luz-2-0) 62%);
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  -webkit-user-select:none;user-select:none;
}
summary,.chip,.dots button,.tema,.topo,.menu-b,.lang-b{-webkit-user-select:none;user-select:none}
::selection{background:var(--gold);color:var(--on-gold-fixo)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--bleed)}

.sprite{position:absolute}

/* Texto real para leitor de ecrã, quando um efeito visual (o typewriter
   do herói, por exemplo) mostra só parte do texto a cada instante. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.grain{
  /* Mesma razao da .luz: inset:0 resolve contra o ecra pequeno. */
  position:fixed;top:0;left:0;right:0;height:var(--luz-h);
  z-index:150;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Tipografia ────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--ff-d);font-weight:500;line-height:1.06;letter-spacing:-.015em}
em{font-style:italic;font-weight:500;color:var(--gold-txt)}

/* Rollo é uma display de caixa alta larga: pede mais entrelinha e
   menos aperto de tracking do que uma grotesca. */
.t-hero{font-size:var(--t-hero);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}

/* ── Herói escrito à máquina ──────────────────────────────────
   Um h1 escrito a partir do próprio DOM que o servidor já mandou: o JS
   lê o texto real (com os <em> e o <br>) e volta a construí-lo carácter
   a carácter, sem duplicar a frase em três idiomas dentro do ficheiro.
   O texto completo fica sempre presente para leitor de ecrã, num nó
   .sr-only — o que se anima é uma cópia, com aria-hidden. A altura do
   título é fixada em JS antes de a animação começar, para o resto da
   página não saltar enquanto a frase ainda está a meio. */
.t-hero[data-tw] .tw-fita::after{
  content:'';display:inline-block;width:.06em;height:.92em;
  margin-left:.04em;background:currentColor;vertical-align:-.08em;
  animation:tw-pisca 1s steps(1) infinite;
}
@keyframes tw-pisca{0%,100%{opacity:1}50%{opacity:0}}
.t-fim{font-size:var(--t-fim);line-height:1.08;letter-spacing:-.005em;text-wrap:balance}
.t-sec{font-size:var(--t-sec);line-height:1.12;letter-spacing:0;max-width:22ch;text-wrap:balance}
/* Em desktop a medida deixa de forcar quebra: os titulos que cabem
   numa linha ficam numa linha. */
@media (min-width:1200px){ .t-sec{max-width:none} }
p{text-wrap:pretty}

.eyebrow{
  font-family:var(--ff-b);font-size:var(--t-lbl);font-weight:600;
  text-transform:uppercase;letter-spacing:.18em;color:var(--gold-txt);
  margin-bottom:.9rem;
}
.label{
  font-family:var(--ff-b);font-size:var(--t-lbl);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);line-height:1;
}
.lede{color:var(--ink-2);max-width:46ch}
/* Em ecra largo a medida curta deixava metade da coluna vazia por baixo
   de um titulo que ocupava a largura toda. Sobe o suficiente para o
   bloco ler como um bloco, sem passar do que a vista acompanha numa
   linha (a partir das 75 caracteres o olho perde o regresso). */
@media (min-width:1000px){ .lede{max-width:62ch;font-size:1.0625rem} }
@media (min-width:1400px){ .lede{max-width:68ch} }
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}

/* ── Botões ────────────────────────────────────────────────── */
.btn{
  /* Um toque demorado num botao abria a pega de seleccao do texto em vez
     de o premir. Um botao e um alvo, nao um paragrafo. */
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  min-height:52px;padding:0 1.9rem;border-radius:var(--r);
  font-size:.9375rem;font-weight:600;letter-spacing:.01em;line-height:1;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),color .3s var(--ease);
}
.btn-lg{min-height:58px;padding:0 2.3rem;font-size:1rem}

/* Dourado acetinado: gradiente de três paragens, não chapa. */
.btn-pop{
  background:var(--grad-btn);
  color:var(--on-cta);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-pop:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.34)}
.btn-line{border:1px solid var(--hair);color:var(--ink);backdrop-filter:blur(6px);background:var(--vidro-b)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-txt);transform:translateY(-2px)}
.btn .i{width:18px;height:18px}

.i{width:22px;height:22px;fill:currentColor;flex:none}

/* ── Nav ───────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--navh);
  display:flex;align-items:center;
  background:linear-gradient(to bottom, color-mix(in oklab, var(--bg) 94%, transparent), transparent);
}
/* Tres posicoes: esquerda, centro, direita. Em desktop o par de
   seletores separa-se pelos extremos (display:contents faz os filhos
   caírem directamente na grelha); fora do desktop volta a ser um par,
   do lado direito, e a esquerda fica o menu. */
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;width:100%}
.nav-sel{display:contents}
/* A linha tem de ser explicita: como o par de seletores vem depois dos
   links no HTML, a colocacao automatica empurrava-os para uma segunda
   linha em vez de os por ao lado. */
.tema{grid-area:1/1;justify-self:start}
.nav-links{grid-area:1/2;justify-self:center}
.lang{grid-area:1/3;justify-self:end}
.menu-b{grid-area:1/1}
/* Par de logos: cada ficheiro serve o tema a que o nome se refere. */
.lg-on-dark{display:none}
:root[data-theme="light"] .lg-on-light{display:block}
:root[data-theme="light"] .lg-on-dark{display:none}
:root:not([data-theme="light"]) .lg-on-light{display:none}
:root:not([data-theme="light"]) .lg-on-dark{display:block}

/* A barra leva agora a navegação completa: aperta-se o intervalo e o
   corpo para as dez ligações caberem numa linha só. */
.nav-links{display:flex;gap:1.15rem;font-size:.8125rem;color:var(--ink-2);white-space:nowrap}
.nav-links a{position:relative;min-height:44px;display:inline-flex;align-items:center;transition:color .25s var(--ease)}
.nav-links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:11px;height:1px;
  background:var(--gold);transition:right .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
/* A pagina onde se esta fica marcada, e o filete fica desenhado. */
.nav-links a[aria-current="page"]{color:var(--gold-txt)}
.nav-links a[aria-current="page"]::after{right:0}

/* ── Idioma ────────────────────────────────────────────────── */
.lang{position:relative}
.lang-b{
  display:inline-flex;align-items:center;gap:.4rem;height:44px;padding:0 .75rem;
  border:1px solid var(--hair);border-radius:var(--r);color:var(--ink-2);
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.lang-b:hover,.lang.is-open .lang-b{color:var(--gold-txt);border-color:var(--gold)}

/* Alternador de tema */
.tema{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:var(--r);color:var(--ink-2);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.tema:hover{color:var(--gold-txt);border-color:var(--gold)}
.tema .i{width:18px;height:18px}
.ic-sol{display:none}
:root[data-theme="light"] .ic-sol{display:block}
:root[data-theme="light"] .ic-lua{display:none}
.lang-b .i{width:16px;height:16px}
.lang-b .i-caret{width:12px;height:12px;transition:transform .3s var(--ease)}
.lang.is-open .i-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + .45rem);right:0;z-index:95;min-width:174px;
  list-style:none;background:var(--bg-2);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:0 18px 42px -18px var(--sombra);overflow:hidden;
}
.lang-menu button,.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  width:100%;min-height:44px;padding:0 .9rem;font-size:.9375rem;color:var(--ink-2);
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.lang-menu button span,.lang-menu a span{font-size:.6875rem;font-weight:600;letter-spacing:.1em;color:var(--ink-3)}
.lang-menu button:hover,.lang-menu a:hover{background:rgba(244,208,100,.1);color:var(--ink)}
.lang-menu li[aria-selected="true"] button,.lang-menu li[aria-selected="true"] button span,
.lang-menu li[aria-selected="true"] a,.lang-menu li[aria-selected="true"] a span{color:var(--gold-txt)}

/* ── Faixa do cabeçalho ──────────────────────────
   O tridente entra pela esquerda e o anel pela direita; ao encaixarem
   formam a marca da agencia. */
.hband{
  position:fixed;top:var(--navh);left:0;right:0;height:var(--bandh);z-index:89;
  pointer-events:none;overflow:visible;
}
/* Dois segmentos com folga ao centro: um filete continuo passava por
   tras do logotipo e via-se atraves dos vazios do emblema. */
.hb-rule{
  position:absolute;top:50%;height:1px;width:min(34%,350px);
  transform:translateY(-50%) scaleX(0);
}
.hb-esq{
  right:calc(50% + var(--bolha) * .58);transform-origin:right center;
  background:linear-gradient(90deg,transparent,var(--hair));
}
.hb-dir{
  left:calc(50% + var(--bolha) * .58);transform-origin:left center;
  background:linear-gradient(90deg,var(--hair),transparent);
}
/* O anel e o tridente sao as duas metades do mesmo ficheiro, cada um com
   o viewBox inteiro: sobrepostos dao a marca exacta, sem alinhamento a
   olho. Por isso ambos ocupam a caixa toda. */
.hlogo{
  position:absolute;left:50%;pointer-events:auto;
  /* Desce metade da diferenca entre o centro da caixa e o centro do
     circulo, para o circulo ficar sobre a linha dourada. */
  top:calc(50% + (var(--logo-h) / 2 - var(--logo-cy)));
  height:var(--logo-h);width:var(--logo-w);
  /* A centragem e do GSAP (xPercent/yPercent). Com um translate aqui, o
     GSAP lia-o como deslocamento em pixeis e somava-o ao seu: o emblema
     ficava meia largura a esquerda. */
}
.hl-anel,.hl-tridente{position:absolute;inset:0;width:100%;height:100%}

/* ── Deck ────────────────────────────────────────── */
/* O emblema passa da faixa para baixo, por isso a folga do conteudo
   mede-se por ele e nao pela faixa. */
.panel{
  position:relative;display:flex;align-items:center;
  padding-block:calc(var(--navh) + var(--bandh) / 2 + var(--logo-h) * .58 + .5rem) 2.5rem;
}
.ph{margin-bottom:clamp(1.5rem,3.5vh,2.75rem)}
@media (max-width:999px),(orientation:portrait) and (max-width:1400px){
  .ph{text-align:center}
  .ph .t-sec{margin-inline:auto}
}
/* O cabecalho de seccao centra-se em todo o lado: com o titulo ao
   centro e o subtitulo encostado a esquerda o bloco ficava torto. */
.ph{text-align:center}
.ph .t-sec{margin-inline:auto}
.ph .lede{margin-inline:auto}

/* Pontos laterais */
.dots{
  position:fixed;right:clamp(1rem,2vw,2rem);top:50%;transform:translateY(-50%);
  z-index:90;display:none;flex-direction:column;gap:.9rem;
}
.dots button{
  width:26px;height:26px;display:grid;place-items:center;position:relative;
}
.dots button::after{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--ink-3);transition:all .4s var(--ease);
}
.dots button:hover::after{background:var(--ink-2)}
.dots button[aria-current="true"]::after{background:var(--gold);width:8px;height:8px;box-shadow:0 0 0 4px rgba(244,208,100,.16)}

/* Desktop: um ecrã de cada vez, zero barras de scroll. */
/* O deck corre em todo o lado. A altura vai em svh: e a altura do ecra
   com a barra do navegador visivel e nao muda quando ela recolhe, ao
   contrario de vh, que fazia o painel saltar a meio do gesto.
   O painel rola por dentro se o conteudo nao couber: e a valvula que
   permite ligar o deck em ecras pequenos sem cortar nada. */
@media (min-height:520px){
  :root.tem-deck,:root.tem-deck body{height:100%;overflow:hidden;overscroll-behavior:none}
  .tem-deck .deck{height:var(--painel-h);will-change:transform;transition:transform .95s var(--ease-io)}
  .tem-deck .panel{
    height:var(--painel-h);
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:none;
  }
  .tem-deck .panel::-webkit-scrollbar{display:none}
  .tem-deck .dots{display:flex}
}
/* Mobile e ecrãs baixos: documento normal. */
/* Ecra demasiado baixo para paginar (telemovel deitado): scroll normal. */
@media (max-height:519px){
  .deck{transform:none !important}
  .panel{min-height:auto;padding-block:clamp(2.75rem,6vh,4rem) clamp(2.75rem,6vh,4rem)}
  /* Tambem aqui a folga se conta pela base do emblema. */
  .panel.p-hero{padding-top:calc(var(--navh) + var(--bandh) / 2 + var(--logo-h) * .58 + .75rem)}
  /* Sem encaixe: puxava a pagina a meio do gesto. So a folga do
     cabecalho para as ancoras internas. */
  html{scroll-padding-top:calc(var(--navh) + var(--bandh))}
}

/* ── 1 · Hero ──────────────────────────────────────────────── */
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;width:100%}
@media (min-width:1000px){ .hero-grid{grid-template-columns:1.34fr .66fr} }
.hero-safe{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.2rem}
.hero-safe li{display:flex;align-items:center;gap:.45rem;font-size:.875rem;color:var(--ink-2)}
.hero-safe .i{width:18px;height:18px;color:var(--gold-txt)}
.hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin-top:clamp(1.5rem,3vh,2.25rem)}
.hero-note{font-size:.8125rem;color:var(--ink-3)}
.hero-main .lede{margin-top:1.1rem}
/* Numa coluna so o hero encostado a esquerda competia com o cabecalho,
   que e simetrico. Fica ao centro, como os titulos de seccao. */
@media (max-width:999px),(orientation:portrait) and (max-width:1400px){
  .hero-main{text-align:center}
  .hero-main .lede{margin-inline:auto}
  .hero-safe{justify-content:center}
  .hero-cta{align-items:center}
  .hero-note{text-align:center}
}

/* Prova social sem caixa: uma luz, um anel e os rostos. O retangulo
   competia com os cards das outras secoes, por isso saiu. */
.rostos{position:relative;text-align:center;padding-block:clamp(.5rem,1.6vw,1.5rem)}
.rostos[hidden]{display:none}
.rostos-halo{
  position:absolute;left:50%;top:clamp(4.5rem,7vw,6rem);
  transform:translate(-50%,-50%);
  width:min(118%,540px);max-width:calc(100vw - 2rem);
  aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle closest-side,
    var(--halo-1) 0%, var(--halo-2) 32%, var(--halo-3) 56%, var(--halo-0) 78%);
}
/* A largura e fixada pelo JS em sete avatares, para o palco acabar
   exactamente onde acaba o ultimo rosto em vez de o cortar. */
.prova-stage{position:relative;height:clamp(132px,14.5vw,182px);overflow:hidden;margin-inline:auto;max-width:100%}
/* Anel que assinala o rosto em destaque, no lugar da moldura do card. */
.prova-stage::before{
  content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(96px,10.4vw,140px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--gold);opacity:.34;
}
.prova-stage img{
  position:absolute;top:50%;left:50%;
  width:clamp(72px,7.8vw,106px);aspect-ratio:1;object-fit:cover;
  border-radius:50%;
  border:1px solid color-mix(in oklab, var(--gold) 42%, transparent);
  box-shadow:0 10px 26px -10px var(--sombra);
  transition:transform .22s var(--ease),opacity .22s var(--ease),filter .22s var(--ease);
}
.prova-t{
  position:relative;margin-top:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--ff-d);font-weight:500;font-style:italic;
  font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.3;color:var(--ink);
}
.prova-t::before{
  content:'';display:block;width:46px;height:1px;
  margin:0 auto clamp(1rem,2vw,1.35rem);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ── 2 · Comparativo ───────────────────────────────────────── */
.cmp-grid{display:grid;gap:clamp(1.25rem,2.5vw,2.25rem)}
@media (min-width:860px){ .cmp-grid{grid-template-columns:1fr 1.3fr;align-items:start} }
/* Os dois cards ficavam com muito ar por baixo da lista. Passam a ter
   altura igual, mais folga interior e a marca ao fundo, como os outros. */
.cmp-col{
  position:relative;overflow:hidden;
  padding:clamp(1.6rem,2.9vw,2.6rem);border-radius:var(--r-card);
  background:var(--vidro-b);border:1px solid var(--hair-2);
}

.cmp-col > *{position:relative;z-index:1}
.cmp-col--win{
  background:linear-gradient(155deg, rgba(244,208,100,.10), rgba(226,125,140,.08));
  border-color:var(--hair);
  box-shadow:0 24px 56px -30px var(--sombra);
}
.cmp-logo{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;min-height:34px}
.cmp-logo span{font-size:.875rem;font-weight:600}
.cmp-mais{color:var(--ink-3)}
/* Maior do que o logotipo da Poppo, que fica nos 18px: a 18 o letreiro
   da marca nao se lia. */
.cmp-marca{height:26px;width:auto}
.cmp-pct{
  font-family:var(--ff-d);font-weight:500;font-size:clamp(2.4rem,4.8vw,4.1rem);
  line-height:1;margin:.55rem 0 1.15rem;color:var(--ink-2);
}
.cmp-pct--win{color:var(--gold-txt)}
.cmp-bar{height:4px;background:var(--hair-2);border-radius:2px;overflow:hidden}
.cmp-fill{display:block;height:100%;width:100%;background:var(--ink-3);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-io)}
/* A barra repete a ordem do gradiente do logotipo: sombra, base, realce. */
.cmp-fill--win{background:linear-gradient(90deg,var(--gold-deep),var(--gold) 45%,var(--gold-hi))}
.cmp-list{list-style:none;padding-top:1.7rem;display:flex;flex-direction:column;gap:.85rem}
.cmp-list li{display:flex;align-items:flex-start;gap:.65rem;font-size:.9375rem;color:var(--ink-2)}
.cmp-list .i{width:18px;height:18px;margin-top:.12rem;color:var(--gold-txt)}
.cmp-list--no .i{color:var(--ink-3)}
.cmp-disc{margin-top:clamp(1.25rem,2.5vh,2rem);font-size:.75rem;color:var(--ink-3)}
/* Ecra baixo mas ainda em deck: este e o painel mais alto, por isso
   aperta-se aqui em vez de desligar o deck em mais maquinas. */
@media (min-width:1000px) and (max-height:800px){
  .panel{padding-block:calc(var(--navh) + var(--bandh) + .25rem) 1.5rem}
  .ph{margin-bottom:clamp(1rem,2.5vh,1.75rem)}
}
@media (min-width:1000px) and (max-height:900px){
  .cmp-col{padding:clamp(1.3rem,2.2vw,1.9rem)}
  .cmp-pct{font-size:clamp(2rem,3.6vw,3.1rem);margin:.4rem 0 .9rem}
  .cmp-list{padding-top:1.2rem;gap:.6rem}
  .cmp-list li{font-size:.875rem}
}
@media (min-width:1100px){ .cmp-disc{white-space:nowrap} }

/* ── Cards em trio (ganhos, portal) ────────────────────────── */
.trio{display:grid;gap:clamp(1rem,2vw,1.75rem)}
@media (min-width:860px){ .trio{grid-template-columns:repeat(3,1fr)} }

/* Seis cards no mesmo ecrã: 3x2, com o interior mais apertado para
   caber na altura do painel sem cortar. */
.trio-6{gap:clamp(.75rem,1.4vw,1.15rem)}
.trio-6 .card{padding:clamp(1.1rem,1.9vw,1.5rem)}
.trio-6 .card-i{width:26px;height:26px}
.trio-6 .card h3{font-size:clamp(1.05rem,1.4vw,1.2rem);margin-bottom:0}
.trio-6 .card p{font-size:.8125rem;line-height:1.5}
.card{
  position:relative;overflow:hidden;
  padding:clamp(1.5rem,2.6vw,2.25rem);border-radius:var(--r-card);
  background:linear-gradient(155deg, var(--vidro-a), var(--vidro-b));
  border:1px solid var(--hair-2);
  box-shadow:0 22px 50px -30px var(--sombra);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.card:hover{transform:translateY(-5px);border-color:var(--hair);box-shadow:0 32px 64px -30px var(--sombra)}
.card-i{width:30px;height:30px;color:var(--gold-txt)}
/* O ícone e o título partilham a linha, e a descrição corre por baixo,
   alinhada com o título e não com o ícone. Antes isto só acontecia
   abaixo dos 1000px e o card mudava de composição a meio caminho. */
.card{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:.75rem;align-items:center;
}
.card-i{grid-row:1;grid-column:1}
.card h3{grid-row:1;grid-column:2;align-self:center}
.card p{grid-column:2;margin-top:.45rem}
/* Card expansivel: em desktop fica aberto e o cabecalho nao e um botao;
   em ecra estreito colapsa e so o icone e o titulo ficam a vista. */
.card-x{display:block}
.card-x > summary{display:block;list-style:none;cursor:default}
.card-x > summary::-webkit-details-marker{display:none}
.card-in > div{overflow:hidden}
.card h3{font-size:clamp(1.05rem,1.5vw,1.25rem);margin-bottom:0}
.card p{font-size:.875rem;color:var(--ink-2)}

/* ── 4 · Passos ────────────────────────────────────────────── */
.passos{list-style:none;display:grid;gap:clamp(1rem,1.8vw,1.5rem)}
@media (min-width:900px){ .passos{grid-template-columns:repeat(5,1fr)} }
/* Sem filete por cima: o numeral ja separa um passo do seguinte. */
.passos li{padding-top:1.1rem;border-top:0}
.passos b{
  display:block;font-family:var(--ff-d);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2rem);color:var(--gold-txt);line-height:1;margin-bottom:.7rem;
}
.passos h3{font-family:var(--ff-b);font-size:1rem;font-weight:600;margin-bottom:.4rem}
.passos p{font-size:.8125rem;color:var(--ink-2)}

/* ── 6 · Histórias ─────────────────────────────────────────── */
.hist-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;width:100%}
@media (min-width:1000px){ .hist-grid{grid-template-columns:.85fr 1.15fr} }
.hist-num{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,2.5vw,2rem)}
.stat-v{
  display:block;font-family:var(--ff-d);font-weight:500;
  font-size:clamp(2rem,3.4vw,3rem);line-height:1;color:var(--gold-txt);margin-bottom:.45rem;
}
.q-stage{position:relative;min-height:clamp(11rem,22vh,15rem)}
.q{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1.5rem}
.q-text{font-family:var(--ff-d);font-weight:500;font-size:clamp(1.35rem,2.6vw,2.15rem);line-height:1.22;max-width:24ch}
.q-by{display:flex;align-items:center;gap:.7rem;font-size:.875rem}
.q-dot{width:6px;height:6px;background:var(--gold);flex:none;border-radius:50%}
.q-nav{display:flex;gap:.5rem;grid-column:1/-1;justify-self:end}
.q-b{
  width:46px;height:46px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid var(--hair);color:var(--ink-2);
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.q-b:hover{color:var(--gold-txt);border-color:var(--gold);transform:translateY(-2px)}
.q-b .i{width:16px;height:16px}
.q-b.prev .i{transform:rotate(180deg)}

/* ── 7 · Dúvidas ───────────────────────────────────────────── */
.faq-list{display:grid;gap:0}
@media (min-width:1000px){ .faq-list{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)} }
.fq{border-top:1px solid var(--hair-2)}
.fq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1rem;min-height:52px;cursor:pointer;list-style:none;
  font-size:.9375rem;font-weight:600;transition:color .25s var(--ease);
}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{
  content:'+';font-size:1.3rem;font-weight:400;color:var(--gold-txt);line-height:1;
  transition:transform .4s var(--ease-io);
}
.fq.is-open summary{color:var(--gold-txt)}
.fq.is-open summary::after{content:'\2013';transform:rotate(180deg)}
.fq p{padding-bottom:1.1rem;color:var(--ink-2);font-size:.875rem;max-width:52ch}
/* A altura anima com grid-template-rows, que interpola; sem JS a
   resposta aparece na mesma, porque o valor de base e 1fr. */
.fq-in > div{overflow:hidden}
.js-faq .fq-in{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.js-faq .fq.is-open .fq-in{grid-template-rows:1fr}
/* A lista reserva a altura da resposta mais alta, senao o painel
   inteiro reposiciona-se a cada abertura. */
.js-faq{align-content:start}

/* ── 8 · Fim ───────────────────────────────────────────────── */
.p-fim{text-align:center}
.fim-in{display:flex;flex-direction:column;align-items:center}
.fim-in .lede{margin:1.25rem auto 2rem;text-align:center}
.fim-cta{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}
/* Os direitos e as redes: as duas linhas do rodapé, aqui só com a forma
   de cada uma. O enquadramento é do .rodape, que as compõe. */
.fim-legal{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.fim-links{display:inline-flex;align-items:center;gap:1.5rem}
/* Estreito de mais para os dois lados: empilham e centram-se. */
@media (max-width:599px){
  .fim-links{width:100%;justify-content:center}
}
/* Em telemovel a frase dos direitos fica sozinha na sua linha e a
   privacidade e os cookies passam para a de baixo: os tres lado a lado
   nao cabem na largura de um telemovel, e o `nowrap` que aqui estava
   fazia a frase transbordar a caixa em vez de a partir. */
@media (max-width:680px){
  .fim-legal{
    order:1;width:100%;justify-content:center;
    font-size:.6875rem;
  }
  .fim-legal > span{width:100%}
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem}
.modal[hidden]{display:none}
.modal-bg{
  position:absolute;inset:0;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  animation:vem-fundo .45s var(--ease) both;
}
.modal-card{
  position:relative;z-index:1;width:min(100%,430px);text-align:center;
  padding:clamp(1.75rem,4vw,2.5rem) clamp(1.4rem,4vw,2.25rem) clamp(1.1rem,2.5vw,1.5rem);
  border-radius:var(--r-card);
  background:linear-gradient(158deg,var(--bg-3),var(--bg-2) 62%,var(--bg-2));
  border:1px solid var(--hair);
  box-shadow:
    0 50px 110px -45px var(--sombra),
    0 0 0 1px color-mix(in oklab, var(--gold) 12%, transparent),
    inset 0 1px 0 var(--vidro-a);
  animation:vem-card .7s var(--ease) both;
}
/* Halo dourado por tras do cartao, para nao ficar uma caixa pousada. */
.modal-card::before{
  content:'';position:absolute;left:50%;top:-18%;translate:-50% 0;
  width:130%;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle closest-side,
    color-mix(in oklab, var(--gold) 22%, transparent) 0%,
    var(--luz-2-0) 72%);
}
@keyframes vem-fundo{ from{opacity:0} to{opacity:1} }
@keyframes vem-card{
  from{opacity:0;transform:translateY(26px) scale(.94)}
  to{opacity:1;transform:none}
}
.modal-marca{
  width:clamp(64px,17vw,86px);height:auto;margin:0 auto .9rem;
  filter:drop-shadow(0 8px 20px color-mix(in oklab, var(--gold) 22%, transparent));
}
.modal-tag{
  display:inline-block;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  padding:.35rem .7rem;border-radius:var(--r);
  /* A etiqueta é sempre dourado claro, por isso a tinta é sempre escura. */
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));color:var(--on-gold-fixo);
}
.modal-h{font-size:clamp(1.35rem,3vw,1.75rem);margin-top:.9rem;line-height:1.14;text-wrap:balance}
.modal-p{margin-top:.7rem;font-size:.875rem;color:var(--ink-2)}
.modal-cd{display:flex;justify-content:center;gap:1.5rem;margin:1.4rem 0}
.modal-cd span{display:flex;flex-direction:column;align-items:center;line-height:1}
.modal-cd b{font-family:var(--ff-d);font-weight:500;font-size:clamp(1.6rem,4vw,2.1rem);color:var(--gold-txt)}
.modal-cd i{font-style:normal;font-size:.625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-top:.4rem}
.modal-card:focus{outline:none}
.modal-cta{width:100%}
.modal-no{display:block;width:100%;min-height:44px;margin-top:.35rem;font-size:.8125rem;color:var(--ink-3);transition:color .25s var(--ease)}
.modal-no:hover{color:var(--ink)}
/* Assinatura da plataforma, discreta e separada por um filete. */
.modal-poppo{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  margin-top:1.15rem;padding-top:.95rem;border-top:1px solid var(--hair-2);
  font-size:.625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
}
.modal-poppo img{height:13px;width:auto;opacity:.75}

/* ── Ecrã estreito: cada painel tem de caber num ecrã ────────
   Com o deck ligado no telemóvel não há scroll de página, por isso o que
   antes se resolvia com altura resolve-se com densidade. O ícone e o
   numeral passam para a frente do título: poupa uma linha inteira por
   card, que é o que falta para os seis caberem. */
@media (max-width:999px){
  /* A barra mede o que o botao precisa: 44px mais 8 de folga de cada
     lado. A faixa passa a ser so o filete, e o emblema sobrepoe-se a
     ela — ja nao ha recorte a impedi-lo. O espaco reservado ao conteudo
     conta-se pela base do emblema, nao pela faixa. */
  .panel{padding-bottom:1.25rem}
  .ph{margin-bottom:clamp(.9rem,2.2vh,1.4rem)}

  .card{padding:clamp(.7rem,2.6vw,1rem)}
  .card p,.trio-6 .card p{margin-top:.28rem}
  /* Seis cards no mesmo ecrã pedem mais um aperto do que três. */
  .trio-6 .card{padding-block:.6rem}
  .trio-6 .card p{margin-top:.2rem}
  .trio,.trio-6{gap:.4rem}
  .card:hover{transform:none}

  .passos{gap:.45rem}
  .passos li{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:.7rem;align-items:baseline;padding-top:.6rem;
  }
  .passos b{grid-row:1;margin-bottom:0}
  .passos h3{grid-row:1}
  .passos p{grid-column:1/-1;margin-top:.15rem}

  .cmp-grid{gap:.6rem}
  .cmp-col{padding:clamp(.75rem,3vw,1.05rem)}
  .cmp-pct{margin:.25rem 0 .55rem}

  .cmp-list{padding-top:.7rem;gap:.32rem}

  .cmp-disc{margin-top:.6rem}

  /* Em coluna estreita os pontos laterais caiem em cima dos cards.
     Passam a fila horizontal no fundo, fora do caminho do conteudo e do
     botao de voltar ao topo. */
  .dots{
    flex-direction:row;left:50%;right:auto;
    top:auto;bottom:.7rem;transform:translateX(-50%);
    gap:.5rem;
  }
  .dots button{width:20px;height:20px}

  .hist-num{gap:.9rem}
  .stat-v{margin-bottom:.25rem}
  .fq summary{padding-block:.7rem;min-height:44px}
  .fq p{padding-bottom:.8rem}
}

/* ── Ecrã de telemóvel: densidade de texto ───────────────────
   Esta parte é para larguras de telemóvel. Num tablet ao alto a coluna
   é o dobro e o mesmo aperto deixava tudo pequeno de mais. */
@media (max-width:600px){
  /* Só aqui os seis se desdobram: num tablet ao alto cabem todos. */
  .card-x{display:block}
  .card-x > summary{
    display:grid;grid-template-columns:auto 1fr auto;
    column-gap:.7rem;align-items:center;cursor:pointer;
    min-height:34px;
  }
  .card-x > summary::after{
    content:'+';font-size:1.15rem;line-height:1;color:var(--gold-txt);
    transition:transform .4s var(--ease-io);
  }
  .card-x.is-open > summary::after{content:'\2013';transform:rotate(180deg)}
  .card-x.is-open > summary h3{color:var(--gold-txt)}
  .card-x .card-in > div > p{padding-top:.45rem}
  .js-acc .card-in{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-io)}
  .js-acc .card-x.is-open .card-in{grid-template-rows:1fr}

  .card-i,.trio-6 .card-i{width:22px;height:22px}
  .card h3,.trio-6 .card h3{font-size:1.125rem}
  .lede{font-size:1.0625rem}
  .hero-safe li{font-size:.9375rem}
  .hero-note{font-size:.875rem}
  .q-by{font-size:.9375rem}

  /* Instagram e WhatsApp eram dois links de 13px, ilegíveis no rodapé. */
  .fim-links{gap:1.75rem}
  .fim-links a{font-size:1rem;gap:.5rem}
  .fim-links .i{width:21px;height:21px}
  .card p,.trio-6 .card p{font-size:.9375rem;line-height:1.5}
  .trio-6 .card p{line-height:1.42}
  .passos b{font-size:1.1rem}
  .passos p{font-size:.9375rem;line-height:1.5}
  .cmp-pct{font-size:1.8rem}
  .cmp-list li{font-size:1rem}
  .cmp-list .i{width:16px;height:16px}
  .cmp-disc{font-size:.8125rem}
  .stat-v{font-size:1.75rem}
  .fq summary{font-size:1rem}
  .fq p{font-size:.9375rem}
}

/* ── Cabeçalho compacto ──────────────────────────────────────
   Vale para ecrã estreito e para qualquer ecrã baixo: um telemóvel largo
   deitado passa dos 999px e ficava com a barra alta do desktop. */
@media (max-width:999px),(max-height:640px){
  :root{--navh:60px;--bandh:20px}
  /* Os botões centram-se entre o topo da página e a linha dourada, não
     dentro da barra: é essa a caixa que se vê. */
  .nav{height:calc(var(--navh) + var(--bandh) / 2)}
}

/* ── Tablet ao alto: coluna larga e ecrã comprido ────────────
   Aqui a medida vem da largura, mas quem sobra é a altura: o texto
   ficava pequeno num painel com mais de mil pixéis livres. Sobe-se a
   escala de leitura para a proporção do aparelho. */
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  :root{--t-sec:clamp(2.1rem,1rem + 3.6vw,3rem)}
  .lede{font-size:1.125rem;max-width:52ch}
  .card h3,.trio-6 .card h3{font-size:1.2rem}
  .card p,.trio-6 .card p{font-size:.9375rem;line-height:1.55}
  .cmp-pct{font-size:clamp(2.6rem,6vw,3.4rem)}
  .cmp-list li{font-size:1rem}
  .cmp-list .i{width:19px;height:19px}
  .cmp-disc{font-size:.8125rem}
  .passos h3{font-size:1.0625rem}
  .passos p{font-size:.9375rem;line-height:1.55}
  .passos b{font-size:1.35rem}
  .stat-v{font-size:2.5rem}
  .q-text{font-size:1.85rem}
  .fq summary{font-size:1.0625rem}
  .fq p{font-size:.9375rem}
  .prova-t{font-size:1.7rem}
  .hero-safe li{font-size:1rem}

  /* O primeiro ecrã enche-se: há mais de mil pixéis de altura livre. */
  :root{--t-hero:clamp(3.2rem,1rem + 6.2vw,4.8rem)}
  .prova-stage{height:clamp(150px,19vw,200px)}
  .prova-stage img{width:clamp(88px,11vw,122px)}
  .prova-stage::before{width:clamp(112px,14vw,156px)}
  .hero-cta{margin-top:clamp(1.75rem,3.5vh,2.5rem)}

  /* Um card por linha nos dois primeiros painéis, com o ícone à frente
     do título para não ficarem altos de mais. */
  .cmp-grid{grid-template-columns:1fr;gap:.7rem}
  .trio:not(.trio-6){grid-template-columns:1fr;gap:.6rem}
  .trio:not(.trio-6) .card{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:.8rem;align-items:center;
  }
  .trio:not(.trio-6) .card-i{grid-row:1;margin-bottom:0;width:26px;height:26px}
  .trio:not(.trio-6) .card h3{grid-row:1;margin-bottom:0}
  .trio:not(.trio-6) .card p{grid-column:1/-1;margin-top:.3rem}

  /* Dashboard: dois por linha, todos à vista. */
  .trio-6{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .trio-6 .card{display:block;padding:clamp(1rem,2.2vw,1.4rem)}
  .trio-6 .card-i{grid-row:auto;width:26px;height:26px;margin-bottom:.5rem}
  .trio-6 .card h3{grid-row:auto;margin-bottom:.35rem}
  .trio-6 .card p{grid-column:auto;margin-top:0}
}

/* ── Voltar ao topo ────────────────────────────────────────── */
.topo{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,3vh,2rem);
  z-index:95;width:48px;height:48px;display:grid;place-items:center;
  /* o mesmo desenho serve ao seletor de tema fora da barra */
  border:1px solid var(--hair);border-radius:50%;color:var(--ink-2);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 32px -16px var(--sombra);
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease);
}
.topo[hidden]{display:none}
.topo:hover{color:var(--gold-txt);border-color:var(--gold);transform:translateY(-3px)}
.topo .i{width:17px;height:17px;transform:rotate(-90deg)}
/* Em desktop os pontos laterais ficam a meia altura, do mesmo lado. */
@media (min-width:1000px){ .topo{right:clamp(1rem,2vw,2rem)} }

/* ── Seletor de tema flutuante ────────────────────────────────
   Fora do desktop a barra fica só com o menu e o idioma; o tema desce
   para o canto oposto ao de voltar ao topo, com o mesmo desenho. */
@media (max-width:999px),(orientation:portrait) and (max-width:1100px){
  .tema{
    position:fixed;z-index:95;
    left:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,3vh,2rem);
    width:48px;height:48px;border-radius:50%;
    background:color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter:blur(8px);
    box-shadow:0 14px 32px -16px var(--sombra);
  }
  .tema .i{width:19px;height:19px}
}
@media (hover:none){
  .tema:hover,.topo:hover,.menu-b:hover{
    color:var(--ink-2);border-color:var(--hair);transform:none;
  }
  .menu-b[aria-expanded="true"]{color:var(--gold-txt);border-color:var(--gold)}
  /* A barra passa a ter duas peças: menu à esquerda, idioma à direita. */
  .nav-sel{display:contents}
  .lang{grid-area:1/3;justify-self:end}
}

/* Em telemovel o conteudo passa por baixo do cabecalho enquanto se faz
   scroll: o degrade transparente deixava ver tudo atras. */
/* O cabecalho e um bloco so: um retangulo que acaba na linha dourada e
   uma circunferencia que sai por baixo, a envolver o emblema. Os dois
   pintam o fundo da pagina fixo ao ecra, por isso lem como uma peca. */
.hchapa{
  display:none;position:fixed;top:0;left:0;right:0;z-index:88;
  height:calc(var(--navh) + var(--bandh) / 2);pointer-events:none;
  background:var(--bg);
  background-image:
    radial-gradient(90% 60% at 72% -8%, var(--luz-1) 0%, var(--luz-1-0) 60%),
    radial-gradient(60% 50% at 8% 104%, var(--luz-2) 0%, var(--luz-2-0) 62%);
  background-size:100% var(--luz-h);
  background-repeat:no-repeat;
  background-position:0 0;
}
/* Vazia antes do logotipo assentar ficava um disco solto por baixo do
   cabecalho. Entra com o encaixe, na mesma batida. */
.hbolha{
  display:none;position:absolute;left:0;right:0;
  top:var(--bolha-topo);height:var(--bolha);
  transform:scale(.2);opacity:0;
  -webkit-mask-image:radial-gradient(circle closest-side, #000 99%, transparent 100%);
  mask-image:radial-gradient(circle closest-side, #000 99%, transparent 100%);
  background:var(--bg);
  background-image:
    radial-gradient(90% 60% at 72% -8%, var(--luz-1) 0%, var(--luz-1-0) 60%),
    radial-gradient(60% 50% at 8% 104%, var(--luz-2) 0%, var(--luz-2-0) 62%);
  background-size:100% var(--luz-h);
  background-repeat:no-repeat;
  background-position:0 calc(var(--bolha-topo) * -1);
}

/* A chapa entra em cena em dois casos: sem deck, porque há conteúdo a
   passar por trás; e com o menu aberto, porque a barra não pode ficar
   transparente por cima da página. */
@media (max-height:519px){
  .hchapa,.hbolha{display:block}
  /* Os filetes afastam-se para nao tocarem na bolha. */
  .hb-esq{right:calc(50% + var(--bolha) * .6)}
  .hb-dir{left:calc(50% + var(--bolha) * .6)}
}
:root.menu-aberto .hchapa,
:root.menu-aberto .hbolha{display:block}
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-sel{display:flex;align-items:center;gap:.5rem;grid-area:1/3;justify-self:end}
  .menu-b{grid-area:1/1;justify-self:start}
}

/* Menu de secções: sem barra de navegação nem pontos laterais, este
   painel e a unica forma de saltar de seccao. Rotulo em texto, para
   nao inventar um icone fora da familia usada no resto da pagina. */
.menu-b{display:none}
.menu-p{display:none}
@media (max-width:1080px){
  .menu-b{
    display:inline-flex;align-items:center;height:44px;padding:0 .9rem;
    border:1px solid var(--hair);border-radius:var(--r);color:var(--ink-2);
    font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    transition:color .25s var(--ease),border-color .25s var(--ease);
  }
  .menu-b:hover,.menu-b[aria-expanded="true"]{color:var(--gold-txt);border-color:var(--gold)}
  .menu-p{
    display:flex;flex-direction:column;gap:.15rem;
    /* Encostado a linha dourada. z-index abaixo da chapa e da faixa: o
       emblema e a sua circunferencia passam por cima do painel. */
    position:fixed;z-index:87;
    top:calc(var(--navh) + var(--bandh) / 2);left:0;right:0;
    /* Folga em cima para o primeiro item nao ficar por baixo do
       emblema, que passa da linha para baixo. */
    padding:calc(var(--logo-h) * .66) var(--bleed) 1.15rem;
    border-bottom:1px solid var(--hair-2);
    background:var(--bg);
    background-image:
      radial-gradient(90% 60% at 72% -8%, var(--luz-1) 0%, var(--luz-1-0) 60%),
      radial-gradient(60% 50% at 8% 104%, var(--luz-2) 0%, var(--luz-2-0) 62%);
    background-size:100% var(--luz-h);
    background-repeat:no-repeat;
    background-position:0 calc((var(--navh) + var(--bandh) / 2) * -1);
    box-shadow:0 26px 50px -26px var(--sombra);
  }
  .menu-p[hidden]{display:none}
  .menu-p a{
    display:flex;align-items:center;min-height:52px;
    font-size:1.0625rem;color:var(--ink-2);
    border-bottom:1px solid var(--hair-2);
  }
  .menu-p a:last-of-type{border-bottom:0}
  .menu-cta{justify-content:center;margin-top:.9rem;color:var(--on-cta) !important}
}
/* Em ecras estreitos o lettering e o botao nao cabem os dois. Sai o
   botao, que esta repetido logo abaixo no hero. */

/* ── Movimento reduzido ────────────────────────────────────── */
/* O movimento completo corre em todos os aparelhos (ver nota no JS).
   Aqui fica so o que nao e movimento de pagina: o realce do rato. */
@media (prefers-reduced-motion: reduce){
  .card:hover,.btn:hover{transform:none}
}

/* ════════════════════════════════════════════════════════════
   PÁGINAS DE CONTEÚDO
   O deck é exclusivo da página inicial. Tudo o que se segue serve as
   páginas que são documentos: scroll normal, secções em sequência e
   um rodapé a sério. Partilham com a home os mesmos tokens, o mesmo
   cabeçalho e os mesmos componentes (.card, .trio, .passos, .fq).
   ════════════════════════════════════════════════════════════ */

/* A âncora tem de parar abaixo do cabeçalho fixo, senão o título fica
   escondido por trás dele. */
html{scroll-padding-top:calc(var(--navh) + var(--bandh) + var(--logo-h) * .58 + 1rem)}

/* A folga do topo mede-se pela base do emblema, como nos painéis. */
.doc{padding-top:calc(var(--navh) + var(--bandh) / 2 + var(--logo-h) * .58 + clamp(1.5rem,4vh,3rem))}

.sec{padding-block:clamp(2.75rem,6vh,4.75rem)}
.sec-t{padding-top:0}
/* Filete a separar secções vizinhas do mesmo peso. */
.sec-linha{border-top:1px solid var(--hair-2)}

/* ── Cabeçalho de página ───────────────────────────────────── */
.pag-hero{padding-bottom:clamp(2rem,5vh,3.5rem);text-align:center}
.pag-hero .t-hero{font-size:clamp(2.1rem,1rem + 3.4vw,3.9rem)}
.pag-hero .lede{margin:1.15rem auto 0;text-align:center}
.pag-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:clamp(1.5rem,3.5vh,2.25rem)}

/* ── Grelhas genéricas ─────────────────────────────────────── */
.g2,.g3,.g4{display:grid;gap:clamp(1rem,2vw,1.75rem)}
@media (min-width:760px){ .g2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:860px){ .g3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:760px){ .g4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .g4{grid-template-columns:repeat(4,1fr)} }

/* ── Grelha dos canais de contacto ─────────────────────────────
   Tem regra propria porque o numero de colunas segue o formato do
   aparelho e nao so a largura: um telemovel deitado é largo, mas nao
   tem altura para tres cartoes de contacto lado a lado. */
.canais{grid-template-columns:1fr}                                   /* telemovel ao alto */
@media (min-width:760px){ .canais{grid-template-columns:repeat(2,1fr)} }   /* tablet ao alto */
@media (min-width:1024px){ .canais{grid-template-columns:repeat(3,1fr)} }  /* tablet deitado e desktop */
/* Por ultimo para ganhar as duas de cima: telemovel deitado, onde a
   largura engana e a altura e que manda. */
@media (orientation:landscape) and (max-height:560px) and (max-width:1100px){
  .canais{grid-template-columns:repeat(2,1fr)}
}
.g-lado{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
@media (min-width:1000px){ .g-lado{grid-template-columns:1.15fr .85fr} }

/* ── Lista com marca ───────────────────────────────────────── */
.lista{list-style:none;display:grid;gap:.7rem}
.lista li{display:flex;align-items:flex-start;gap:.6rem;color:var(--ink-2);font-size:.9375rem}
.lista .i{width:19px;height:19px;color:var(--gold-txt);flex:none;margin-top:.15rem}

/* ── Números soltos ────────────────────────────────────────── */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
@media (min-width:860px){ .nums{grid-template-columns:repeat(4,1fr)} }
.nums > div{text-align:center}

/* ── Faixa de chamada ──────────────────────────────────────
   Um bloco só, com o halo do modal, para fechar uma página sem repetir
   o desenho de card. */
.faixa{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem);
  border-radius:var(--r-card);border:1px solid var(--hair);
  background:linear-gradient(158deg,var(--bg-3),var(--bg-2) 62%,var(--bg-2));
  box-shadow:0 40px 90px -50px var(--sombra), inset 0 1px 0 var(--vidro-a);
}
.faixa::before{
  content:'';position:absolute;left:50%;top:-45%;translate:-50% 0;
  width:min(120%,780px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,
    color-mix(in oklab, var(--gold) 16%, transparent) 0%, var(--luz-2-0) 70%);
}
.faixa > *{position:relative}
.faixa .lede{margin:1rem auto 0;text-align:center}
.faixa-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:clamp(1.5rem,3vh,2.25rem)}

/* ── Prosa: legais, blog, textos longos ────────────────────
   Estilo por elemento em vez de por classe: estes textos vêm de ficheiros
   de conteúdo e não se lhes pode pedir marcação decorada. */
.prosa{max-width:72ch;margin-inline:auto;color:var(--ink-2)}
@media (min-width:1200px){ .prosa{max-width:78ch} }
.prosa > * + *{margin-top:1.1rem}
.prosa h2{
  font-size:clamp(1.4rem,2.4vw,2rem);color:var(--ink);
  margin-top:clamp(2.25rem,5vh,3.25rem);padding-top:clamp(1.25rem,3vh,1.75rem);
  border-top:1px solid var(--hair-2);
}
.prosa h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prosa h3{font-size:clamp(1.1rem,1.7vw,1.3rem);color:var(--ink);margin-top:1.9rem}
.prosa h4{font-family:var(--ff-b);font-size:1rem;font-weight:600;color:var(--ink);margin-top:1.6rem}
.prosa p,.prosa li{font-size:1rem;line-height:1.72}
.prosa ul,.prosa ol{padding-left:1.35rem;display:grid;gap:.55rem}
.prosa li::marker{color:var(--gold-txt)}
.prosa strong,.prosa b{color:var(--ink);font-weight:600}
.prosa a:not(.btn){
  color:var(--gold-txt);text-decoration:underline;
  text-underline-offset:.18em;text-decoration-thickness:1px;
  text-decoration-color:var(--hair);transition:text-decoration-color .25s var(--ease);
}
.prosa a:not(.btn):hover{text-decoration-color:var(--gold)}
.prosa blockquote{
  padding:1.1rem 0 1.1rem 1.35rem;border-left:2px solid var(--gold);
  font-family:var(--ff-d);font-weight:500;font-size:clamp(1.1rem,2vw,1.4rem);
  line-height:1.34;color:var(--ink);
}
.prosa figure{margin-block:1.75rem}
.prosa figcaption{margin-top:.6rem;font-size:.8125rem;color:var(--ink-3);text-align:center}
.prosa img{border-radius:var(--r-card);border:1px solid var(--hair-2)}
.prosa hr{border:0;border-top:1px solid var(--hair-2);margin-block:2rem}
.prosa code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;
  padding:.12em .38em;border-radius:var(--r);background:var(--vidro-a);color:var(--ink);
}
/* Data e tempo de leitura de um artigo. */
.prosa-meta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem .9rem;
  font-size:.8125rem;color:var(--ink-3);
}

/* ── Tabela ────────────────────────────────────────────────
   Rola dentro da própria caixa: uma tabela larga não pode ser o que faz
   a página inteira andar para o lado. */
.tab-caixa{overflow-x:auto;border:1px solid var(--hair-2);border-radius:var(--r-card)}
.tabela{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:34rem}
.tabela th,.tabela td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--hair-2)}
.tabela thead th{
  font-family:var(--ff-b);font-size:var(--t-lbl);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gold-txt);
  background:var(--vidro-b);
}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela td{color:var(--ink-2)}

/* ── Formulário ────────────────────────────────────────────── */
.form{display:grid;gap:1rem;max-width:34rem;margin-inline:auto;text-align:left}
.campo{display:grid;gap:.4rem}
.campo > span{font-size:var(--t-lbl);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;
  font:inherit;font-size:.9375rem;color:var(--ink);
  background:var(--vidro-b);border:1px solid var(--hair);border-radius:var(--r);
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.campo textarea{min-height:9rem;resize:vertical;line-height:1.6}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--gold);background:var(--vidro-a);
}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-3)}

/* ── Rodapé ────────────────────────────────────────────────
   O mesmo fecho da página inicial em todas as páginas: a marca, a linha
   de assinatura, os dois botões e os direitos. As colunas de navegação
   que aqui viviam ficaram sem função quando a barra passou a levar as
   ligações todas. */
.rodape{text-align:center}
/* Fora do deck o rodapé precisa de um filete a separá-lo do conteúdo. */
:root:not(.tem-deck) .rodape{
  border-top:1px solid var(--hair-2);
  margin-top:clamp(2.5rem,6vh,4.5rem);
  padding-block:clamp(2.5rem,5vh,3.5rem);
}

/* ── Telemóvel: mesma densidade de leitura da home ─────────── */
@media (max-width:600px){
  .prosa p,.prosa li{font-size:.9375rem;line-height:1.68}
  .lista li{font-size:.9375rem}
  .sec{padding-block:clamp(2rem,5vh,3rem)}
}

/* ── Fichas de filtro ──────────────────────────────────────
   Mesmo desenho do seletor de idioma: filete fino, canto da página, e o
   estado activo marcado a dourado em vez de a cheio. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;
  border:1px solid var(--hair);border-radius:var(--r);
  font-size:.8125rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.chip:hover{color:var(--ink);border-color:var(--gold)}
.chip.is-on{color:var(--gold-txt);border-color:var(--gold);background:var(--vidro-b)}
@media (hover:none){ .chip:hover{color:var(--ink-2);border-color:var(--hair)}
  .chip.is-on:hover{color:var(--gold-txt);border-color:var(--gold)} }

/* ── Card de canal (contacto) ──────────────────────────────
   O botao encosta ao fundo para os quatro cards terminarem na mesma
   linha, mesmo com descricoes de comprimento diferente. */
.canal{display:flex;flex-direction:column}
.canal h2{font-size:clamp(1.15rem,1.7vw,1.4rem);margin-bottom:.6rem}
.canal p{font-size:.875rem;color:var(--ink-2)}
.canal-v{margin-top:.6rem;color:var(--gold-txt) !important;font-weight:600;letter-spacing:.02em}
.canal-b{margin-top:auto;padding-top:0;align-self:stretch;margin-top:1.4rem}
/* O card de canal tem botão e mantém a coluna. */
.canal{display:flex}
.canal .card-i{grid-row:auto;grid-column:auto;margin-bottom:.8rem;width:34px;height:34px}
.canal h2{grid-row:auto;grid-column:auto}
.canal p{grid-column:auto;margin-top:0}

/* ── Depoimento ────────────────────────────────────────────
   Sem caixa: um filete a esquerda chega para agrupar a citacao e a
   assinatura, e evita mais um card num ecra que ja tem muitos. */
.depo{
  display:flex;flex-direction:column;gap:1.1rem;
  padding:1.4rem 0 1.4rem 1.4rem;border-left:1px solid var(--hair);
}
.depo blockquote{
  font-family:var(--ff-d);font-weight:500;
  font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.42;color:var(--ink);
  flex:1;
}
/* As aspas ficam no tipo de corpo: as do Rollo são desenhadas à altura
   das maiúsculas e empurravam a primeira linha para baixo. Aspas curvas
   e não guilhemés: o site escreve em pt-BR, es-CO e en-US, e nos três
   a convenção é esta. */
.depo blockquote::before,
.depo blockquote::after{
  font-family:var(--ff-b);font-weight:500;color:var(--gold-txt);
}
.depo blockquote::before{content:'\201C'}
.depo blockquote::after{content:'\201D'}
.depo figcaption{color:var(--ink-2)}

/* Card em destaque: o mesmo desenho com o filete a dourado, para marcar
   qual das opcoes interessa a quem esta a decidir. */
/* Numeros soltos: o rotulo passa para linha propria. */
.nums .label{display:block;margin-top:.45rem}
.nums .stat-v{margin-bottom:0}

/* ── Cronologia ────────────────────────────────────────────
   Filete vertical com um ponto por marco. O ponto e desenhado no ::before
   do item, para nao ser mais um elemento vazio na marcacao. */
.crono{list-style:none;position:relative;padding-left:1.75rem}
.crono::before{
  content:'';position:absolute;left:5px;top:.55rem;bottom:.55rem;width:1px;
  background:linear-gradient(to bottom,var(--gold),var(--hair),transparent);
}
.crono li{position:relative;padding-bottom:1.75rem}
.crono li:last-child{padding-bottom:0}
.crono li::before{
  content:'';position:absolute;left:-1.75rem;top:.45rem;
  width:11px;height:11px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--gold) 18%, transparent);
}
.crono-ano{
  display:block;font-size:var(--t-lbl);font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--gold-txt);margin-bottom:.35rem;
}
.crono h3{font-size:1.125rem;margin-bottom:.3rem}
.crono p{font-size:.875rem;color:var(--ink-2)}

/* Historia: a prosa aqui vive numa coluna, nao centrada na pagina. */
.hist-texto{max-width:none;margin-inline:0;margin-top:1.1rem}

/* Diferenciais em duas colunas quando ha espaco. */
@media (min-width:760px){ .lista-2{grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,3vw,3rem)} }
@media (min-width:1200px){ .lista-2{grid-template-columns:repeat(3,1fr)} }

/* Citacao isolada, a fechar uma seccao. */
.depo-solo{margin-top:clamp(2rem,4vh,3rem);max-width:52ch}
.depo-solo blockquote{font-size:clamp(1.15rem,2vw,1.5rem)}

/* ── Fundador ──────────────────────────────────────────────── */
 /* Retrato quadrado, com um anel dourado a cortá-lo do fundo e um halo
    por trás. É a única fotografia do site: vale a pena tratá-la. */
.fund-foto{
  position:relative;display:block;width:100%;max-width:17rem;aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  border:1px solid var(--gold);
  box-shadow:0 30px 70px -40px var(--sombra),
             0 0 0 6px color-mix(in oklab, var(--gold) 10%, transparent);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease);
}
.fund-foto::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, color-mix(in oklab, var(--bg) 55%, transparent), transparent 46%);
}
.fund-foto:hover{
  transform:translateY(-4px);
  box-shadow:0 40px 84px -40px var(--sombra),
             0 0 0 8px color-mix(in oklab, var(--gold) 14%, transparent);
}
.fund-retrato img{width:100%;height:100%;object-fit:cover;display:block}
/* Nome à esquerda, id à direita, na largura do retrato. */
.fund-id{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-top:.9rem;width:100%;max-width:17rem;
  font-size:.75rem;letter-spacing:.06em;color:var(--ink-3);
}
.fund-id span:first-child{
  color:var(--gold-txt);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fund-nome{font-size:clamp(1.6rem,2.6vw,2.25rem);margin-bottom:.35rem}
.fund-papel{margin-bottom:1.1rem;color:var(--gold-txt)}
/* Retrato e texto lado a lado, encostados: em duas colunas largas o
   texto ficava a meia página de distância da fotografia. */
.fundador{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
@media (min-width:760px){ .fundador{grid-template-columns:minmax(0,17rem) 1fr} }
@media (max-width:999px){
  .fundador{justify-items:center;text-align:center}
  .fundador .lede{margin-inline:auto}
  .fundador .pag-cta{justify-content:center !important}
  .fund-id{align-items:center;margin-inline:auto}
}

/* ── Card de leitura ───────────────────────────────────────── */
.leitura{display:flex;flex-direction:column;gap:.55rem}
.leitura h3{font-size:clamp(1.05rem,1.5vw,1.25rem);margin-bottom:0}
.leitura p{flex:1}
.leitura-t{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.5rem;
  font-size:var(--t-lbl);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--gold-txt);
}
.leitura-t .i{width:15px;height:15px;transition:transform .35s var(--ease)}
.leitura:hover .leitura-t .i{transform:translateX(4px)}
@media (max-width:999px){
  /* Nao entra na grelha de icone-a-frente: nao tem icone e tem rodape. */
  .leitura{display:flex}
  .leitura h3{grid-row:auto}
  .leitura p{grid-column:auto;margin-top:0}
}

/* Tres numeros: nao ha meia coluna a sobrar como no caso de quatro. */
@media (min-width:640px){ .nums-3{grid-template-columns:repeat(3,1fr)} }
/* Numero unico em destaque, dentro de uma faixa. */
.destaque-num .dn-valor{
  font-family:var(--ff-d);font-weight:500;line-height:1;
  font-size:clamp(2.6rem,7vw,4.6rem);color:var(--gold-txt);
  margin-block:.5rem;
}
.destaque-num .label{display:block}

/* ── Artigos de um texto legal ─────────────────────────────
   Cada artigo e um bloco com titulo numerado. O numeral vive no h2, por
   isso nao leva filete proprio: o do h2 ja separa os artigos. */
.prosa .art + .art{margin-top:0}
.prosa .art > * + *{margin-top:1.1rem}
.art-n{
  display:inline-block;min-width:1.6em;margin-right:.5rem;
  font-family:var(--ff-b);font-size:.62em;font-weight:600;
  letter-spacing:.06em;color:var(--gold-txt);vertical-align:middle;
}
/* Paragrafo de abertura de um texto legal: um degrau acima do corpo. */
.prosa-abre{font-size:1.0625rem;color:var(--ink);margin-bottom:clamp(1.5rem,3vh,2.25rem)}
@media (max-width:600px){ .prosa-abre{font-size:1rem} }

/* ── Artigo do blog ────────────────────────────────────────
   Indice a esquerda e texto a direita, com o indice preso ao ecra. Abaixo
   de 1100px o indice passa a ser um sumario antes do texto: pegajoso num
   ecra estreito so rouba altura. */
.artigo-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:1100px){
  .artigo-grid{grid-template-columns:15rem 1fr;align-items:start}
  .artigo-toc{position:sticky;top:calc(var(--navh) + var(--bandh) + var(--logo-h) * .58 + 1rem)}
}
.artigo-grid .prosa{margin-inline:0}
.artigo-toc ul{list-style:none;display:grid;gap:.1rem;margin-top:.9rem}
.artigo-toc .label{display:block}
.toc-l{
  display:block;padding:.45rem 0 .45rem .85rem;
  border-left:1px solid var(--hair-2);
  font-size:.875rem;color:var(--ink-3);line-height:1.4;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.toc-l:hover{color:var(--ink-2);border-color:var(--hair)}
.toc-l.is-on{color:var(--gold-txt);border-color:var(--gold)}

/* Caixa de destaque dentro do corpo do artigo (vem do blog_content.py). */
.prosa .highlight-box{
  margin-block:1.75rem;padding:clamp(1.1rem,2.5vw,1.5rem);
  border-radius:var(--r-card);border:1px solid var(--hair);
  background:linear-gradient(155deg, var(--vidro-a), var(--vidro-b));
}
.prosa .highlight-box > * + *{margin-top:.8rem}
.prosa .highlight-box p{margin-top:0}

/* As ancoras do indice tem de parar abaixo do cabecalho fixo. */
.prosa h2[id],.prosa h3[id]{scroll-margin-top:calc(var(--navh) + var(--bandh) + var(--logo-h) * .58 + 1rem)}

/* ── Artigo em destaque (indice do blog) ───────────────────
   Largura toda, com a assinatura da marca ao lado. E o unico card que
   nao entra na grelha de tres. */
.destaque{display:grid;gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
@media (min-width:860px){ .destaque{grid-template-columns:1fr auto} }
.destaque h2{font-size:clamp(1.4rem,2.6vw,2.1rem);margin:.5rem 0 .7rem}
.destaque .lede{max-width:56ch}
.destaque-lado{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  padding-left:clamp(0px,3vw,2.5rem);
}
@media (min-width:860px){ .destaque-lado{border-left:1px solid var(--hair-2);min-width:13rem} }
.destaque-lado img{width:clamp(52px,6vw,64px);height:auto}
@media (max-width:999px){
  .destaque{display:grid}
  .destaque h2{grid-row:auto}
  .destaque p{grid-column:auto;margin-top:0}
}

/* ════════════════════════════════════════════════════════════
   PÁGINAS-PILAR
   Oito páginas de SEO que partilham um vocabulário próprio (pl-*). Antes
   este bloco estava repetido dentro de cada uma das oito; agora vive aqui
   uma vez só, reescrito na linguagem desta identidade. Os nomes das
   classes mantêm-se de propósito: o texto dessas páginas é o que as
   posiciona, e não se lhe toca para trocar um nome de classe.
   ════════════════════════════════════════════════════════════ */

/* Números do cabeçalho. */
.pl-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
@media (min-width:860px){ .pl-stats{grid-template-columns:repeat(4,1fr)} }
.pl-stat{text-align:center}
.pl-stat-val{
  display:block;font-family:var(--ff-d);font-weight:500;line-height:1;
  font-size:clamp(1.8rem,3.4vw,2.9rem);color:var(--gold-txt);
  font-variant-numeric:tabular-nums lining-nums;
}
.pl-stat-lbl{
  display:block;margin-top:.45rem;
  font-size:var(--t-lbl);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);line-height:1.3;
}

/* Grelhas de cards. */
.pl-cards-3,.pl-platforms,.pl-grid-2,.pl-req-grid{
  display:grid;gap:clamp(1rem,2vw,1.75rem);
}
@media (min-width:860px){ .pl-cards-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:760px){ .pl-platforms{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .pl-platforms{grid-template-columns:repeat(4,1fr)} }
@media (min-width:760px){ .pl-grid-2,.pl-req-grid{grid-template-columns:repeat(2,1fr)} }

.pl-card,.pl-platform-card,.pl-req-item,.pl-plat{
  position:relative;overflow:hidden;
  padding:clamp(1.25rem,2.4vw,1.9rem);border-radius:var(--r-card);
  background:linear-gradient(155deg, var(--vidro-a), var(--vidro-b));
  border:1px solid var(--hair-2);
  box-shadow:0 22px 50px -30px var(--sombra);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.pl-card:hover,.pl-platform-card:hover,.pl-plat:hover{
  transform:translateY(-5px);border-color:var(--hair);
  box-shadow:0 32px 64px -30px var(--sombra);
}
.pl-card-title,.pl-platform-name,.pl-plat-name{
  display:block;font-family:var(--ff-d);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.14;color:var(--ink);
  margin-bottom:.55rem;
}
.pl-card-text,.pl-platform-desc{font-size:.875rem;color:var(--ink-2);line-height:1.62}

/* Ficha de requisito: rótulo pequeno em cima, valor em destaque. */
.pl-req-label{
  display:block;font-size:var(--t-lbl);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);margin-bottom:.4rem;
}
.pl-req-value{display:block;font-size:1rem;color:var(--ink)}

/* Etiqueta de estado de uma plataforma. */
.pl-plat-tag,.pl-plat-status{
  display:inline-block;margin-bottom:.7rem;
  font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  padding:.3rem .65rem;border-radius:var(--r);
  border:1px solid var(--hair);color:var(--gold-txt);
}

/* Passos numerados: o mesmo desenho da cronologia de "como funciona". */
.pl-steps{list-style:none;display:grid;gap:clamp(1rem,2vw,1.6rem);max-width:56rem;margin-inline:auto}
.pl-step{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(.9rem,2.5vw,1.75rem);
  align-items:start;
}
.pl-step-num{
  width:clamp(2.5rem,5vw,3.25rem);height:clamp(2.5rem,5vw,3.25rem);
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--hair);background:var(--bg-2);
  font-family:var(--ff-d);font-weight:500;
  font-size:clamp(1.05rem,2vw,1.4rem);color:var(--gold-txt);line-height:1;
  font-variant-numeric:tabular-nums lining-nums;
}
.pl-step-title{
  display:block;font-family:var(--ff-d);font-weight:500;
  font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--ink);margin-bottom:.35rem;
}
.pl-step-text{font-size:.9375rem;color:var(--ink-2)}

/* Comparativo em três colunas: o que ganha marca-se a dourado, o que
   perde fica em texto secundário. Sem vermelho: um acento só na página. */
.pl-compare{display:grid;gap:.15rem}
.pl-compare > *{
  display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;
  padding:.9rem 1rem;border-bottom:1px solid var(--hair-2);font-size:.9375rem;
}
.pl-compare > *:last-child{border-bottom:0}
.pl-compare-mid{
  font-size:var(--t-lbl);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);text-align:center;
}
.pl-compare-yes{color:var(--gold-txt);font-weight:600}
.pl-compare-no{color:var(--ink-3)}

/* Dúvidas destas páginas: mesma lista das outras, com filete a separar. */
.pl-faq{display:grid;gap:0}
@media (min-width:1000px){ .pl-faq{grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem)} }
.pl-faq-item{border-top:1px solid var(--hair-2);padding-block:1.1rem}
.pl-faq-q{
  display:block;font-weight:600;font-size:.9375rem;color:var(--ink);
  margin-bottom:.5rem;
}
.pl-faq-a{font-size:.875rem;color:var(--ink-2);max-width:52ch}

/* Bloco final de chamada: o mesmo desenho da .faixa. */
.pl-final{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem);
  border-radius:var(--r-card);border:1px solid var(--hair);
  background:linear-gradient(158deg,var(--bg-3),var(--bg-2) 62%,var(--bg-2));
  box-shadow:0 40px 90px -50px var(--sombra), inset 0 1px 0 var(--vidro-a);
}
.pl-final::before{
  content:'';position:absolute;left:50%;top:-45%;translate:-50% 0;
  width:min(120%,780px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,
    color-mix(in oklab, var(--gold) 16%, transparent) 0%, var(--luz-2-0) 70%);
}
.pl-final-inner{position:relative}
.pl-final .lede,.pl-final-inner .lede{margin-inline:auto;text-align:center}
.pl-final .t-sec,.pl-final-inner .t-sec{max-width:none;margin-inline:auto}

/* Nestas páginas os títulos vão ao centro, como no resto do site. */

/* Onde o valor de um numero era um emoji, entra o icone da familia. */
.pl-stat-i{width:clamp(26px,3vw,34px);height:clamp(26px,3vw,34px);color:var(--gold-txt);margin-inline:auto}

/* ════════════════════════════════════════════════════════════
   DECK EM TODAS AS PÁGINAS
   O deck deixou de ser exclusivo da página inicial. O que muda fora dela
   é o cabeçalho, que aparece montado em vez de se construir, e o rodapé,
   que passa a ser o último painel.
   ════════════════════════════════════════════════════════════ */

/* Uma secção dentro do deck é um painel: a folga vertical é a do painel,
   não a da secção. As duas classes têm o mesmo peso, por isso a regra
   combinada é a única forma de decidir qual manda. */
.tem-deck .panel.sec{
  padding-block:calc(var(--navh) + var(--bandh) / 2 + var(--logo-h) * .58 + .5rem) 2.5rem;
}
.tem-deck .panel.sec-linha{border-top:0}

/* Fora da página inicial o logotipo não se constrói: a animação existe
   para apresentar a marca, e repetida a cada navegação passava a ruído.
   Fica montado e com as cores do ficheiro desde o primeiro instante. */
:root:not(.is-home) .hlogo{
  opacity:1;
  /* A centragem do emblema vinha do GSAP (xPercent/yPercent) e o GSAP só
     corre na página inicial: sem isto ficava meia largura à esquerda e
     meia altura acima em todas as outras. Não se põe no .hlogo em geral
     porque na home o GSAP leria este transform como deslocamento em
     pixéis e somava-lhe o seu. */
  transform:translate(-50%,-50%);
}
:root:not(.is-home) .hb-rule{transform:translateY(-50%) scaleX(1)}

/* ── Rodapé como último painel ─────────────────────────────── */
.tem-deck .rodape{display:flex;flex-direction:column;justify-content:center}
.tem-deck .rodape > .wrap{width:100%}

/* ── Nome do painel no ponto lateral ───────────────────────
   Um ponto sozinho não diz para onde leva. O rótulo entra a partir da
   direita, encostado ao ponto, e só com rato ou foco de teclado. */
.dots button{overflow:visible}
.dot-t{
  position:absolute;right:calc(100% + .5rem);top:50%;
  transform:translateY(-50%) translateX(.35rem);
  padding:.4rem .7rem;border-radius:var(--r);
  background:color-mix(in oklab, var(--bg-2) 94%, transparent);
  border:1px solid var(--hair);
  box-shadow:0 14px 30px -18px var(--sombra);
  font-size:.75rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);white-space:nowrap;line-height:1.2;
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.dots button:hover .dot-t,
.dots button:focus-visible .dot-t{opacity:1;transform:translateY(-50%) translateX(0)}
.dots button[aria-current="true"] .dot-t{color:var(--gold-txt);border-color:var(--gold)}
/* Num ecrã táctil não há rato a passar por cima e o rótulo só apareceria
   preso depois do toque, quando já se mudou de painel. */
@media (hover:none){ .dot-t{display:none} }

/* ── Blog: documento, não deck ─────────────────────────────
   O cabeçalho não pode ser transparente por cima de texto a passar. */
:root:not(.tem-deck) .hchapa,
:root:not(.tem-deck) .hbolha{display:block}
:root:not(.tem-deck) .hb-esq{right:calc(50% + var(--bolha) * .6)}
:root:not(.tem-deck) .hb-dir{left:calc(50% + var(--bolha) * .6)}

/* ── Fichas de navegação ───────────────────────────────────
   Nas dúvidas cada ficha leva ao ecrã da sua categoria. Ganham folga em
   cima: encostadas ao subtítulo liam-se como parte dele. */
.chips-nav{margin-top:clamp(1.75rem,4vh,2.75rem)}
.chips-nav .chip{text-decoration:none}
.chips-nav .chip:hover{color:var(--gold-txt);border-color:var(--gold);background:var(--vidro-b)}

/* Etiquetas de tema no blog: texto, não alvos. */
.temas{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem;
  margin-top:clamp(1.5rem,3vh,2.25rem);
  font-size:var(--t-lbl);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);
}
.temas span{display:inline-flex;align-items:center;gap:1.25rem}
.temas span:not(:last-child)::after{content:'';width:3px;height:3px;border-radius:50%;background:var(--gold)}

/* Os passos de "como funciona" são os mesmos cinco da página inicial;
   aqui há espaço para o texto respirar mais. */
.passos-cf li{padding-top:1.3rem}
.passos-cf p{font-size:.875rem}

/* Números dentro do ecrã do cabeçalho: separam-se do texto por um filete
   e não por um ecrã inteiro. */
.nums-hero{
  margin-top:clamp(2rem,5vh,3.25rem);
  padding-top:clamp(1.5rem,3.5vh,2.25rem);
  border-top:1px solid var(--hair-2);
}
/* Requisitos: cada um é um card com o seu ícone e não leva descrição,
   por isso o título é o corpo do card. */
/* Um requisito e uma frase, nao um titulo: leva o tipo de corpo. */
.req-card h3{
  font-family:var(--ff-b);font-weight:500;letter-spacing:0;
  font-size:.9375rem;line-height:1.45;color:var(--ink-2);margin-bottom:0;
}
@media (min-width:860px){ .req-grelha{grid-template-columns:repeat(3,1fr)} }

/* O canal da plataforma ocupa a linha toda: e o destino, nao um contacto. */
.canal-larga{grid-column:1/-1}
@media (min-width:760px){
  .canal-larga{
    display:grid;grid-template-columns:auto 1fr auto;
    align-items:center;gap:clamp(1rem,3vw,2rem);text-align:left;
  }
  .canal-larga .card-i{margin-bottom:0;width:44px;height:44px}
  .canal-larga .canal-b{margin-top:0;align-self:center;white-space:nowrap}
  .canal-larga h2{margin-bottom:.3rem}
  .canal-larga .canal-v{margin-top:.3rem}
}

/* ── Letreiro de nomes ─────────────────────────────────────
   Fita horizontal por baixo dos rostos, com a mesma largura. A lista vai
   duas vezes lá dentro: quando a primeira acaba de sair, a segunda está
   onde a primeira começou e o regresso ao início não se vê. */
.nicks{
  position:relative;margin:clamp(.75rem,2vw,1.25rem) auto 0;
  max-width:100%;overflow:hidden;
  /* Esbate nas pontas para os nomes não entrarem e saírem a direito. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.nicks[hidden]{display:none}
.nicks-fita{
  display:flex;width:max-content;
  animation:nicks-corre 18s linear infinite;
}
.nick{
  flex:none;padding-inline:clamp(.7rem,2vw,1.1rem);
  font-family:var(--ff-b);font-weight:600;
  font-size:clamp(.8125rem,1.4vw,.9375rem);
  line-height:1.6;white-space:nowrap;color:var(--gold-txt);
}
/* Um ponto a separar nomes, sem ser mais um elemento na marcação. */
.nick + .nick::before{
  content:'';display:inline-block;vertical-align:middle;
  width:3px;height:3px;border-radius:50%;background:var(--hair);
  margin-right:clamp(.7rem,2vw,1.1rem);
}
@keyframes nicks-corre{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* A fita para quando o rato está por cima: dá para ler um nome. */
.nicks:hover .nicks-fita{animation-play-state:paused}

/* Card com halo: o mesmo desenho do modal, para uma opção se ler primeiro
   sem ter de ser maior do que as outras. */
.card-halo::before{
  content:'';position:absolute;left:50%;top:-40%;translate:-50% 0;
  width:130%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle closest-side,
    color-mix(in oklab, var(--gold) 15%, transparent) 0%, var(--luz-2-0) 70%);
}
.card-halo > *{position:relative;z-index:1}

/* Navegação dos testemunhos. */
.depos-nav{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:clamp(1.5rem,3vh,2.25rem);
}
.depos-nav[hidden]{display:none}
.depos-nav .q-b:first-child .i{transform:rotate(180deg)}
.depo[hidden]{display:none}

/* Icone a abrir uma faixa, quando o assunto dela e um so. */
.faixa-i{width:44px;height:44px;color:var(--gold-txt);margin:0 auto 1rem}

/* Número em destaque, sem caixa: o número já se impõe sozinho. */
.destaque-num{text-align:center;padding-block:clamp(1rem,3vh,2rem)}
.destaque-num .label{display:block}
.destaque-num .dn-valor{
  font-family:var(--ff-d);font-weight:500;line-height:1;
  font-size:clamp(3rem,9vw,5.5rem);color:var(--gold-txt);
  margin-block:.6rem;
}

/* A tabela de níveis não precisa da largura toda: com o texto curto que
   tem, esticada até aos 1380px ficava com mais vazio do que dados. */
.tab-caixa{max-width:46rem;margin-inline:auto}

/* Prosa legal: mais largura em ecrã grande, que é onde sobra. */
@media (min-width:1200px){ .legal-corpo{max-width:82ch} }

/* Os ecrãs de um texto partido não repetem o filete de topo: o primeiro
   já o tem e os seguintes são o mesmo assunto. */
.legal-corpo .art:first-child h2{margin-top:0;padding-top:0;border-top:0}
.artigo-corpo h2:first-child{margin-top:0;padding-top:0;border-top:0}

/* ── Correcções de enquadramento ───────────────────────────
   Duas peças caíam na grelha de "ícone à frente do título" que os cards
   de conteúdo usam abaixo dos 1000px. Nenhuma das duas é um card de
   conteúdo: uma tem etiqueta por cima, a outra tem botão ao lado. */

/* Canal da plataforma: ícone, texto e botão em três colunas, do tablet
   para cima. A regra tem de vir depois da grelha dos cards estreitos,
   senão era essa a ganhar entre os 760 e os 999. */
@media (min-width:760px){
  .canal-larga{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:clamp(1.25rem,3vw,2.5rem);text-align:left;
  }
  .canal-larga .card-i{grid-row:1;grid-column:1;margin-bottom:0;width:52px;height:52px}
  .canal-larga h2{grid-row:1;grid-column:2;margin-bottom:.35rem}
  .canal-larga p{grid-row:2;grid-column:2;margin-top:0}
  .canal-larga .canal-v{grid-row:3;grid-column:2}
  .canal-larga .canal-b{grid-row:1/-1;grid-column:3;margin-top:0;white-space:nowrap}
}

/* ── Rodapé: redes acima, legais na linha dos direitos ─────
   As redes ficam junto aos botões e a linha de baixo junta os direitos, a
   privacidade e os cookies. A página inicial usa este mesmo rodapé: tinha
   um fecho só dela, sem os textos legais, e eram duas coisas a manter. */
.rodape .fim-links{
  margin-top:clamp(1.5rem,3vh,2.25rem);
  gap:2rem;font-size:.9375rem;color:var(--ink-2);
}
.rodape .fim-links a{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;transition:color .25s var(--ease)}
.rodape .fim-links a:hover{color:var(--gold-txt)}
.rodape .fim-links .i{width:19px;height:19px}
.rodape .fim-legal{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem 1.5rem;width:min(100%,44rem);
  margin-top:clamp(1.25rem,2.5vh,1.75rem);
  padding-top:1.1rem;border-top:1px solid var(--hair-2);
  font-size:.75rem;color:var(--ink-3);
}
.rodape .fim-legal a{display:inline-flex;align-items:center;min-height:38px;transition:color .25s var(--ease)}
.rodape .fim-legal a:hover{color:var(--gold-txt)}

/* Os dois botões do hero lado a lado, com a nota por baixo. */
.hero-cta-b{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
@media (max-width:999px),(orientation:portrait) and (max-width:1400px){
  .hero-cta-b{justify-content:center}
}

/* Diferenciais: a descrição é uma frase curta, não um parágrafo. */
.req-card h3{font-size:.8125rem;line-height:1.4}

/* Assinatura do fundador: nome por cima, id por baixo, ambos centrados
   pelo retrato. */
.fund-id{
  flex-direction:column;align-items:center;justify-content:center;
  gap:.2rem;text-align:center;
}
.fund-id span:first-child{font-size:1.0625rem;max-width:100%}
.fund-id-n{font-size:.75rem;letter-spacing:.08em}

/* A citação de entrada não compete com o subtítulo. */
.depo-hero{margin-inline:auto;text-align:left;max-width:44ch}

/* Números dentro do cabeçalho de uma página: centrados como tudo o resto
   desse ecrã, e com o rótulo por baixo do valor. */
.pag-hero .nums{max-width:52rem;margin-inline:auto}
.pag-hero .nums > div{text-align:center}

/* A troca de página das listas não pode mudar a altura do painel: sem
   isto, passar de dois artigos longos para dois curtos via-se como um
   salto. */
.depos{align-items:stretch}
.depos > .depo{height:100%}

/* Rodapé encostado ao último ecrã: um filete a separar e nada mais. */
.rodape-encostado{
  width:100%;margin-top:clamp(2rem,5vh,3.25rem);
  padding-top:clamp(1.25rem,3vh,1.75rem);
  border-top:1px solid var(--hair-2);
}
.rodape-encostado .fim-in{gap:0}
.rodape-encostado .fim-links{margin-top:0}
.rodape-encostado .fim-legal{border-top:0;padding-top:.6rem;margin-top:.6rem}

/* Título de abertura de um artigo: o mesmo peso dos títulos de tema que
   o separador cria a seguir. */
.artigo-abre{
  font-size:clamp(1.4rem,2.4vw,2rem);color:var(--ink);
  margin:0 0 1.1rem;padding:0;border:0;
}

/* Em telemóvel as listas paginadas mostram um card de cada vez. */
@media (max-width:700px){ .depos{grid-template-columns:1fr} }

/* ── Atalhos flutuantes ────────────────────────────────────
   Encostados à esquerda, a meia altura: falar connosco e ir para a
   candidatura, de qualquer página. Do lado oposto ao de voltar ao topo,
   para não se atropelarem. */
.atalhos{
  position:fixed;left:clamp(.75rem,2vw,1.5rem);top:50%;translate:0 -50%;
  z-index:96;display:flex;flex-direction:column;gap:.6rem;
}
.atalho{
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--hair);color:var(--ink-2);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  box-shadow:0 14px 32px -16px var(--sombra);
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.atalho .i{width:20px;height:20px}
.atalho:hover{color:var(--gold-txt);border-color:var(--gold);transform:translateY(-2px)}
.atalho-cta{color:var(--on-cta);border-color:var(--gold);background:var(--grad-btn)}
.atalho-cta:hover{color:var(--on-cta)}
@media (hover:none){ .atalho:hover{color:var(--ink-2);border-color:var(--hair);transform:none}
  .atalho-cta:hover{color:var(--on-cta);border-color:var(--gold)} }
/* Em ecrã estreito empilham-se por cima do seletor de tema, que também
   vive neste canto. Lado a lado ficavam em cima dele: os dois usam o
   mesmo `bottom` e o mesmo `left`. */
@media (max-width:600px){
  .atalhos{
    top:auto;translate:none;left:clamp(1rem,2.5vw,2rem);
    bottom:calc(clamp(1rem,3vh,2rem) + 48px + .6rem);
    gap:.5rem;
  }
  .atalho{width:44px;height:44px}
}

/* ── Cards desdobráveis por fila ───────────────────────────
   Todos com a mesma largura e o cabeçalho com a mesma altura, para a
   fila fechar a direito. */
/* Todos com a mesma largura e a mesma altura: numa fila de tres, dois
   cards com texto curto e um com texto longo ficavam de tamanhos
   diferentes e a linha lia-se torta. */
.js-fila{align-items:stretch}
.js-fila .card-x{margin:0;display:flex;flex-direction:column}
.js-fila .card-x > summary{flex:none}
.js-fila .card-in{flex:1;min-height:0}
.js-fila .card-x > summary{
  display:grid;grid-template-columns:auto 1fr auto;
  column-gap:.75rem;align-items:center;min-height:2.75rem;
}
.js-fila .card-x > summary::after{
  content:'+';font-size:1.15rem;line-height:1;color:var(--gold-txt);
  transition:transform .35s var(--ease);
}
.js-fila .card-x[open] > summary::after{content:'\2013'}
.js-fila .card-x > summary{cursor:pointer}
.js-fila .card-in > div > p{padding-top:.7rem}

/* Números numa fila centrada: com três valores e quatro colunas ficava
   um vazio à direita e o conjunto lia-se torto. */
.nums-fila{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.25rem,4vw,3rem);
}
.nums-fila > div{min-width:7rem}

/* ── O atributo hidden manda ───────────────────────────────
   Qualquer regra de classe com `display` bate o `display:none` que o
   atributo `hidden` traz do browser. Foi isso que deixou o ramo do
   Telegram a pedir o número na mesma e o botão de voltar visível no
   primeiro passo. Uma regra no fim da folha fecha a porta a esta
   família de enganos. */
[hidden]{display:none !important}

/* Grelha de tres colunas fixas: com auto-fit, uma fila incompleta
   esticava os cards que lá estavam e a largura deixava de bater com a
   das filas de cima. */
@media (min-width:860px){ .g3-fixo{grid-template-columns:repeat(3,1fr)} }
/* Dois por fila em ecrã largo, um em telemóvel. */
@media (min-width:760px){ .g2-fixo{grid-template-columns:repeat(2,1fr)} }

/* Nota da tabela centrada pela largura da propria tabela. */
.nota-centro{text-align:center}