@charset "UTF-8";
/* =========================================================
   Ramira · Workshop Fios Realistas — Método ITE
   Folha de estilo de produção — v3

   É a composição da v1 (que foi a aprovada): herói com fotografia a sangrar
   à direita, cabeçalho em cápsula, cartões arredondados, oferta com halo.
   Mudou o que tinha de mudar:

     · a base passou de quase-preto a papel quente;
     · a tipografia passou a capitulares romanas + Montserrat, como a cliente
       pediu;
     · o texto foi encurtado e o programa passou a acordeão;
     · entraram a galeria antes/depois e os depoimentos em vídeo.

   Num tema claro não basta trocar dois tokens: brilhos, halos, vidros e
   sombras têm todos de ser refeitos, porque em cima de branco um brilho não
   se vê e uma sombra preta suja. Onde isso aconteceu, está anotado.
   ========================================================= */

/* ---------- 1. Tokens ----------
   TEMA ESCURO — preto quente com dourado.
   O preto não é #000: é um preto com barro lá dentro (#0e0d0b), senão o
   dourado por cima lê-se azulado. Pela mesma razão o texto não é branco.

   Os *-rgb existem para os degradês e véus poderem usar a mesma cor com
   opacidade — `rgba(var(--bg-rgb),.5)`. Antes estavam escritos à mão em 30
   sítios, e era por isso que trocar de tema dava tanto trabalho. */
