@font-face{font-family:"Instrument Serif";src:url(InstrumentSerif.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(Archivo.woff2) format('woff2');font-weight:100 900;font-display:swap}

/* ── Cor: OKLCH, neutros tintados p/ o teal do logótipo. Sem #fff, sem #000. ── */
:root{
  --ground: oklch(99.1% 0.003 195);
  --raise:  oklch(100% 0.0015 195);
  --sunk:   oklch(97.4% 0.006 195);
  --ink:    oklch(23% 0.021 220);
  --ink-2:  oklch(43% 0.019 218);
  --muted:  oklch(58% 0.014 210);
  --line:   oklch(92.4% 0.006 200);
  --line-2: oklch(86% 0.009 200);

  --teal:      oklch(39.5% 0.062 208);
  --teal-deep: oklch(31% 0.055 210);
  --teal-live: oklch(53% 0.083 200);
  --wash:      oklch(96.4% 0.014 200);
  --on-teal:   oklch(98.5% 0.008 200);

  --ok:   oklch(50% 0.11 155);
  --warn: oklch(56% 0.11 75);
  --crit: oklch(52% 0.16 27);

  /* espectro funcional por agrupamento — vem das figuras do logo Vozes da Nossa Terra */
  --g-a: oklch(45% 0.075 205);
  --g-b: oklch(47% 0.10 268);
  --g-c: oklch(53% 0.10 62);
  --g-d: oklch(48% 0.10 350);

  --e-out: cubic-bezier(.16,1,.3,1);
  --h-nav:112px;
  --h-demo:0px;   /* barra de demonstração: 0 em produção; a barra repõe 38px quando ligada */
  --sh-1: 0 1px 2px oklch(23% 0.02 220 / .05);
  --sh-2: 0 1px 2px oklch(23% 0.02 220 / .05), 0 10px 30px -14px oklch(23% 0.02 220 / .18);
  --sh-3: 0 24px 64px -20px oklch(23% 0.03 220 / .28);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{text-wrap:balance;line-height:1.12;font-weight:600}
.ser{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.012em}
a{color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--teal-live);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
.tn{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.eb{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--teal-live)}




/* ── logótipo do header: só o símbolo, com as figuras a rodar ── */
.brand{display:flex;align-items:center;flex:none;text-decoration:none;line-height:0;
  transition:opacity .18s var(--e-out)}
.brand:hover{opacity:.88}
.brand-sym{position:relative;width:54px;height:54px;flex:none;display:block}
.brand-sym img{position:absolute;inset:0;width:100%;height:100%}
.brand-fig{animation:spin 40s linear infinite;transform-origin:50% 50%;will-change:transform}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.brand-fig{animation:none}}



/* ── HERO: a foto ajusta-se ao ecrã pelo seu próprio rácio; nunca estica nem corta ── */
/* o hero enche o que sobra do ecrã: sem rácio fixo, nunca deixa barra nem mostra a secção seguinte */
.hero{position:relative;isolation:isolate;background:var(--ground);width:100%;
  height:calc(100svh - var(--h-nav) - var(--h-demo));min-height:min(460px, 100svh - var(--h-nav) - var(--h-demo));
  display:flex;align-items:flex-start}
.hero-bg{position:absolute;inset:0;z-index:0;display:block}
.hero-foto-m{display:none}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
/* garante o texto legível seja qual for o recorte */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* calibrado sobre as 69 fotos: com 24%/38% só 3 delas deixavam o texto legivel;
     com 28%/44% passam as 69. E o degrade tem de estar AQUI, nao queimado na foto,
     senao so serve a foto para que foi feito. */
  background:linear-gradient(96deg, var(--ground) 0%, var(--ground) 28%,
             oklch(99.1% 0.003 195 / .90) 44%, oklch(99.1% 0.003 195 / 0) 66%)}
.hero-in{position:relative;z-index:2;padding:clamp(36px,7vh,92px) 26px 0;max-width:1180px;width:100%}
.hero-col{max-width:min(47%,600px)}
/* logótipo horizontal: símbolo + letras ao lado (no hero a coluna é estreita) */
.hero-logo{display:flex;align-items:center;gap:clamp(14px, min(1.9vw,2.6vh), 30px);
  margin-bottom:clamp(24px, 4vh, 54px)}
.hl-sym{position:relative;width:clamp(84px, min(10vw, 15vh), 158px);aspect-ratio:1;flex:none;display:block}
.hl-sym img{position:absolute;inset:0;width:100%;height:100%}
.hl-txt{width:clamp(196px, min(23vw, 34vh), 368px);height:auto;display:block}
.hero h1{font-size:clamp(28px, min(3.5vw, 5.2vh), 54px);margin:0 0 clamp(24px,3.6vh,40px);
  max-width:19ch;letter-spacing:-.017em;line-height:1.08;text-wrap:balance}
.hero h1 i{font-style:normal;color:var(--teal)}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap}

/* ── a faixa da marca: o teal do logótipo a carregar a secção, texto a branco ── */
.hero-sub{background:var(--teal);color:var(--on-teal);border-bottom:0}
.hero-sub-in{padding:clamp(44px,6vh,72px) 26px;display:flex;flex-direction:column;
  align-items:center;text-align:center;max-width:1180px}
/* A régua «Projeto educativo e cultural — desde 2000». Sem esta regra base o
   <div> fica display:block, o <span> e o <b> encostam (0 px de folga) e o <i>,
   inline e vazio, tem largura 0: o traço não aparece. [João, 29 Jul] */
.since{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:11px;font:600 12.5px/1.35 "Archivo",sans-serif;letter-spacing:.1em;
  text-transform:uppercase}
.since i{flex:none;display:block;width:18px;height:1px;background:currentColor;opacity:.5}
.since b{font-weight:700}
@media(max-width:520px){.since{gap:8px}.since i{width:13px}}

.hero-sub .since{color:oklch(100% 0 0 / .62)}
.hero-sub .since b{color:var(--on-teal)}
.hero-sub .since i{background:oklch(100% 0 0 / .32)}
.hero-sub .hero-p{font-size:clamp(16.5px,1.4vw,20px);color:var(--on-teal);max-width:68ch;
  margin:18px 0 0;line-height:1.62;font-weight:300}
.hero-sub .hero-p b{font-weight:600}
.hero-sub .hero-p2{font-size:clamp(15px,1.15vw,17px);color:oklch(100% 0 0 / .8);max-width:56ch;
  margin:14px 0 0;line-height:1.6;font-style:italic;font-weight:300}
.hero-sub .hero-nota{font-size:13px;color:oklch(100% 0 0 / .72);line-height:1.6;max-width:60ch;
  margin:24px 0 0;padding-top:20px;border-top:1px solid oklch(100% 0 0 / .18)}
.hero-sub .hero-nota b{color:var(--on-teal)}

@media(max-width:1100px){ .hero-col{max-width:48%} }


/* ── MOBILE: hero refeito. Texto em cima no branco, foto por baixo. Sem sobreposição. ── */
@media(max-width:760px){
  .hero{aspect-ratio:auto;max-height:none;display:block;padding:0}
  .hero::before{display:none}          /* não é preciso gradiente: não há texto sobre foto */
  .hero-bg{display:none}               /* a horizontal não serve no telemóvel */
  .hero-in{padding:34px 22px 30px;text-align:center}
  .hero-col{max-width:100%;display:flex;flex-direction:column;align-items:center}
  .hero-logo{flex-direction:column;gap:12px;margin-bottom:22px;align-items:center}
  .hl-sym{width:92px}
  .hl-txt{width:212px}
  .hero h1{font-size:clamp(30px,8vw,40px);max-width:14ch;margin:0 0 24px;text-align:center}
  .hero-cta{flex-direction:column;width:100%;max-width:320px;gap:9px}
  .hero-cta .btn,.hero-cta .btn-2{width:100%;text-align:center;padding:14px;font-size:14.5px;min-height:48px}
  .hero-foto-m{display:block;width:100%;line-height:0}
  .hero-foto-m img{width:100%;height:auto;aspect-ratio:1.064;object-fit:cover;object-position:center 60%}
  .hero-sub-in{padding:30px 22px 32px}
  .hero-sub .hero-p{font-size:15.5px}
}


/* ── entrada do hero: sequência curta, só transform/opacity, ease-out-expo ── */
@keyframes stw-rise{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:none}
}
@keyframes stw-settle{
  from{opacity:0;transform:scale(1.045)}
  to{opacity:1;transform:none}
}
@keyframes stw-wipe{
  from{opacity:0}
  to{opacity:1}
}
.hero-bg{animation:stw-settle 1.5s cubic-bezier(.16,1,.3,1) both}
.hero-logo{animation:stw-rise .85s cubic-bezier(.16,1,.3,1) .08s both}
.hero h1{animation:stw-rise .85s cubic-bezier(.16,1,.3,1) .2s both}
.hero-cta{animation:stw-rise .85s cubic-bezier(.16,1,.3,1) .32s both}
.hero-foto-m{animation:stw-wipe 1s cubic-bezier(.16,1,.3,1) .3s both}
/* o globo dá uma volta lenta ao entrar, depois pára: a marca "acorda" */
@keyframes stw-globe{
  from{transform:rotate(-26deg)}
  to{transform:rotate(0)}
}
.hl-sym img:first-child{animation:stw-globe 2.2s cubic-bezier(.16,1,.3,1) .08s both}
@media(prefers-reduced-motion:reduce){
  .hero-bg,.hero-logo,.hero h1,.hero-cta,.hero-foto-m,.hl-sym img:first-child{animation:none}
}

