/* xgaia.pt: o que é só desta página. As cores vêm de tokens.css e os componentes de sistema.css (design system «xGAIA»). */
html{scroll-behavior:smooth;scroll-padding-top:72px}
.salto{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--campo);color:var(--ink);padding:10px 14px;border-radius:var(--radius-controlo)}
.salto:focus{left:16px}
.topo{position:sticky;top:0;z-index:10}
.nav a:hover{color:var(--ink);background:var(--soft)}
ul,ol{list-style:none;margin:0;padding:0}

/* a abertura */
.abertura{padding:var(--space-24) 0}
.abertura-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.abertura .destaque{margin-top:22px;max-width:34em}
.acoes{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:28px}
.abertura-texto>*{animation:entra .7s cubic-bezier(.2,.7,.2,1) both}
.abertura-texto>:nth-child(2){animation-delay:.08s}
.abertura-texto>:nth-child(3){animation-delay:.16s}
.abertura-texto>:nth-child(4){animation-delay:.24s}
.lupa{animation:entra .8s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes entra{from{opacity:0;transform:translateY(14px)}}

/* um parágrafo, à lupa */
.lupa-topo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.lupa .pilula{background:var(--painel-2);color:var(--p-suave);font-size:12px}
.lupa-texto{font:500 21px/1.6 var(--font-serif);color:var(--p-corpo)}
.en{border-radius:4px;padding:2px 0;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:color .35s,background-color .35s,box-shadow .35s;cursor:default}
.lupa[data-ativa] .en{color:var(--p-suave)}
.lupa[data-ativa] .en.acesa{color:var(--p-texto);background:color-mix(in srgb,var(--coral) 20%,transparent);box-shadow:0 2px 0 var(--coral)}
.lupa-chaves{display:flex;flex-wrap:wrap;gap:6px}
.chave{height:var(--controlo-mini);padding:0 12px;border-radius:var(--radius-pilula);border:1px solid var(--hairline);background:var(--painel-2);color:var(--p-texto);font:500 13px var(--font-sans);cursor:pointer;position:relative;overflow:hidden}
.chave:hover{border-color:var(--coral)}
.chave[aria-pressed=true]{background:var(--coral-fundo);border-color:var(--coral-fundo);color:var(--on-coral)}
.lupa-explica{min-height:4.5em;font-size:14px;line-height:1.5;color:var(--p-suave)}
.lupa-explica b{color:var(--p-texto);font-weight:600}

/* bandas de duas colunas */
.duas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.texto{margin-top:16px;max-width:65ch}
.cabeca{max-width:760px}
.painel .nota{margin:0}

/* o trilho do percurso e a equipa */
.trilho{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-2)}
.passo{height:var(--controlo-altura);padding:0 16px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hairline);border-radius:var(--radius-controlo);background:var(--campo);color:var(--ink);font:500 14px var(--font-sans);cursor:pointer}
.passo:hover{background:var(--soft)}
.passo .num{font:500 12px var(--font-mono);color:var(--muted)}
.passo[aria-pressed=true]{background:var(--coral-fundo);border-color:var(--coral-fundo);color:var(--on-coral)}
.passo[aria-pressed=true] .num{color:var(--on-coral)}
.equipa{margin-top:var(--space-6);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--space-3)}
.agente{background:var(--card);border-radius:var(--radius-cartao);padding:var(--space-5);transition:background-color .3s,box-shadow .3s}
.agente p:last-child{margin-top:8px;font-size:15px}
.agente.perito{background:var(--painel);border:1px solid var(--painel-linha);box-shadow:inset 0 3px 0 var(--coral),var(--sombra-painel)}
.equipa[data-fase] .agente.fora{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline)}
.equipa[data-fase] .agente:not(.fora){box-shadow:inset 0 3px 0 var(--coral)}
.vigilia{margin-top:var(--space-6);max-width:65ch}
.vigilia b{color:var(--ink);font-weight:600}

/* os princípios */
.regras{margin-top:var(--space-8);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-8) 56px}
.regras li{border-top:1px solid var(--hairline);padding-top:var(--space-4)}
.regras .num{font:500 13px var(--font-mono);color:var(--coral-texto-forte)}
.regras p{margin-top:8px;max-width:46ch}

/* o Storma e o contacto */
.produto .marca{font-size:32px}
.produto .p-corpo{color:var(--p-corpo)}
.produto .acoes{margin-top:4px}
.contacto .destaque{margin-top:20px;font-size:22px}
.contacto .nota{margin-top:8px}
.contacto .ligacao{display:inline-block;padding:4px 0}
.rodape-in{display:grid;gap:10px}
.rodape .x{color:var(--coral-texto)}

/* o que surge ao chegar ao ecrã (só com JavaScript) */
.js .surge{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .surge.chegou{opacity:1;transform:none}

@media (max-width:900px){
  .abertura{padding:var(--space-16) 0}
  .abertura-in,.duas{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
}
@media (max-width:640px){
  html{scroll-padding-top:16px}
  .topo{position:static}
  .nav a{padding:8px 10px;font-size:13px}
  .lupa-texto{font-size:19px}
  .passo{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .surge{opacity:1;transform:none}
}