:root{
  /* superfícies */
  --bg:        #0e0d0b;   /* preto quente                                 */
  --bg-alt:    #15130f;   /* bandas alternadas                            */
  --surface:   #1a1712;   /* cartões                                      */
  --surface-2: #211d16;   /* par do degradê dos cartões                   */
  --bg-rgb:      14,13,11;
  --surface-rgb: 26,23,18;

  /* marca — dourado.
     No escuro o realce faz-se clareando: "lite" é mais claro que a base. */
  --gold:      #c9a24d;
  --gold-lite: #e2c078;   /* hover                                        */
  --gold-deep: #a5813a;
  --gold-rgb:  201,162,77;

  /* texto */
  --ink:       #f4efe6;   /* 17:1 sobre --bg                              */
  --body:      #cfc7ba;
  --body-dim:  #c3baac;
  --muted:     #9c9284;   /* 6.8:1 sobre --bg e 6.4:1 sobre --bg-alt      */
  --on-gold:   #17130c;   /* texto escuro em cima do dourado              */
  --ink-rgb:   244,239,230;
  --on-gold-rgb: 23,19,12;

  /* linhas */
  --line:      rgba(244,239,230,.10);
  --line-2:    rgba(244,239,230,.18);
  --line-gold: rgba(201,162,77,.30);

  /* tipografia
     Felix Titling é da Monotype e precisa de licença de webfont comprada.
     Enquanto não houver, corre em Cinzel — capitulares romanas da mesma
     linhagem. Ver o bloco 1c para trocar.

     ⚠️ 'Felix Titling' foi RETIRADA desta lista de propósito.
     Estava em primeiro lugar e sem @font-face nenhum, o que significava que
     quem tem a fonte instalada no computador (o Office instala-a) via o site
     em Felix Titling — e mais ninguém. Toda a gente via Cinzel. Aprovar um
     design assim é aprovar uma coisa que a cliente nunca vai receber.
     Voltar a pôr o nome aqui é o passo 2 de comprar a licença; o passo 1 é
     descomentar o @font-face do bloco 1c. Os dois, ou nenhum. */
  --font-display: 'Cinzel', 'Cinzel Fb1', 'Cinzel Fb2', Georgia, serif;
  --font-body:    'Montserrat', 'Mont Fb1', 'Mont Fb2', 'Mont Fb3', system-ui, sans-serif;
  --track: .05em;         /* espacejamento das capitulares                */

  /* ritmo */
  --maxw:      1180px;
  --maxw-narrow: 820px;
  --gutter:    clamp(20px, 5vw, 40px);
  --section-y: clamp(76px, 8.5vw, 136px);

  /* ▸ HERÓI — os únicos sítios a mexer.
     Altura: mais baixo 76dvh/700px · ecrã cheio 100dvh/940px */
  /* O tecto subiu de 780 para 880 quando o herói passou a ser o retrato de
     blazer branco. A 780px a caixa ficava com 2,46:1 num ecrã de 1920x1080,
     muito mais larga do que a fotografia (2,13:1), e o cover comia-lhe a
     cabeça em cima e as mãos em baixo. A 880 a caixa fica em 2,18:1 e ela
     cabe quase inteira. Ver assets/img/_gerar-heroi.js. */
  --hero-h:    min(84dvh, 880px);   /* desktop  */
  --hero-h-m:  min(88dvh, 740px);   /* telemóvel */

  /* Enquadramento da foto de fundo.
       X-D · 100% = encostada à direita, e tem MESMO de ser 100%. A tela do
           desktop é 2600x900 (2,89:1), muito mais larga do que qualquer caixa
           de herói, e toda a sobra está do lado esquerdo — que é preenchimento
           desfocado, não é ela. Encostar à direita garante que o `cover` corta
           sempre esse lado e nunca lhe toca.
       Y-D · 50% é indiferente na prática: a tela e a caixa têm quase a mesma
           proporção, não sobra altura para cortar em ecrã nenhum.
       Y · no telemóvel a faixa e o recorte têm a mesma proporção (4:5), por
           isso 50% não corta rigorosamente nada. */
  --hero-x: 50%;
  --hero-y: 50%;
  --hero-x-d: 100%;
  --hero-y-d: 50%;

  /* Telemóvel: a foto é uma faixa com proporção própria (recorte 800x1000),
     não um fundo esticado até ao fim do herói. Assim ela aparece inteira. */
  --hero-band: calc(100vw * 1.25);

  /* forma */
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 12px;

  /* movimento */
  --ease:      cubic-bezier(.32,.72,0,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ---------- 1a. Fontes, servidas do próprio domínio ----------
   Ficheiros variáveis, subconjunto `latin` apenas — o português cabe todo aí
   (á à â ã ç é ê í ó ô õ ú estão no Latin-1). Duas fontes, 62 KB no total,
   com todos os pesos de 400 a 600 dentro de cada ficheiro.

   Estão alojadas aqui, e não no CDN do Google, por duas razões:

     1. RGPD. Pedir a fonte a fonts.gstatic.com envia o IP da visitante para
        o Google antes de ela consentir o que quer que seja. Já houve decisões
        judiciais na UE contra exactamente isto. Alojar no próprio domínio
        elimina o problema e tira uma entidade da política de privacidade.

     2. Salto de layout. Com a folha do Google carregada de forma assíncrona,
        a fonte chegava depois da primeira pintura e o texto refluía — o cartão
        de cookies mudava 21px de altura e dava sozinho um CLS de ~0,10.
        Servida da mesma origem e com <link rel=preload>, a fonte já está lá
        na primeira pintura.

   Para actualizar, correr o script em scratchpad/fetch-fonts.js. */
@font-face{
  font-family:'Cinzel';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('../fonts/cinzel-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1b. Substitutas com métrica ajustada ----------
   Enquanto a fonte real descarrega, o texto é composto com uma fonte do
   sistema. Se tiverem larguras diferentes, o texto reflui quando a real
   chega — e isso conta como salto de layout (CLS).

   O size-adjust escala a substituta até ocupar exactamente a mesma largura.
   Cada fonte do sistema precisa do seu valor, por isso há uma família por
   substituta, encadeadas nas variáveis acima: se a primeira não existir na
   máquina, o browser passa à seguinte.

   Medido no browser, com o texto real da página, a 100px:
     Cinzel 1975.3 · Georgia 2015.3 (98.0%) · Times New Roman 1953.2 (101.1%)
     Montserrat 2676.9 · Segoe UI 2398.6 (111.6%) · Helvetica Neue 2182.4 (122.7%) · Arial 2401.3 (111.5%)

   Sem ascent-override de propósito: as alturas de linha são todas sem
   unidade, logo a caixa de linha não depende das métricas da fonte. */
@font-face{ font-family:'Cinzel Fb1'; src:local('Georgia');         size-adjust: 98.0%; }
@font-face{ font-family:'Cinzel Fb2'; src:local('Times New Roman'); size-adjust:101.1%; }
@font-face{ font-family:'Mont Fb1';   src:local('Segoe UI');        size-adjust:111.6%; }
@font-face{ font-family:'Mont Fb2';   src:local('Helvetica Neue');  size-adjust:122.7%; }
@font-face{ font-family:'Mont Fb3';   src:local('Arial');           size-adjust:111.5%; }

/* ---------- 1c. Trocar para Felix Titling ----------
   Depois de comprar a licença de WEBFONT (a de desktop não serve, e ter o
   ficheiro instalado no computador também não conta), são dois passos:

   1) colocar o woff2 em assets/fonts/ e descomentar este bloco;
   2) acrescentar 'Felix Titling' ao princípio da --font-display, no bloco 1.

   Os dois, ou nenhum. Só o passo 2 faz o site parecer certo a quem tem a
   fonte instalada e continuar errado para toda a gente.

   @font-face{
     font-family:'Felix Titling';
     src:url('../fonts/felix-titling.woff2') format('woff2');
     font-weight:400; font-display:swap;
   }
*/

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* `clip` no html é o par do .bleed (secção 11a-bis): sem ele o 100vw da
   sangria conta com a barra de scroll e a página ganha deslize horizontal.
   No body fica `hidden` como fallback para browsers sem `clip`. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--font-body);
  font-weight:400;                 /* 300 sobre papel fica anémico */
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg,video{ display:block; max-width:100%; }
img,video{ height:auto; }
/* <picture> é um wrapper de altura automática: sem isto, o height:100% do <img>
   resolve contra ele e cai para auto — a moldura deixa de recortar a imagem. */
.mentor-media .frame picture,.vid-shot picture{ width:100%; height:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; text-wrap:pretty; }
a{ color:var(--gold); text-decoration:none; }
button{ font:inherit; color:inherit; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--ink);
  margin:0;
  line-height:1.14;
  /* Capitulares precisam de espacejamento positivo — ao contrário da
     Cormorant da v1, que levava -.005em. */
  text-transform:uppercase;
  letter-spacing:var(--track);
  text-wrap:balance;
}
/* Em caixa alta o mesmo corpo lê-se maior, por isso a escala desce. */
h1{ font-size:clamp(30px,4.4vw,50px); line-height:1.08; }
h2{ font-size:clamp(24px,3.2vw,38px); }
h3{ font-size:clamp(15px,1.5vw,18.5px); line-height:1.32; letter-spacing:.07em; }
/* Nem a Felix Titling nem a Cinzel têm itálico verdadeiro: o destaque
   faz-se só pela cor. Nos textos em Montserrat o itálico mantém-se. */
h1 em,h2 em,h3 em{ font-style:normal; color:var(--gold); }
strong{ color:var(--ink); font-weight:600; }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:12px; z-index:100;
  background:var(--gold); color:var(--on-gold);
  padding:12px 20px; border-radius:999px; font-weight:600;
}
.skip:focus{ left:12px; }

/* ---------- 3. Textura ----------
   Sobre papel o grão tem de multiplicar, não sobrepor: em `overlay` clareava
   em vez de granular. */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  /* No claro o grão escurecia (multiply). No escuro tem de clarear, senão
     multiplica preto sobre preto e não se vê rigorosamente nada. */
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap.narrow{ max-width:var(--maxw-narrow); }
.section{ padding-block:var(--section-y); }
/* folga para o cabeçalho fixo (12px de topo + a cápsula com o logótipo) */
section[id]{ scroll-margin-top:104px; }
.section.alt{ background:var(--bg-alt); border-block:1px solid var(--line); }
.center{ text-align:center; }

.sec-head{ margin-bottom:clamp(38px,4.5vw,64px); }
.sec-head.center{ max-width:660px; margin-inline:auto; }
.sec-head.split{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.sec-sub{ margin-top:18px; color:var(--body-dim); font-size:1.02em; }
.sec-head.center .sec-sub{ margin-inline:auto; }
.sec-meta{ color:var(--muted); font-size:.82em; letter-spacing:.14em; text-transform:uppercase; }
.sec-close{
  margin:clamp(36px,4vw,52px) auto 0; max-width:580px;
  text-align:center; color:var(--body-dim); font-size:1.06em;
}
.sec-close em{ color:var(--gold); font-style:italic; }

.eyebrow{
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:18px;
}

/* cabeçalho de segundo nível dentro de uma secção: separa dois blocos sem
   inventar mais uma secção (o que só empurraria a oferta para baixo) */
.sub-head{
  margin-top:clamp(52px,6vw,84px); margin-bottom:clamp(26px,3vw,38px);
  padding-top:clamp(34px,4vw,48px); border-top:1px solid var(--line);
}
.sub-head h3{
  font-size:clamp(17px,2.1vw,24px); letter-spacing:var(--track);
  text-transform:uppercase; font-family:var(--font-display); color:var(--ink);
}
.sub-head .sec-sub{ margin-top:12px; font-size:.95em; }

.grid-2{ display:grid; grid-template-columns:1fr; gap:20px; }
.grid-3{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:720px){
  .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
}
@media (min-width:900px){
  .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
}

/* ---------- 5. Botões ----------
   O halo dourado da v1 era um brilho: em cima de papel um brilho não se vê,
   só suja. Aqui a sombra é uma sombra de verdade — curta e com a cor do
   próprio barro, para não acinzentar. */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:6px 6px 6px 28px;
  border-radius:999px; border:0;
  background:linear-gradient(135deg,var(--gold-lite),var(--gold-deep));
  color:var(--on-gold);
  font-family:var(--font-body);
  font-weight:600; font-size:13px; letter-spacing:.11em; text-transform:uppercase;
  line-height:1; cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(var(--gold-rgb),.42);
  transition:box-shadow .55s var(--ease), transform .35s var(--ease), filter .45s var(--ease);
}
.btn-icon{
  flex:none; width:36px; height:36px; border-radius:999px;
  background:rgba(var(--on-gold-rgb),.18);
  display:grid; place-items:center;
  transition:transform .55s var(--ease), background-color .45s var(--ease);
}
.btn-icon svg{ width:17px; height:17px; }
.btn:hover{
  filter:brightness(1.08);
  box-shadow:0 18px 40px -14px rgba(var(--gold-rgb),.55);
}
.btn:hover .btn-icon{ transform:translate(3px,-1px) scale(1.07); background:rgba(var(--on-gold-rgb),.30); }
.btn:active{ transform:scale(.975); }

.btn-lg{ padding:8px 8px 8px 34px; font-size:13.5px; }
.btn-lg .btn-icon{ width:42px; height:42px; }
.btn-lg .btn-icon svg{ width:19px; height:19px; }

.btn-xl{ padding:9px 9px 9px 40px; font-size:14.5px; letter-spacing:.12em; }
.btn-xl .btn-icon{ width:48px; height:48px; }
.btn-xl .btn-icon svg{ width:21px; height:21px; }

.btn-sm{ padding:5px 5px 5px 20px; font-size:11px; gap:10px; }
.btn-sm .btn-icon{ width:28px; height:28px; }
.btn-sm .btn-icon svg{ width:14px; height:14px; }

/* O padding assimétrico existe para o ícone circular encostar à direita.
   Sem ícone, o texto ficava descentrado — aqui volta a ser simétrico,
   mantendo a mesma altura de cada tamanho. */
.btn:not(:has(.btn-icon)){ padding:17px 30px; }
.btn-lg:not(:has(.btn-icon)){ padding:22px 34px; }
.btn-xl:not(:has(.btn-icon)){ padding:25px 40px; }
.btn-sm:not(:has(.btn-icon)){ padding:13px 22px; }

.btn-ghost{
  color:var(--body); font-size:13px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  border-bottom:1px solid var(--line-gold); padding-bottom:4px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn-ghost:hover{ color:var(--gold-lite); border-color:var(--gold); }

/* ---------- 6. Header ----------
   O vidro é permanente, não só depois de rolar: a cápsula passa por cima da
   fotografia e o texto dela é escuro. Sem vidro de origem, os links ficavam
   ilegíveis sobre a parede de cimento. */
.site-header{
  position:fixed; inset:12px 0 auto; z-index:50;
  display:flex; justify-content:center;
  padding-inline:var(--gutter);
  pointer-events:none;
}
.nav-pill{
  pointer-events:auto;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  width:100%; max-width:var(--maxw);
  /* 11px em cima e em baixo, não 8px: é a folga do logótipo até ao aro da
     cápsula. Sobe ao mesmo tempo que o logótipo desce (56→50px), por isso a
     ALTURA TOTAL da cápsula não muda — continua nos 72px, e nada do que
     depende dela (o scroll-margin-top das secções) precisa de acompanhar. */
  padding:11px 8px 11px 18px;
  border:1px solid rgba(var(--ink-rgb),.09);
  border-radius:999px;
  background:rgba(var(--bg-rgb),.5);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  transition:background-color .5s var(--ease), border-color .5s var(--ease),
             box-shadow .5s var(--ease);
}
.site-header.stuck .nav-pill{
  background:rgba(var(--bg-rgb),.9);
  border-color:var(--line-gold);
  box-shadow:0 14px 38px -20px rgba(0,0,0,.7);
}
.brand{ display:flex; align-items:center; margin-right:auto; color:var(--ink); }

/* Logótipo da marca.
   É um bloco de três linhas ("WORKSHOP / MÉTODO ITE / Fios Realistas"), por
   isso precisa de altura: abaixo de ~40px a assinatura deixa de se ler.
   O ficheiro nativo tem 521px de largura, o que cobre este tamanho a 5x. */
/* O logótipo é a única marca no cabeçalho e tem três linhas de texto — a 44px
   a palavra WORKSHOP quase não se lia no telemóvel, e foi por isso que em
   tempos subiu para 56px.

   04/08/2026: desceu para 50px porque a 56 encostava ao aro da cápsula. Os
   6px que perdeu foram para o padding do .nav-pill, portanto ganhou folga sem
   o cabeçalho mudar de altura. Não descer abaixo dos 50 — aí volta o problema
   de legibilidade que motivou a subida, e não é um problema de gosto. */
.brand-logo{ display:block; height:50px; width:auto; }
@media (max-width:420px){ .brand-logo{ height:46px; } }
/* Goteira fluida e não fixa em 28px: o menu passou de cinco para seis links
   (entrou «Aula») e, à largura mínima em que aparece, seis a 28px de intervalo
   não cabiam na cápsula — empurravam o botão de inscrição para fora. */
.nav-links{ display:none; gap:clamp(16px,2.1vw,28px); }
.nav-links a{
  color:var(--body); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .35s var(--ease);
}
.nav-links a:hover{ color:var(--gold); }
/* Subiu de 940 para 1000 por causa do sexto link. Abaixo disto a cápsula fica
   só com o logótipo e o botão de inscrição — que é o que interessa nessas
   larguras, e continua a haver o menu do rodapé para quem procura secções. */
@media (min-width:1000px){ .nav-links{ display:flex; } }
@media (max-width:520px){ .brand-text{ display:none; } }

/* ---------- 7. Herói (imagem de fundo full-bleed) ----------
   A fotografia é o retrato da Ramira de blazer branco, sem atendimento — foi
   pedido da cliente (04/08/2026). Fonte: uploads/hero_principal.webp.

   Entra limpa, sem nada queimado no ficheiro: o escurecer da esquerda e os
   remates de cima e de baixo são todos degradês do .hero-scrim, e por isso
   adaptam-se a qualquer largura de ecrã sem deixar barras nem emendas.
   O telemóvel usa um recorte vertical dedicado (800x1000), na mesma proporção
   de --hero-band, centrado nela.

   ⚠️ O _gerar-imagens.js ainda compõe o herói ANTIGO sobre papel claro. Se o
   correr sem o actualizar primeiro, volta a fotografia do atendimento. */
.hero{ position:relative; overflow:hidden; background:var(--bg); display:grid; }

/* Faixa no telemóvel (altura ligada à largura, por isso o recorte não corta);
   no desktop volta a ocupar o herói inteiro. */
.hero-bg{ position:absolute; inset:0 0 auto; height:var(--hero-band); z-index:0; }
.hero-bg picture{ display:block; width:100%; height:100%; }
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover; object-position:var(--hero-x) var(--hero-y);
}
.hero-scrim{
  position:absolute; inset:0 0 auto; height:var(--hero-band);
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
              rgba(var(--bg-rgb),.3) 0%, rgba(var(--bg-rgb),0) 18%,
              rgba(var(--bg-rgb),0) 60%, rgba(var(--bg-rgb),.5) 86%,
              var(--bg) 100%);
}