/* ── nav do site ── */
@media(max-width:520px){
  :root{--h-nav:64px}
  .nav-in{padding:9px 16px}
  .brand-sym{width:34px;height:34px}
  
  .nav-ar{font-size:12px;padding:7px 10px}
}

.nav{border-bottom:1px solid var(--line);background:var(--raise);position:sticky;top:0;z-index:90}
.nav-in{max-width:1180px;margin:0 auto;padding:10px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;min-height:var(--h-nav)}
.nav-r{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.nav-ar{white-space:nowrap}


.nav-l{display:flex;gap:4px;align-items:center}
.nav-l button{font-size:13.5px;color:var(--ink-2);padding:7px 11px;border-radius:3px;transition:all .18s var(--e-out)}
.nav-l button:hover{background:var(--wash);color:var(--teal)}
.nav-l button.on{color:var(--teal);font-weight:600}
.nav-burger{display:none}
.btn{background:var(--teal);color:var(--on-teal);padding:10px 18px;border-radius:3px;font-size:13.5px;
  font-weight:600;text-decoration:none;display:inline-block;transition:background .18s var(--e-out),transform .12s var(--e-out)}
.btn:hover{background:var(--teal-deep)}.btn:active{transform:scale(.986)}
.btn-2{border:1px solid var(--line-2);color:var(--ink);padding:9px 17px;border-radius:3px;font-size:13.5px;
  font-weight:500;text-decoration:none;display:inline-block;transition:all .18s var(--e-out)}
.btn-2:hover{border-color:var(--teal);color:var(--teal);background:var(--wash)}

/* ── faixa: as 4 fases como sequência real (não card grid) ── */
.fases{border-bottom:1px solid var(--line);background:var(--sunk)}
.fase-row{display:grid;grid-template-columns:repeat(4,1fr)}
.fase{padding:26px 22px 30px;border-right:1px solid var(--line);position:relative;text-align:left;
  transition:background .22s var(--e-out);display:block;width:100%}
.fase:last-child{border-right:0}
.fase:hover,.fase.on{background:var(--raise)}
.fase-n{font-family:"Instrument Serif",serif;font-size:13px;color:var(--teal-live);letter-spacing:.09em;text-transform:uppercase}
.fase h3{font-size:17px;margin:7px 0 8px}
.fase p{font-size:13px;color:var(--ink-2);line-height:1.6}
.fase-i{position:absolute;top:0;left:0;right:0;height:2px;background:var(--teal);transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--e-out)}
.fase:hover .fase-i,.fase.on .fase-i{transform:scaleX(1)}

.sec{padding:74px 0;border-bottom:1px solid var(--line)}
.sec-h{max-width:60ch;margin-bottom:40px}
.sec-h h2{font-size:clamp(26px,3vw,37px);margin:12px 0 13px}
.sec-h p{color:var(--ink-2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split img{border-radius:2px}
.q{font-family:"Instrument Serif",serif;font-size:25px;line-height:1.4;margin:18px 0}
.q-a{font-size:11.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* fases detalhadas (página O Projeto) */
.fd{display:grid;grid-template-columns:190px 1fr 300px;gap:30px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start}
.fd:last-child{border-bottom:0}
.fd-n{font-family:"Instrument Serif",serif;font-size:52px;color:var(--teal);opacity:.22;line-height:.9}
.fd-n b{display:block;font-family:"Archivo",sans-serif;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal-live);margin-top:6px}
.fd h3{font-size:22px;margin-bottom:9px}
.fd p{font-size:14.5px;color:var(--ink-2);max-width:62ch}
.fd img{border-radius:2px;border:1px solid var(--line);width:100%;aspect-ratio:16/10;object-fit:cover}

/* instituições */
/* gap real em vez de fundo-cinza-com-linhas: sem células fantasma quando há poucas instituições */
.inst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,260px));justify-content:center;gap:12px;background:none;border:0}
/* Estado vazio da grelha: o site abriu antes de haver instituições publicadas.
   Ocupa o lugar da grelha — centrado e com a mesma largura de leitura — para não
   se ler como um pedaço de página que faltou carregar. */
.inst-vazio{max-width:56ch;margin:0 auto;text-align:center}
.inst-vazio p{margin:0 0 12px}
.inst-vazio p:last-child{margin:22px 0 0}
.inst-vazio b{font-size:17px}

.inst-c{background:var(--raise);padding:26px 20px;display:flex;flex-direction:column;align-items:center;
  gap:13px;text-align:center;transition:background .2s var(--e-out);min-height:168px;justify-content:center}
.inst-c:hover{background:var(--wash)}
.inst-c img{height:72px;width:auto;max-width:78%;object-fit:contain}
.inst-c b{font-size:13px;line-height:1.35;text-wrap:balance}
.inst-c span{font-size:11.5px;color:var(--teal-deep);font-weight:600}
.inst-ph{width:60px;height:60px;border-radius:50%;background:var(--wash);display:grid;place-items:center;
  font-family:"Instrument Serif",serif;font-size:21px;color:var(--teal)}

/* vídeos */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.vd{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--raise);transition:box-shadow .22s var(--e-out)}
.vd:hover{box-shadow:var(--sh-2)}
.vd-th{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sunk)}
.vd-th img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e-out)}
.vd:hover .vd-th img{transform:scale(1.035)}
.pl{position:absolute;inset:0;display:grid;place-items:center}
.pl i{width:46px;height:46px;border-radius:50%;background:var(--raise);display:grid;place-items:center;
  color:var(--teal);box-shadow:var(--sh-2);transition:transform .22s var(--e-out)}
.vd:hover .pl i{transform:scale(1.09)}
.vd-b{padding:12px 14px}
.vd-b b{font-size:13.5px;display:block}
.vd-b span{font-size:11.5px;color:var(--muted)}



/* contactos */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:46px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.fld{margin-bottom:14px}
.fld label{font-size:12.5px;font-weight:600;display:block;margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:3px;
  background:var(--raise);color:var(--ink);font-size:15px;min-height:46px;font-family:inherit;transition:border-color .18s var(--e-out)}
.fld textarea{min-height:110px;resize:vertical}
.fld input:focus,.fld textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--wash)}
.fld .h{font-size:11.5px;color:var(--muted);margin-top:4px;display:block}
.nap{border:1px solid var(--line);border-radius:3px;padding:22px;background:var(--raise)}
.nap dt{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:15px}
.nap dt:first-child{margin-top:0}
.nap dd{font-size:14.5px;margin-top:3px}
.nap dd a{color:var(--teal);text-decoration:none;font-weight:500}
.nap dd a:hover{text-decoration:underline}

/* ── Viabilidade ── */
.vb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.vb{background:var(--raise);padding:24px 22px 26px}
.vb-n{font-size:26px;color:var(--teal);opacity:.3;line-height:1;margin-bottom:9px}
.vb h4{font-size:16px;margin-bottom:8px}
.vb p{font-size:13.5px;color:var(--ink-2);line-height:1.62}
.vb-l{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.vb-l li{font-size:13px;color:var(--ink-2);padding-left:14px;position:relative;line-height:1.5}
.vb-l li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--teal-live)}

/* ── FAQs ── */
.faq-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.faq-c{font-size:12.5px;padding:7px 13px;border:1px solid var(--line-2);border-radius:20px;color:var(--muted);
  transition:all .18s var(--e-out);min-height:36px}
.faq-c:hover{border-color:var(--teal);color:var(--teal)}
.faq-c.on{background:var(--teal);color:var(--on-teal);border-color:var(--teal);font-weight:600}
.faq-list{border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;padding:16px 40px 16px 0;font-size:15px;font-weight:600;position:relative;
  transition:color .18s var(--e-out);min-height:52px}
.faq-q:hover{color:var(--teal)}
.faq-q::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--e-out)}
.faq-i.open .faq-q::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{display:none;padding:0 0 18px;font-size:14.5px;color:var(--ink-2);line-height:1.7;max-width:74ch}
.faq-i.open .faq-a{display:block}
.faq-a p+p{margin-top:9px}
.faq-empty{padding:26px 0;font-size:14px;color:var(--muted)}

/* ── Vozes da Nossa Terra ── */
.vnt-hero{background:var(--sunk);border-bottom:1px solid var(--line);padding:56px 0 52px;text-align:center}
.vnt-hero img{margin-left:auto;margin-right:auto}
.vnt-hero h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
.vnt-hero p{font-size:16px;color:var(--ink-2);max-width:64ch;margin:0 auto}
/* A caixa da secção dos testemunhos (aprovada a 24 Jul). A grelha propriamente dita
   está definida mais abaixo, na zona TESTEMUNHOS — havia aqui uma segunda `.tst-grid`
   de uma versão anterior da secção, que hoje perdia por vir antes, mas voltaria a
   ganhar assim que alguém mudasse a ordem do ficheiro: passava tudo a uma coluna em
   ecrãs até 900px sem ninguém perceber porquê. Removida a duplicação. */
.tst{border:1px solid var(--line);border-radius:3px;padding:22px 20px;background:var(--raise)}
.tst p{font-size:18px;line-height:1.45;color:var(--ink)}
.tst p b{color:var(--teal);font-weight:400}

@media(max-width:900px){
  .vb-grid{grid-template-columns:1fr}
}

