/* =====================================================================
   MetaPROF DataStory · tema e componentes
   Cartões empilhados em scroll vertical, com o grafismo do metaprof.pt:
   letra Meta Pro, fundo branco, caixas com filete vermelho à esquerda,
   sobretítulos vermelhos em maiúsculas, destaque a marcador amarelo.
   Para mudar as cores de uma story, use `tema` no ficheiro da story
   (ver LEIA-ME.md) em vez de editar este ficheiro.
   ===================================================================== */

/* ---------- Letra: Meta Pro, a do metaprof.pt (cópia em motor/fontes) ---------- */
@font-face{font-family:"MP Meta";font-weight:400;font-style:normal;font-display:swap;
  src:url(fontes/MetaPro-CondBook.woff2) format("woff2"),url(fontes/MetaPro-CondBook.woff) format("woff")}
@font-face{font-family:"MP Meta";font-weight:500;font-style:normal;font-display:swap;
  src:url(fontes/MetaPro-Medium.woff2) format("woff2"),url(fontes/MetaPro-Medium.woff) format("woff")}
@font-face{font-family:"MP Meta";font-weight:700;font-style:normal;font-display:swap;
  src:url(fontes/MetaPro-Bold.woff2) format("woff2"),url(fontes/MetaPro-Bold.woff) format("woff")}