.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr);
  align-items:end;
  min-height:var(--hero-h-m);
  width:100%; max-width:var(--maxw); margin-inline:auto;
  /* O texto começa dentro do degradê final da faixa: costura a foto ao fundo
     sem nunca lhe passar por cima do rosto. */
  padding:calc(var(--hero-band) - 72px) var(--gutter) clamp(40px,5vh,60px);
}
.hero-copy{ max-width:600px; }
/* Linha entre o título e o lead. É a promessa em bruto, por isso não é um
   parágrafo qualquer: fica maior e mais escura do que o lead, mas sem
   competir com o h1. */
.hero-kicker{
  margin-top:20px; font-size:clamp(16.5px,1.45vw,20px);
  line-height:1.45; color:var(--ink); font-weight:600;
  letter-spacing:.01em; max-width:34ch;
}
.lead{
  margin-top:18px; font-size:clamp(16px,1.3vw,18.5px);
  line-height:1.68; color:var(--body-dim); max-width:46ch;
}
.hero-actions{
  display:flex; align-items:center; gap:clamp(18px,3vw,32px);
  margin-top:38px; flex-wrap:wrap;
}
.hero-micro{ margin-top:24px; font-size:13px; color:var(--muted); letter-spacing:.03em; }

@media (min-width:861px){
  /* Desktop: a foto enche o herói todo (`cover`).
     Com `contain` a fotografia encolhia até caber na altura do herói e, em
     ecrãs largos, sobrava uma barra à esquerda — via-se o degrau vertical
     entre a parede de cimento e o papel, e a foto ficava cortada em cima e
     em baixo por arestas duras. Com `cover` não há barras nem emendas: o
     recorte é sempre em baixo (ver --hero-y-d) e os bordos dissolvem-se nos
     degradês do .hero-scrim. */
  .hero-bg,.hero-scrim{ inset:0; height:auto; }
  .hero-bg img{
    object-fit:cover;
    object-position:var(--hero-x-d) var(--hero-y-d);
  }

  .hero-inner{
    align-items:center;
    min-height:var(--hero-h);
    padding-block:clamp(110px,13vh,150px) clamp(70px,9vh,105px);
  }
  /* O scrim nunca chega a ser opaco: a fotografia enche o herói de ponta a
     ponta e à esquerda vê-se sempre o cortinado por baixo do véu.

     Estes valores foram refeitos quando o herói passou a ser o retrato de
     blazer branco. Antes a esquerda da foto era parede de cimento CLARA e o
     véu tinha de ir até aos 66% para o texto ler; agora é cortinado escuro,
     já quase preto de origem, por isso o véu pode ser mais curto e mais leve.
     Fecha aos 59% — ela começa aos ~57% — para não lhe cair sombra na cara.
     O remate de baixo cose a foto à barra de garantias; o de cima tira
     contraste ao que fica por trás do cabeçalho. */
  .hero-scrim{
    background:linear-gradient(90deg,
                rgba(var(--bg-rgb),.86) 0%, rgba(var(--bg-rgb),.80) 24%,
                rgba(var(--bg-rgb),.60) 37%, rgba(var(--bg-rgb),.30) 47%,
                rgba(var(--bg-rgb),.08) 54%, rgba(var(--bg-rgb),0) 59%),
               linear-gradient(0deg,var(--bg) 0%,
                rgba(var(--bg-rgb),.55) 9%, rgba(var(--bg-rgb),0) 24%),
               linear-gradient(180deg,rgba(var(--bg-rgb),.5) 0%,
                rgba(var(--bg-rgb),0) 15%);
  }

  /* A copy nunca ultrapassa os 48%, que é onde o ombro dela começa. */
  .hero-copy{ max-width:min(48%,600px); }
}

/* Entre os 861 e os 1440 a fotografia entra mais para dentro (o `cover` é
   limitado pela altura, por isso corta pelos lados). A copy encolhe um
   bocado para não ir parar em cima do braço dela. */
@media (min-width:861px) and (max-width:1439px){
  .hero-copy{ max-width:min(46%,520px); }
}

/* ---------- 8. Trust bar ---------- */
.trust{ background:var(--bg-alt); border-block:1px solid var(--line-gold); }
.trust-list{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(14px,3vw,44px);
  max-width:var(--maxw); margin-inline:auto;
  padding:20px var(--gutter);
}
.trust-list li{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--body);
}
.trust-list svg{ width:17px; height:17px; color:var(--gold); flex:none; }

/* ---------- 9. Cards ----------
   O realce interior branco da v1 (inset 0 1px 0 rgba(255,255,255,.045))
   desapareceria num cartão branco. Aqui a elevação faz-se com um fio de
   borda e uma sombra baixa e quente. */
.card{
  position:relative;
  padding:clamp(26px,2.6vw,34px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  box-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:border-color .55s var(--ease), transform .55s var(--ease),
             box-shadow .55s var(--ease);
}
.card:hover{
  border-color:var(--line-gold);
  transform:translateY(-3px);
  box-shadow:0 22px 48px -26px rgba(0,0,0,.6);
}
.card h3{ margin-bottom:14px; }
.card p{ color:var(--body-dim); font-size:.97em; }

.quote .quote-mark{
  display:block; font-family:var(--font-display);
  font-size:44px; line-height:.6; color:var(--gold); margin-bottom:20px;
}

.outcomes .num{
  display:block; font-family:var(--font-display);
  font-size:14px; letter-spacing:.18em; color:var(--gold); margin-bottom:16px;
}

/* Método ITE — o text-shadow em halo da v1 caiu: sobre papel não se vê. */
.ite .ite-letter{
  display:block; font-family:var(--font-display);
  font-size:clamp(58px,6.5vw,80px); line-height:.9; color:var(--gold);
}
.ite .ite-label{
  margin-top:16px; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted);
}
.ite h3{ margin-top:10px; margin-bottom:12px; }
.card.gold{ border-color:var(--line-gold); }

/* ---------- 9b. Programa (cartões que abrem) ----------
   Mantém o cartão da v1, mas o conteúdo abre a pedido. Foi assim que o texto
   visível da secção encolheu para cerca de um terço, sem perder o layout.

   O estado fechado vive dentro de .js: sem JavaScript o <details> nativo tem
   de continuar a abrir, e um 0fr fixo deixaria tudo invisível. */