/* ── rodapé ── */
.ft{background:var(--sunk);border-top:1px solid var(--line);padding:52px 0 0}
.ft-top{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.1fr 1.05fr;gap:34px;padding-bottom:38px}
.ft-brand img{width:158px;margin-bottom:14px}
.ft-p{font-size:12.5px;color:var(--muted);line-height:1.68;max-width:38ch}
.ft-col{display:flex;flex-direction:column;gap:8px}
.ft-col h5{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-bottom:4px}
.ft-col a{font-size:13px;color:var(--muted);text-decoration:none;width:fit-content;transition:color .16s var(--e-out)}
.ft-col a:hover{color:var(--teal)}
.ft-nap{font-style:normal;font-size:13px;color:var(--muted);line-height:1.7}
.ft-nap b{color:var(--ink);font-weight:600;display:block;margin-bottom:3px}
.ft-nap a{color:var(--muted);text-decoration:none;display:block;margin-top:6px}
.ft-nap a:hover{color:var(--teal)}
.soc{display:flex;gap:8px;margin-top:15px}
.soc a{width:33px;height:33px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:all .18s var(--e-out)}
.soc a:hover{border-color:var(--teal);color:var(--teal);background:var(--raise)}
.ft-lg{border-top:1px solid var(--line);padding:16px 0;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ft-lg-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ft-lg-r a{color:var(--muted);text-decoration:none}
.ft-lg-r a:hover{color:var(--teal);text-decoration:underline}
.ft-lg-r i{opacity:.38;font-style:normal}
.lr{color:var(--teal)!important;font-weight:600}

/* ── nota interna 3HASH (não é side-stripe: caixa completa) ── */
.nt{background:var(--wash);border:1px solid var(--line-2);border-radius:3px;padding:13px 15px;font-size:12.5px;
  color:var(--ink-2);line-height:1.6;margin-top:18px}
.nt b{color:var(--teal-deep)}
.nt > b:first-child{display:inline-flex;align-items:center;gap:5px}
.nt > b:first-child::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal-live);flex:none}

/* ── INSCRIÇÃO ── */
.ih{background:var(--teal);color:var(--on-teal);padding:40px 0}
.ih .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap}
.ih .eb{color:oklch(100% 0 0 / .68)}
.ih h2{font-family:"Instrument Serif",serif;font-size:35px;font-weight:400;margin:6px 0 4px}
.ih-sub{font-size:13.5px;opacity:.82}
.pr{text-align:right}
.pr b{font-family:"Instrument Serif",serif;font-size:40px;display:block;line-height:1}
.pr span{font-size:11.5px;opacity:.76}
.cols{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;padding:50px 0}
.inc{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:16px;border-top:1px solid var(--line)}
.inc li{display:flex;gap:12px;font-size:14.5px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.inc svg{flex:none;margin-top:3px;color:var(--teal-live)}
.aside{border:1px solid var(--line-2);border-radius:3px;padding:22px;background:var(--raise);position:sticky;top:100px;box-shadow:var(--sh-2)}
.pz{background:var(--wash);border:1px solid var(--line-2);border-radius:3px;padding:11px 13px;font-size:12.5px;margin:14px 0;color:var(--ink-2)}
.pz b{color:var(--teal-deep)}

/* modal cascata (pedido explícito do cliente: escolha em 3 níveis) */
.scrim{position:fixed;inset:0;background:oklch(23% 0.03 220 / .55);z-index:200;display:none;
  align-items:center;justify-content:center;padding:18px}
.scrim.on{display:flex}
.mo{background:var(--raise);border-radius:5px;width:100%;max-width:540px;box-shadow:var(--sh-3);
  max-height:88vh;display:flex;flex-direction:column;animation:pop .3s var(--e-out)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.mo-h{padding:19px 22px 15px;border-bottom:1px solid var(--line)}
.mo-h-t{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mo-h h3{font-size:19px;margin-top:6px}
.mo-x{width:31px;height:31px;border-radius:3px;color:var(--muted);display:grid;place-items:center;flex:none}
.mo-x:hover{background:var(--sunk);color:var(--ink)}
.stp{display:flex;gap:4px;margin-top:13px}
.stp div{flex:1;height:2.5px;background:var(--line);border-radius:2px;overflow:hidden}
.stp div i{display:block;height:100%;width:0;background:var(--teal);transition:width .45s var(--e-out)}
.stp div.d i,.stp div.n i{width:100%}
.stp div.n i{background:var(--teal-live)}
.mo-b{padding:19px 22px;overflow-y:auto;flex:1}
.mo-q{font-size:12.5px;color:var(--muted);margin-bottom:12px}
.opt{border:1px solid var(--line);border-radius:3px;padding:13px 15px;text-align:left;width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:7px;
  transition:border-color .18s var(--e-out),background .18s var(--e-out)}
.opt:hover{border-color:var(--teal);background:var(--wash)}
.opt b{font-size:14.5px;display:block}
.opt span{font-size:12px;color:var(--muted)}
.opt-d{width:9px;height:9px;border-radius:2px;flex:none}
.cru{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:13px}
.cru span{font-size:11px;background:var(--wash);color:var(--teal-deep);padding:3px 8px;border-radius:2px;font-weight:600}
.au{border:1px solid var(--line);border-radius:3px;padding:13px;display:flex;gap:11px;margin-bottom:8px;align-items:flex-start}
.au.rq{border-color:var(--line-2);background:var(--sunk)}
.au > input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--teal)}
/* os campos do NIF dentro da caixa não são o checkbox */
.au .fld input{width:100%;min-width:0;height:auto;margin-top:0;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:3px;background:var(--ground);font-size:15px;min-height:44px}
.au .fld input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--wash)}
#nif-f{width:100%}
#nif-f .f-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){ #nif-f .f-row{grid-template-columns:1fr} }
.au b{font-size:13.5px;display:block;margin-bottom:2px}
.au p{font-size:11.5px;color:var(--muted);line-height:1.5}
.prov{background:var(--wash);border:1px solid var(--line-2);border-radius:3px;padding:11px 13px;font-size:11px;
  color:var(--ink-2);line-height:1.65}
.prov b{color:var(--teal-deep);display:block;margin-bottom:4px;font-size:10px;letter-spacing:.09em;text-transform:uppercase}
.prov code{font-family:ui-monospace,monospace;font-size:10px;color:var(--muted);word-break:break-all}
.mo-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;gap:12px;background:var(--sunk)}
.mo-bk{font-size:13px;color:var(--muted);font-weight:500}
.mo-bk:hover{color:var(--ink)}
.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:7px}
.pay button{border:1px solid var(--line-2);border-radius:3px;padding:13px 6px;font-size:11.5px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .18s var(--e-out)}
.pay button:hover,.pay button.s{border-color:var(--teal);background:var(--wash);color:var(--teal-deep)}

/* ── LOGIN mobile ── */
.lg{display:grid;grid-template-columns:1fr auto;gap:54px;max-width:1180px;margin:0 auto;padding:50px 26px 66px;align-items:center}
.lg-s{max-width:50ch}
.lg-w{display:flex;flex-direction:column;gap:0;margin-top:20px;border-top:1px solid var(--line)}
.lg-w div{padding:12px 0;border-bottom:1px solid var(--line)}
.lg-w b{font-size:13.5px;display:block;margin-bottom:2px}
.lg-w span{font-size:12.5px;color:var(--muted);line-height:1.6}
.ph-h{display:flex;flex-direction:column;align-items:center;gap:10px}
.ph{width:390px;height:730px;border-radius:44px;background:var(--ink);padding:11px;position:relative;flex:none;
  box-shadow:var(--sh-3), inset 0 0 0 1.5px oklch(40% 0.02 220)}
.nch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:110px;height:23px;background:var(--ink);
  border-radius:0 0 14px 14px;z-index:4}
.scr{width:100%;height:100%;border-radius:34px;background:var(--ground);overflow:hidden;position:relative}
.ph-c{font-size:11px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
.ls{position:absolute;inset:0;padding:60px 26px 26px;display:none;flex-direction:column;overflow-y:auto}
.ls.on{display:flex;animation:sl .38s var(--e-out)}
@keyframes sl{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.ls img.lgo{width:120px;margin-bottom:22px}
.ls h4{font-size:25px;margin-bottom:8px;font-weight:400}
.ls p{font-size:14px;color:var(--ink-2);margin-bottom:20px;line-height:1.6}
.ls-l{font-size:12px;font-weight:600;display:block;margin-bottom:6px}
.ls-i{width:100%;padding:14px;border:1px solid var(--line-2);border-radius:3px;background:var(--raise);
  color:var(--ink);font-size:16px;min-height:50px;margin-bottom:12px}
.ls-i:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--wash)}
.ls-b{background:var(--teal);color:var(--on-teal);width:100%;padding:15px;border-radius:3px;font-size:15px;
  font-weight:600;min-height:50px;transition:background .18s var(--e-out)}
.ls-b:hover{background:var(--teal-deep)}
.ls-g{width:100%;padding:12px;font-size:13px;color:var(--muted);font-weight:500;margin-top:8px}
.ls-g:hover{color:var(--teal)}
.ls-f{font-size:11.5px;color:var(--muted);margin-top:13px;line-height:1.55;text-align:center}
.ls-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin-bottom:18px;flex:none;
  background:var(--wash);color:var(--teal)}
.ls-ic.ok{background:oklch(50% 0.11 155 / .12);color:var(--ok)}
.mail{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:4px 0 13px;background:var(--raise);box-shadow:var(--sh-1)}
.mail-h{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;gap:9px;align-items:center}
.mail-h b{font-size:12.5px;display:block;line-height:1.3}
.mail-h span{font-size:11px;color:var(--muted)}
.mail-b{padding:13px 12px}
.mail-b b{font-size:13.5px;display:block;margin-bottom:4px}
.mail-b p{font-size:12.5px;color:var(--muted);margin-bottom:11px}
.mail-btn{display:block;text-align:center;background:var(--teal);color:var(--on-teal);padding:11px;border-radius:3px;
  font-size:13.5px;font-weight:600;cursor:pointer;min-height:44px;line-height:22px}
