/* Fontes oficiais da marca, auto-alojadas (ficheiros do manual, iguais ao InDesign).
   Sem Google Fonts: cumpre RGPD e melhora a performance. */
@font-face{font-family:'Gabarito';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/gabarito-extrabold.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/hanken-semibold.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hanken-regular.woff2') format('woff2')}

/* ============================================================
   Ânimo Leve — folha de estilo do tema (registo híbrido cinema + prosa)
   Traduz a maqueta aprovada para o site. Classes com prefixo al-.
   Tokens duplicados do theme.json para robustez (self-contained).
   ============================================================ */
:root{
  --al-papel:#F7F5F0; --al-tinta:#2B2926;
  --al-verde:#46985F; --al-verde-escuro:#244E36; --al-campo:#E6E2DA;
  --al-p1:#46985F; --al-p2:#489BC3; --al-p3:#4F60AF; --al-p4:#8C5CAD;
  --al-p5:#C44C42; --al-p6:#CB6F2D; --al-p7:#E5BF38;
  --al-titulo:'Gabarito',system-ui,sans-serif;
  --al-corpo:'Hanken Grotesk',system-ui,sans-serif;
  --al-s1:8px; --al-s2:16px; --al-s3:24px; --al-s4:40px; --al-s5:64px; --al-s6:96px; --al-s7:128px;
  --al-header:80px; /* altura da barra de topo — a abertura desconta-a para encaixar no ecrã */
}

/* Base */
body.home,
body.page-template-front-page{background:var(--al-papel);color:var(--al-tinta);font-family:var(--al-corpo);font-weight:400}
.al-wrap{width:min(1240px,92vw);margin-inline:auto}
/* Secções encostadas — mata o blockGap do tema que deixava ver uma tira do fundo claro */
.al-home > *{margin-block-start:0}
.al-secao{padding-block:var(--al-s7)}
.al-verde{color:var(--al-verde)!important;background:transparent}

/* Títulos Gabarito, caixa baixa */
.al-display,.al-h1,.al-h2{font-family:var(--al-titulo);font-weight:800;letter-spacing:normal;line-height:1.08;text-transform:none;margin:0}
/* NORMA — título de secção: mesmo tamanho que «Quem já contou histórias connosco» */
.al-display{font-size:clamp(30px,5.2vw,72px)}
.al-h1{font-size:clamp(30px,5.2vw,72px)}
.al-h2{font-size:clamp(24px,3.2vw,32px)}
.al-lede{font-size:clamp(18px,2vw,21px)}

/* Kicker */
/* NORMA — eyebrow: Hanken SemiBold 18px, tracking largo (deck). Vale para todos. */
.al-kicker{font-family:var(--al-corpo);font-weight:600;text-transform:uppercase;letter-spacing:0.14em;font-size:18px;color:var(--al-verde);margin:0 0 var(--al-s3)}
.al-kicker .grafia{text-transform:none;letter-spacing:0}
/* NORMA — data: havendo período/ano, desce sempre para uma 2ª linha própria (estrutural, não por wrap). Mesmo estilo da 1ª linha. */
.al-kicker .al-ano{display:block}

/* Assinatura — 7 pontos do prisma */
.al-pontos{display:inline-flex;gap:10px;align-items:center}
.al-pontos i{width:13px;height:13px;border-radius:50%;display:block}
/* Ordem: roxo · azul · ciano · verde · amarelo · laranja · vermelho */
.al-pontos i:nth-child(1){background:var(--al-p4)}.al-pontos i:nth-child(2){background:var(--al-p3)}
.al-pontos i:nth-child(3){background:var(--al-p2)}.al-pontos i:nth-child(4){background:var(--al-p1)}
.al-pontos i:nth-child(5){background:var(--al-p7)}.al-pontos i:nth-child(6){background:var(--al-p6)}
.al-pontos i:nth-child(7){background:var(--al-p5)}

/* ---------- CENA cinematográfica (mostrar) ---------- */
.al-cena{position:relative;overflow:hidden;color:var(--al-papel);isolation:isolate;min-height:82vh;display:flex;align-items:center}
.al-cena>*{position:relative;z-index:1}
.al-cena::before{content:'';position:absolute;inset:0;z-index:0} /* fundo */
.al-cena::after{content:'';position:absolute;inset:0;z-index:0}  /* véu */
.al-cena .al-conteudo{width:min(1240px,92vw);margin-inline:auto}
.al-cena .al-selo{position:absolute;top:var(--al-s4);right:var(--al-s4);z-index:2;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(247,245,240,.6);border:1px solid rgba(247,245,240,.28);padding:6px 10px;border-radius:2px}
.al-cena .al-assinatura{position:absolute;right:var(--al-s4);bottom:var(--al-s4);z-index:2}
.al-cena .al-kicker{color:var(--al-papel);opacity:.85}
.al-cena .al-linha{color:rgba(247,245,240,.9);font-size:19px;max-width:44ch;margin-top:var(--al-s3)}

/* Abertura — ecrã inteiro, adaptativo a qualquer proporção (o object-fit:cover
   do vídeo corta para preencher; 100svh conta a barra do browser no telemóvel) */
/* Ecrã inteiro; sobe sob o header (que sobrepõe, sem somar altura) — vídeo sangra até ao topo */
.al-abertura{min-height:100vh;min-height:100svh;margin-top:calc(-1 * var(--al-header));align-items:flex-end}
/* Vídeo de fundo (loop mudo) — atrás do véu, à frente do gradiente-fallback */
.al-abertura .al-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}
.al-abertura::before{background:
  radial-gradient(120% 80% at 78% 12%, rgba(229,191,56,0.34), transparent 55%),
  linear-gradient(180deg,#20140c 0%,#5a3a1f 42%,#a9702f 74%,#d79a45 100%)}
.al-abertura::after{background:linear-gradient(90deg,rgba(15,10,6,.72) 0%,rgba(15,10,6,.35) 38%,transparent 66%),linear-gradient(0deg,rgba(15,10,6,.55),transparent 40%)}
/* Conteúdo encostado à esquerda; desce e acaba a meio caminho do fundo (não cola) */
.al-abertura .al-conteudo{width:auto;max-width:min(1100px,94vw);margin-left:clamp(20px,5vw,88px);margin-right:0;padding-bottom:clamp(112px,20vh,300px)}
/* Marca no rodapé à esquerda, a par dos 7 pontos (Hanken Semibold) */
.al-abertura .al-marca-mini{position:absolute;left:clamp(20px,5vw,88px);bottom:var(--al-s4);z-index:2;font-family:var(--al-corpo);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:0.14em;color:var(--al-papel);opacity:.85;margin:0}
/* Lema ~2× do tamanho anterior */
.al-abertura .al-display{font-size:clamp(56px,12vw,110px);line-height:1.12;max-width:15ch}
/* Sequência de 2 linhas: sobrepostas na mesma célula, ancoradas ao fundo (mesma linha de base). */
.al-abertura .al-lemas{display:grid}
.al-abertura .al-lemas>*{grid-area:1/1;align-self:end;margin:0}
.al-abertura .al-linha2{font-size:clamp(36px,7vw,76px)}
.al-abertura .al-linha2{opacity:0} /* base sem JS/reduced-motion: 2ª linha escondida */
/* Assinatura de 7 pontos — maior na abertura (13px → 20px → 40px) */
/* Fluidos: 40px no desktop, encolhem para caberem os 7 em qualquer ecrã */
.al-abertura .al-pontos{gap:clamp(8px,4vw,30px)}
.al-abertura .al-pontos i{width:clamp(16px,6.5vw,40px);height:clamp(16px,6.5vw,40px);transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
/* Magnificação tipo dock (fisheye) — o rato aumenta o ponto sob si e, menos, os vizinhos.
   Controlada por JS em app.js (o :hover puro ignoraria os vizinhos). Subtil e lenta. */
/* Entram deslizando da direita, em sequência, ao carregar (uma vez) */
@media (prefers-reduced-motion:no-preference){
  /* Os 7 pontos entram no VAZIO entre as duas linhas (o JS põe .al-on ao lá chegar).
     Estado persistente (opacity:1) separado da animação (só entrada) para não fixar o transform. */
  .al-abertura .al-pontos i{opacity:0}
  .al-abertura .al-assinatura.al-on .al-pontos i{opacity:1;animation:al-ponto-entra .7s cubic-bezier(.2,.7,.2,1) backwards}
  .al-abertura .al-assinatura.al-on .al-pontos i:nth-child(7){animation-delay:0s}
  .al-abertura .al-assinatura.al-on .al-pontos i:nth-child(6){animation-delay:.10s}
  .al-abertura .al-assinatura.al-on .al-pontos i:nth-child(5){animation-delay:.20s}
  .al-abertura .al-assinatura.al-on .al-pontos i:nth-child(4){animation-delay:.30s}
  .al-abertura .al-assinatura.al-on .al-pontos i:nth-child(3){animation-delay:.40s}
  .al-abertura .al-assinatura.al-on .al-pontos i:nth-child(2){animation-delay:.50s}
  .al-abertura .al-assinatura.al-on .al-pontos i:nth-child(1){animation-delay:.60s}
}
@keyframes al-ponto-entra{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:none}}

/* Obra 1 · BUPi — cartão de caso (proposta Vasco C, loop mudo). Escala tipográfica = norma da casa. */
.al-cartao{background:#FCFBF8;border:1px solid rgba(43,41,38,.07);border-radius:18px;padding:clamp(16px,1.8vw,26px);box-shadow:0 1px 2px rgba(43,41,38,.03),0 18px 44px rgba(43,41,38,.05)}
.al-cartao-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#171d19}
.al-cartao-media .al-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* Auchan: a janela respeita o formato do filme (cinemascope ~2.35:1) — mostra o plano inteiro, sem recortar. */
.al-auchan-card .al-cartao-media{aspect-ratio:1280/544}

/* Destaque de frase — Tratamento A (Vasco, H-469): fundo papel, aspa «gigante ténue (verde 16%), frase centrada em Gabarito 800, atribuição verde. Reutilizado na Clara (secção) e no Mourinha (Intervalo). */
.al-destaque{text-align:center}
.al-destaque-sec{padding-block:0}
.al-destaque-aspa{font-family:var(--al-titulo);font-weight:800;font-size:clamp(88px,11vw,150px);line-height:.66;color:var(--al-verde);opacity:.16;margin:0}
.al-destaque-frase{font-family:var(--al-titulo);font-weight:800;letter-spacing:normal;font-size:clamp(24px,3vw,32px);line-height:1.3;color:var(--al-tinta);max-width:940px;margin:var(--al-s2) auto 0}
.al-destaque-fonte{font-family:var(--al-corpo);font-weight:600;font-size:15px;color:var(--al-verde);margin:var(--al-s4) 0 0}
/* Destaque dentro do cartão Intervalo: um pouco menor que o de secção */
.al-criticas .al-destaque-aspa{font-size:clamp(60px,7vw,104px)}
.al-criticas .al-destaque-frase{font-size:clamp(20px,2.4vw,26px);max-width:820px}
.al-cartao-corpo{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.8fr);gap:var(--al-s5);margin-top:var(--al-s4);align-items:start}
.al-cartao-id .al-kicker{margin-bottom:var(--al-s2)}
.al-cartao-marca{margin-top:0;line-height:1}
.al-cartao-lede{font-weight:600;color:var(--al-tinta);line-height:1.35;margin:0}
.al-cartao-texto .al-apoio{margin-top:var(--al-s3);font-size:17px;line-height:1.7}
.al-cartao-texto .al-creditos{margin-top:var(--al-s3);font-size:15px;color:#6a655c;line-height:1.5}
.al-link-obra{display:inline-block;margin-top:var(--al-s4);color:var(--al-verde);font-family:var(--al-corpo);font-weight:600;font-size:16px;text-decoration:none}
.al-link-obra:hover{color:var(--al-verde-escuro)}
/* Filosofia sem padding-bottom: como o herói acima também não tem, o vão para o cartão seguinte fica só o padding-top do cartão (128) — equilibrado com o topo. */
.al-filosofia{padding-bottom:0}
/* margem simetrica so quando «O que fazemos» (fundo campo) vem a seguir: a transicao de cor fica a meio do vao. Com um cartao a seguir mantem-se 0 para nao abrir vao duplo. (Tiago 2026-07-22) */
.al-filosofia:has(+ .al-fazemos){padding-bottom:var(--al-s7)}


/* ---------- Secções em papel (ler) ---------- */
/* Filosofia — split assimétrico (proposta Vasco): kicker no topo, título grande à esquerda, texto em coluna à direita, alinhado ao topo do título. */
.al-filo-cols{display:grid;grid-template-columns:1fr minmax(0,420px);gap:var(--al-s5);align-items:start;margin-top:var(--al-s2)}
.al-filo-cols .al-verbos{max-width:740px}
.al-filo-cols .al-apoio{margin-top:0}
.al-verbos{font-size:clamp(30px,5.2vw,72px);line-height:1.12;font-family:var(--al-titulo);font-weight:800;letter-spacing:normal;margin:0}
.al-apoio{margin-top:var(--al-s4);color:#4a463f}
.al-rascunho{color:#8a8477}

.al-fazemos{background:var(--al-campo)}
.al-fazemos .al-intro{max-width:24ch;margin:var(--al-s2) 0 0}
/* O que fazemos — 6 janelas 16:9 animadas (grelha 3×2). */
.al-registos{margin-top:var(--al-s5);max-width:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--al-s5) var(--al-s4)}
.al-reg{display:block}
.al-reg-media{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#171d19;margin:0 0 var(--al-s3)}
.al-reg-media .al-bgvideo{display:block;width:100%;height:100%;object-fit:cover}
/* Scrim inferior — esconde as legendas queimadas de alguns clips e ajuda o título por baixo. */
.al-reg-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(transparent,rgba(15,13,12,.55));pointer-events:none}
/* Título da categoria: tinta por defeito, verde no hover (o verde é o acento de interação). */
.al-reg h3{font-size:21px;margin:0;color:var(--al-tinta);transition:color .25s ease}
.al-reg:hover h3{color:var(--al-verde)}
.al-reg p{color:#4a463f;font-size:16px;margin:var(--al-s1) 0 0}

.al-parede .al-grade{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--al-s5) var(--al-s4);margin-top:var(--al-s5)}

/* Equipa — parede de retratos em círculo, 2×8 */
.al-equipa-grelha{list-style:none;margin:var(--al-s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:var(--al-s4) var(--al-s2)}
.al-equipa-grelha li{display:flex;flex-direction:column;align-items:center;text-align:center}
.al-equipa-grelha img{width:100%;max-width:120px;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.al-equipa-grelha .al-nome{font-family:var(--al-corpo);font-weight:700;font-size:13px;line-height:1.25;color:var(--al-tinta);margin-top:14px;transition:color .25s ease}
.al-equipa-grelha .al-cargo{font-family:var(--al-corpo);font-weight:400;font-size:11.5px;line-height:1.25;color:rgba(43,41,38,.52);margin-top:3px;max-width:15ch}
.al-equipa-grelha li:hover img{transform:scale(1.06)}
.al-equipa-grelha li:hover .al-nome{color:var(--al-verde)}
.al-equipa-nota{margin-top:var(--al-s5);font-size:12px;color:rgba(43,41,38,.45)}
@media (prefers-reduced-motion:reduce){.al-equipa-grelha li:hover img{transform:none}}
@media (max-width:920px){.al-equipa-grelha{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.al-equipa-grelha{grid-template-columns:repeat(3,1fr)}}
.al-parede .al-cel{min-height:64px;display:flex;align-items:center;justify-content:flex-start}
.al-parede .al-cel img{max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
/* Proporções medidas no deck (pág. 1440×810): largura de cada logo / 260 (Gulbenkian=100%). */
.al-parede .al-cel:nth-child(1) img{max-width:100%}
.al-parede .al-cel:nth-child(2) img{max-width:72%}
.al-parede .al-cel:nth-child(3) img{max-width:77%}
.al-parede .al-cel:nth-child(4) img{max-width:55%}
.al-parede .al-cel:nth-child(5) img{max-width:49%}
.al-parede .al-cel:nth-child(6) img{max-width:31%}
.al-parede .al-cel:nth-child(7) img{max-width:59%}
.al-parede .al-cel:nth-child(8) img{max-width:72%}
.al-parede .al-cel:nth-child(9) img{max-width:77%}
.al-parede .al-cel:nth-child(10) img{max-width:48%}
.al-parede .al-cel:nth-child(11) img{max-width:77%}
.al-parede .al-cel:nth-child(12) img{max-width:71%}

/* Intervalo — críticas em caixas DENTRO do cartão (cor de campo, para se destacarem). */
.al-cartao-texto>*:first-child{margin-top:0}
.al-criticas{margin-top:var(--al-s5)}
.al-criticas-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--al-s4);margin-top:var(--al-s5)}
.al-critica{background:var(--al-campo);border-radius:12px;padding:var(--al-s3);margin:0}
.al-critica blockquote{margin:0;font-size:15px;line-height:1.6;color:#3a362f}
.al-critica figcaption{margin-top:var(--al-s3);font-weight:600;font-size:14px;color:var(--al-verde-escuro)}
.al-critica figcaption span{color:#7a7568;font-weight:400}
/* AGC — a marca é o nome completo (longo): tamanho próprio para caber e quebrar bem na coluna. */
.al-gulb-card .al-cartao-marca{font-size:clamp(28px,3.4vw,40px);line-height:1.1}

.al-equipa .al-wrap{width:min(1240px,92vw);max-width:none;margin-inline:auto}
.al-equipa .al-nota{margin-top:var(--al-s3);color:#8a8477;font-size:14px;border-left:2px solid var(--al-campo);padding-left:var(--al-s3)}

.al-cta-lede{max-width:44ch;margin:var(--al-s3) 0 0 auto;color:rgba(247,245,240,.9);font-size:clamp(18px,2vw,21px);line-height:1.5}
/* CTA como assinatura: bloco no canto inferior direito, texto alinhado à direita. */
.al-cta{align-items:flex-end;padding-bottom:var(--al-s6)}
.al-cta .al-wrap{text-align:right}
.al-botao{display:inline-block;background:var(--al-verde);color:var(--al-papel);font-weight:600;font-size:16px;padding:14px 28px;border-radius:2px;text-decoration:none;margin-top:var(--al-s4)}
.al-botao:hover{background:var(--al-verde-escuro)}

/* ---------- Cenas full-screen com vídeo (parede + CTA) ---------- */
.al-cheia{min-height:100vh;min-height:100svh}
.al-cheia .al-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;pointer-events:none}
.al-cheia::before{background:linear-gradient(180deg,#1b1712 0%,#0e0b08 100%)}
/* Véu removido a pedido do Tiago (2026-07-12) — testar texto/logos sobre a imagem crua. */
.al-cheia::after{background:none}
.al-cheia .al-kicker{color:var(--al-verde);opacity:1}
.al-cheia .al-rascunho{color:rgba(247,245,240,.5)}
.al-cheia .al-cel{border-color:rgba(247,245,240,.22);color:rgba(247,245,240,.85)}
/* Título da parede à medida do herói (Gabarito ExtraBold, mesmo tamanho) */
.al-parede .al-display{font-size:clamp(30px,5.2vw,72px);line-height:1.12;max-width:none;margin:var(--al-s2) 0 0}

/* Header / rodapé */
/* Header transparente sobre o vídeo; ganha fundo escuro ao rolar (logo/nav sempre legíveis) */
.al-topo{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.al-topo.al-solido{background:color-mix(in srgb,var(--al-tinta) 82%,transparent);backdrop-filter:blur(10px);border-bottom-color:rgba(247,245,240,.10)}
.al-topo .al-bar{display:flex;align-items:center;justify-content:space-between;height:var(--al-header);gap:var(--al-s4)}
.al-marca-topo{display:flex;align-items:center}
/* Logo à proporção que o Raven ocupa no herói (~6% da altura). Afinar à vista. */
.al-marca-topo img{height:clamp(53px,6.25vw,63px);width:auto;display:block}
.al-menu{display:flex;gap:var(--al-s4);align-items:center;font-size:15px}
.al-menu a{color:var(--al-papel);text-decoration:none;font-weight:600}
.al-menu a:hover{color:var(--al-verde)}
.al-idioma{font-size:13px;color:rgba(247,245,240,.72)}
/* Legibilidade sobre vídeo claro enquanto o header é transparente */
.al-topo:not(.al-solido) .al-marca-topo img{filter:drop-shadow(0 1px 10px rgba(0,0,0,.35))}
.al-topo:not(.al-solido) .al-menu{text-shadow:0 1px 10px rgba(0,0,0,.35)}
/* Botão hambúrguer — escondido no desktop; aparece em ≤860px (ver media query) */
.al-menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:11px;background:none;border:0;cursor:pointer}
.al-menu-toggle span{display:block;height:2px;width:100%;background:var(--al-papel);border-radius:2px;transition:transform .28s ease,opacity .2s ease}
.al-topo:not(.al-solido) .al-menu-toggle span{box-shadow:0 1px 8px rgba(0,0,0,.35)}
.al-topo.al-aberto .al-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.al-topo.al-aberto .al-menu-toggle span:nth-child(2){opacity:0}
.al-topo.al-aberto .al-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.al-rodape{background:var(--al-tinta);color:var(--al-papel)}
.al-rodape .al-grade{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--al-s4);padding-block:var(--al-s6)}
.al-rodape h4{font-family:var(--al-corpo);font-weight:600;text-transform:uppercase;letter-spacing:0.08em;font-size:12px;color:rgba(247,245,240,.55);margin:0 0 var(--al-s3)}
.al-rodape a{color:rgba(247,245,240,.85);display:block;margin-bottom:8px;font-size:15px;text-decoration:none}
.al-rodape a:hover{color:var(--al-verde)}
.al-rodape .al-legal{margin:0 0 var(--al-s3);font-size:11px;line-height:1.7;color:rgba(247,245,240,.4)}
.al-rodape .al-fim{border-top:1px solid rgba(247,245,240,.12);padding-block:var(--al-s3);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(247,245,240,.5);flex-wrap:wrap;gap:var(--al-s3)}

/* Movimento */
@media (prefers-reduced-motion:no-preference){
  .al-entra{opacity:0;transform:translateY(16px);transition:opacity 1.5s cubic-bezier(.2,.7,.2,1),transform 1.5s cubic-bezier(.2,.7,.2,1)}
  .al-entra.al-visto{opacity:1;transform:none}

  /* Lema da abertura — palavra a palavra, a fechar no verde «ouvimos.».
     Entrada única: as palavras sobem e ganham nitidez em sequência; depois
     assentam e só o vídeo respira. Sob reduced-motion (fora deste media),
     o texto fica visível de imediato. */
  .al-lema .al-pal{display:inline-block;opacity:0;transform:translateY(.42em);filter:blur(7px);will-change:opacity,transform,filter}
  .al-lema.al-lema-on .al-pal{animation:al-palavra .66s cubic-bezier(.2,.65,.2,1) both}
  .al-lema.al-lema-on .al-pal:nth-child(1){animation-delay:.10s}
  .al-lema.al-lema-on .al-pal:nth-child(2){animation-delay:.22s}
  .al-lema.al-lema-on .al-pal:nth-child(3){animation-delay:.34s}
  .al-lema.al-lema-on .al-pal:nth-child(4){animation-delay:.46s}
  .al-lema.al-lema-on .al-pal:nth-child(5){animation-delay:.58s}
  .al-lema.al-lema-on .al-pal:nth-child(6){animation-delay:.80s} /* «ouvimos.» — pausa antes de fechar */

  /* Sequência de 2 linhas — um só gesto: subir-e-esbater. JS põe/tira .al-on ao ritmo do vídeo. */
  .al-abertura .al-lema{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s ease;will-change:opacity,transform}
  .al-abertura .al-lema.al-on{opacity:1;transform:none}


  /* Parede de logótipos — surgem da esquerda p/ a direita: linha de cima (1–5) e depois a de baixo (6–10). */
  .al-parede .al-cel{opacity:0;transform:translateX(-24px);transition:opacity .6s ease,transform .6s ease}
  .al-parede.al-visto .al-cel{opacity:1;transform:none}
  .al-parede.al-visto .al-cel:nth-child(1){transition-delay:0s}
  .al-parede.al-visto .al-cel:nth-child(2){transition-delay:.08s}
  .al-parede.al-visto .al-cel:nth-child(3){transition-delay:.16s}
  .al-parede.al-visto .al-cel:nth-child(4){transition-delay:.24s}
  .al-parede.al-visto .al-cel:nth-child(5){transition-delay:.32s}
  .al-parede.al-visto .al-cel:nth-child(6){transition-delay:.40s}
  .al-parede.al-visto .al-cel:nth-child(7){transition-delay:.52s}
  .al-parede.al-visto .al-cel:nth-child(8){transition-delay:.60s}
  .al-parede.al-visto .al-cel:nth-child(9){transition-delay:.68s}
  .al-parede.al-visto .al-cel:nth-child(10){transition-delay:.76s}
  .al-parede.al-visto .al-cel:nth-child(11){transition-delay:.84s}
  .al-parede.al-visto .al-cel:nth-child(12){transition-delay:.92s}
  /* Magnificação tipo dock (fisheye) nos logótipos — controlada por JS (app.js). */
  .al-parede .al-cel img{transform-origin:center;transition:transform .28s cubic-bezier(.2,.7,.2,1);will-change:transform}

  /* Texto das cenas full-screen entra como no herói: subir-e-esbater ao surgir a secção. */
  .al-cheia .al-entra{opacity:1;transform:none}
  /* Eyebrow (kicker) FIXA — fora da animação. Animam título, nota e botão. */
  .al-cheia .al-rascunho,.al-cheia .al-display,.al-cheia .al-cta-lede,.al-cheia .al-botao{opacity:0;transform:translateY(24px);transition:opacity 1.5s cubic-bezier(.2,.7,.2,1),transform 1.5s cubic-bezier(.2,.7,.2,1)}
  .al-cheia.al-visto .al-rascunho,.al-cheia.al-visto .al-display,.al-cheia.al-visto .al-cta-lede,.al-cheia.al-visto .al-botao{opacity:1;transform:none}
  .al-cheia.al-visto .al-rascunho{transition-delay:.15s}
  .al-cheia.al-visto .al-cta-lede{transition-delay:.12s}
  .al-cheia.al-visto .al-botao{transition-delay:.18s}
  /* CTA — entrada em sequência cronometrada a contar de quando a secção entra no ecrã:
     título aos 3s, frase aos 5s, botão aos 7s. A eyebrow «ESTAMOS AQUI» fica fixa. */
  .al-cta.al-visto .al-display{transition-delay:3s}
  .al-cta.al-visto .al-cta-lede{transition-delay:5s}
  .al-cta.al-visto .al-botao{transition-delay:7s}
  /* No CTA a eyebrow entra COM o título (aos 3s), não fica fixa. */
  .al-cta .al-kicker{opacity:0;transform:translateY(24px);transition:opacity 1.5s cubic-bezier(.2,.7,.2,1),transform 1.5s cubic-bezier(.2,.7,.2,1)}
  .al-cta.al-visto .al-kicker{opacity:1;transform:none;transition-delay:3s}
}
@keyframes al-palavra{to{opacity:1;transform:none;filter:blur(0)}}

/* Responsivo */
@media (max-width:860px){
  .al-secao{padding-block:var(--al-s6)}
  .al-cena{min-height:72vh}
  .al-abertura{min-height:100svh}
  .al-abertura .al-display{font-size:clamp(44px,13vw,88px)}
  .al-registos{grid-template-columns:repeat(2,1fr)}
  .al-cartao-corpo{grid-template-columns:1fr;gap:var(--al-s3)}
  .al-cartao-marca{margin-top:var(--al-s2)}
  .al-filo-cols{grid-template-columns:1fr;gap:var(--al-s3)}
  .al-filo-cols .al-apoio{margin-top:var(--al-s2)}
  .al-parede .al-grade{grid-template-columns:repeat(3,1fr);gap:var(--al-s4) var(--al-s3)}
  .al-criticas-duo{grid-template-columns:1fr}
  .al-rodape .al-grade{grid-template-columns:1fr 1fr}
  /* Menu mobile: hambúrguer + painel deslizante */
  .al-menu-toggle{display:flex}
  .al-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:var(--al-s1) 0;background:color-mix(in srgb,var(--al-tinta) 96%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid rgba(247,245,240,.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;text-shadow:none}
  .al-topo.al-aberto .al-menu{opacity:1;visibility:visible;transform:none}
  .al-menu a{padding:15px clamp(20px,5vw,88px);font-size:18px;border-top:1px solid rgba(247,245,240,.06)}
  .al-idioma{padding:15px clamp(20px,5vw,88px);font-size:14px;border-top:1px solid rgba(247,245,240,.06)}
}
@media (max-width:520px){.al-rodape .al-grade,.al-registos{grid-template-columns:1fr}}


/* ---------- Como fazemos (TESTE 2026-07-22, Tiago) — metodo em 5 passos, sobrio, sem caixas ---------- */
.al-metodo .al-intro{max-width:30ch;margin:var(--al-s2) 0 0}
.al-metodo .al-passos{list-style:none;margin:var(--al-s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--al-s4)}
.al-metodo .al-passos li{border-top:2px solid var(--al-verde);padding-top:8px}
.al-metodo .al-passo-n{font-family:var(--al-titulo);font-weight:800;font-size:14px;color:var(--al-verde);letter-spacing:.06em;display:block}
.al-metodo .al-passos h3{font-family:var(--al-titulo);font-weight:800;font-size:clamp(19px,1.7vw,25px);line-height:1.1;margin:var(--al-s2) 0 0;color:var(--al-tinta)}
.al-metodo .al-passos p{color:#4a463f;font-size:15px;line-height:1.55;margin:var(--al-s2) 0 0}
@media (max-width:860px){.al-metodo .al-passos{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.al-metodo .al-passos{grid-template-columns:1fr}}

/* icones dos passos (Como fazemos) */
.al-metodo .al-passo-topo{display:flex;align-items:center;gap:9px}
.al-metodo .al-passo-ic{color:var(--al-verde);display:inline-flex;flex:0 0 auto}
.al-metodo .al-passo-ic svg{width:22px;height:22px;display:block}
.al-metodo .al-passos h3{margin-top:10px}

/* divisor entre casos (linha fina a largura do conteudo). A frase de destaque que abre um caso reganha o vao acima quando vem a seguir a um divisor. */
.al-caso-div{width:min(1240px,92vw);margin-inline:auto;height:1px;background:rgba(43,41,38,.12)}
.al-caso-div + .al-destaque-sec{padding-top:var(--al-s7)}

/* Cartoes de caso: titulo em cima, cliente+ano logo abaixo (Tiago 2026-07-22) */
.al-cartao-id{display:flex;flex-direction:column;align-items:flex-start}
.al-cartao-id .al-cartao-marca{order:0;margin:0}
.al-cartao-id .al-kicker{order:1;margin:var(--al-s2) 0 0}