/* Sem isto os cartões esticavam para acompanhar o vizinho aberto na mesma
   linha da grelha — o fechado ficava com um vazio enorme por baixo. */
.mods{ align-items:start; }
.mod{ padding:0; }
.mod > summary{
  list-style:none; cursor:pointer;
  padding:clamp(24px,2.5vw,32px);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:18px; align-items:start;
  border-radius:var(--r-lg);
}
.mod > summary::-webkit-details-marker{ display:none; }
.mod > summary::marker{ content:''; }
.mod summary:hover .mod-name{ color:var(--gold); }
.mod-name{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(15px,1.5vw,18.5px); line-height:1.32;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink);
  transition:color .35s var(--ease);
}
.module-tag{
  display:block; margin-bottom:12px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.mod-mark{ position:relative; width:16px; height:16px; flex:none; margin-top:4px; }
.mod-mark::before,.mod-mark::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:1.5px; background:var(--gold); border-radius:2px;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.mod-mark::after{ transform:rotate(90deg); }
/* Segue o estado animado do corpo, não o atributo [open] — o atributo só é
   retirado no fim da transição de fecho. */
.mod:has(.mod-body.open) .mod-mark::after{ transform:rotate(0); opacity:0; }
html:not(.js) .mod[open] .mod-mark::after{ transform:rotate(0); opacity:0; }

html.js .mod-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
html.js .mod-body.open{ grid-template-rows:1fr; }
/* O filho directo da grelha não pode ter padding: o padding sobrevive ao
   overflow:hidden e impede o colapso até 0. */
html.js .mod-body > div{ overflow:hidden; min-height:0; }

.mod-body ul{
  display:flex; flex-direction:column; gap:10px;
  padding:0 clamp(24px,2.5vw,32px) clamp(24px,2.5vw,32px);
  font-size:.95em; color:var(--body-dim); line-height:1.55;
}
.mod-body li{ position:relative; padding-left:20px; }
.mod-body li::before{
  content:''; position:absolute; left:0; top:.68em;
  width:7px; height:1px; background:var(--gold);
}
.module.featured{
  background:linear-gradient(155deg,#251e13,var(--surface));
  border-color:var(--line-gold);
}
.badge{
  position:absolute; top:-11px; right:24px; z-index:1;
  background:linear-gradient(135deg,var(--gold-lite),var(--gold-deep));
  color:var(--on-gold);
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
}

/* Para quem */
.fit h3{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.fit-icon{
  width:28px; height:28px; flex:none; border-radius:999px;
  display:grid; place-items:center; font-size:13px; font-family:var(--font-body);
}
.fit-icon.yes{ color:var(--gold); border:1px solid var(--line-gold); }
.fit-icon.no{ color:var(--muted); border:1px solid var(--line-2); }
.fit ul{ display:flex; flex-direction:column; gap:13px; font-size:.97em; color:var(--body-dim); }
.fit li{ position:relative; padding-left:20px; line-height:1.6; }
.fit li::before{
  content:''; position:absolute; left:0; top:.7em;
  width:7px; height:1px; background:currentColor; opacity:.5;
}
.fit li em{ color:var(--gold); font-style:italic; }
#para-quem .center .btn{ margin-top:clamp(38px,4vw,54px); }

/* ---------- 10. Mentora ---------- */
.mentor{
  display:grid; grid-template-columns:1fr;
  gap:clamp(34px,5vw,64px); align-items:center;
}
@media (min-width:861px){
  .mentor{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); }
}
.mentor-media .frame{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid var(--line-gold);
  aspect-ratio:4/5;
  box-shadow:0 40px 74px -46px rgba(0,0,0,.75);
}
.mentor-media img{ width:100%; height:100%; object-fit:cover; }
.mentor-copy h2{ margin-bottom:24px; }
.mentor-copy p + p{ margin-top:16px; }
.stats{ display:flex; gap:clamp(24px,4vw,44px); margin:34px 0 0; flex-wrap:wrap; }
.stats div{ display:flex; flex-direction:column; }
.stats dt{
  font-family:var(--font-display); font-size:clamp(26px,2.8vw,34px);
  color:var(--gold); line-height:1; letter-spacing:.03em;
}
.stats dd{ margin:8px 0 0; font-size:11px; font-weight:500; color:var(--muted);
  letter-spacing:.15em; text-transform:uppercase; }

/* ---------- 10b. Dois anos depois ----------
   Mesma armação da mentora — imagem de um lado, texto do outro — mas com o
   vídeo a mandar. Aqui a coluna do vídeo é a ESTREITA: o ficheiro vem de
   telemóvel, ao alto (9:16), e numa coluna larga ficava uma tira comprida ao
   meio da página com dois vazios enormes aos lados. */
.dura{
  display:grid; grid-template-columns:1fr;
  gap:clamp(30px,4.5vw,60px); align-items:center;
}
@media (min-width:861px){
  .dura{ grid-template-columns:minmax(0,.72fr) minmax(0,1fr); }
}
.dura-frame{
  position:relative; overflow:hidden;
  /* O 400px é o tecto; o 44vh é quem manda em portáteis de ecrã baixo. Num
     9:16 a largura multiplica-se por 1,78 em altura, e sem esta segunda trava
     um 1366×768 ficava com 711px de vídeo num ecrã de 768 — sem folga nenhuma
     para o texto ao lado respirar.

     Como está, o vídeo ocupa ~78% da altura do ecrã em portáteis e ~66% em
     monitores altos. É de propósito mais presente do que o retrato da mentora
     (que dá ~66%): ali a fotografia acompanha o texto, aqui o vídeo É o
     argumento e o texto é que o acompanha. */
  max-width:min(400px, 44vh); margin-inline:auto;
  border-radius:var(--r-xl);
  border:1px solid var(--line-gold);
  background:#000;               /* o vídeo tem barras enquanto não carrega */
  box-shadow:0 40px 74px -46px rgba(0,0,0,.75);
}
/* A proporção é declarada à mão de propósito: com preload="metadata" o browser
   só conhece as dimensões depois de pedir o ficheiro, e até lá a secção inteira
   saltava por baixo do dedo de quem está a ler. */
.dura-frame video{
  display:block; width:100%; height:auto;
  aspect-ratio:9/16; object-fit:cover; background:#000;
}
/* No telemóvel a coluna deixa de ser estreita e o 9:16 dispara: a 300px de
   largura são 533px de altura, que num ecrã de 640px é a secção inteira e
   empurra o texto todo para fora da vista. Aqui manda a ALTURA do ecrã — a
   largura sai dela pela proporção (9/16 = 0,5625), para o vídeo ocupar sempre
   pouco mais de metade do ecrã e o texto ao lado começar a ler-se sem scroll. */
@media (max-width:860px){
  .dura-frame{ max-width:min(340px, 36vh); }
}
.dura-copy h2{ margin-bottom:24px; }
.dura-copy p + p{ margin-top:16px; }
/* A última frase é o remate — separada por um fio, como o .sec-close faz nas
   secções centradas, mas alinhada à esquerda porque aqui a coluna é de texto
   corrido e centrá-la deixava-a a flutuar. */
.dura-close{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--gold); font-style:italic; font-size:1.06em;
}

/* ---------- 10c. Amostra da formação ----------
   Vídeo deitado (16:9) e sozinho no centro. Ao contrário do dos «2 anos», que
   é de telemóvel e vai ao lado do texto, este é o assunto todo da secção — o
   texto fica por cima, curto, e sai da frente.

   O tecto de 900px existe porque num monitor largo um 16:9 a toda a largura
   dava um vídeo de 1180px que ninguém consegue ver de uma vez sem afastar a
   cabeça; e a esta escala já se distingue o que ela está a fazer com a mão. */
.aula{ max-width:900px; margin-inline:auto; }
.aula-frame{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid var(--line-gold);
  background:#000;
  box-shadow:0 40px 74px -46px rgba(0,0,0,.75);
}
/* proporção declarada à mão: com preload="none" o browser não conhece as
   dimensões do ficheiro até alguém carregar, e sem isto a página saltava
   quando o vídeo finalmente chegasse */
.aula-frame video{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover; background:#000;
}
.aula-nota{
  margin-top:16px; text-align:center;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 11. Carril horizontal ----------
   Um só componente para os dois carrosséis (galeria em telemóvel e vídeos
   dos trabalhos em todo o lado).

   A base é scroll-snap nativo. Ganha-se o gesto que toda a gente já conhece
   do telemóvel e o teclado funciona de graça (os cartões são <button>, o
   browser trata de os trazer para a vista).

   Só o carril dos vídeos anda sozinho, e mesmo esse com travões: pára ao
   passar o rato, ao receber foco, quando a página está escondida, quando o
   sistema pede menos movimento, e pára de vez assim que a visitante lhe toca.
   Tem botão de pausa visível — exigência da WCAG 2.2.2 para qualquer coisa
   que se mexa sozinha mais de cinco segundos.

   Duas regras que fazem a diferença entre um carril que se usa e um que
   passa despercebido:
     · o último item tem de espreitar do lado direito (por isso as colunas
       ficam abaixo de 100%) — é o que diz «há mais para o lado»;
     · o carril sangra até à margem do ecrã, senão parece uma caixa cortada. */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:var(--card,78%);
  gap:16px;
  /* ⚠️ O overflow-y TEM de estar escrito. Não é redundante: pelas regras do
     CSS, quando um dos eixos deixa de ser `visible`, o outro passa de
     `visible` a `auto` sozinho. Só com `overflow-x:auto` o carril ficava
     também com scroll VERTICAL — e no telemóvel roubava o gesto de arrastar
     para cima: o dedo em cima da imagem mexia o carril em vez da página. */
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* sangra para lá do .wrap e repõe a goteira como padding, para o primeiro
     cartão alinhar com o texto e o último não colar à borda */
  margin-inline:calc(-1 * var(--gutter));
  padding-inline:var(--gutter);
  /* sem isto o snap encosta o primeiro cartão à borda do ecrã e come a
     goteira — o carril arrancava já com 40px de scroll */
  scroll-padding-inline:var(--gutter);
  /* Folga vertical DENTRO do carril, anulada por margem negativa igual — a
     caixa cresce para dentro, o resto da página não se move um pixel.

     É precisa por causa do `overflow-y:hidden` acima. Os cartões entram com
     .reveal, que os desloca 22px para baixo e lhes põe 5px de desfocagem
     (que se espalha uns 15px). Sem esta folga, o corte apanhava a animação a
     meio e os cartões apareciam decapitados por baixo.
     Também é aqui que cabe o anel de foco do teclado. */
  padding-block:16px 40px;
  margin-block:-16px -40px;
}
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; }
.rail:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:var(--r-md); }