.mail-btn:hover{background:var(--teal-deep)}
.sess{background:var(--wash);border:1px solid var(--line-2);border-radius:3px;padding:11px 12px;margin-bottom:15px}
.sess span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-deep);font-weight:700;display:block;margin-bottom:3px}
.sess b{font-size:12px;color:var(--ink-2);font-weight:500}
.av{width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--on-teal);display:grid;
  place-items:center;font-size:12.5px;font-weight:700;flex:none}

/* ── ÁREA PESSOAL ── */
.ar-t{background:var(--raise);border-bottom:1px solid var(--line);padding:12px 0}
.ar-t .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ar-u{display:flex;align-items:center;gap:10px}
.ar-u b{font-size:13.5px;display:block;line-height:1.3}
.ar-u span{font-size:11.5px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 9px;border-radius:20px;background:var(--wash);color:var(--teal-deep)}
.ar-g{display:grid;grid-template-columns:1fr 308px;gap:30px;padding:28px 0 60px}
.fh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:15px;gap:12px;flex-wrap:wrap}
.chips{display:flex;gap:6px}
.chip{font-size:12px;padding:5px 11px;border:1px solid var(--line);border-radius:20px;color:var(--muted);transition:all .18s var(--e-out)}
.chip:hover{border-color:var(--teal-live);color:var(--teal)}
.chip.on{background:var(--teal);color:var(--on-teal);border-color:var(--teal);font-weight:600}
.auto{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--teal-deep);background:var(--wash);padding:3px 8px;border-radius:20px;margin-top:5px}
.po{border:1px solid var(--line);border-radius:3px;background:var(--raise);margin-bottom:12px;overflow:hidden;
  transition:border-color .2s var(--e-out)}
.po:hover{border-color:var(--line-2)}
.po-h{padding:12px 15px;display:flex;gap:11px;align-items:center;border-bottom:1px solid var(--line)}
.po-t{width:8px;height:8px;border-radius:2px;flex:none}
.po-h b{font-size:13.5px;display:block;line-height:1.35}
.po-h time{font-size:11.5px;color:var(--muted)}
.po-b{padding:14px 15px}
.po-b p{font-size:14px;color:var(--ink-2)}
.pv{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sunk)}
.pv img{width:100%;height:100%;object-fit:cover}
.pv-m{position:absolute;left:0;right:0;bottom:0;padding:36px 13px 11px;display:flex;justify-content:space-between;
  align-items:center;gap:10px;background:linear-gradient(transparent, oklch(23% 0.03 220 / .8));color:var(--on-teal);font-size:11.5px}
.dl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:7px 11px;border-radius:3px;
  background:var(--raise);color:var(--teal-deep);min-height:34px}
.dl:hover{background:var(--wash)}
.cd{border:1px solid var(--line);border-radius:3px;background:var(--raise);padding:16px;margin-bottom:12px}
.cd h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;font-weight:600}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px solid var(--line);gap:10px}
.kv:last-of-type{border:0}
.kv span{color:var(--muted)}.kv b{font-weight:600;text-align:right}
.yes{color:var(--ok);font-weight:600;font-size:11.5px;display:inline-flex;align-items:center;gap:4px}
.no{color:var(--muted);font-weight:600;font-size:11.5px}
.act{font-size:12px;font-weight:600;color:var(--teal);padding:6px 10px;border-radius:3px;border:1px solid var(--line-2);
  transition:all .18s var(--e-out)}
.act:hover{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.cnt{text-align:center;padding:5px 0}
.cnt b{font-family:"Instrument Serif",serif;font-size:31px;color:var(--teal);display:block;line-height:1}
.cnt span{font-size:11px;color:var(--muted)}

/* ── bilhetes + QR ── */
.tk-q{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:11px}
.tk-b{border:1px solid var(--line-2);border-radius:3px;padding:9px 0;font-size:13.5px;font-weight:600;
  min-height:40px;transition:all .18s var(--e-out)}
.tk-b:hover{border-color:var(--teal);color:var(--teal)}
.tk-b.on{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.tk-n{border-radius:3px;padding:10px 12px;font-size:12px;line-height:1.55;display:flex;gap:9px;align-items:flex-start}
.tk-n svg{flex:none;margin-top:1px}
.tk-n.ok{background:oklch(50% 0.11 155 / .1);color:oklch(38% 0.09 155);border:1px solid oklch(50% 0.11 155 / .25)}
.tk-n.wait{background:oklch(56% 0.11 75 / .12);color:oklch(42% 0.09 75);border:1px solid oklch(56% 0.11 75 / .3)}
.tk-n b{color:inherit}
.tk-sep{height:1px;background:var(--line);margin:14px 0}
.tick{border:1px solid var(--line-2);border-radius:4px;overflow:hidden;margin-bottom:9px;background:var(--raise)}
.tick-h{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;background:var(--teal);color:var(--on-teal)}
.tick-h b{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.tick-h span{font-size:10.5px;opacity:.82;font-variant-numeric:tabular-nums}
.tick-b{display:flex;gap:11px;padding:11px;align-items:center}
.tick-qr{width:78px;height:78px;flex:none;background:var(--raise);border-radius:2px;padding:3px;border:1px solid var(--line)}
.tick-qr svg{width:100%;height:100%;display:block}
.tick-i{font-size:11.5px;line-height:1.55;min-width:0}
.tick-i b{display:block;font-size:12.5px;margin-bottom:3px;text-wrap:balance}
.tick-i span{color:var(--muted);display:block}
.tick-code{font-family:ui-monospace,monospace;font-size:9.5px;color:var(--teal-deep);margin-top:5px;display:block;
  letter-spacing:-.02em;overflow-wrap:anywhere;hyphens:none}
.tick-i .tick-code+.tick-code{margin-top:1px}
.tick.pend{border-style:dashed;opacity:.92}
.tick.pend .tick-h{background:oklch(56% 0.11 75);color:oklch(99% 0.01 75)}
.tick-ph{width:78px;height:78px;flex:none;border-radius:2px;border:1px dashed var(--line-2);display:grid;place-items:center;color:var(--muted)}


/* ── ÁREA PESSOAL: abas ── */
.ar-tabs{background:var(--raise);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80}
.ar-tabs-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ar-tabs-in::-webkit-scrollbar{display:none}
.ar-tab{display:inline-flex;align-items:center;gap:7px;padding:14px 14px;font-size:13.5px;font-weight:500;
  color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .18s var(--e-out);min-height:48px}
.ar-tab:hover{color:var(--ink)}
.ar-tab.on{color:var(--teal);border-bottom-color:var(--teal);font-weight:600}
.ar-tab svg{opacity:.75}
.ar-tab.on svg{opacity:1}
.ar-badge{background:var(--teal);color:var(--on-teal);font-size:10px;font-weight:700;
  border-radius:20px;padding:1px 6px;min-width:17px;text-align:center}
.ar-tab:not(.on) .ar-badge{background:var(--line-2);color:var(--ink-2)}
.ar-p{display:none}.ar-p.on{display:block;animation:stw-rise .4s var(--e-out) both}
.ar-sub{font-size:12.5px;color:var(--muted);display:block;margin-top:4px}
.ar-h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:32px 0 14px;font-weight:600}
.ar-main{min-width:0}

/* vídeos e fotos */
.vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.vc{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--raise);
  transition:border-color .2s var(--e-out)}
.vc:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.vc-th{position:relative;aspect-ratio:16/9;background:var(--sunk);line-height:0}
.vc-th video,.vc-th img{width:100%;height:100%;object-fit:cover;display:block}
.vc-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vc-play svg{background:var(--raise);color:var(--teal);border-radius:50%;padding:11px;
  box-shadow:var(--sh-2);width:40px;height:40px}
.vc figcaption{padding:12px 13px}
.vc figcaption b{font-size:13.5px;display:block;margin-bottom:3px}
.vc figcaption span{font-size:11.5px;color:var(--muted);display:block}
.vc-dl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--teal);
  text-decoration:none;margin-top:9px;padding:6px 0}
.vc-dl:hover{text-decoration:underline}
/* fotografia de grupo */
.fg{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;border:1px solid var(--line);
  border-radius:3px;padding:14px;background:var(--raise);align-items:center}
.fg img{width:100%;height:auto;border-radius:2px;display:block}
.fg-i b{font-size:15px;display:block;margin-bottom:6px}
.fg-i span{font-size:13.5px;color:var(--ink-2);line-height:1.6;display:block}
.fg-b{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}

/* comunicações */
.cm{list-style:none;border-top:1px solid var(--line)}
.cm-i{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.cm-ic{width:32px;height:32px;border-radius:50%;background:var(--wash);color:var(--teal);
  display:grid;place-items:center;flex:none}
.cm-new .cm-ic{background:var(--teal);color:var(--on-teal)}
.cm-b{min-width:0;flex:1}
.cm-b b{font-size:14.5px;display:block;margin-bottom:3px}
.cm-new .cm-b b::after{content:"Novo";background:var(--teal);color:var(--on-teal);font-size:9px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:20px;margin-left:8px;vertical-align:2px}
.cm-b p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:5px}
.cm-b time{font-size:11.5px;color:var(--muted)}

/* bilhetes */
.bx{border:1px solid var(--line);border-radius:3px;padding:20px;background:var(--raise);max-width:560px}
.bx .tk-q{max-width:340px}
.bx #tk-msg{max-width:440px}

/* arquivo */
.arq{display:flex;flex-direction:column;gap:10px}
.arq-i{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:3px;
  padding:15px 17px;background:var(--raise);transition:border-color .2s var(--e-out)}
.arq-i:hover{border-color:var(--line-2)}
.arq-on{border-color:var(--teal-live)}
.arq-y{font-size:27px;color:var(--teal);min-width:66px;line-height:1;opacity:.85}
.arq-on .arq-y{opacity:1}
.arq-b{flex:1;min-width:0}
.arq-b b{font-size:14.5px;display:block;margin-bottom:2px}
.arq-b span{font-size:12.5px;color:var(--muted)}
.arq-t{margin-top:7px}

