/*!
 * O sistema visual do site, num ficheiro só.
 *
 * Estava inteiro dentro do <style> da página comercial, e assim que houve mais
 * do que uma página isso deixou de ser sustentável: duas cópias dos mesmos
 * tokens divergem sempre, e a que diverge é a que ninguém está a olhar.
 *
 * Neutros quentes (nunca cinzento-azul), acento âmbar, verde de sinal. Todos os
 * pares texto/fundo daqui passam 4,5:1 nas duas luzes — está medido por
 * verificacao/paginas.mjs, não é uma intenção.
 */

:root {
  /* Os nomes do site sobre os papéis da marca Pushnews (assets/marca-pushnews.css,
     carregado antes). Declarados no :root, que é o mesmo elemento que leva o
     data-theme — por isso resolvem para o tema activo. */
  --ground: var(--fundo);
  --surface: var(--superficie);
  --surface-2: var(--superficie-2);
  --ink: var(--texto);
  --ink-2: var(--rotulo-neutro);
  --ink-3: var(--texto-suave);
  --rule: var(--borda);
  --rule-strong: var(--borda-forte);

  /* --brand é cor de LETRA (rótulos, ligações): azul sobre claro, amarelo sobre
     escuro. O amarelo da marca vive em --brand-lit (bordas, traços, destaques). */
  --brand: var(--rotulo);
  --brand-lit: var(--pn-amarelo);
  --brand-wash: var(--chip-amarelo-fundo);
  --brand-fg: var(--sobre-brand);

  --signal: var(--validado);
  --signal-lit: var(--pn-verde);
  --signal-wash: var(--chip-verde-fundo);
  --signal-fg: #ffffff;

  --info: var(--link);
  --info-lit: var(--pn-azul);
  --info-wash: var(--chip-azul-fundo);

  --danger: var(--alerta);
  --danger-lit: var(--perigo);
  --danger-wash: var(--chip-vermelho-fundo);

  /* Uma letra só, como na marca: Poppins. */
  --sans: var(--letra);
  --serif: var(--letra);
  --mono: var(--letra-mono);

  --measure: 66ch;
  --shell: 1120px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
}
:root[data-theme="dark"] { --signal-fg: #050505; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--pad); }
.col { max-width: var(--measure); }

/* ---------- barra de controlos ---------- */

.controlos {
  position: sticky; top: 0; z-index: 190;
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .45rem var(--pad);
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}
.idiomas { display: flex; gap: 2px; }
.idiomas button, .themer {
  font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  background: transparent; color: var(--ink-3);
  border: 1px solid transparent; border-radius: 3px;
  padding: .28rem .5rem; cursor: pointer; line-height: 1;
}
.idiomas button:hover, .themer:hover { color: var(--ink); background: var(--surface-2); }
.idiomas button[aria-pressed="true"] { color: var(--sobre-primario); background: var(--primario); border-color: var(--primario); }
.themer { display: flex; align-items: center; gap: .35rem; }
.themer svg { width: 15px; height: 15px; }
.themer .ic-lua { display: none; }
:root[data-theme="dark"] .themer .ic-sol { display: none; }
:root[data-theme="dark"] .themer .ic-lua { display: block; }
:root[data-theme="light"] .themer .ic-sol { display: block; }
:root[data-theme="light"] .themer .ic-lua { display: none; }

/* ---------- tipografia ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 .9rem;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; flex: none; }
h1 {
  font-size: clamp(2.1rem, 6vw, 3.6rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -.055em; margin: 0 0 1.1rem;
  max-width: 20ch; text-wrap: balance;
}
h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 700; line-height: 1.16; letter-spacing: -.045em; margin: 0 0 .8rem;
  max-width: 26ch; text-wrap: balance;
}
h3 {
  font-family: var(--sans); font-size: 1.06rem; font-weight: 700;
  line-height: 1.3; letter-spacing: -.01em; margin: 0 0 .4rem;
}
p { margin: 0 0 1.05rem; color: var(--ink-2); }
p.lead { font-size: clamp(1.08rem, 2.1vw, 1.32rem); line-height: 1.5; color: var(--ink); max-width: 56ch; }
strong, b { color: var(--ink); font-weight: 700; }
a { color: var(--link); }
code, .mono { font-family: var(--mono); font-size: .88em; }

section { padding-block: clamp(2.6rem, 6vw, 4.4rem); border-top: 1px solid var(--rule); scroll-margin-top: 4.5rem; }
section:first-of-type { border-top: 0; }

.rotulo {
  font-family: var(--sans); font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rotulo-neutro); margin: 0 0 .7rem;
}
.frase {
  font-family: var(--sans); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--ink); border-left: 3px solid var(--brand-lit);
  padding-left: .9rem; margin: 1.6rem 0 0; max-width: 48ch; line-height: 1.4;
}

/* ---------- conversão ---------- */

.accao { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; align-items: center; }
.cta {
  font-family: var(--sans); font-size: 1rem; font-weight: 700; text-decoration: none;
  padding: .85rem 1.35rem; border-radius: var(--raio); line-height: 1.2;
  border: 1px solid var(--primario); background: var(--primario); color: var(--sobre-primario);
}
.cta:hover { filter: brightness(1.06); }
.cta.segundo { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.cta.segundo:hover { border-color: var(--ink-3); filter: none; }
.garantias { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); margin: .9rem 0 0; max-width: 62ch; }

/* Cada secção da landing tem uma porta para o detalhe: é assim que a página
   comercial se mantém curta sem esconder nada de quem quer o fundo. */
.detalhe {
  display: inline-block; font-family: var(--sans); font-size: .88rem; font-weight: 700;
  text-decoration: none; color: var(--link); margin-top: .4rem;
}
.detalhe:hover { text-decoration: underline; }

/* ---------- blocos ---------- */

.caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.caixa {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--raio);
  padding: 1.2rem 1.3rem; font-family: var(--sans); font-size: .9rem; line-height: 1.55;
}
.caixa p { font-family: var(--sans); font-size: .9rem; margin: 0; color: var(--ink-2); }
.caixa p + p { margin-top: .6rem; }
.caixa h3 { margin-bottom: .35rem; }