/* setas: só aparecem quando há mesmo mais para ver e só onde há rato.
   O JS liga-as e desliga-as nos extremos (ver main.js §5b). */
.rail-wrap{ position:relative; }
.rail-nav{
  position:absolute; top:calc(50% - 34px); z-index:2;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(var(--surface-rgb),.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:none; place-items:center; cursor:pointer;
  color:var(--ink); box-shadow:0 6px 24px rgba(0,0,0,.55);
  transition:opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease);
}
.rail-nav svg{ width:17px; height:17px; }
.rail-nav.prev{ left:-14px; }
.rail-nav.next{ right:-14px; }
.rail-nav:hover{ background:var(--surface-2); transform:scale(1.06); }
.rail-nav[disabled]{ opacity:0; pointer-events:none; }
@media (hover:hover) and (min-width:900px){
  .rail-wrap.has-overflow .rail-nav{ display:grid; }
}
/* Poucos cartões e nada para rolar: encostados à esquerda ficavam a olhar
   para um vazio à direita. A classe vem do JS e só é posta quando não há
   overflow — centrar um carril que rola esconde o primeiro cartão. */
.rail.centered{ justify-content:center; }

/* ---------- 11a-bis. Sangria total ----------
   Do rebordo esquerdo ao direito do ecrã, saindo do .wrap. O `overflow-x:clip`
   no html é o par obrigatório: sem ele o 100vw conta com a barra de scroll no
   Windows e a página inteira ganha um deslize horizontal.
   `clip` e não `hidden` — `hidden` num antepassado mata o position:sticky do
   cabeçalho. */
.bleed{ width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw); }
/* dentro da sangria o carril já está à largura do ecrã: não repete a
   compensação de goteira nem o padding, senão volta a encolher */
.bleed .rail{ margin-inline:0; padding-inline:0; scroll-padding-inline:0; }
.bleed .rail-nav.prev{ left:14px; }
.bleed .rail-nav.next{ right:14px; }

/* botão de pausa do carril automático.
   O carril ganha uma faixa própria por baixo: encostado, o botão tapava a
   legenda do último cartão. */
.rail-wrap[data-auto]{ padding-bottom:40px; }
.rail-pause{
  position:absolute; right:var(--gutter); bottom:0; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(var(--surface-rgb),.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font:inherit; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--body);
  cursor:pointer; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.rail-pause:hover{ color:var(--gold); border-color:var(--line-gold); }
.rail-pause svg{ width:11px; height:11px; }
.rail-pause .i-play{ display:none; }
.rail-pause[aria-pressed="true"] .i-play{ display:block; }
.rail-pause[aria-pressed="true"] .i-pause{ display:none; }

/* ---------- 11a. Resultados: as fotografias ----------
   Grelha no computador, carril no telemóvel. A grelha mostra tudo de uma vez
   — é a prova, não se esconde atrás de um clique. No telemóvel a mesma
   grelha daria seis fotos empilhadas e ninguém chega ao fim; aí o carril
   ganha, e as fotos ficam grandes o suficiente para se ver o fio. */
.gallery{ display:grid; gap:20px; }
.gallery figure{ margin:0; position:relative; }
.gallery img{
  width:100%; aspect-ratio:var(--ar,4/5); object-fit:cover;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--bg-alt);
}
.gallery figcaption{
  margin-top:12px; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ---------- 11a-ter. A linha dos antes e depois ----------
   Bloco próprio, uma linha só, em todos os tamanhos de ecrã. É a prova mais
   forte que a página tem e misturada na grelha andava diluída.

   Aqui manda-se na ALTURA e deixa-se a largura seguir a foto, ao contrário da
   grelha. As composições vêm em proporções diferentes — umas 3:4, outras
   quadradas — e um recorte comum cortaria metade do argumento a umas e a
   outras não. Com altura fixa ficam todas alinhadas sem cortar nada. */
.ad-rail{ display:flex; align-items:center; --h:clamp(300px,40vw,430px); }
.ad-rail > figure{ flex:0 0 auto; margin:0; position:relative; }
.ad-rail img{
  height:var(--h); width:auto; max-width:none;
  aspect-ratio:var(--ar,3/4); object-fit:cover;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--bg-alt);
}
.ad-rail > .placeholder{ height:var(--h); width:auto; aspect-ratio:var(--ar,3/4); }
/* No telemóvel manda-se para cima: uma composição empilhada a 260px deixa
   cada metade com 130px de altura, e a essa escala não se distingue um fio.
   Vale mais um cartão de cada vez, grande, com o seguinte a espreitar. */
@media (max-width:699px){ .ad-rail{ --h:clamp(320px,105vw,430px); } }

/* A partir do tablet deixa de ser carril e passa a três colunas iguais.
   ---------------------------------------------------------------------
   O carril mandava na ALTURA e deixava a largura seguir a proporção da foto.
   Isso servia quando eram sete composições verticais e estreitas: cabiam
   várias no ecrã e rolava-se para ver o resto.

   Com as três composições QUADRADAS de agora, cada uma passou a pedir 430px
   de largura — três dão 1322px num contentor de 1100, e a terceira ficava
   cortada ao meio. Um carril com um cartão cortado lê-se como erro, não como
   convite a rolar, e a esta altura da página são só três: cabem todas.

   Aqui manda a largura disponível e a altura sai da proporção, o que garante
   que as três ficam exactamente do mesmo tamanho seja qual for o ecrã. */
@media (min-width:700px){
  .ad-rail{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(14px,1.8vw,24px);
    overflow:visible; scroll-snap-type:none;
    margin-inline:0; padding-inline:0;
  }
  .ad-rail > figure{ min-width:0; }
  .ad-rail img{ width:100%; height:auto; }
}

/* Pontos do carrossel (só telemóvel — ver main.js §5d).
   ---------------------------------------------------------------------
   O botão tem 24px de lado embora o ponto tenha 7: é a área de toque. Um
   alvo de 7px num telemóvel é impossível de acertar, e a recomendação de
   acessibilidade são 24px. O ponto visível desenha-se no ::before.

   O activo alonga-se em vez de só mudar de cor — assim também se percebe
   num ecrã a preto e branco ou por quem não distingue o dourado do cinzento. */
.rail-dots{ display:flex; justify-content:center; gap:2px; margin-top:14px; }
.rail-dots[hidden]{ display:none; }
.rail-dots button{
  width:24px; height:24px; padding:0; border:0; background:none;
  display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.rail-dots button::before{
  content:''; display:block; width:7px; height:7px; border-radius:999px;
  background:rgba(var(--ink-rgb),.22);
  transition:width .35s var(--ease), background-color .35s var(--ease);
}
.rail-dots button[aria-current="true"]::before{ width:22px; background:var(--gold); }
@media (prefers-reduced-motion:reduce){
  .rail-dots button::before{ transition:none; }
}

/* selo «antes · depois»: distingue a prova forte (as duas metades na mesma
   foto) do resultado simples, sem precisar de duas secções */
.tag-ad{
  position:absolute; top:12px; left:12px;
  padding:6px 11px; border-radius:999px;
  background:rgba(var(--surface-rgb),.94);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line-gold);
  font-size:9.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); pointer-events:none;
}