@media(max-width:900px){
  .fg{grid-template-columns:1fr}
  .ar-tab{padding:13px 11px;font-size:12.5px}
  .arq-i{flex-wrap:wrap;gap:10px}.arq-y{font-size:22px;min-width:auto}
}

/* ── BACKOFFICE ── */
.bo{display:grid;grid-template-columns:212px 1fr;min-height:660px}
.bo-s{background:var(--sunk);border-right:1px solid var(--line);padding:17px 0}
.bo-w{padding:0 16px 14px;border-bottom:1px solid var(--line);margin-bottom:11px}
.bo-w b{font-size:12.5px;display:block}
.bo-w span{font-size:10.5px;color:var(--muted)}
.bo-n{display:flex;flex-direction:column;gap:1px;padding:0 8px}
.bo-n button{text-align:left;padding:8px 11px;font-size:13px;border-radius:3px;color:var(--ink-2);transition:background .16s var(--e-out)}
.bo-n button:hover{background:var(--wash)}
.bo-n button.on{background:var(--teal);color:var(--on-teal);font-weight:600}
.bo-m{padding:24px 26px;overflow-x:auto}
.bo-h{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:19px;flex-wrap:wrap}
.bo-h h3{font-size:21px}
.bo-h p{font-size:13px;color:var(--muted);margin-top:3px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:9px 11px;border-bottom:1px solid var(--line-2);font-weight:600;white-space:nowrap}
td{padding:11px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr{transition:background .16s var(--e-out)}
tbody tr:hover td{background:var(--wash)}
.td{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.td i{width:8px;height:8px;border-radius:2px;flex:none}
.bg{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap}
.bg-o{background:oklch(50% 0.11 155 / .13);color:var(--ok)}
.bg-w{background:oklch(56% 0.11 75 / .15);color:var(--warn)}
.bg-c{background:oklch(52% 0.16 27 / .11);color:var(--crit)}
.mi{font-size:11.5px;color:var(--muted)}
.bo-st{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:20px;background:var(--line);border:1px solid var(--line)}
.bo-c{background:var(--raise);padding:14px}
.bo-c b{font-size:24px;display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.bo-c span{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sp{height:24px;margin-top:7px;display:block;width:100%}
.up{border:1.5px dashed var(--line-2);border-radius:4px;padding:24px;text-align:center;background:var(--raise)}
.up:hover{border-color:var(--teal)}
.up b{font-size:14px;display:block;margin-bottom:3px}
.up span{font-size:12px;color:var(--muted)}
.tsel{display:flex;gap:7px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.tb{border:1px solid var(--line-2);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;transition:all .18s var(--e-out)}
.tb i{width:7px;height:7px;border-radius:50%;flex:none}
.tb.on{color:var(--on-teal);border-color:transparent}
.rt{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:15px;font-size:12.5px;color:var(--ink-2);
  background:var(--wash);border:1px solid var(--line-2);border-radius:3px;padding:10px;flex-wrap:wrap}
.rt b{color:var(--teal-deep)}

@media(max-width:1040px){
  .hero{grid-template-columns:1fr}.hero-l{padding:42px 0 32px}.hero-r{min-height:300px;border-left:0;border-top:1px solid var(--line)}
  .fase-row{grid-template-columns:repeat(2,1fr)}
  .fase:nth-child(2){border-right:0}.fase:nth-child(1),.fase:nth-child(2){border-bottom:1px solid var(--line)}
  .cols,.ar-g,.split,.ct,.lg{grid-template-columns:1fr;gap:28px}
  .aside{position:static}
  .fd{grid-template-columns:1fr;gap:16px}.fd-n{font-size:32px}
  .vids{grid-template-columns:repeat(2,1fr)}
  .ft-top{grid-template-columns:1fr 1fr;gap:28px}.ft-brand{grid-column:1/-1}
  .bo{grid-template-columns:1fr}.bo-s{border-right:0;border-bottom:1px solid var(--line)}
  .bo-n{flex-direction:row;overflow-x:auto}
  .bo-st{grid-template-columns:repeat(2,1fr)}
  .ph{width:340px;height:660px}
  .nav-l{display:none}.nav-l.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--raise);
    flex-direction:column;padding:12px;border-bottom:1px solid var(--line);box-shadow:var(--sh-2);gap:2px}
  .nav-l.open button{width:100%;text-align:left;padding:11px;min-height:44px}
  .nav-burger{display:grid;place-items:center;width:42px;height:42px;border-radius:3px;color:var(--ink)}
  .nav-burger:hover{background:var(--wash)}
  .nav{position:relative;top:0}
}
@media(max-width:620px){
  .vids{grid-template-columns:1fr}
  .ft-lg{flex-direction:column;align-items:flex-start;gap:9px}
  .f-row{grid-template-columns:1fr}
  .ih .wrap{flex-direction:column;align-items:flex-start}.pr{text-align:left}
  .ph{width:100%;max-width:330px;height:600px;border-radius:34px}.scr{border-radius:26px}
  .fase-row{grid-template-columns:1fr}
  .fase{border-right:0;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── WordPress: links onde o protótipo usava botões ── */
.nav-l button,.nav-l>a{font-size:13px;color:var(--ink-2);padding:7px 9px;border-radius:3px;
  transition:all .18s var(--e-out);text-decoration:none;white-space:nowrap}
.nav-l button:hover,.nav-l>a:not(.btn-2):hover{background:var(--wash);color:var(--teal)}
.nav-l button.on,.nav-l>a.on{color:var(--teal);font-weight:600}
.nav-l{display:flex;gap:1px;align-items:center;flex-wrap:nowrap;justify-content:center;flex:1}
.fase{text-decoration:none;color:inherit}
.fase *{text-decoration:none}
.inst-c{text-decoration:none;color:inherit}
.pg-content{max-width:74ch;font-size:16px;color:var(--ink-2);line-height:1.75}
.pg-content h2,.pg-content h3{color:var(--ink);margin:28px 0 10px;font-family:"Instrument Serif",serif;font-weight:400}
.pg-content h2{font-size:29px}.pg-content h3{font-size:22px}
.pg-content p{margin-bottom:12px}
.pg-content a:not(.btn):not(.btn-2):not(.act):not(.dl){color:var(--teal);font-weight:500}
.pg-content ul,.pg-content ol{margin:12px 0 12px 20px}

/* ── menu mobile (site WordPress) ── */
@media(max-width:1040px){
  .nav-in{position:relative;flex-wrap:nowrap}
  .nav-l{display:none}
  .nav-l.open{
    display:flex !important;position:absolute;top:calc(100% + 1px);left:0;right:0;
    background:var(--raise);flex-direction:column;align-items:stretch;padding:10px;gap:1px;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-2);z-index:95;max-height:75vh;overflow-y:auto;
  }
  .nav-l.open button,.nav-l.open>a{width:100%;text-align:left;padding:13px 12px;min-height:46px;
    display:flex;align-items:center;border-radius:3px}
  .nav-l.open>a.btn-2{margin:6px 0 0;justify-content:center;text-align:center}
  .nav-burger{display:grid;place-items:center;width:44px;height:44px;border-radius:3px;color:var(--ink);flex:none}
  .nav-burger:hover{background:var(--wash)}
  .nav{position:sticky;top:0}
  .brand-sym{width:36px;height:36px}
  .brand-t{font-size:16px}
  .brand-s{font-size:7.5px}
}

/* o texto do botão nunca herda a cor de link do conteúdo */
a.btn,.pg-content a.btn{color:var(--on-teal)}
a.btn-2,.pg-content a.btn-2{color:var(--ink)}

/* ── apoios: logótipos OFICIAIS A CORES, centrados ── */
.sec-apoios{text-align:center;padding:66px 0 60px}
.apoios-t{margin-bottom:26px}
.apoios{display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap}
.apoio{height:66px;width:auto;flex:none;transition:transform .25s var(--e-out)}
.apoio:hover{transform:scale(1.04)}
.apoio-ue{height:58px;border-radius:2px}
.apoio-sep{width:1px;height:52px;background:var(--line-2);flex:none}


@media(max-width:620px){
  .apoios{gap:26px}.apoio{height:50px}.apoio-ue{height:44px}.apoio-sep{display:none}
  
}

/* a entidade responsável: quem assina o projeto */
.apoios-um{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.apoios-um-l{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.apoios-ent{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.apoios-ent b{font-size:clamp(19px,1.7vw,23px);color:var(--teal);font-weight:400}
.apoios-ent span{font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:620px){ .apoios-ent{align-items:center} }
/* blocos genéricos */
.sec-b{border-bottom:0;padding:44px 0 0}
.sec-b:last-child{padding-bottom:44px}
.sec-c{text-align:center}
.sec-c .sec-h{margin-left:auto;margin-right:auto}
.fd-b{border-bottom:1px solid var(--line)}
.rep{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
     margin-top:44px;padding-top:38px;border-top:1px solid var(--line)}
.rep h3{font-size:25px;margin:10px 0}
.rep p{font-size:14.5px;color:var(--ink-2)}
.rep-p{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:820px){.rep{grid-template-columns:1fr;gap:22px}}

.apoios-marca{display:block;margin:10px auto 0;width:90px}
.apoios-marca img{width:100%;height:auto;display:block}
@media(max-width:640px){.apoios-marca{width:80px}}

/* ── Galeria: filtros, cartões e o excerto em grande ── */
.gal-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.gal-f{padding:9px 16px;border:1.5px solid var(--line-2);border-radius:999px;background:var(--raise);
  font:600 13px/1 "Archivo",sans-serif;color:var(--ink-2);cursor:pointer;
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.gal-f:hover{border-color:var(--teal);color:var(--teal)}
.gal-f[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.vd-th{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  border-radius:14px;overflow:hidden;line-height:0}
.vd-th img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.vd-th:hover img{transform:scale(1.035)}
.vd-th:focus-visible{outline:2px solid var(--teal-live);outline-offset:3px}
.vd-dur{position:absolute;right:9px;bottom:9px;background:oklch(23% .02 220/.72);color:#fff;
  font:600 11.5px/1 "Archivo",sans-serif;padding:5px 8px;border-radius:6px;letter-spacing:.02em}
.vd[hidden]{display:none}
.gal-mod{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px;
  background:oklch(20% .02 220/.86);opacity:0;pointer-events:none;transition:opacity .24s ease}
.gal-mod.aberto{opacity:1;pointer-events:auto}
.gal-caixa{width:min(1080px,100%);border-radius:16px;overflow:hidden;background:#000;
  transform:translateY(12px) scale(.99);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.gal-mod.aberto .gal-caixa{transform:none}
.gal-caixa video{width:100%;height:auto;display:block;max-height:80vh}
.gal-x{position:absolute;top:16px;right:20px;width:42px;height:42px;border-radius:50%;border:0;
  background:oklch(100% 0 0/.14);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  transition:background .16s ease}
.gal-x:hover{background:oklch(100% 0 0/.26)}
@media(prefers-reduced-motion:reduce){ .gal-mod,.gal-caixa,.vd-th img{transition:none} }

/* ── Faixa de fecho com vídeo (fim da página de Contactos) ── */
.fecho{position:relative;margin-top:clamp(48px,7vw,86px);min-height:clamp(320px,42vw,470px);
  display:grid;align-items:end;overflow:hidden;isolation:isolate}
.fecho-media{position:absolute;inset:0;z-index:-2;background:var(--wash)}
.fecho-capa,.fecho-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* o vídeo entra por cima da fotografia só quando começa mesmo a tocar */
.fecho-v{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.fecho-v.a-tocar{opacity:1}
/* o escurecido é CSS, nunca queimado na imagem: assim serve a qualquer excerto */
.fecho-txt{position:relative;z-index:1;width:100%;
  background:linear-gradient(to top,oklch(18% .022 220/.88) 0%,oklch(18% .022 220/.66) 42%,transparent 100%);
  padding:clamp(64px,11vw,132px) 0 clamp(26px,4vw,44px)}
.fecho-in{max-width:1180px;margin:0 auto;padding:0 24px}
.fecho-h{color:oklch(99% .004 200);font-size:clamp(25px,3.4vw,40px);line-height:1.14;
  letter-spacing:-.016em;max-width:19ch}
.fecho-p{color:oklch(88% .012 200);font-size:clamp(14px,1.5vw,16px);margin-top:11px;max-width:52ch;
  line-height:1.6}
/* especificidade acima do .btn, e cor literal: o var() aqui nao pegava */
.fecho .fecho-b{margin-top:22px;background:oklch(99% .004 200);color:oklch(39.5% 0.062 208)}
.fecho .fecho-b:hover{background:oklch(100% 0 0);color:oklch(31% 0.055 210)}
@media(max-width:560px){ .fecho{min-height:400px} .fecho-h{max-width:none} }
@media(prefers-reduced-motion:reduce){ .fecho-v{transition:none} }

/* ── Vozes: a folha de serviço ──
   Sem carrossel, sem aspas, sem quatro caixas iguais. A distinção do Estado
   ocupa o lado maior (é a prova que ninguém copia); os números vivem numa
   lista de linhas, sem caixa, porque são leitura e não cartões. A grelha é
   desigual de propósito: conteúdo de peso diferente, peso visual diferente. */
.vozes{padding-top:clamp(30px,4vw,54px)}
.vozes-cab{margin-bottom:clamp(22px,3vw,34px)}
.vozes-h{font-size:clamp(23px,2.9vw,34px);line-height:1.16;letter-spacing:-.016em;max-width:22ch;margin-top:7px}
.vozes-grelha{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(18px,2.4vw,30px);align-items:stretch}

/* a âncora */
.vz-selo{position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--wash);border:1px solid oklch(90% .02 200);border-radius:19px;
  padding:clamp(24px,2.6vw,34px)}
.vz-selo-e{font:600 10.5px/1 "Archivo",sans-serif;letter-spacing:.15em;text-transform:uppercase;
  color:var(--teal-live)}
.vz-selo-h{font-size:clamp(24px,2.7vw,33px);line-height:1.1;letter-spacing:-.018em;
  margin-top:13px;max-width:16ch;color:var(--teal)}
/* 26ch, não 34: a marca de água ocupa o canto direito e o texto não lhe pode entrar em cima */
.vz-selo-t{font-size:15px;line-height:1.62;color:var(--ink-2);margin-top:auto;padding-top:20px;max-width:26ch}
/* o ano como marca de água: dá profundidade sem pedir leitura */
.vz-selo-ano{position:absolute;right:4px;bottom:-26px;font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(104px,10vw,146px);line-height:1;color:oklch(39.5% .062 208/.07);
  letter-spacing:-.03em;pointer-events:none;user-select:none}

/* os dados */
.vz-dados{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center}
.vz-d{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,22px);
  padding:clamp(15px,1.8vw,21px) 0;border-bottom:1px solid var(--line)}
.vz-d:first-child{padding-top:0}
.vz-d:last-child{border-bottom:0;padding-bottom:0}
.vz-d-v{flex:none;min-width:3.6em;font:600 clamp(28px,3.2vw,40px)/1 "Archivo",sans-serif;
  letter-spacing:-.026em;color:var(--ink);font-variant-numeric:tabular-nums}
.vz-d-c{min-width:0}
.vz-d-c b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
/* --ink-2 e não --muted: medido, o --muted (58%) dá 4,15:1 sobre o fundo e não
   passa o mínimo AA a este tamanho. O --ink-2 dá 7,25:1 e a hierarquia mantém-se
   porque o rótulo acima é --ink (16,5:1). */
.vz-d-c span{display:block;font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:3px}

@media(max-width:860px){
  .vozes-grelha{grid-template-columns:1fr}
  .vz-selo-h{max-width:none}
  .vz-selo-t{margin-top:16px;padding-top:0;max-width:38ch}
}
/* num cartão estreito o texto ocupa a largura toda: não há canto livre para a
   marca de água, e sobrepostos não se lê nem um nem outro. Como é decorativa
   (aria-hidden), sai — não se perde informação nenhuma. */
@media(max-width:700px){
  .vz-selo-ano{display:none}
}
@media(max-width:520px){
  .vz-d{gap:12px}
  .vz-d-v{min-width:2.9em}
}

/* Entrada: a âncora primeiro, os dados em cascata curta.
   🔴 O estado por omissão é VISÍVEL. Só a classe `js-mov`, posta pelo próprio
   script, é que esconde para depois revelar — se o JS não correr, ou falhar, o
   conteúdo continua lá. Conteúdo nunca pode depender de JS para se ver. */
.vozes.js-mov .vz-selo,.vozes.js-mov .vz-d{opacity:0;transform:translate3d(0,14px,0)}
.vozes.js-mov.entrou .vz-selo,.vozes.js-mov.entrou .vz-d{opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.vozes.js-mov.entrou .vz-d{transition-delay:calc(120ms + var(--i,0) * 70ms)}
@media(prefers-reduced-motion:reduce){
  .vozes.js-mov .vz-selo,.vozes.js-mov .vz-d{opacity:1;transform:none;transition:none;transition-delay:0s}
}

/* ── página de cada escola: o percurso e quem apoia ── */
.esc{padding:44px 0 70px;max-width:820px}
.esc-voltar{display:inline-block;font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:26px}
.esc-voltar:hover{color:var(--teal)}
.esc-cab{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.esc-logo{width:84px;height:84px;object-fit:contain;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:9px;flex:none}
.esc-h{font-size:clamp(26px,3.4vw,38px);line-height:1.14;margin:6px 0 12px 0}
/* o estado é a informação principal desta página: tem de se ler de longe */
.esc-estado{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  font:600 13px/1 "Archivo",sans-serif}
.esc-estado i{font-style:normal;font-weight:400;opacity:.75}
.esc-ponto{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.esc-estado--estudo{background:oklch(97% .035 85);color:oklch(44% .09 75)}
.esc-estado--estudo .esc-ponto{animation:esc-pulsa 2.2s ease-in-out infinite}
@keyframes esc-pulsa{0%,100%{opacity:1}50%{opacity:.35}}
.esc-estado--desenvolvimento{background:var(--wash);color:var(--teal)}
.esc-estado--concluido{background:oklch(96% .035 155);color:oklch(46% .11 155)}
.esc-texto{font-size:16.5px;line-height:1.72;color:var(--ink-2);margin-top:26px;max-width:60ch}
.esc-apoios{margin-top:42px;padding-top:28px;border-top:1px solid var(--line)}
.esc-apoios-n{font-size:13.5px;color:var(--muted);margin:7px 0 20px 0;max-width:56ch}
.esc-apoios-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.esc-apoio{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:14px 16px}
.esc-apoio img{width:auto;max-width:86px;height:42px;object-fit:contain;flex:none}
/* Os logótipos institucionais tanto vêm quadrados (brasões de junta) como muito
   horizontais (marcas de município). Fixar a ALTURA e deixar a largura crescer
   trata os dois: o brasão fica com 42px de lado, a marca larga não fica espremida
   num quadrado a parecer uma miniatura. */
.esc-apoio b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.esc-apoio span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.esc-apoios--vazio .esc-apoios-n{max-width:52ch}
@media(prefers-reduced-motion:reduce){ .esc-estado--estudo .esc-ponto{animation:none} }

/* ── grelha das escolas: estado do projeto e apoios confirmados ── */
.inst-c{position:relative;justify-content:flex-start}
.inst-v{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:5px 11px;
  border-radius:999px;font:600 11.5px/1.3 "Archivo",sans-serif;letter-spacing:.01em;
  /* o rótulo mais longo é "Em estudo de viabilidade": tem de caber dentro do
     cartão em vez de sangrar pelas margens, e alinhar com os dos cartões ao lado */
  max-width:100%;text-align:center;box-sizing:border-box}
.inst-p{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;font-style:normal}
.inst-v--estudo{background:oklch(97% .035 85);color:oklch(44% .09 75)}
.inst-v--estudo .inst-p{animation:inst-pulsa 2.2s ease-in-out infinite}
@keyframes inst-pulsa{0%,100%{opacity:1}50%{opacity:.3}}
.inst-v--viavel{background:oklch(97% .03 230);color:oklch(45% .1 245)}
.inst-v--desenvolvimento{background:var(--wash);color:var(--teal)}
.inst-v--concluido{background:oklch(96% .033 155);color:oklch(46% .1 155)}
.inst-ap{display:block;margin-top:7px;font-size:11.5px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){ .inst-v--estudo .inst-p{animation:none} }

/* ── dropdown do menu principal (submenu sob "O Projeto") ── */
.nav-l .nav-item{position:relative;display:inline-flex;align-items:center}
.nav-l .nav-top{font-size:13.5px;color:var(--ink-2);padding:7px 11px;border-radius:3px;
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;transition:all .18s var(--e-out)}
.nav-l .nav-top:hover,.nav-l .nav-item:hover>.nav-top{background:var(--wash);color:var(--teal)}
.nav-l .nav-top.on{color:var(--teal);font-weight:600}
.nav-caret{font-size:9px;opacity:.6;transition:transform .18s var(--e-out)}
.nav-item.has-sub:hover .nav-caret{transform:rotate(180deg)}
.nav-item.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
.nav-sub{position:absolute;top:calc(100% + 4px);left:0;min-width:196px;background:var(--raise);
  border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 30px rgba(0,0,0,.10);padding:6px;
  display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--e-out),transform .18s var(--e-out),visibility .18s;z-index:100}
.nav-item.has-sub:hover .nav-sub,.nav-item.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub-a{font-size:13.5px;color:var(--ink-2);padding:8px 12px;border-radius:4px;white-space:nowrap;
  text-decoration:none;transition:all .15s var(--e-out)}
.nav-sub-a:hover,.nav-sub-a.on{background:var(--wash);color:var(--teal)}
@media(max-width:900px){.nav-sub{position:static;opacity:1;visibility:visible;transform:none;
  box-shadow:none;border:0;padding:2px 0 2px 14px;min-width:0}.nav-item{display:flex;flex-direction:column;align-items:flex-start}}

/* ── Cabeçalhos de secção centrados ──────────────────────────────────────
   .sec-h tinha max-width:60ch sem margem automática: o título ficava
   encostado à esquerda com ~590px de vazio à direita, em todas as páginas.
   Centra-se apenas o cabeçalho (etiqueta + título + intro); o conteúdo da
   secção — grelhas, cards, fases — mantém o alinhamento que já tinha.
   A opção "Centrar" do bloco Secção (.sec-c) continua a funcionar e
   centra a secção inteira, como antes. */
.sec-h{margin-left:auto;margin-right:auto;text-align:center}
.sec-h .ser{text-wrap:balance}
/* introduções longas (>3 linhas) voltam a alinhar à esquerda: texto corrido
   centrado obriga o olho a procurar o início de cada linha */
.sec-h--longo p{text-align:left}

/* ══ INÍCIO escala tipográfica (23 Jul 2026) ══════════════════════════════
   Reverter: repor main.css.antes-escala-tipografica.20260723
   ═════════════════════════════════════════════════════════════════════ */
/* ── Escala tipográfica: 13 · 16 · 20 · 25 · 37 (rácio ~1,25) ──────────────
   Antes: 7 tamanhos entre 11 e 16px, todos a menos de 1,15x uns dos outros,
   e um salto de 16 para 37. Hierarquia turva onde há mais texto, e corpo
   secundário abaixo do mínimo legível para o público (direções e autarquias). */

/* micro-etiquetas: 10,5-11 -> 13 */
.eb, .sec-h .eb, .apoios-um-l, .cf-eye { font-size: 13px; }
/* classe repetida de propósito: estas vivem em CSS inline dos blocos, que
   entra depois do main.css — sem a especificidade extra a regra não pega */
.ctc-eye.ctc-eye, .perc-eye.perc-eye { font-size: 13px; }
.hero-share .hs-l.hs-l { font-size: 13px; }
.ft-col h5 { font-size: 13px; }
.pill      { font-size: 12px; }
.vd-dur    { font-size: 12px; }

/* secundário e legendas: 11,5-12,5 -> 13/14 */
.vd-b span, .ft-p, .stwrep-s, .q-a, .ctc-nota, .stwrep-conta, .lr { font-size: 13px; }
.inst-c span.inst-ap { font-size: 13px; }   /* vence .inst-c span */
.ft-col a, .ft-nap { font-size: 14px; }

/* títulos de card: 13-13,5 -> 20/16 (o degrau que faltava por completo) */
.vd-b b   { font-size: 20px; font-weight: 600; line-height: 1.3; }
.inst-c b { font-size: 16px; font-weight: 600; line-height: 1.3; }

/* pergunta de FAQ: 15 -> 18, para separar da resposta */
.faq-q { font-size: 18px; }


/* subtítulo intermédio: 25 (degrau que não existia) */
.rep h3, .fd-t { font-size: 25px; }
/* ══ FIM escala tipográfica ═══════════════════════════════════════════════ */

/* ══ TESTEMUNHOS ══════════════════════════════════════════════════════════
   Vozes de quem já viveu o projeto. Cada vídeo é um cartaz (o rosto a sangrar,
   o cargo em branco sobre a imagem). O leitor sobreposto é o da Galeria (.gal-mod).

   🔴 27 Jul 2026 — acabaram os «capítulos» por concelho, a pedido do cliente:
   um concelho com um só bom testemunho não podia entrar sem ficar com um cartaz
   de tamanho diferente dos outros. Agora é uma fila só, todos do mesmo tamanho.

   🔑 A causa do desalinhamento era `auto-fit`: com dois cartazes numa linha, as
   colunas vazias colapsam e os dois esticam para metade do ecrã cada; com três,
   ficam a um terço. `auto-fill` mantém as colunas de largura fixa e deixa o
   espaço vazio à direita — é o que faz com que o 10.º testemunho, sozinho na
   última linha, tenha exactamente o tamanho dos outros nove. */
.tst .sec-h{margin-bottom:44px}

.tst-grid{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* o cartaz */
.tst-card{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
.tst-card.tst-vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.tst-card{opacity:1;transform:none;transition:none}}

.tst-media{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--sunk);
  box-shadow:var(--sh-1);transition:box-shadow .3s var(--e-out),transform .3s var(--e-out)}
.tst-media:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.tst-media:focus-visible{outline:2px solid var(--teal-live);outline-offset:3px}
.tst-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--e-out);filter:saturate(1.02)}
.tst-media:hover .tst-poster{transform:scale(1.05)}
.tst-grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,
    oklch(21% .045 220 / .94) 0%,
    oklch(21% .045 220 / .55) 34%,
    oklch(21% .045 220 / .06) 62%,
    transparent 100%);
  transition:opacity .3s var(--e-out)}
.tst-media:hover .tst-grad{opacity:.86}

/* botão play com anel pulsante */
.tst-play{position:absolute;top:calc(50% - 27px);left:calc(50% - 27px);width:54px;height:54px;
  display:grid;place-items:center;border-radius:50%;color:var(--teal-deep);
  background:oklch(100% 0 0 / .92);backdrop-filter:blur(3px);
  box-shadow:0 6px 20px -6px oklch(21% .04 220 / .5);
  transition:transform .3s var(--e-out),background .3s var(--e-out);z-index:2}
.tst-play svg{margin-left:2px}
.tst-media:hover .tst-play{transform:scale(1.1);background:#fff}
.tst-play::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid oklch(100% 0 0 / .7)}
@media(prefers-reduced-motion:no-preference){
  .tst-play::after{animation:tst-ping 2.6s var(--e-out) infinite}
}
@keyframes tst-ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(1.7);opacity:0}}

/* duração */
.tst-dur{position:absolute;top:11px;right:11px;z-index:2;
  background:oklch(21% .02 220 / .62);backdrop-filter:blur(2px);color:#fff;
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:999px;letter-spacing:.02em}

/* identidade sobre o cartaz */
.tst-meta{position:absolute;left:16px;right:16px;bottom:15px;z-index:2;pointer-events:none}
.tst-cargo{display:block;color:#fff;font-size:17px;font-weight:600;line-height:1.28;
  text-shadow:0 1px 10px oklch(21% .04 220 / .55)}
.tst-local{display:block;margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:oklch(88% .05 200 / .92)}

@media(max-width:560px){
  .tst-grid{grid-template-columns:1fr;gap:14px}
  .tst-media{aspect-ratio:16/10}
  .tst-cap-h{gap:12px}
  .tst-cargo{font-size:16px}
}
/* ══ FIM testemunhos ══════════════════════════════════════════════════════ */

/* ══ Páginas internas — cabeçalhos à largura das outras secções ═══════════
   Nas páginas de conteúdo (Viabilidade, Vozes da Nossa Terra, O Projeto…) os
   cabeçalhos de secção continuam CENTRADOS, mas ocupam a MESMA largura das
   restantes secções (o container inteiro), em vez do estreito de origem
   (60ch ≈ 640px) — fica tudo à mesma largura. A HOMEPAGE fica de fora. */
body:not(.home) .sec-h{max-width:none;margin-left:auto;margin-right:auto;text-align:center}
body:not(.home) .sec-h .ser{text-wrap:balance}
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── frase em destaque (bloco stw/destaque) ──────────────────────────────────
   O mesmo fundo teal cheio que a homepage usa por baixo do hero (.hero-sub):
   é a única cor sólida do site, e serve para dizer que ali há uma ideia que
   se leva. Sem aspas — não é citação de ninguém. */
.dst{background:var(--teal);color:var(--on-teal);padding:clamp(50px,6.5vw,82px) 0;
  border-bottom:1px solid var(--line)}
.dst-in{max-width:44ch}
.dst-in::before{content:"";display:block;width:42px;height:2px;background:currentColor;opacity:.4;
  margin-bottom:20px}
.dst .eb{color:var(--on-teal);opacity:.72;margin-bottom:12px}
.dst-t{font-size:clamp(23px,3.1vw,35px);line-height:1.3;margin:0}

/* ── pontos numerados (bloco stw/passos) ─────────────────────────────────────
   O numeral serifado das fases (.fd-n), sem a fotografia: quando não há uma
   imagem honesta para cada ponto, a tipografia vale mais do que uma decorativa. */
.pss{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pss-i{display:grid;grid-template-columns:88px 1fr;gap:26px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line)}
.pss-n{font-size:42px;line-height:.85;color:var(--teal);opacity:.22;
  font-variant-numeric:tabular-nums;transition:opacity .3s var(--e-out)}
.pss-i:hover .pss-n{opacity:.42}
.pss-c h3{font-size:20px;margin:0 0 7px}
.pss-c p{font-size:14.5px;color:var(--ink-2);max-width:64ch;margin:0}
@media(max-width:760px){
  .pss-i{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .pss-n{font-size:30px}
  .dst-in{max-width:none}
}
@media(prefers-reduced-motion:reduce){ .pss-n{transition:none} }

/* ── texto com imagem (bloco stw/texto-img) ──────────────────────────────────
   A fotografia ocupa 5 colunas de 12 e o texto 6, com uma coluna de folga: o
   texto não encosta à imagem e a página deixa de ser uma pilha de parágrafos.
   O realce é a frase que fica — em serifada, não entre aspas: é o projeto a
   afirmar-se, não uma citação de alguém. */
.ti{display:grid;grid-template-columns:5fr 1fr 6fr;align-items:center;gap:0}
/* grid-row explícito nos dois: com só grid-column, inverter os lados fazia o
   auto-placement mandar o segundo elemento para a linha de baixo — imagem em
   cima, texto por baixo, em vez de lado a lado. */
.ti-img{margin:0;grid-column:1;grid-row:1}
/* Sem proporção imposta: a fotografia entra como é. Com um aspect-ratio fixo,
   uma imagem quadrada perdia um terço da altura no corte — e quem edita a página
   não tem por onde perceber que a foto que carregou está a ser cortada. */
.ti-img img{width:100%;height:auto;border-radius:2px;display:block}
.ti-t{grid-column:3;grid-row:1}
.ti-t h2{font-size:clamp(26px,3vw,37px);margin:12px 0 13px}
.ti-t p{color:var(--ink-2);max-width:56ch}
.ti-r{font-size:clamp(18px,2vw,23px);line-height:1.42;color:var(--ink);margin-top:20px;
  padding-top:20px;border-top:1px solid var(--line-2);max-width:40ch}
.ti--inv .ti-img{grid-column:3}
.ti--inv .ti-t{grid-column:1}
.ti-f{background:var(--sunk)}
.ti-f .sec{border-bottom:1px solid var(--line)}
@media(max-width:900px){
  .ti{grid-template-columns:1fr;gap:26px}
  .ti-img,.ti-t,.ti--inv .ti-img,.ti--inv .ti-t{grid-column:1}
  .ti-t{grid-row:2}.ti--inv .ti-t{grid-row:2}.ti-img,.ti--inv .ti-img{grid-row:1}
  .ti--inv .ti-img{grid-row:1}
}

/* ── aro que dá a volta à fotografia ─────────────────────────────────────────
   Um fio à volta da imagem com dois riscos de luz a percorrê-lo, em lados
   opostos. O que se anima é só a rotação de um pseudo-elemento: a placa gráfica
   trata disso sozinha, sem obrigar o browser a recalcular nada da página
   (medido: 60 fps com e sem a animação, pior fotograma 16,8 ms nos dois casos).
   Os arcos são curtos e claros de propósito — um arco longo e esbatido não se
   percebe a andar, parece só um brilho parado. O halo é estático: dá presença
   sem custar um segundo elemento a animar. */
.aro{position:relative;padding:6px;overflow:hidden;border-radius:9px;
  /* A cor do aro é a da OPERAÇÃO em que a página está, não a da 3HASH nem
     sempre a do Sing the World: no Vozes da Nossa Terra as variáveis --vnt-*
     existem e ganham; nas outras páginas não existem e fica o teal. Um único
     conjunto de regras serve as duas marcas. */
  --aro-fundo:  var(--vnt-wash,   var(--wash));
  --aro-traco:  var(--vnt-terra,  oklch(62% .13 205));
  --aro-nucleo: var(--vnt-creme,  oklch(93% .07 195));
  --aro-anel:   var(--vnt-laranja,oklch(88% .04 200));
  --aro-halo:   var(--vnt-terra,  oklch(55% .10 202));
  background:var(--aro-fundo);
  box-shadow:0 0 0 1px var(--aro-anel), 0 10px 34px -12px var(--aro-halo)}
.aro::before{content:"";position:absolute;top:50%;left:50%;width:158%;aspect-ratio:1;
  translate:-50% -50%;
  background:conic-gradient(from 0deg,
    transparent 0 4%,
    var(--aro-traco) 10%, var(--aro-nucleo) 15%, var(--aro-traco) 20%,
    transparent 27% 54%,
    var(--aro-traco) 60%, var(--aro-nucleo) 65%, var(--aro-traco) 70%,
    transparent 77% 100%);
  filter:blur(1.2px);
  animation:aro-gira 6.5s linear infinite}
.aro > img{position:relative;z-index:1;border-radius:4px;display:block;width:100%}
@keyframes aro-gira{ to{ rotate:360deg } }
/* Quem pediu menos movimento ao sistema fica com o fio parado, não sem fio. */
@media(prefers-reduced-motion:reduce){ .aro::before{animation:none} }

/* O primeiro cabeçalho de secção de uma página é o H1 (ver stw_tag_titulo).
   O aspecto tem de ser o mesmo: a estrutura mudou, o desenho não. */
.sec-h h1{font-size:clamp(26px,3vw,37px);margin:12px 0 13px;font-weight:400}
.ti-t h1{font-size:clamp(26px,3vw,37px);margin:12px 0 13px;font-weight:400}

/* ── carrossel de fotografias (bloco stw/carrossel) ──────────────────────────
   O deslize é do próprio browser (scroll-snap): trata do dedo, da roda e do
   teclado sem uma linha de JavaScript. As setas só empurram o scroll — e por
   isso desaparecem em ecrãs pequenos, onde arrastar é o gesto natural. */
.crs{position:relative}
.crs-h{margin-bottom:26px}
.crs-pista{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 2px 14px;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.crs-pista::-webkit-scrollbar{height:6px}
.crs-pista::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.crs-i{flex:0 0 clamp(240px,32%,380px);margin:0;scroll-snap-align:start}
.crs-i img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;display:block;
  background:var(--sunk)}
.crs-b{position:absolute;top:calc(50% - 20px);width:40px;height:40px;border-radius:50%;
  background:var(--raise);border:1px solid var(--line-2);color:var(--ink);
  font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--sh-2);transition:border-color .16s ease,color .16s ease,transform .16s var(--e-out)}
.crs-b:hover{border-color:var(--teal);color:var(--teal);transform:scale(1.06)}
.crs-b--ant{left:-18px} .crs-b--seg{right:-18px}
.crs-f{background:var(--sunk)}
.crs-f .sec{border-bottom:1px solid var(--line)}
@media(max-width:900px){ .crs-b{display:none} .crs-i{flex-basis:78%} }
@media(prefers-reduced-motion:reduce){ .crs-pista{scroll-behavior:auto} .crs-b{transition:none} }

/* ── A71 · Galeria/Repertório: etiquetas das nacionalidades (31 Jul 2026) ──
   Pedido da cliente: a lista de países cresce continuamente e as etiquetas
   ficavam grandes de mais (26 países = 5 linhas, 160px).
   🔑 NÃO se baixa o corpo de letra: os 12px vêm da escala tipográfica de 23 Jul,
   posta de propósito por legibilidade (público = direções e autarquias). O que
   as fazia ocupar espaço era o resto — MAIÚSCULAS + letter-spacing + padding.
   Nomes de países não são micro-etiquetas de estilo: em capitalização normal
   ocupam menos e leem-se MELHOR. Só aqui; as outras `.pill` do site não mudam. */
.rep-p{gap:5px}
.rep-p .pill{
  text-transform:none;      /* ALBÂNIA -> Albânia: ~12% menos largura, mais legível */
  letter-spacing:0;         /* 0,6px x cada letra somava numa lista longa */
  font-weight:500;          /* 600 pesava como título numa lista de 26 */
  padding:3px 8px;
}