.destaque {
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px;
  padding: clamp(1.2rem, 3vw, 1.9rem); margin-top: 1.8rem;
}
.destaque p:last-child { margin-bottom: 0; }

.aviso {
  font-family: var(--sans); font-size: .84rem; line-height: 1.5;
  color: var(--ink-2); background: var(--surface-2);
  border-left: 3px solid var(--rule-strong); border-radius: 0 4px 4px 0;
  padding: .7rem .95rem; margin: 1.4rem 0 0; max-width: 68ch;
}
.aviso b { color: var(--ink); }

.regra {
  font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.45;
  color: var(--ink); background: var(--brand-wash);
  border: 1px solid var(--brand-lit); border-radius: 5px;
  padding: .9rem 1.1rem; margin: 1.6rem 0 0; max-width: 62ch;
}

/* ---------- tabela ---------- */

.tabela-caixa { overflow-x: auto; margin-top: 1.8rem; border: 1px solid var(--rule); border-radius: 5px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--surface); }
th, td {
  font-family: var(--sans); font-size: .88rem; line-height: 1.45;
  text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top;
}
thead th {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); font-weight: 700;
}
tbody tr:last-child td { border-bottom: 0; }
td.hoje { color: var(--ink-3); }
td.amanha { color: var(--ink); font-weight: 600; }

/* ---------- listas numeradas ---------- */

.degraus { list-style: none; margin: 1.6rem 0 0; padding: 0; counter-reset: d; }
.degraus li {
  position: relative; padding: .85rem 0 .85rem 3.4rem;
  border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: .93rem; line-height: 1.5;
  color: var(--ink-2);
}
.degraus li:last-child { border-bottom: 0; }
.degraus li::before {
  counter-increment: d; content: counter(d);
  position: absolute; left: 0; top: .8rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule-strong);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
}
.degraus.dezero { counter-reset: d -1; }
.degraus b { color: var(--ink); }

/* ---------- figuras ---------- */

figure { margin: 1.8rem 0 0; }
figure.larga { overflow-x: auto; -webkit-overflow-scrolling: touch; }
figure.larga svg { min-width: 760px; }
figcaption { font-family: var(--sans); font-size: .82rem; color: var(--ink-3); margin-top: .7rem; max-width: 64ch; }
.arraste { display: none; }
@media (max-width: 860px) { .arraste { display: inline; } }

/* ---------- painel de comando: escuro nas duas luzes, de propósito ---------- */

.comando {
  --c-fundo: #050505; --c-carta: #111111; --c-carta-2: #1a1a1a; --c-linha: #2a2a2a;
  --c-texto: #ffffff; --c-texto-2: #d0d0d0; --c-texto-3: #a8a8a8;
  --c-acento: #ffbe0b; --c-verde: #8fdc3a; --c-vermelho: #ff7a7a;
  position: relative; overflow: hidden;
  background: var(--c-fundo); color: var(--c-texto);
  border: 1px solid var(--c-linha); border-radius: var(--raio);
  padding: clamp(1.4rem, 4vw, 3rem);
  margin-block: clamp(2.6rem, 6vw, 4.4rem);
  border-top: 1px solid var(--c-linha);
  font-family: var(--sans);
}
.comando .rotulo { color: var(--c-acento); }
.comando h2, .comando h3 { color: var(--c-texto); }
.comando h2 { font-family: var(--serif); }
.comando p { color: var(--c-texto-2); font-family: var(--sans); font-size: .96rem; }
.comando .lead { color: var(--c-texto); font-family: var(--sans); }
.comando strong, .comando b { color: var(--c-texto); }
.comando figcaption { color: var(--c-texto-3); }
.comando a { color: var(--c-acento); }