/* No telemóvel o carril passa a flex: é a única forma de o antes/depois
   deitado ficar mais largo do que um resultado ao alto. Ao centro, porque as
   alturas são diferentes por natureza e encostado ao topo abre um buraco por
   baixo do cartão deitado. */
@media (max-width:699px){
  .gallery{ display:flex; align-items:center; }
  .gallery > *{ flex:0 0 78%; }
  .gallery > .wide{ flex-basis:92%; }
}
@media (min-width:700px){
  .gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
    /* desfaz o carril; `dense` recolhe os buracos que um cartão largo deixa */
    grid-auto-flow:row dense; overflow:visible; scroll-snap-type:none;
    margin-inline:0; padding-inline:0;
  }
  /* o antes/depois vem deitado (duas metades lado a lado): ocupa a linha
     toda em vez de ser espremido numa coluna vertical */
  .gallery .wide{ grid-column:1 / -1; }
}
@media (min-width:980px){
  .gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .gallery .wide{ grid-column:span 2; }
}

/* ---------- 11b. Resultados em vídeo (o trabalho a acontecer) ---------- */
.reel{ --card:min(58%,210px); }
@media (min-width:700px){ .reel{ --card:min(30%,224px); } }
.reel .vid-meta{ padding-top:11px; }
.reel .vid-name{ font-size:12.5px; letter-spacing:.06em; text-transform:none;
  font-family:var(--font-body); color:var(--body); }

/* ---------- 11c. Depoimentos em vídeo ----------
   Aqui não há carril: são poucos e é a palavra da cliente. Dois cartões
   grandes ao centro lêem-se como uma escolha; quatro pequenos com dois
   buracos leem-se como falta de material. O :has() trata disso sozinho,
   seja qual for o número que a Ramira acabar por mandar. */
/* O :not(.reel) não é decoração. O carril de vídeos reaproveita o cartão
   .vid e por isso também é um .vids — sem esta exclusão, o grid-template
   daqui apagava as colunas automáticas do carril e os cartões colapsavam
   para 54px. */
.vids:not(.reel){ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
@media (min-width:760px){ .vids:not(.reel){ grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; } }

/* Até três depoimentos: uma linha por pessoa — o vídeo à esquerda, a frase
   ao lado. Quatro cartões estreitos com dois buracos leem-se como falta de
   material; e a 9:16 esticada a um quarto da página passava dos 500px de
   altura, o que empurrava a frase para fora do ecrã.
   Ao lado, a frase ganha corpo — e é ela que trabalha para os 80% que nunca
   carregam no play. */
@media (min-width:640px){
  .vids:not(.reel):not(:has(> :nth-child(4))){
    grid-template-columns:1fr; max-width:760px;
    margin-inline:auto; gap:clamp(18px,2.4vw,26px);
  }
  .vids:not(.reel):not(:has(> :nth-child(4))) .vid{
    display:grid; grid-template-columns:164px 1fr;
    gap:clamp(22px,3vw,34px); align-items:center;
    padding:clamp(16px,2.2vw,24px);
    border:1px solid var(--line); border-radius:var(--r-xl);
    background:var(--surface);
    transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
  }
  .vids:not(.reel):not(:has(> :nth-child(4))) .vid:hover{
    border-color:var(--line-gold); box-shadow:0 14px 42px rgba(0,0,0,.5);
  }
  .vids:not(.reel):not(:has(> :nth-child(4))) .vid-meta{
    display:flex; flex-direction:column; padding-top:0;
  }
  /* a citação vem primeiro; a assinatura fecha, como numa citação a sério */
  .vids:not(.reel):not(:has(> :nth-child(4))) .vid-quote{
    order:-1; margin:0 0 16px; font-size:clamp(15px,1.6vw,17.5px); line-height:1.6;
    color:var(--body);
  }
  .vids:not(.reel):not(:has(> :nth-child(4))) .vid-name{ font-size:15.5px; }
}
@media (max-width:639px){
  .vids:not(.reel):has(> :only-child){ grid-template-columns:1fr; max-width:260px; margin-inline:auto; }
}

/* QUATRO OU MAIS depoimentos — a partir daqui a grelha rígida estraga tudo.
   ---------------------------------------------------------------------
   Com uma grelha de 4 colunas, cinco depoimentos dão uma fila de quatro e um
   quinto sozinho encostado à esquerda, com três buracos ao lado. Lê-se como
   se faltasse material — justamente o contrário do que cinco depoimentos
   deviam dizer.

   Flex com wrap e justify-content:center resolve isso sozinho, seja qual for
   o número: a última fila fica sempre centrada. Cinco dão 3+2, seis dão 3+3,
   sete dão 3+3+1 ao meio. Não é preciso voltar aqui de cada vez que a cliente
   acrescenta um depoimento.

   Três por fila e não quatro porque a 9:16 quatro cartões numa página de
   1100px ficam com 260px de altura cada — a essa escala não se vê a cara de
   quem fala, e uma cara é metade do que um depoimento vale. */
.vids:not(.reel):has(> :nth-child(4)){
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(16px,2vw,24px);
}
.vids:not(.reel):has(> :nth-child(4)) > .vid{
  flex:0 1 calc((100% - clamp(16px,2vw,24px)) / 2);
  max-width:300px;
}
@media (min-width:760px){
  .vids:not(.reel):has(> :nth-child(4)) > .vid{
    flex:0 1 calc((100% - 2 * clamp(16px,2vw,24px)) / 3);
    max-width:272px;
  }
}
/* EXACTAMENTE quatro: uma fila só.
   Três por fila deixaria o quarto sozinho por baixo, e quatro cabem —
   4 x 252px + 3 goteiras dá 1080px, dentro dos 1100 do contentor. Uma fila
   fechada lê-se como um conjunto; 3+1 lê-se como uma sobra. */
@media (min-width:1000px){
  .vids:not(.reel):has(> :nth-child(4)):not(:has(> :nth-child(5))) > .vid{
    flex:0 1 calc((100% - 3 * clamp(16px,2vw,24px)) / 4);
    max-width:252px;
  }
}

/* a citação escrita só existe quando há texto para ela; dá a essência do
   depoimento a quem não vai carregar no play */
.vid-quote{
  display:block; margin-top:10px; font-size:13.5px; line-height:1.55;
  color:var(--body-dim); font-style:italic;
}
.vid-quote::before{ content:'“'; }
.vid-quote::after{ content:'”'; }

.vid{
  display:block; width:100%; padding:0; border:0; background:none;
  text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.vid-shot{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--bg-alt);
}
.vid-shot img{
  width:100%; aspect-ratio:9/16; object-fit:cover;
  transition:transform .8s var(--ease);
}
.vid:hover .vid-shot img{ transform:scale(1.045); }
.vid-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);
}
.vid-play span{
  width:56px; height:56px; border-radius:999px;
  background:rgba(var(--ink-rgb),.94);
  display:grid; place-items:center;
  transition:transform .45s var(--ease), background-color .35s var(--ease);
}
.vid-play svg{ width:16px; height:16px; margin-left:3px; color:var(--on-gold); }
.vid:hover .vid-play span{ transform:scale(1.09); background:var(--ink); }
.vid-meta{ display:block; padding-top:14px; }
.vid-name{
  display:block; font-family:var(--font-display); font-size:15px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
}
.vid-role{ display:block; margin-top:4px; font-size:11.5px; color:var(--muted); letter-spacing:.06em; }
/* Quando não há nome — a pessoa apresenta-se no próprio vídeo — o papel passa
   a ser a assinatura e sobe de peso, senão ficava uma legenda perdida. */
.vid-meta:not(:has(.vid-name)) .vid-role{
  margin-top:0; font-family:var(--font-display); font-size:14px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink);
}