/* O Black dos números grandes vem do mesmo sítio que no metaprof.pt; sem internet, fica o Bold. */
@font-face{font-family:"MP Meta";font-weight:900;font-style:normal;font-display:swap;
  src:url(https://fonts.cdnfonts.com/s/39341/FFMetaProBlk.woff) format("woff")}

/* ---------- Tokens: tema claro (por omissão) ---------- */
:root{
  --paper:#FFFFFF;      /* fundo dos cartões ímpares */
  --paper2:#F8F9FA;     /* fundo dos cartões pares (o cinza das caixas do site) */
  --sheet:#FFFFFF;      /* caixas e folhas */
  --ink:#1E2A3A;        /* texto e barras principais */
  --ink-soft:#5D6B7A;   /* texto secundário */
  --rule:#E3E6EA;       /* linhas e pontos apagados */
  --line:rgba(0,0,0,.125); /* contorno das caixas, como os cartões do site */
  --accent:#DC3545;     /* o vermelho metaPROF: sobretítulos, filetes, botões */
  --accent-deep:#C82333;
  --accent-soft:#FBE3E6;/* fundo dos ícones */
  --mark:#FFC107;       /* marcador amarelo: barras e etiquetas de destaque */
  --mark-ink:#1E2A3A;   /* texto sobre o marcador */
  --hl:#FFE28A;         /* sublinhado a marcador no texto */
  /* O traço do marcador, desenhado à mão, com as pontas recortadas: sobe (a) ou desce (b) para a direita. */
  --hl-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M3,9.5 C25,8.2 50,5.6 72,3.6 C84,2.6 92,2.2 97,1.6 L99.2,3.2 L98.1,5.4 L99.8,8.3 L98.6,11 L99.5,13.6 L97.6,15.2 C85,16.2 70,17.4 52,18.8 C34,20.2 16,21.6 2.6,22.6 L0.8,21 L2.2,18.6 L0.3,15.8 L1.7,13.2 L0.6,10.8 Z' fill='%23FFE28A' fill-opacity='1'/%3E%3C/svg%3E");
  --hl-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M3,14.5 C25,15.8 50,18.4 72,20.4 C84,21.4 92,21.8 97,22.4 L99.2,20.8 L98.1,18.6 L99.8,15.7 L98.6,13 L99.5,10.4 L97.6,8.8 C85,7.8 70,6.6 52,5.2 C34,3.8 16,2.4 2.6,1.4 L0.8,3 L2.2,5.4 L0.3,8.2 L1.7,10.8 L0.6,13.2 Z' fill='%23FFE28A' fill-opacity='1'/%3E%3C/svg%3E");
  --alert:#DC3545;      /* alerta, quedas, problema */
  --ghost:#ADB5BD;      /* barras neutras */
  --shadow:rgba(0,0,0,.14);

  --f-num:"MP Meta","Meta Pro","Helvetica Neue",Arial,sans-serif;
  --f-body:"MP Meta","Meta Pro","Helvetica Neue",Arial,sans-serif;
  --f-label:"MP Meta","Meta Pro","Helvetica Neue",Arial,sans-serif;

  /* Pausa: quanto se faz scroll com o cartão parado antes de chegar o seguinte.
     A story pode mudá-la com `pausa` (ver LEIA-ME.md). */
  --pausa:55svh;
}
/* ---------- Tema escuro ---------- */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#121417; --paper2:#171A1E; --sheet:#1D2126; --ink:#F1F3F5; --ink-soft:#AAB3BD; --rule:#2E343B;
  --line:rgba(255,255,255,.12); --accent:#F26B78; --accent-deep:#E35D6A; --accent-soft:rgba(242,107,120,.16);
  --mark-ink:#1E2A3A; --hl:rgba(255,226,138,.34); --hl-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M3,9.5 C25,8.2 50,5.6 72,3.6 C84,2.6 92,2.2 97,1.6 L99.2,3.2 L98.1,5.4 L99.8,8.3 L98.6,11 L99.5,13.6 L97.6,15.2 C85,16.2 70,17.4 52,18.8 C34,20.2 16,21.6 2.6,22.6 L0.8,21 L2.2,18.6 L0.3,15.8 L1.7,13.2 L0.6,10.8 Z' fill='%23FFE28A' fill-opacity='.34'/%3E%3C/svg%3E"); --hl-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M3,14.5 C25,15.8 50,18.4 72,20.4 C84,21.4 92,21.8 97,22.4 L99.2,20.8 L98.1,18.6 L99.8,15.7 L98.6,13 L99.5,10.4 L97.6,8.8 C85,7.8 70,6.6 52,5.2 C34,3.8 16,2.4 2.6,1.4 L0.8,3 L2.2,5.4 L0.3,8.2 L1.7,10.8 L0.6,13.2 Z' fill='%23FFE28A' fill-opacity='.34'/%3E%3C/svg%3E"); --alert:#F26B78; --ghost:#5F6872; --shadow:rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#121417; --paper2:#171A1E; --sheet:#1D2126; --ink:#F1F3F5; --ink-soft:#AAB3BD; --rule:#2E343B;
  --line:rgba(255,255,255,.12); --accent:#F26B78; --accent-deep:#E35D6A; --accent-soft:rgba(242,107,120,.16);
  --mark-ink:#1E2A3A; --hl:rgba(255,226,138,.34); --hl-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M3,9.5 C25,8.2 50,5.6 72,3.6 C84,2.6 92,2.2 97,1.6 L99.2,3.2 L98.1,5.4 L99.8,8.3 L98.6,11 L99.5,13.6 L97.6,15.2 C85,16.2 70,17.4 52,18.8 C34,20.2 16,21.6 2.6,22.6 L0.8,21 L2.2,18.6 L0.3,15.8 L1.7,13.2 L0.6,10.8 Z' fill='%23FFE28A' fill-opacity='.34'/%3E%3C/svg%3E"); --hl-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M3,14.5 C25,15.8 50,18.4 72,20.4 C84,21.4 92,21.8 97,22.4 L99.2,20.8 L98.1,18.6 L99.8,15.7 L98.6,13 L99.5,10.4 L97.6,8.8 C85,7.8 70,6.6 52,5.2 C34,3.8 16,2.4 2.6,1.4 L0.8,3 L2.2,5.4 L0.3,8.2 L1.7,10.8 L0.6,13.2 Z' fill='%23FFE28A' fill-opacity='.34'/%3E%3C/svg%3E"); --alert:#F26B78; --ghost:#5F6872; --shadow:rgba(0,0,0,.55); color-scheme:dark}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-weight:400;font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%}
img{max-width:100%}
strong,b{font-weight:700}

/* ---------- Cartões empilhados ---------- */
.ds-deck{display:block}
.slide{position:sticky;top:var(--stick,0px);min-height:100vh;min-height:100svh;
  background:var(--paper);border-radius:14px 14px 0 0;box-shadow:0 -10px 30px var(--shadow);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(env(safe-area-inset-top,0px) + 64px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  display:flex;flex-direction:column;align-items:center;gap:28px}
/* A pausa entre cartões: o cartão fica parado enquanto o leitor faz scroll por este espaço vazio. */
.slide:not(:last-child){margin-bottom:var(--pausa)}
.slide:nth-child(even){background:var(--paper2)}
.slide:first-child{border-radius:0;box-shadow:none}
.slide::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#000;opacity:var(--shade,0);pointer-events:none}
.inner,.foot{transform:scale(var(--sc,1));transform-origin:50% 0}
.inner{width:100%;max-width:520px;margin-block:auto;display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- Barra de progresso ---------- */
.ds-prog{position:fixed;top:0;left:0;right:0;z-index:5;pointer-events:none;display:flex;align-items:center;gap:4px;
  padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ds-prog i{flex:1;height:3px;border-radius:2px;background:var(--rule);transition:background .3s}
.ds-prog i.done{background:var(--ink)}
.ds-prog i.cur{background:var(--accent)}

/* ---------- Botão de som ---------- */
.ds-som{pointer-events:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;margin-left:8px;padding:0 13px 0 10px;
  border-radius:5px;border:1px solid var(--line);background:var(--sheet);color:var(--ink);box-shadow:0 2px 10px var(--shadow);
  font:500 12px var(--f-label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ds-som svg{width:16px;height:16px;stroke-width:1.9}
.ds-som.on{background:var(--accent);border-color:var(--accent);color:#fff}
.ds-som:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Cabeçalho do cartão ---------- */
.tag{display:flex;align-items:center;gap:10px}
.ico{flex:none;width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.ico svg{width:22px;height:22px;stroke-width:1.9}
.ico.alert{background:var(--alert);color:#fff}
.eyebrow{font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
/* O sobretítulo no topo do cartão é o título da secção: tem de se ler como título. */
.tag .eyebrow{font-family:var(--f-num);font-weight:700;font-size:clamp(19px,5.4vw,24px);letter-spacing:.04em;line-height:1.2}
.sheet .eyebrow{font-size:15px}

/* ---------- Tipografia ---------- */
h1,h2{font-family:var(--f-num);margin:0;text-wrap:balance;color:var(--ink)}
h1{font-weight:900;font-size:clamp(36px,10.5vw,60px);line-height:1;text-transform:uppercase;letter-spacing:-.005em}
h2{font-weight:700;font-size:clamp(28px,7.6vw,40px);line-height:1.1}
/* O traço vermelho por baixo dos títulos de secção do metaprof.pt. */
h2::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--accent);margin-top:14px}
p{margin:0;max-width:62ch}
.lede{font-size:19px;line-height:1.45}
.soft{color:var(--ink-soft);font-size:16px}
/* Marcador a cobrir a palavra inteira, com o traço ligeiramente inclinado de quem sublinha à mão.
   Cada linha de um destaque partido recebe o seu traço (box-decoration-break). */
.hl{background:var(--hl-a) center/100% 100% no-repeat;color:inherit;padding:.1em .28em;margin:0 -.14em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl.hl-b{background-image:var(--hl-b)}
a{color:var(--accent);text-underline-offset:3px}

.big{font-family:var(--f-num);font-weight:900;font-size:clamp(76px,23vw,136px);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mid{font-family:var(--f-num);font-weight:700;font-size:clamp(40px,11.5vw,58px);line-height:.95;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.big.alert,.mid.alert{color:var(--alert)}
.unit{font-family:var(--f-label);font-weight:400;font-size:15px;color:var(--ink-soft);line-height:1.4}

.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-label);font-size:14px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--mark);color:var(--mark-ink);width:fit-content}
.chip.down{background:var(--alert);color:#fff}

/* As caixas do metaprof.pt: contorno fino, filete vermelho à esquerda, sombra leve. */
.sheet{background:var(--sheet);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
  box-shadow:0 .35rem .9rem var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.sheet .eyebrow{color:var(--ink-soft)}
/* Caixa dentro de caixa: sem segundo filete nem sombra, só o cinza das caixas do site. */
.sheet .sheet{background:var(--paper2);border-left:1px solid var(--line);box-shadow:none}
.src{font-family:var(--f-label);font-size:13px;color:var(--ink-soft);line-height:1.45}

/* ---------- Bloco: barras ---------- */
.bars{display:flex;flex-direction:column;gap:12px}
.bar-row{display:grid;grid-template-columns:var(--lab,62px) 1fr;gap:10px;align-items:center}
.bar-row .lab{font-family:var(--f-label);font-weight:500;font-size:14px;color:var(--ink-soft)}
.track{position:relative;height:30px}
.fill{height:100%;background:var(--ink);border-radius:3px;width:var(--w);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.fill.m{background:var(--mark)}
.fill.g{background:var(--ghost)}
.fill.a{background:var(--alert)}
.track .val{position:absolute;top:50%;transform:translateY(-50%);left:calc(var(--w) + 8px);font-family:var(--f-num);font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.track .val.in{left:auto;right:calc(100% - var(--w) + 8px);color:var(--paper)}
.track .val.in.m{color:var(--mark-ink)}
.track .val.in.a{color:#fff}
.track .val.in.g{color:var(--ink)}
.slide:not(.seen) .fill{transform:scaleX(0)}

/* ---------- Bloco: contraste (lista ordenada vs dispersão) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rank{list-style:none;margin:0;padding:0;font-family:var(--f-label);font-size:13px}
.rank li{display:flex;gap:8px;border-bottom:1px solid var(--rule);padding:5px 0}
.rank li b{font-weight:500;color:var(--ink-soft);width:1.6em}
.rank li span{flex:1;height:6px;margin-top:6px;background:var(--ink);opacity:.75;border-radius:2px}
.scatter{position:relative;height:150px}
.scatter i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ghost)}

/* ---------- Bloco: pontos ---------- */
.pt-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dots{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--rule);transition:background .3s}
.dots i.on{background:var(--alert)}

/* ---------- Bloco: lista de números-chave ---------- */
.list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:12px 0;border-top:1px solid var(--rule);align-items:baseline}
.list li .n{font-family:var(--f-num);font-weight:700;font-size:30px;color:var(--accent);font-variant-numeric:tabular-nums;min-width:3.2ch;white-space:nowrap}
.list li p{font-size:16px}
.list li.sem-n{grid-template-columns:1fr}

/* ---------- Blocos: métricas e destaques ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .sheet{gap:4px}

/* ---------- Bloco: fluxo ---------- */
.flow{display:grid;gap:10px}
.lane{padding:14px;border-radius:10px;border:1px dashed var(--line)}
.lane.pub{background:var(--sheet);border:1px solid var(--line);border-left:4px solid var(--accent)}
.lane .t{font-family:var(--f-num);font-weight:700;font-size:21px;line-height:1.1}
.lane .s{font-size:15px;color:var(--ink-soft);margin-top:4px}
.lane.dark{opacity:.75}
.lane.dark .t{color:var(--ghost)}
.flow .hint{justify-content:center}

/* ---------- Bloco: pergunta ---------- */
.q{font-family:var(--f-num);font-weight:900;font-size:clamp(150px,48vw,240px);line-height:.8;color:var(--alert);text-align:center}

/* ---------- Bloco: exigências ---------- */
.demands{counter-reset:d;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.demands li{counter-increment:d;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.demands li::before{content:counter(d);font-family:var(--f-num);font-weight:700;font-size:18px;width:34px;height:34px;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:50%}
.demands strong{display:block;font-family:var(--f-num);font-size:20px;font-weight:700;line-height:1.15;margin-bottom:2px}
.demands span{font-size:16px;color:var(--ink-soft)}

/* ---------- Bloco: fontes ---------- */
.sources{list-style:none;margin:0;padding:0;font-size:16px;display:flex;flex-direction:column;gap:10px}
.sources a{color:var(--ink);font-weight:700;text-decoration-color:var(--accent)}
.sources small{display:block;font-family:var(--f-label);font-size:14px;color:var(--ink-soft)}

/* ---------- Bloco: dica de scroll ---------- */
.hint{display:flex;align-items:center;gap:10px;font-family:var(--f-label);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.hint .arr{display:inline-block;color:var(--accent);animation:ds-nudge 1.6s ease-in-out infinite}
@keyframes ds-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- Bloco: código (para a amostra) ---------- */
.code{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;background:var(--paper2);border:1px solid var(--line);border-radius:8px;padding:12px;overflow-x:auto;white-space:pre;color:var(--ink)}

/* ---------- Rodapé ---------- */
.foot{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:10px}
.foot a{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;min-width:0}
.foot .url{font-family:var(--f-label);font-size:13px;color:var(--ink-soft)}
.foot .pg{font-family:var(--f-label);font-weight:500;font-size:13px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.foot img{height:24px;width:auto}
/* Data da story (campo `data`), antes do número da página: fica em cada cartão, também nos prints. */
.foot .data{font-weight:700;color:var(--accent);margin-right:10px;white-space:nowrap}
.foot .pg{white-space:nowrap}
/* O nome como no menu do metaprof.pt: «metaPROF», a vermelho. */
.logo{font-family:var(--f-num);font-weight:700;font-size:21px;line-height:1;white-space:nowrap;color:var(--accent)}
.logo b{font-weight:700}

/* ---------- Cartão final ---------- */
.slide.end{background:#fff;color:#1E2A3A}
.slide.end .inner{align-items:center;text-align:center;gap:26px}
.slide.end .logo{font-size:clamp(52px,16vw,112px);max-width:100%;color:#DC3545}
.slide.end .end-logo{width:min(48%,200px);height:auto}
.slide.end p{color:#1E2A3A;opacity:.85}
/* O botão do metaprof.pt (btn-meta): vermelho, cantos de 5 px. */
.cta{display:inline-flex;align-items:center;gap:10px;font:700 17px var(--f-body);background:#DC3545;color:#fff;border-radius:5px;padding:13px 28px;text-decoration:none;transition:background .3s,transform .3s,box-shadow .3s}
.cta:hover{background:#C82333;transform:translateY(-2px);box-shadow:0 4px 12px rgba(220,53,69,.3)}
.cta:focus-visible,.foot a:focus-visible,.slide a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- Amostra: paleta e tipografia ---------- */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.swatches div{display:flex;flex-direction:column;gap:4px;min-width:0}
.swatches i{display:block;height:56px;border-radius:8px;border:1px solid var(--line)}
.swatches span{font-family:var(--f-label);font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere}
.type-row{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--rule)}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.icon-grid div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;min-width:0}
.icon-grid svg{width:22px;height:22px;stroke-width:1.75}
.icon-grid span{font-family:var(--f-label);font-size:12px;color:var(--ink-soft);text-align:center;overflow-wrap:anywhere}

@media (prefers-reduced-motion: reduce){
  .fill,.dots i{transition:none}
  .hint .arr{animation:none}
  .cta{transition:none}
}