.comandos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.comandos .parar { grid-column: 1 / -1; }
@media (max-width: 760px) { .comandos { grid-template-columns: 1fr; } }

.cmd { background: var(--c-carta); border: 1px solid var(--c-linha); border-radius: 6px; padding: 1.1rem 1.2rem; min-width: 0; }
.cmd.acento { border-color: var(--c-acento); background: var(--c-carta-2); }
.cmd.parar { border-color: var(--c-vermelho); }
.cmd .quando {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-texto-3); display: block; margin-bottom: .5rem;
}
.cmd.acento .quando { color: var(--c-acento); }
.cmd.parar .quando { color: var(--c-vermelho); }
.cmd h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.cmd p { margin-bottom: 0; font-size: .9rem; line-height: 1.5; }
.cmd p + p { margin-top: .7rem; }

.mostradores { display: grid; gap: .45rem; margin-top: .9rem; }
.mostrador { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; border-top: 1px solid var(--c-linha); padding-top: .45rem; }
.mostrador .rot { font-size: .82rem; color: var(--c-texto-3); }
.mostrador .val { font-family: var(--mono); font-size: .86rem; font-weight: 700; color: var(--c-acento); text-align: right; }

.ordem {
  margin-top: .9rem; border: 1px solid var(--c-linha); border-radius: 5px;
  background: #100D0A; padding: .8rem .9rem;
  font-family: var(--mono); font-size: .78rem; line-height: 1.6;
}
.ordem .dita { color: var(--c-texto); display: block; margin-bottom: .6rem; }
.ordem .campo { display: block; color: var(--c-texto-3); }
.ordem .campo b { color: var(--c-verde); font-weight: 700; }
.ordem .preco { display: block; margin-top: .6rem; color: var(--c-acento); }

.lista-inegociavel { list-style: none; margin: .9rem 0 0; padding: 0; }
.lista-inegociavel li {
  font-size: .86rem; color: var(--c-texto-2); line-height: 1.45;
  padding: .4rem 0 .4rem 1.2rem; border-top: 1px solid var(--c-linha); position: relative;
}
.lista-inegociavel li::before { content: "▪"; position: absolute; left: 0; color: var(--c-acento); }

.comando .degraus li { color: var(--c-texto-2); border-bottom-color: var(--c-linha); }
.comando .degraus b { color: var(--c-texto); }
.comando .degraus li::before { background: var(--c-carta); color: var(--c-texto-2); border-color: var(--c-linha); }
.comando .destaque { background: var(--c-carta); border-color: var(--c-linha); }
.comando .destaque p { color: var(--c-texto-2); }

/* ---------- fim de página ---------- */

.final { background: var(--surface); border-top: 1px solid var(--rule); }
.rodape { font-family: var(--sans); font-size: .8rem; color: var(--ink-3); padding-block: 1.6rem 2.6rem; border-top: 1px solid var(--rule); }

.mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.mapa a {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: .95rem 1.05rem;
}
.mapa a:hover { border-color: var(--rule-strong); }
.mapa .t { font-family: var(--sans); font-weight: 700; font-size: .96rem; display: block; }
.mapa .d { font-family: var(--sans); font-size: .84rem; color: var(--ink-3); display: block; margin-top: .2rem; line-height: 1.45; }

@media print { .controlos, .pn-migalhas { display: none; } section { break-inside: avoid; } }

/* ---------- marca Pushnews: logo na barra e os círculos do bloco preto ---------- */

.marca-topo { margin-right: auto; display: flex; align-items: center; }
.marca-topo img { width: 118px; height: auto; display: block; }
.marca-topo .logo-escuro { display: none; }
:root[data-theme="dark"] .marca-topo .logo-claro { display: none; }
:root[data-theme="dark"] .marca-topo .logo-escuro { display: block; }

.comando::before, .comando::after {
  position: absolute; content: ""; border-radius: 50%; pointer-events: none;
}
.comando::before { top: -290px; right: -200px; width: 600px; height: 600px; border: 1px solid rgba(255, 190, 11, .42); }
.comando::after { top: -240px; right: -150px; width: 500px; height: 500px; border: 1px solid rgba(58, 134, 255, .52); }
.comando > * { position: relative; z-index: 1; }