.vid-modal{
  border:0; padding:0; background:transparent;
  max-width:min(420px,92vw); max-height:94vh; overflow:visible;
}
.vid-modal::backdrop{ background:rgba(20,17,15,.9); backdrop-filter:blur(5px); }
.vid-modal video{ width:100%; max-height:86vh; background:#000; border-radius:var(--r-md); }
.vid-close{
  position:absolute; top:-44px; right:0; width:34px; height:34px;
  border:0; background:none; cursor:pointer; color:var(--ink);
  display:grid; place-items:center;
}
.vid-close svg{ width:20px; height:20px; }
.vid-close:hover{ color:#c08e69; }

/* ---------- 11c. Marcadores de conteúdo em falta ----------
   Deliberadamente visíveis: assim é impossível publicar com buracos. */
.placeholder{
  margin:0; aspect-ratio:var(--ar,4/5); border-radius:var(--r-lg);
  border:1px dashed var(--line-2);
  background:repeating-linear-gradient(45deg,var(--bg-alt),var(--bg-alt) 10px,#241f18 10px,#241f18 20px);
  display:grid; place-content:center; align-content:center; gap:6px;
  text-align:center; padding:16px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body);
}
.placeholder b{
  display:block; font-weight:500; font-size:10.5px; letter-spacing:.08em;
  text-transform:none; color:var(--muted);
}

/* aviso visual: nada com [data-placeholder] deve ir para produção */
[data-placeholder]{
  outline:1px dashed var(--gold); outline-offset:3px;
  background:rgba(176,106,18,.09);
}

/* ---------- 12. Oferta ----------
   Aqui o halo volta a ser o que era na v1: luz sobre o escuro. A banda é o
   ponto mais escuro da página e o dourado sobe do fundo — é isso que marca o
   momento da decisão, sem precisar de efeito nenhum. */
.offer{
  position:relative; overflow:hidden;
  background:linear-gradient(165deg,#0a0908,var(--bg-alt));
  border-block:1px solid var(--line-gold);
  padding-block:var(--section-y);
}
.offer-glow{
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:min(900px,110%); height:80%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(var(--gold-rgb),.16), transparent 70%);
  pointer-events:none;
}
.offer .wrap{ position:relative; }
.offer h2{ line-height:1.16; }

/* Na oferta o título é o próprio logótipo — dizia exactamente o mesmo em
   texto ("Workshop Especialização / Fios Realistas — Método ITE"), e repetir
   não acrescentava nada. Continua a ser um <h2> com <img>, por isso mantém o
   nível de cabeçalho e o texto alternativo para leitores de ecrã.
   O máximo de 300px não é estético: acima disso o raster começa a perder
   nitidez em ecrãs 2x (o ficheiro nativo tem 521px). */
.offer-logo{ margin-bottom:clamp(4px,1vw,10px); }
.offer-logo img{
  width:clamp(210px, 34vw, 300px);
  height:auto;
  margin-inline:auto;
}

.stack{
  max-width:500px; margin:clamp(32px,4vw,44px) auto 0;
  text-align:left; border:1px solid var(--line-gold);
  border-radius:var(--r-md); overflow:hidden;
}
.stack-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:15px 22px; background:var(--surface);
  border-bottom:1px solid var(--line);
  font-size:14px; color:var(--body);
}
.stack-row:last-child{ border-bottom:0; }
.stack-val{ color:var(--muted); white-space:nowrap; font-size:13px; }
.stack-row.total{
  background:rgba(var(--gold-rgb),.10);
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
}
.stack-val.strike{
  text-decoration:line-through; color:var(--body-dim);
  letter-spacing:0; text-transform:none; font-size:14px; font-weight:400;
}

/* Bónus. Mesma largura da pilha de valor, mas sem moldura fechada — lê-se
   como um acrescento à oferta, não como mais uma linha de preço. */
.bonus{ max-width:500px; margin:18px auto 0; text-align:left; }
.bonus-head{
  font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:12px;
}
.bonus-list{ display:grid; gap:10px; }
.bonus-list li{
  display:flex; align-items:baseline; gap:12px;
  padding:13px 18px; background:var(--surface);
  border:1px solid var(--line-gold); border-radius:var(--r-md);
  font-size:14px; line-height:1.5; color:var(--body);
}
.bonus-tag{
  flex:none; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}

.price{ margin-top:clamp(32px,4vw,44px); }
.price-pre{ font-size:11.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); }
.price-value{
  font-family:var(--font-display); font-size:clamp(52px,7.2vw,76px);
  line-height:1.05; color:var(--ink); margin-top:14px; letter-spacing:.02em;
}
.price-post{ margin-top:18px; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }

.countdown{ margin-top:clamp(28px,3.5vw,38px); }
.countdown-label{
  font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.countdown-digits{
  display:flex; justify-content:center; gap:clamp(14px,3vw,26px); margin-top:14px;
}
.countdown-digits span{ display:flex; align-items:baseline; gap:6px; }
.countdown-digits b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,3.6vw,36px); color:var(--ink); line-height:1;
  font-variant-numeric:tabular-nums;
}
.countdown-digits i{ font-style:normal; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.countdown-ended{ margin-top:24px; font-size:11.5px; color:var(--gold);
  letter-spacing:.16em; text-transform:uppercase; }

.offer .btn-xl{ margin-top:clamp(30px,4vw,40px); }

.guarantee{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:clamp(28px,3.5vw,36px) auto 0; max-width:480px; text-align:left;
}
.guarantee-seal{
  flex:none; width:42px; height:42px; border-radius:999px;
  border:1px solid var(--line-gold); color:var(--gold);
  background:var(--surface);
  display:grid; place-items:center;
}
.guarantee-seal svg{ width:20px; height:20px; }
.guarantee p{ font-size:13.5px; line-height:1.6; color:var(--body-dim); }

/* ---------- 12b. Depoimento escrito ----------
   Vive por baixo dos depoimentos em vídeo, na mesma secção. Estreito de
   propósito: é um texto para ler, e uma linha de 46ch lê-se, uma de 90ch
   não. Reutiliza .faq-body para a animação de abrir. */
.testi{
  max-width:640px; margin:clamp(44px,5vw,64px) auto 0;
  padding:clamp(28px,3vw,40px);
  border:1px solid var(--line-gold); border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  text-align:center;
}
.testi .quote-mark{
  display:block; font-family:var(--font-display);
  font-size:52px; line-height:.5; color:var(--gold); margin-bottom:22px;
}
/* O <blockquote> traz margin:1em 40px do browser. */
.testi blockquote{ margin:0; }
.testi-pull{
  font-family:var(--font-display); font-size:clamp(19px,2vw,25px);
  line-height:1.4; letter-spacing:var(--track); color:var(--ink);
  text-wrap:balance;
}
.testi details{ margin-top:8px; }
.testi summary{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px; padding:6px 2px; cursor:pointer; list-style:none;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); transition:color .35s var(--ease);
}
.testi summary::-webkit-details-marker{ display:none; }
.testi summary::marker{ content:''; }
.testi summary:hover{ color:var(--gold-lite); }
.testi details:has(.faq-body.open) .faq-mark::after{ transform:rotate(0); opacity:0; }
html:not(.js) .testi details[open] .faq-mark::after{ transform:rotate(0); opacity:0; }
.testi .faq-body p{
  margin-top:16px; text-align:left;
  font-size:14.5px; line-height:1.75; color:var(--body-dim);
}
.testi .faq-body p:first-child{ margin-top:22px; }
.testi-by{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}

/* ---------- 13. FAQ ---------- */
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; cursor:pointer; list-style:none;
  font-size:clamp(15px,1.4vw,16.5px); font-weight:500; color:var(--ink);
  transition:color .35s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:''; }
.faq summary:hover{ color:var(--gold); }
.faq-mark{ position:relative; width:16px; height:16px; flex:none; }
.faq-mark::before,.faq-mark::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:1.5px; background:var(--gold); border-radius:2px;
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.faq-mark::after{ transform:rotate(90deg); }
.faq details:has(.faq-body.open) .faq-mark::after{ transform:rotate(0); opacity:0; }
html:not(.js) .faq details[open] .faq-mark::after{ transform:rotate(0); opacity:0; }

html.js .faq-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .38s var(--ease);
}
html.js .faq-body.open{ grid-template-rows:1fr; }
html.js .faq-body > div{ overflow:hidden; min-height:0; }
.faq-body p{
  padding:0 4px 26px; font-size:.97em; line-height:1.72; color:var(--body-dim);
}
html.js .faq-body p{
  opacity:0; transform:translateY(-6px);
  transition:opacity .35s var(--ease) .06s, transform .35s var(--ease) .06s;
}
html.js .faq-body.open p{ opacity:1; transform:none; }

/* ---------- 14. CTA final + footer ---------- */
.final-cta{ padding-block:clamp(64px,7vw,104px); border-top:1px solid var(--line); }
.final-cta h2{ max-width:20ch; margin-inline:auto; }
.final-cta p{ margin-top:20px; color:var(--body-dim); }
.final-cta .btn{ margin-top:34px; }

.site-footer{ border-top:1px solid var(--line); padding-block:40px 48px; }
.site-footer .wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
/* O mesmo logótipo do cabeçalho, um pouco maior — aqui não compete com nada.
   É um raster de 521px de largura, por isso não passa dos ~130px sem perder
   nitidez (ver a nota no _gerar-imagens.js). */
.footer-brand{ display:block; margin-bottom:6px; }
.footer-brand img{ display:block; height:58px; width:auto; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ font-size:12.5px; color:var(--body-dim); transition:color .35s var(--ease); }
.footer-links a:hover{ color:var(--gold); text-decoration:underline; }
.footer-legal{ font-size:12px; color:var(--muted); }

/* Assinatura de quem fez o site. É um crédito, não uma chamada — fica
   discreto e só ganha contraste quando se passa por cima. */
.footer-made{
  display:flex; align-items:center; gap:8px;
  margin-top:-4px; font-size:11.5px; color:var(--muted); letter-spacing:.04em;
}
.footer-made img{
  display:block; height:20px; width:auto;
  opacity:.62; transition:opacity .35s var(--ease);
}
.footer-made a:hover img,.footer-made a:focus-visible img{ opacity:1; }

/* ---------- 15. Barra fixa ---------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:rgba(var(--bg-rgb),.93);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--line-gold);
  padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .55s var(--ease);
}
.sticky-bar.show{ transform:none; }
.sticky-inner{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.sticky-info{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.sticky-price{ font-family:var(--font-display); font-size:24px; color:var(--ink); line-height:1; }
.sticky-note{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
@media (max-width:520px){ .sticky-note{ display:none; } }

/* ---------- 16. Revelação ao scroll ---------- */
html.js .reveal{
  opacity:0;
  transform:translateY(22px);
  filter:blur(5px);
  transition:opacity .8s var(--ease-out) var(--d,0ms),
             transform .8s var(--ease-out) var(--d,0ms),
             filter .8s var(--ease-out) var(--d,0ms);
}
html.js .reveal.in{ opacity:1; transform:none; filter:none; }

/* ---------- 17. Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html.js .reveal{ opacity:1; transform:none; filter:none; }
  .sticky-bar{ transform:none; display:none; }
  .sticky-bar.show{ display:block; }
  .vid-shot img{ transition:none !important; }
}

/* =========================================================
   19. Páginas legais (termos.html · privacidade.html)
   ========================================================= */
.legal{ padding:clamp(112px,13vw,160px) 0 clamp(64px,7vw,96px); }
.legal .wrap{ max-width:760px; }

.legal-head{ margin-bottom:clamp(36px,4vw,52px); }
.legal-head h1{ font-size:clamp(26px,3.8vw,42px); }
.legal-meta{ margin-top:20px; font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.legal-back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body-dim); margin-bottom:24px;
  transition:color .35s var(--ease);
}
.legal-back:hover{ color:var(--gold); }
.legal-back svg{ width:15px; height:15px; }

.legal-toc{
  margin:0 0 clamp(40px,4.5vw,56px);
  padding:26px 28px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface);
}
.legal-toc h2{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-family:var(--font-body); font-weight:600; margin-bottom:16px; }
.legal-toc ol{ counter-reset:toc; display:grid; gap:7px; }
.legal-toc li{ counter-increment:toc; font-size:14px; }
.legal-toc li::before{ content:counter(toc) '. '; color:var(--muted); }
.legal-toc a{ color:var(--body-dim); }
.legal-toc a:hover{ color:var(--gold); text-decoration:underline; }

.legal-body > section{ margin-top:clamp(38px,4vw,52px); scroll-margin-top:104px; }
.legal-body h2{
  font-size:clamp(17px,2vw,22px); margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.legal-body h3{ font-size:clamp(14px,1.5vw,16px); margin:28px 0 10px; }
.legal-body p{ color:var(--body-dim); margin-bottom:14px; }
.legal-body ul{ display:grid; gap:9px; margin:0 0 16px; color:var(--body-dim); }
.legal-body ul li{ position:relative; padding-left:20px; }
.legal-body ul li::before{
  content:''; position:absolute; left:0; top:.72em;
  width:7px; height:1px; background:var(--gold);
}
.legal-body a{ border-bottom:1px solid var(--line-gold); }
.legal-body a:hover{ border-color:var(--gold); }

.legal-note{
  margin:22px 0; padding:20px 24px;
  border-left:2px solid var(--gold); border-radius:0 var(--r-md) var(--r-md) 0;
  background:rgba(var(--gold-rgb),.10);
}
.legal-note p:last-child{ margin-bottom:0; }
.legal-note strong{ color:var(--gold-lite); }

.legal-table{ width:100%; min-width:520px; margin:18px 0 22px; border-collapse:collapse; font-size:13px; }
.legal-table th,.legal-table td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--body-dim);
}
.legal-table th{
  color:var(--gold); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
/* tabindex="0" no HTML: as tabelas rolam na horizontal e têm de ser
   alcançáveis por teclado (axe: scrollable-region-focusable) */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md); }
.table-scroll:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* marcadores por preencher — mesmo aviso visual da landing */
.fill{
  outline:1px dashed var(--gold); outline-offset:2px;
  background:rgba(176,106,18,.12); padding:0 4px; border-radius:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
}

/* =========================================================
   20. Consentimento de cookies
   (as classes são as que o cookies.js gera — não renomear)
   ========================================================= */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:0 var(--gutter) calc(16px + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .55s var(--ease);
}
.cc-banner.in{ transform:none; }
.cc-card{
  max-width:var(--maxw); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(18px,3vw,40px); flex-wrap:wrap;
  padding:22px 26px; border-radius:var(--r-lg);
  border:1px solid var(--line-gold);
  background:rgba(var(--surface-rgb),.96);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 24px 58px -26px rgba(0,0,0,.7);
}
.cc-text{ flex:1 1 340px; }
.cc-text h2{ font-size:17px; margin-bottom:8px; }
.cc-text p{ font-size:13px; line-height:1.62; color:var(--body-dim); }
.cc-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* "Rejeitar" tem de ser tão fácil de carregar como "Aceitar" (art. 5.º ePrivacy) */
.cc-btn-2{
  border:1px solid var(--line-2); background:none; color:var(--ink);
  font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  padding:12px 20px; border-radius:999px; cursor:pointer;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.cc-btn-2:hover{ border-color:var(--gold); color:var(--gold); }
.cc-btn-3{
  border:0; background:none; color:var(--body-dim); cursor:pointer;
  font-family:var(--font-body); font-size:12.5px; letter-spacing:.03em;
  border-bottom:1px solid var(--line-gold); padding:0 0 3px;
  transition:color .4s var(--ease);
}
.cc-btn-3:hover{ color:var(--gold); }

.cc-panel{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center; padding:var(--gutter);
  background:rgba(0,0,0,.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.cc-panel-card{
  width:100%; max-width:560px; max-height:86vh; display:flex; flex-direction:column;
  border-radius:var(--r-lg); border:1px solid var(--line-gold);
  background:var(--surface); box-shadow:0 40px 84px -30px rgba(0,0,0,.8);
}
.cc-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px; border-bottom:1px solid var(--line);
}
.cc-panel-head h2{ font-size:19px; }
.cc-close{
  border:0; background:none; color:var(--muted); cursor:pointer;
  font-size:26px; line-height:1; padding:4px 8px; border-radius:6px;
  transition:color .35s var(--ease);
}
.cc-close:hover{ color:var(--gold); }
.cc-panel-body{ padding:8px 26px 20px; overflow-y:auto; }
.cc-cat{ padding:20px 0; border-bottom:1px solid var(--line); }
.cc-cat:last-of-type{ border-bottom:0; }
.cc-cat p{ font-size:12.5px; line-height:1.62; color:var(--body-dim); margin-top:10px; padding-left:56px; }
@media (max-width:520px){ .cc-cat p{ padding-left:0; } }

.cc-switch{ display:flex; align-items:center; gap:14px; cursor:pointer; }
.cc-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cc-track{
  flex:none; width:42px; height:24px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(var(--ink-rgb),.06);
  position:relative; transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.cc-track::after{
  content:''; position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:999px; background:var(--muted);
  transition:transform .35s var(--ease), background-color .35s var(--ease);
}
.cc-switch input:checked + .cc-track{ background:rgba(var(--gold-rgb),.30); border-color:var(--gold); }
.cc-switch input:checked + .cc-track::after{ transform:translateX(18px); background:var(--gold); }
.cc-switch input:disabled + .cc-track{ opacity:.55; cursor:not-allowed; }
.cc-switch input:focus-visible + .cc-track{ outline:2px solid var(--gold); outline-offset:3px; }
.cc-cat-name{ font-size:14.5px; color:var(--ink); font-weight:500; }
.cc-cat-name em{ font-style:normal; font-size:12px; font-weight:400; color:var(--muted); }
.cc-panel-note{ font-size:12px; color:var(--muted); margin-top:18px; }
/* Dentro de um bloco de texto, o barro não chega a 3:1 contra o texto à
   volta: a ligação tem de se distinguir por algo além da cor (WCAG 1.4.1). */
.cc-text p a,.cc-panel-note a{ text-decoration:underline; text-underline-offset:3px; }
.cc-panel-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:20px 26px; border-top:1px solid var(--line);
}

/* ---------- 20. Alunos/Comunidade ---------- */
.aluna-meta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aluna-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.aluna-city {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.alunos-rail {
  --card: min(65%, 260px);
}
@media (min-width: 700px) {
  .alunos-rail {
    --card: min(22%, 240px);
  }
}
.alunos-rail figure {
  margin: 0;
  position: relative;
}
.alunos-rail img {
  width: 100%;
  aspect-ratio: var(--ar, 4/5);
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-alt);
}

/* ---------- 21. Impressão ---------- */
@media print{
  .site-header,.sticky-bar,.grain,.cc-banner,.cc-panel,.vid-play{ display:none !important; }
  body{ background:#fff; color:#000; }
  .legal-body a{ border:0; }
  html.js .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
  html.js .faq-body,html.js .mod-body{ grid-template-rows:1fr !important; }
  html.js .faq-body p{ opacity:1 !important; transform:none !important; }
}