/* =========================================================
   Sistema «FAIXAS» · escolha da Carla a 18-09-2026 (alternativa C)

   O topo do site fica ESCURO (barra fina, fita dos prazos, heroi com a
   fotografia, painel em perspetiva). A seguir a pagina SAI do preto, em bandas
   de creme, salvia e areia. «O site todo em preto fica demasiado escuro.»

   Como funciona: tudo o que vem depois do topo vive dentro de <div class="cx">.
   Ai dentro as VARIAVEIS de cor sao redefinidas, por isso as pecas do produto.css
   (que ja eram todas feitas com variaveis) mudam de pele sozinhas. So se
   reescreve aqui o que tinha cor escrita a mao, e o que muda de FORMA.

   Esta folha carrega DEPOIS do produto.css. Nao mexer na ordem.

   O que ela mandou MANTER tal como estava, e que por isso esta folha nao toca:
     - o painel de obrigacoes em perspetiva (.pr-stage)
     - a fita amarela dos prazos por baixo da barra (.fita)
     - os icones da home (.pr-ico), so ganham uma pastilha para se lerem no claro
     - os botoes com sombra luminosa (.pr-btn-primary), cantos de 14px
     - os cartoes da Knowledge base, escuros, com a etiqueta amarela (#knowledge)
   ========================================================= */

/* --lj = largura da JANELA sem a barra de scroll. 100vw inclui a barra, e por isso as
   pecas de lado a lado (zona clara, fita) sobravam 9px e criavam scroll lateral. A
   largura da barra vem em --sbw, medida por um script de uma linha no <head>; sem
   JavaScript vale 0 e fica como estava, com o body a esconder a sobra. */
:root{ --lj: calc(100vw - var(--sbw, 0px)); }

/* NAO por overflow no <html>. O style.css ja tem `body{overflow-x:hidden}`, que chega
   para a zona clara de 100vw nao criar scroll lateral. Quando aqui esteve um
   `html{overflow-x:clip}`, o overflow do body deixou de se propagar para a janela, o
   body passou a ser uma caixa de scroll e TUDO o que era position:sticky morreu: a
   barra de topo do site inteiro e o numero do rolo. Medido no browser a 18-09. */

/* ---------- heroi com a fotografia a direita ---------- */
.pr-wrap header.pr-cabeca-foto{
  display: grid; grid-template-columns: 1.12fr .88fr; column-gap: 40px; align-items: end;
  padding: 58px 0 0;    /* eram 118px: ela marcou a vermelho a faixa vazia por baixo da barra (captura 163459) */
}
.pr-cabeca-foto .pr-cabeca-txt{ grid-column: 1; grid-row: 1; padding-bottom: 56px; }
/* a cor tem de ser dita: o h1 da home nunca teve cor propria e herdava a do texto
   corrido, por isso a abertura saia cinzenta e os tres andares (branco, aceso,
   sombra) liam-se como dois. Visto no browser a 18-09. */
.pr-cabeca-foto h1{ font-size: clamp(40px, 5.5vw, 84px); max-width: 13ch; color: var(--titulo);
  text-wrap: balance; }   /* partia em «O imposto deste / ano», com o «ano» sozinho: assim reparte «O imposto / deste ano» */
/* O paragrafo cresceu com o parecer de SEO (ganhou Pombal, Leiria e o que a empresa
   faz) e empurrou os dois botoes para baixo da dobra: acabavam aos 919px numa janela
   de 879px, medido no browser a 18-09. Aperta-se o heroi: o paragrafo alarga e desce
   um ponto, e os respiros entre as pecas encurtam. */
.pr-cabeca-foto .pr-eyebrow{ margin-bottom: 22px; }
.pr-cabeca-foto .pr-lede{ max-width: 58ch; margin-top: 22px; font-size: 17px; line-height: 1.5; }
/* a segunda frase do heroi («Escolhe o teu percurso...») e' a que aponta para as duas
   vias logo por baixo: fica a branco, mais perto delas do que do paragrafo de cima */
.pr-cabeca-foto .pr-lede.pr-lede-2{ margin-top: 12px; color: var(--titulo); font-weight: 500; }
.pr-cabeca-foto .pr-fork{ margin-top: 26px; }
.pr-cabeca-foto .pr-fork-c{ padding: 16px 20px; }
.pr-cabeca-foto .pr-actions{ margin-top: 22px; }
.pr-cabeca-foto .pr-cabeca-txt{ padding-bottom: 40px; }
/* alinha por CIMA: a figura fica ao lado das letras grandes, como na smartidiom.
   Alinhada por baixo ficava a meio do ecra, encostada aos botoes (visto a 18-09). */
.pr-cabeca-img{ grid-column: 2; grid-row: 1; position: relative; align-self: start; margin-top: -34px; }
.pr-cabeca-img::before{                 /* a luz por tras da figura */
  content: ""; position: absolute; inset: 6% -8% 10% -8%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 42% at 34% 38%, rgba(244,223,72,.30), transparent 70%),
    radial-gradient(40% 40% at 74% 46%, rgba(96,150,255,.20), transparent 72%);
  filter: blur(28px);
}
.pr-cabeca-img img{ position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 800px; object-fit: contain; object-position: 50% 0; }
.pr-cabeca-leg{
  position: absolute; z-index: 2; right: 0; bottom: 22%; text-align: right;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-3);
  padding: 10px 14px; border: 1px solid var(--linha-2); border-radius: 12px;
  background: rgba(13,13,17,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pr-cabeca-leg b{ display: block; font-family: 'Inter Tight', sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--titulo); margin-bottom: 3px; }
.pr-cabeca-foto .pr-meta{ grid-column: 1 / -1; margin-top: 0; padding: 26px 0 0; border-top: 1px solid var(--linha-2); position: relative; z-index: 2; }
.pr-cabeca-foto + .pr-stage{ margin-top: 64px; }

@media (max-width: 980px){
  .pr-wrap header.pr-cabeca-foto{ grid-template-columns: 1fr; padding-top: 40px; }
  .pr-cabeca-foto .pr-cabeca-txt{ padding-bottom: 8px; }
  .pr-cabeca-img{ grid-column: 1; grid-row: 2; max-width: 400px; margin: 0 auto -1px; }
  .pr-cabeca-leg{ bottom: 34px; }
}

/* a seta do segundo botao, em amarelo (no primeiro e' preta, sobre o amarelo) */
.pr-btn .pr-arrow-am{ color: var(--amarelo); }

/* ---------- as duas vias: acesas por predefinicao ---------- */
/* Pedido dela a 18-09 (captura 155703): o aspeto que so aparecia ao passar o rato
   (titulo amarelo, contorno amarelo, brilho no canto) passa a ser o NORMAL. Sao a
   primeira decisao de quem chega e, apagadas, confundiam-se com o fundo.
   Ao passar o rato o titulo fica BRANCO e o cartao sobe. */
.pr-fork-c{
  border-color: rgba(244,223,72,.55);
  background: radial-gradient(120% 140% at 0% 0%, rgba(244,223,72,.10), transparent 60%), rgba(255,255,255,.03);
}
.pr-fork-c .pr-fork-t{ color: var(--amarelo); transition: color .2s; }
.pr-fork-c:hover{
  border-color: rgba(255,255,255,.55);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.09), transparent 60%), rgba(255,255,255,.045);
  transform: translateY(-2px);
}
.pr-fork-c:hover .pr-fork-t{ color: #fff; }

/* ---------- a fita dos prazos, agora DENTRO da pagina ---------- */
/* Era `position: sticky` colada por baixo da barra. No sitio novo (debaixo das
   duas vias na home, a fechar o topo nas interiores) anda com a pagina, e como
   vive dentro do .pr-wrap, que e' estreito, tem de sair dele para ir de lado a lado. */
.fita.fita-corpo{
  position: relative; top: auto; z-index: 2;
  width: var(--lj); margin-left: calc(50% - var(--lj) / 2);
  margin-top: 8px;
  border-top: 1px solid rgba(10,10,12,.35);
}
.pr-cabeca-foto + .fita-corpo{ margin-top: 0; }
.fita-corpo + .pr-stage{ margin-top: 72px; }
.fita-corpo + .cx{ margin-top: 0; border-radius: 0; box-shadow: none; }
.fita-corpo + .cx > section:first-child{ border-radius: 0; }
.pr-cabeca-interior{ padding-bottom: 56px; }

/* ---------- a zona clara ---------- */
.cx{
  --fundo:   #FAF7F0;  --fundo-2: #FFFDF8;  --fundo-3: #EDE7D8;
  --titulo:  #191813;  --texto:   #4A483F;  --texto-2: #4A483F;  --texto-3: #7C7A6E;
  --linha:   #DED9CA;  --linha-2: #C6C0AC;
  --vidro:   #FFFDF8;  --halo:    rgba(244,223,72,.34);
  --am-tinta:#7A6C00;                     /* o amarelo como TEXTO no claro: o puro le-se a 1,4:1 */
  --cx-sombra: 0 16px 40px -26px rgba(35,30,15,.36);
  --cx-raio: 22px;

  position: relative; z-index: 3;
  width: var(--lj); margin-left: calc(50% - var(--lj) / 2); margin-top: 44px;
  background: #FAF7F0; color: var(--texto-2);
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -40px 90px -40px rgba(0,0,0,.75);
}
.cx > section, .cx > .pr-declaracao{
  padding: 104px max(28px, calc(var(--lj) / 2 - 592px)) 96px;
  position: relative; margin: 0;
}
.cx > section:first-child{ border-radius: 36px 36px 0 0; }

/* as tres bandas, por ordem. Nenhuma e' branco puro. */
.cx > section:nth-of-type(3n+1){ background: #FAF7F0; }
.cx > section:nth-of-type(3n+2){ background: #E9EDE4; }
.cx > section:nth-of-type(3n)  { background: #F2EADB; }

/* No claro o realce nao e' letra amarela (le-se a 1,4:1): e' o texto «selecionado»,
   com o fundo amarelo cheio, como ela mostrou na captura 163643. O clone faz com
   que cada linha fique com a sua caixa quando o realce parte de linha. */
/* (Primeiro foi fundo amarelo cheio, «selecionado». Ao fim do dia ela pediu-o
   SUBLINHADO A MARCADOR FLUORESCENTE: um traco grosso na metade de baixo das letras,
   com as pontas afiadas em bisel e a tinta desigual, como um marcador a serio.) */
.cx h2 em{
  font-style: normal; color: inherit; text-shadow: none; padding: 0 .1em; margin: 0 -.04em;
  background:
    linear-gradient(100deg, transparent 1.2%, #FFF24A 3%, #F7E83E 38%, #FFF45C 71%, #F5E53A 96.5%, transparent 98.6%)
    0 84% / 100% 44% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* O nome da marca leva as DUAS coisas: o marcador por baixo (no <em>) e o gradiente na
   letra (no <span> la dentro). Tem de ser em dois elementos: o gradiente de texto usa
   o background recortado a letra, e o marcador tambem e' um background, por isso no
   mesmo elemento um apagava o outro. Aqui o gradiente e' mais escuro que o das
   «empresas de topo», porque a metade de baixo das letras assenta em amarelo: o
   dourado claro desaparecia. O ponto mais claro, #6E5F00, da 4,9:1 sobre o marcador. */
.cx h2 em .pr-grad{ background-image: linear-gradient(90deg, #14130C 0%, #453C00 55%, #6E5F00 100%); }
.cx h2.pr-h2-largo{ max-width: 17ch; }
/* Texto em gradiente, como o «empresas de topo» do smartidiom.pt, nas cores da casa.
   O amarelo puro NAO serve para texto sobre creme (1,4:1): o gradiente vai da tinta
   da marca ao dourado, que e' o amarelo escurecido ate se ler. O ponto mais claro,
   #B08F00, da 3,1:1 sobre o creme, o minimo para letra deste tamanho. */
.cx h2 .pr-grad{
  background: linear-gradient(90deg, #14130C 0%, #6B5E00 42%, #B08F00 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cx .pr-sec-note{ color: var(--texto-2); }

/* ---------- a faixa amarela: uma por pagina ---------- */
.cx > section.cx-faixa, .cx > .pr-declaracao{
  background: var(--amarelo); color: #14130C;
  padding-top: 84px; padding-bottom: 88px;
}
.cx-faixa p{ font-size: clamp(28px, 4.2vw, 58px); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; max-width: 19ch; color: #14130C; }
.cx-faixa small{ display: block; margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .68; max-width: 60ch; line-height: 1.6; }
.cx > .pr-declaracao .pr-decl-in{ border: 0; padding: 0; text-align: left; }
.cx > .pr-declaracao .pr-decl-in::before{ display: none; }
.cx > .pr-declaracao .pr-decl-frase{ margin: 0; color: #14130C; font-size: clamp(28px, 4vw, 54px); }
.cx > .pr-declaracao .pr-decl-apoio{ margin-left: 0; color: #3B3712; }
.cx > .pr-declaracao .pr-btn-primary{ background: #14130C; color: var(--amarelo); box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); }

/* ---------- botoes: o estilo dela, com sombra, afinado para fundo claro ---------- */
.cx .pr-btn-primary{ box-shadow: 0 0 0 1px rgba(196,172,24,.6), 0 18px 40px -14px rgba(168,140,0,.62); }
.cx .pr-btn-primary:hover{ box-shadow: 0 0 0 1px rgba(196,172,24,.85), 0 26px 52px -14px rgba(168,140,0,.75); }
.cx .pr-btn-ghost{ background: #FFFDF8; border-color: var(--linha-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 26px -18px rgba(35,30,15,.4); }
.cx .pr-btn-ghost:hover{ background: #fff; }

/* ---------- razoes: cartoes soltos, redondos, com os icones da home ---------- */
.cx .pr-razoes{ gap: 20px; background: none; border: 0; border-radius: 0; overflow: visible; }
.cx .pr-razoes article{ background: #FFFDF8; border-radius: var(--cx-raio); box-shadow: var(--cx-sombra); padding: 30px 28px 32px; transition: transform .28s var(--fx), box-shadow .28s; }
.cx .pr-razoes article:hover{ background: #FFFDF8; transform: translateY(-3px); box-shadow: 0 24px 50px -26px rgba(35,30,15,.46); }
.cx .pr-razoes article::after{ display: none; }
.cx .pr-razoes .pr-ico{ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--amarelo); color: #14130C; }
.cx .pr-razoes .pr-ico svg{ width: 26px; height: 26px; }
.cx .pr-razoes article:hover .pr-ico{ background: #14130C; color: var(--amarelo); }

/* numero no lugar do icone: nas paginas de venda as dores e os passos nao tem
   desenho proprio, levam o numero na mesma pastilha amarela */
.cx .pr-razoes .pr-ico-n{ font-family: 'Inter Tight', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.cx .pr-razoes .pr-ico-n + h3{ margin-top: 20px; }
.cx .pr-razoes-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px){ .cx .pr-razoes-4{ grid-template-columns: 1fr 1fr; } }

/* ---------- paginas de venda: «hoje» contra «connosco» ---------- */
.cx-ad{ background: #FFFDF8; border-radius: var(--cx-raio); box-shadow: var(--cx-sombra); overflow: hidden; }
.cx-ad-cab, .cx-ad-l{ display: grid; grid-template-columns: 1fr 1fr; }
.cx-ad-cab span{ padding: 16px 28px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.cx-ad-cab span + span{ border-left: 1px solid var(--linha); color: var(--titulo); }
.cx-ad-l{ border-top: 1px solid var(--linha); }
.cx-ad-l > div{ padding: 22px 28px 24px; font-size: 16px; line-height: 1.6; }
.cx-ad-l > div:first-child{ color: var(--texto-3); text-decoration: line-through; text-decoration-color: var(--linha-2); }
.cx-ad-l > div + div{ border-left: 1px solid var(--linha); color: var(--titulo); font-weight: 500;
  background: linear-gradient(90deg, rgba(244,223,72,.30), rgba(244,223,72,.04) 70%); }
@media (max-width: 720px){
  .cx-ad-cab{ display: none; }
  .cx-ad-l{ grid-template-columns: 1fr; }
  .cx-ad-l > div + div{ border-left: 0; }
}

/* ---------- as nove razoes na home: «O ROLO» ---------- */
.cx-rolo{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.cx-rolo-fixo{ position: sticky; top: 110px; height: min(70vh, 560px); display: flex; flex-direction: column; justify-content: center; }
.cx-rolo-num{ display: flex; align-items: flex-end; gap: 14px; font-size: clamp(150px, 22vw, 330px); font-weight: 800; letter-spacing: -.07em; line-height: .8; font-variant-numeric: tabular-nums; }
/* o numero e' metade tinta, metade amarelo: o amarelo aqui e' area grande, nao letra fina, por isso le-se */
.cx-rolo-num span{ background: linear-gradient(180deg, #14130C 58%, var(--amarelo) 58%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cx-rolo-num small{ font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .14em; color: var(--texto-3); padding-bottom: 22px; -webkit-text-fill-color: currentColor; }
.cx-rolo-ico{ width: 64px; height: 64px; border-radius: 18px; background: #14130C; color: var(--amarelo); display: grid; place-items: center; margin-top: 34px; }
.cx-rolo-ico svg{ width: 34px; height: 34px; }
.cx-rolo-barra{ margin-top: 30px; height: 4px; border-radius: 4px; background: var(--linha-2); overflow: hidden; max-width: 320px; }
.cx-rolo-barra i{ display: block; height: 100%; width: 11%; border-radius: 4px; background: #14130C; transition: width .5s var(--fx); }
.cx-rl{ padding: 56px 0; border-top: 1px solid var(--linha-2); opacity: .28; transform: translateX(18px); transition: opacity .5s ease, transform .6s var(--fx); }
.cx-rl:last-child{ border-bottom: 1px solid var(--linha-2); }
.cx-rl.on{ opacity: 1; transform: none; }
.cx-rl h3{ font-size: clamp(28px, 3.8vw, 54px); font-weight: 800; letter-spacing: -.048em; line-height: 1; color: var(--titulo); }
.cx-rl.on h3{ display: inline; background: linear-gradient(var(--amarelo), var(--amarelo)) 0 88% / 100% 30% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cx-rl p{ margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--texto-2); max-width: 40ch; }
/* a saida do rolo: «Escolhe o teu percurso», em amarelo, com as duas vias */
.cx-rl-fim{ margin-top: 40px; padding: 38px 40px 40px; border-radius: var(--cx-raio); color: #14130C;
  background: linear-gradient(160deg, #FFF2A0, var(--amarelo) 55%, #E9CF2A); box-shadow: 0 30px 60px -32px rgba(168,140,0,.7); }
.cx-rl-fim h3{ font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #14130C; margin-bottom: 18px; }
.cx-rl-fim a{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  color: #14130C; border-top: 1px solid rgba(20,19,12,.28); transition: padding-left .3s var(--fx); }
.cx-rl-fim a:hover{ padding-left: 10px; }
.cx-rl-fim a .pr-arrow{ transition: transform .3s var(--fx); }
.cx-rl-fim a:hover .pr-arrow{ transform: translateX(5px); }
@media (max-width: 900px){
  .cx-rolo{ grid-template-columns: 1fr; gap: 8px; }
  .cx-rolo-fixo{ display: none; }                 /* no telemovel le-se como lista, sem numero fixo */
  .cx-rl{ opacity: 1; transform: none; padding: 34px 0; }
  .cx-rl p{ font-size: 17px; }
}
@media (prefers-reduced-motion: reduce){ .cx-rl{ opacity: 1; transform: none; transition: none; } }

/* ---------- servicos na home: «A LUZ» ---------- */
/* A seccao dos servicos passa a BANDA ESCURA: a parede so funciona sobre preto (a luz
   amarela do rato nao se ve sobre creme). As variaveis voltam aos valores escuros. */
.cx > section#servicos{
  --fundo: #08080A; --fundo-2: #0D0D11; --titulo: #F7F7F9; --texto: #ADADBA; --texto-2: #ADADBA; --texto-3: #77778A;
  --linha: rgba(255,255,255,.07); --linha-2: rgba(255,255,255,.13);
  background: #0B0B0E; color: var(--texto-2);
}
/* nesta banda ESCURA o realce do titulo e' letra amarela com brilho, como no heroi, e
   nao o marcador das bandas claras (tinta escura sobre marcador nao se lia aqui). A
   segunda frase cai para a sua propria linha, como os andares do titulo de topo. */
.cx > section#servicos h2 em{ display: block; background: none; padding: 0; margin: 0; color: var(--amarelo); text-shadow: 0 0 40px rgba(244,223,72,.35); }
.cx > section#servicos h2.pr-h2-largo{ max-width: 20ch; }
.cx-parede{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cx-vd{ position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-height: 262px;
  padding: 30px 28px 28px; border-radius: 22px; background: rgba(255,255,255,.028); color: #ADADBA;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--fx); }
/* o contorno e' um degrade radial centrado NO RATO e recortado so a borda. Como cada
   azulejo recebe a posicao do rato nas suas proprias coordenadas, a luz e' uma so a
   atravessar a parede inteira, e nao nove luzes independentes. */
.cx-vd::before{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: radial-gradient(420px circle at var(--lx, -400px) var(--ly, -400px), rgba(244,223,72,.95), rgba(255,255,255,.10) 42%, rgba(255,255,255,.07));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cx-vd::after{ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(520px circle at var(--lx, -400px) var(--ly, -400px), rgba(244,223,72,.13), transparent 46%); }
.cx-vd .vd-n{ position: absolute; right: 18px; top: 2px; font-size: 112px; font-weight: 800; letter-spacing: -.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.10); transition: -webkit-text-stroke-color .4s; }
.cx-vd:hover .vd-n, .cx-vd:focus-visible .vd-n{ -webkit-text-stroke-color: rgba(244,223,72,.55); }
.cx-vd .vd-i{ display: block; width: 38px; height: 38px; color: var(--amarelo); filter: drop-shadow(0 0 16px rgba(244,223,72,.5)); }
.cx-vd .vd-i svg{ width: 100%; height: 100%; }
.cx-vd h3{ margin-top: auto; padding-top: 30px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; color: #F7F7F9; }
.cx-vd p{ margin-top: 10px; font-size: 15px; line-height: 1.6; color: #ADADBA; }
.cx-vd .vd-l{ display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 18px;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--amarelo); border-bottom: 1px solid rgba(244,223,72,.4); padding-bottom: 3px; transition: border-color .25s; }
.cx-vd .vd-l .pr-arrow{ transition: transform .3s var(--fx); }
.cx-vd:hover .vd-l{ border-bottom-color: var(--amarelo); }
.cx-vd:hover .vd-l .pr-arrow{ transform: translateX(4px); }
/* o oitavo azulejo: largo, amarelo, fecha a grelha */
.cx-vd-cta{ grid-column: span 2; background: linear-gradient(160deg, #FFF2A0, var(--amarelo) 55%, #E9CF2A); color: #2B2A16; justify-content: center; }
.cx-vd-cta::before, .cx-vd-cta::after{ display: none; }
.cx-vd-cta h3{ margin-top: 0; padding-top: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.04em; color: #14130C; }
.cx-vd-cta p{ color: #2B2A16; max-width: 52ch; font-size: 16px; }
.cx-vd-cta .vd-l{ color: #14130C; border-bottom-color: rgba(20,19,12,.5); font-size: 15px; }
.cx-vd-cta:hover .vd-l{ border-bottom-color: #14130C; }
/* a Marisa na metade direita do azulejo: o mesmo recorte do heroi, a preto e branco e
   MULTIPLICADO sobre o amarelo (a luz colorida do recorte desaparece, fica so a figura
   em tinta). Entra pelo canto de baixo e o azulejo corta-a pela cintura. Sem balao. */
/* Fecho do FOSSO ao meio (pedido dela, captura 200948): o texto anda para a direita
   (padding-left de 28px para 9,5%) e a figura anda para a esquerda (right de -4% para
   3%). A largura do texto fica a mesma, porque o padding-right desce de 46% para 40%. */
.cx-vd-cta{ padding-left: 9.5%; padding-right: 40%; }
.cx-vd-cta .vd-cta-txt{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
/* (era height:172%, e so se via a cara e os ombros; ela pediu-a mais pequena «para se
   ver o corpo»: a 130% o azulejo mostra-a ate abaixo dos bracos cruzados) */
/* MEDIDAS FINAIS, tiradas da montagem dela (captura 200545): a figura ocupa o terco
   direito do azulejo, ENCOSTADA a margem direita, com o cabelo a cortar um pouco em
   cima e os bracos cruzados a fechar em baixo. No recorte a pessoa vai de 10% a 90% da
   largura da imagem. (Esteve em right:-4%, com o ombro encostado a margem; passou a 3%
   quando ela pediu para fechar o fosso ao meio.) */
.cx-vd-cta .vd-cta-fig{ position: absolute; z-index: 0; right: 3%; top: -10%; height: 158%; width: auto; max-width: none; pointer-events: none;
  filter: grayscale(1) contrast(1.14); mix-blend-mode: multiply; transform-origin: 50% 20%; transition: transform .9s var(--fx); }
.cx-vd-cta:hover .vd-cta-fig{ transform: scale(1.035); }
@media (max-width: 980px){ .cx-vd-cta{ padding-right: 40%; } }
@media (max-width: 620px){ .cx-vd-cta{ padding-left: 28px; padding-right: 28px; padding-bottom: 230px; } .cx-vd-cta .vd-cta-fig{ top: auto; bottom: -62%; right: 50%; translate: 50% 0; height: 150%; } }
@media (max-width: 980px){ .cx-parede{ grid-template-columns: 1fr 1fr; } .cx-vd-cta{ grid-column: 1 / -1; } }
@media (max-width: 620px){ .cx-parede{ grid-template-columns: 1fr; } .cx-vd{ min-height: 0; } }
@media (prefers-reduced-motion: reduce){ .cx-vd{ transform: none; transition: none; } }

/* ---------- (em desuso) servicos na home: «AS PORTAS» ---------- */
/* Foi a primeira escolha dela para esta zona e esteve no ar umas horas a 18-09. Trocou-a
   pela parede de luz. As regras ficam, sem marcacao que as use, caso volte atras. */
.cx-portas{ display: flex; gap: 10px; height: 520px; }
.cx-porta{ position: relative; flex: 1 1 0; min-width: 0; border-radius: 24px; overflow: hidden; color: #F7F7F9;
  background: linear-gradient(180deg, #1A1A21, #0B0B0E); box-shadow: 0 24px 50px -30px rgba(20,18,8,.7);
  transition: flex-grow .7s var(--fx), background .5s, box-shadow .5s; }
.cx-porta .pn{ position: absolute; left: 20px; top: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--amarelo); transition: color .4s; }
.cx-porta .pv{ position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap;
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #F7F7F9; transition: opacity .3s; }
.cx-porta .pc{ position: absolute; inset: 0; width: 460px; max-width: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 30px 32px; opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .6s var(--fx); }
.cx-porta .pi{ width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: #14130C; color: var(--amarelo); margin: 34px 0 auto; }
.cx-porta .pi svg{ width: 34px; height: 34px; }
.cx-porta b{ display: block; font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; color: #14130C; }
.cx-porta .pd{ display: block; margin-top: 14px; font-size: 16px; line-height: 1.5; color: #2B2A16; max-width: 34ch; }
.cx-porta .pl{ display: inline-block; align-self: flex-start; margin-top: 22px; font-weight: 700; font-size: 15px; color: #14130C; border-bottom: 2px solid #14130C; padding-bottom: 3px; }

.cx-porta:hover, .cx-porta:focus-visible, .cx-porta.aberta{ flex-grow: 5.2; background: linear-gradient(160deg, #FFF2A0, var(--amarelo) 55%, #E9CF2A); box-shadow: 0 40px 80px -34px rgba(168,140,0,.75); }
.cx-porta:hover .pc, .cx-porta:focus-visible .pc, .cx-porta.aberta .pc{ opacity: 1; transform: none; transition-delay: .18s; }
.cx-porta:hover .pv, .cx-porta:focus-visible .pv, .cx-porta.aberta .pv{ opacity: 0; }
.cx-porta:hover .pn, .cx-porta:focus-visible .pn, .cx-porta.aberta .pn{ color: #14130C; }
/* quando o rato anda por outra porta, a primeira (que nasce aberta) fecha-se */
.cx-portas:hover .cx-porta.aberta:not(:hover){ flex-grow: 1; background: linear-gradient(180deg, #1A1A21, #0B0B0E); box-shadow: 0 24px 50px -30px rgba(20,18,8,.7); }
.cx-portas:hover .cx-porta.aberta:not(:hover) .pc{ opacity: 0; transition-delay: 0s; }
.cx-portas:hover .cx-porta.aberta:not(:hover) .pv{ opacity: 1; }
.cx-portas:hover .cx-porta.aberta:not(:hover) .pn{ color: var(--amarelo); }

@media (max-width: 980px){
  .cx-portas{ flex-direction: column; height: auto; }
  .cx-porta{ flex: none; min-height: 78px; }
  .cx-porta .pv{ writing-mode: horizontal-tb; transform: none; left: 62px; right: 16px; bottom: auto; top: 26px; white-space: normal; font-size: 17px; }
  .cx-porta:hover, .cx-porta:focus-visible, .cx-porta.aberta{ min-height: 360px; }
  .cx-porta .pc{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){ .cx-porta, .cx-porta .pc{ transition: none; } }

/* ---------- servicos: o indice dentro de um cartao ---------- */
.cx .pr-svc{ border-top: 0; background: #FFFDF8; border-radius: var(--cx-raio); box-shadow: var(--cx-sombra); padding: 6px 12px; }
.cx .pr-svc a:last-child{ border-bottom: 0; }
.cx .pr-svc a::before{ background: linear-gradient(90deg, rgba(244,223,72,.42), rgba(244,223,72,.08) 45%, transparent 70%); border-radius: 14px; }
.cx .pr-svc a:hover .pr-n{ color: var(--am-tinta); }

/* ---------- listas e vagas ---------- */
.cx .pr-lista article:hover .pr-n, .cx .pr-migalhas a:hover{ color: var(--am-tinta); }
.cx .pr-vagas a:hover{ color: var(--am-tinta); }
.cx .pr-faq details[open] summary{ color: var(--titulo); text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.cx .pr-duplas, .cx .pr-provas{ border-radius: var(--cx-raio); box-shadow: var(--cx-sombra); }
.cx .pr-duplas > div, .cx .pr-provas > div{ background: #FFFDF8; }
.cx .pr-duplas > div:hover{ background: #fff; }

/* ---------- contactos: as duas moradas com o mapa do Google ---------- */
.pr-moradas .pr-mapa{ margin-top: 20px; border-radius: 16px; overflow: hidden; border: 1px solid var(--linha); aspect-ratio: 16 / 10; background: var(--fundo-3); }
.pr-moradas .pr-mapa iframe{ display: block; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(1.06); transition: filter .5s var(--fx); }   /* a preto e branco, como os retratos; ganha cor ao passar o rato */
.pr-moradas > div:hover .pr-mapa iframe{ filter: none; }
.pr-moradas .pr-mapa-liga{ display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14.5px; font-weight: 700; color: var(--titulo);
  border-bottom: 2px solid var(--amarelo); padding-bottom: 3px; }
.pr-moradas .pr-mapa-liga .pr-arrow{ transition: transform .3s var(--fx); }
.pr-moradas .pr-mapa-liga:hover .pr-arrow{ transform: translateX(4px); }
.pr-moradas p a{ color: inherit; }

/* ---------- equipa (nas paginas interiores): retratos redondos ---------- */
.cx .pr-retrato{ border-radius: 50%; border-color: var(--linha); }
.cx .pr-equipa a{ text-align: center; }
.cx .pr-socias article{ background: #FFFDF8; border-color: var(--linha); box-shadow: var(--cx-sombra); }
.cx .pr-socia-cargo, .cx .pr-pessoa-cargo{ color: var(--am-tinta); }

/* ---------- socias: o retrato recortado, tal como esteve no heroi ---------- */
/* Um mosaico ESCURO dentro do cartao claro: o recorte foi iluminado para viver sobre
   preto (amarelo de um lado, azul do outro, base a desfazer-se). Sobre creme a luz
   colorida desaparecia e o grao da base parecia sujidade. */
.cx .pr-socias article{ grid-template-columns: 340px 1fr; }
.pr-socia-recorte{
  --titulo: #F7F7F9; --texto-3: #8A8A9C; --linha-2: rgba(255,255,255,.13);
  position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5;
  background:
    radial-gradient(60% 46% at 30% 36%, rgba(244,223,72,.30), transparent 70%),
    radial-gradient(52% 44% at 78% 44%, rgba(96,150,255,.20), transparent 72%),
    #0B0B0E;
  box-shadow: 0 30px 60px -34px rgba(20,18,8,.8);
}
.pr-socia-recorte img{ position: absolute; left: 50%; top: 5%; width: 112%; max-width: none; height: auto; transform: translateX(-50%); border-radius: 0; filter: none; }
.pr-socia-recorte .pr-cabeca-leg{ right: 12px; bottom: 12px; }
@media (max-width: 860px){ .cx .pr-socias article{ grid-template-columns: 1fr; } .pr-socia-recorte{ max-width: 380px; } }

/* ---------- formularios no claro ---------- */
.cx .pr-form{ background: #FFFDF8; border-color: var(--linha); box-shadow: var(--cx-sombra); border-radius: var(--cx-raio); }
.cx .pr-form input, .cx .pr-form-larga select, .cx .pr-form-larga textarea{ background: #F4F0E5; border-color: var(--linha); color: var(--titulo); }
.cx .pr-form input:focus, .cx .pr-form-larga select:focus, .cx .pr-form-larga textarea:focus{ border-color: var(--titulo); box-shadow: 0 0 0 3px rgba(244,223,72,.5); }
.cx .pr-form-consent a{ color: var(--titulo); text-decoration-color: var(--amarelo); }
.cx .pr-destaque{ background: #FFFDF8; box-shadow: var(--cx-sombra); border-radius: var(--cx-raio); }

/* ---------- blogue fundido com a caixa de ferramentas: filtros da biblioteca ---------- */
.cx-filtros{ display: flex; flex-wrap: wrap; gap: 8px; margin: -18px 0 30px; }
.cx-filtros button{ display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  font: 600 14px 'Inter Tight', sans-serif; letter-spacing: -.01em; color: var(--titulo); background: #FFFDF8; border: 1px solid var(--linha-2);
  transition: background .2s, color .2s, border-color .2s; }
.cx-filtros button i{ font: 500 11px var(--mono); font-style: normal; color: var(--texto-3); }
.cx-filtros button:hover{ border-color: var(--titulo); }
.cx-filtros button.on{ background: #14130C; color: var(--amarelo); border-color: #14130C; }
.cx-filtros button.on i{ color: rgba(244,223,72,.7); }
.cx-biblioteca > a[hidden]{ display: none; }   /* os cartoes sao display:flex, que ganha ao atributo hidden */
.cx-ancora{ display: block; position: relative; top: -90px; }   /* a barra de topo e' fixa: sem isto tapava o inicio */

/* ---------- Knowledge base: ELA QUER ESTE BLOCO COMO ESTAVA, escuro ---------- */
.cx .cx-escura{
  --fundo: #08080A; --fundo-2: #0D0D11; --titulo: #F7F7F9; --texto: #ADADBA; --texto-2: #ADADBA; --texto-3: #77778A;
  --linha: rgba(255,255,255,.07); --linha-2: rgba(255,255,255,.13); --vidro: rgba(255,255,255,.035); --halo: rgba(244,223,72,.16);
  background: #0B0B0E; color: var(--texto-2);
}
/* «Leva alguma coisa daqui hoje»: FUNDO TODO AMARELO (pedido dela ao fim do dia de
   18-09). Os cartoes continuam escuros, com a etiqueta amarela, tal como ela os quis
   manter de manha; so o chao muda. As variaveis escuras vivem agora DENTRO de cada
   cartao, e a seccao fica com tinta escura para o titulo se ler sobre o amarelo. */
/* (Esteve uns minutos em amarelo cheio: li mal o pedido. O fundo que ela queria aqui e'
   o da captura 175414, o que era da faixa da newsletter: SALVIA CLARA COM UM HALO
   AMARELO no canto de cima. Eu tinha-o posto no rodape, que voltou a preto.) */
.cx > section#knowledge{
  --titulo: #191813; --texto-2: #4A483F; --texto-3: #6B6A5E;
  background: radial-gradient(90% 140% at 12% 0%, rgba(244,223,72,.34), transparent 60%), #E9EDE4;
  color: #4A483F;
}
/* a etiqueta por cima do titulo dos recursos */
.cx-olho{ display: block; margin-bottom: 18px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
/* duas linhas equilibradas: «Antes de decidires, / faz as contas.» (o balance reparte-as
   sem ser preciso meter uma quebra a mao no texto) */
.cx > section#knowledge h2.pr-h2-largo{ max-width: 20ch; text-wrap: balance; }
.cx > section#knowledge .pr-kb a{
  --titulo: #F7F7F9; --texto-2: #ADADBA; --texto-3: #77778A; --linha: rgba(255,255,255,.07);
  background: linear-gradient(180deg, #1A1A21, #0D0D11); border-color: rgba(20,19,12,.35);
  box-shadow: 0 26px 50px -28px rgba(60,48,0,.75);
}
.cx > section#knowledge .pr-kb a:hover{ border-color: #14130C; }

/* Pessoas por tras das letras (pedido dela, captura 175915), com a receita do cartao do
   mega-menu: base AMARELA, fotografia a preto e branco MULTIPLICADA por cima, e um
   degrade escuro a subir de baixo. O texto assenta em baixo, para as caras, que
   estao na metade de cima das fotografias, ficarem a vista. */
.cx > section#knowledge .pr-kb-foto a{
  position: relative; overflow: hidden; isolation: isolate; min-height: 380px; justify-content: flex-end;
  background: var(--amarelo); border-color: rgba(20,19,12,.35);
}
.pr-kb-foto .kb-fundo{ position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
  filter: grayscale(1) contrast(1.15) brightness(1.08); mix-blend-mode: multiply; transition: transform .8s var(--fx); }
.pr-kb-foto a::after{ content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,14,13,.06) 0%, rgba(14,14,13,.30) 30%, rgba(14,14,13,.84) 60%, rgba(14,14,13,.97) 100%); }
.pr-kb-foto a:hover .kb-fundo{ transform: scale(1.05); }
/* a etiqueta sobe para o canto de cima e ganha fundo: por cima da fotografia, so com contorno, perdia-se */
.cx > section#knowledge .pr-kb-foto .pr-tag{ position: absolute; left: 22px; top: 22px; background: rgba(13,13,17,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cx > section#knowledge .pr-kb-foto p{ flex: 0 1 auto; }
.cx > section#knowledge .pr-kb-foto h3{ margin-top: 0; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
@media (max-width: 900px){ .cx > section#knowledge .pr-kb-foto a{ min-height: 320px; } }
/* a faixa amarela da assinatura fica mesmo por cima desta seccao: um filete separa as duas */
.cx > section.cx-faixa + section#knowledge{ border-top: 1px solid rgba(20,19,12,.2); }
/* noutras paginas os mesmos cartoes aparecem sobre claro: ai ganham pele clara */
.cx > section:not(#knowledge) .pr-kb a{ background: #FFFDF8; border-color: var(--linha); box-shadow: var(--cx-sombra); }
.cx > section:not(#knowledge) .pr-tag{ color: #5E5300; border-color: #C9B83F; background: #FBF3C9; }
.cx > section:not(#knowledge) .pr-kb a:hover .pr-dl{ color: var(--am-tinta); }

/* ---------- o fecho: o cartao escuro fica, como objeto pousado na banda ---------- */
.cx .pr-close-card{
  --fundo: #08080A; --titulo: #F7F7F9; --texto-2: #ADADBA; --texto-3: #77778A;
  --linha: rgba(255,255,255,.07); --linha-2: rgba(255,255,255,.13); --vidro: rgba(255,255,255,.035);
  color: var(--texto-2);
  box-shadow: 0 50px 90px -46px rgba(20,18,8,.75);
}
.cx .pr-close-card h3, .cx .pr-close-card .pr-place b{ color: var(--titulo); }
.cx .pr-close-card .pr-btn-ghost{ background: var(--vidro); border-color: var(--linha); box-shadow: none; color: var(--titulo); }
.cx .pr-close-card .pr-btn-primary{ box-shadow: 0 0 0 1px rgba(244,223,72,.55), 0 18px 50px -12px rgba(244,223,72,.6); }
.cx > section#contacto{ padding-top: 88px; }
.cx #contacto::before{ display: none; }

/* ---------- newsletter e' de todas as paginas: passa a salvia ---------- */
.nl{
  --titulo: #191813; --texto-2: #4A483F; --texto-3: #7C7A6E; --linha: #CFD6C8;
  position: relative; z-index: 3;
  background: radial-gradient(90% 140% at 12% 0%, rgba(244,223,72,.34), transparent 60%), #E9EDE4;
  border-top: 1px solid #D5DCCD;
}
.nl .nl-campo input{ background: #FFFDF8; border-color: #CFD6C8; color: #191813; }
.nl .nl-campo input:focus{ border-color: #191813; box-shadow: 0 0 0 3px rgba(244,223,72,.55); }
.nl .nl-aviso a{ color: #191813; text-decoration: underline; text-decoration-color: var(--amarelo); text-decoration-thickness: 2px; }
.nl .btn-k{ box-shadow: 0 0 0 1px rgba(196,172,24,.6), 0 14px 30px -14px rgba(168,140,0,.62); }

/* ---------- a caixa flutuante da newsletter ---------- */
/* A DIREITA, a deslizar da margem para dentro, como ela pediu. (Primeiro pu-la a
   esquerda, por causa da pastilha «Prototipo» que vive em baixo a direita: errado, o
   pedido era a direita. Fica por cima da pastilha, que so existe no prototipo.) */
/* A BOLA, que acompanha a pessoa pela pagina toda (como a .sinp-bola do smartidiom.pt).
   Fica por cima da pastilha «Prototipo»; a caixa abre por cima da bola. */
.nlp-bola{
  position: fixed; right: 22px; bottom: 86px; z-index: 91; width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; align-content: center; gap: 1px; color: #08080A;
  background: linear-gradient(180deg, #FBEE8A, var(--amarelo));
  box-shadow: 0 0 0 1px rgba(244,223,72,.6), 0 18px 40px -12px rgba(0,0,0,.7), 0 0 50px -10px rgba(244,223,72,.55);
  transition: transform .3s var(--fx), box-shadow .3s, background .3s, color .3s;
}
.nlp-bola svg{ width: 22px; height: 22px; }
.nlp-bola span{ font: 700 9px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.nlp-bola:hover{ transform: translateY(-3px) scale(1.05); }
.nlp-bola::after{ content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(244,223,72,.6); opacity: 0; animation: nlp-onda 3.4s ease-out infinite; pointer-events: none; }
@keyframes nlp-onda{ 0%{ opacity: .7; transform: scale(.92); } 70%, 100%{ opacity: 0; transform: scale(1.45); } }
.nlp-bola.aberta{ background: #14130C; color: var(--amarelo); box-shadow: 0 0 0 1px rgba(244,223,72,.5), 0 18px 40px -12px rgba(0,0,0,.7); }
.nlp-bola.aberta::after{ animation: none; }
@media (max-width: 520px){ .nlp-bola{ right: 16px; bottom: 76px; width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce){ .nlp-bola::after{ animation: none; } }

.nlp{
  position: fixed; right: 22px; bottom: 162px; z-index: 90; width: min(372px, calc(100vw - 32px));
  max-height: calc(100vh - 190px); overflow: auto;
  padding: 26px 24px 24px; border-radius: 22px; color: #ADADBA;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(244,223,72,.16), transparent 58%),
    linear-gradient(180deg, #1A1A21, #0D0D11);
  border: 1px solid rgba(244,223,72,.38);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 80px -30px rgba(244,223,72,.35);
  opacity: 0; transform: translateX(calc(100% + 40px)); transition: opacity .45s ease, transform .75s var(--fx);
}
.nlp.on{ opacity: 1; transform: none; }
.nlp[hidden]{ display: none; }
.nlp h4{ margin: 0 34px 0 0; font-size: 23px; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: #F7F7F9; }
.nlp h4 em{ font-style: normal; color: var(--amarelo); text-shadow: 0 0 26px rgba(244,223,72,.4); }
.nlp p{ margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; }
.nlp form{ display: grid; gap: 10px; margin-top: 16px; }
.nlp input{ width: 100%; font: 500 15px 'Inter Tight', sans-serif; color: #14130C; background: #FFFDF8; border: 1px solid transparent; border-radius: 12px; padding: 13px 14px; }
.nlp input::placeholder{ color: #7C7A6E; }
.nlp input:focus{ outline: none; border-color: var(--amarelo); box-shadow: 0 0 0 3px rgba(244,223,72,.3); }
.nlp small{ font-size: 12px; line-height: 1.5; color: #8A8A9C; }
.nlp small a{ color: #F7F7F9; text-decoration: underline; text-underline-offset: 3px; }
.nlp .pr-btn{ justify-content: center; width: 100%; border: 0; cursor: pointer; font-family: inherit; margin-top: 4px; }
.nlp-x{ position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: #F7F7F9; font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.nlp-x:hover{ background: var(--amarelo); color: #08080A; }
@media (max-width: 520px){ .nlp{ right: 16px; bottom: 142px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: reduce){ .nlp{ transition: none; transform: none; } }

/* (18-09: o rodape esteve uns minutos em salvia clara, com o fundo que era da faixa da
   newsletter. Ela viu e mandou reverter: o rodape e' PRETO, como sempre foi. Nao repetir.) */

/* ---------- rodape: cinco colunas, por logica de quem procura ---------- */
footer .cols.cols-5{ grid-template-columns: 1.35fr 1fr 1fr .9fr 1.15fr; gap: 30px; }
footer .cols-5 b{ color: #D7D8D2; font-weight: 600; }
footer .fim .fim-legal a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.22); }
footer .fim .fim-legal a:hover{ color: var(--amarelo); }
@media (max-width: 1080px){ footer .cols.cols-5{ grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px){ footer .cols.cols-5{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ footer .cols.cols-5{ grid-template-columns: 1fr; } }

/* «Liga-te a nos» DENTRO da primeira coluna (montagem dela, captura 200716): empilhado,
   a esquerda, sem o filete por cima. A primeira coluna alarga para os cinco botoes
   caberem numa linha, e as colunas alinham todas pelo topo. */
/* (as larguras foram afinadas pela captura dela das 20:47: com 1.15fr e 1.25fr, «Para
   gabinetes de contabilidade» e «Avenida Dom Joao III, Edificio 2002» partiam em duas linhas) */
footer .cols.cols-5{ grid-template-columns: 1.55fr 1.3fr 1.1fr .95fr 1.5fr; gap: 26px; align-items: start; }
/* os titulos das colunas a AMARELO (pedido dela, captura 204729) */
footer .cols-5 h6{ color: var(--amarelo); }
footer .cols-5 .redes{ display: block; margin-top: 44px; padding-top: 0; border-top: 0; }
/* a frase fica numa linha so, como na montagem: pode passar um pouco para debaixo da
   segunda coluna, que aquela altura ja esta vazia (so tem tres ligacoes, em cima) */
footer .cols-5 .redes p{ font-size: 15px; line-height: 1.5; white-space: nowrap; }
@media (max-width: 1080px){ footer .cols-5 .redes p{ white-space: normal; } }
footer .cols-5 .redes-bts{ margin-top: 20px; margin-left: -6px; flex-wrap: nowrap; }
footer .cols-5 .redes-bts a{ width: 56px; height: 56px; }
footer .fim{ justify-content: flex-start; gap: 110px; }
@media (max-width: 1080px){ footer .cols.cols-5{ grid-template-columns: 1fr 1fr 1fr; } footer .cols-5 > div:first-child{ grid-column: 1 / -1; } footer .fim{ gap: 24px; } }
@media (max-width: 640px){ footer .cols.cols-5{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px){ footer .cols.cols-5{ grid-template-columns: 1fr; } footer .cols-5 .redes-bts{ flex-wrap: wrap; } }

/* ---------- rodape: «Liga-te a nos» ---------- */
.redes{ display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--linha-2); }
.redes h5{ font-size: 26px; font-weight: 800; letter-spacing: -.035em; color: var(--titulo); line-height: 1.05; margin: 0; }
.redes h5 em{ font-style: normal; color: var(--amarelo); text-shadow: 0 0 30px rgba(244,223,72,.35); }
.redes p{ margin: 8px 0 0; font-size: 14.5px; color: var(--texto-2); }
.redes-bts{ display: flex; flex-wrap: wrap; gap: 12px; }
.redes-bts a{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  color: var(--titulo); background: var(--vidro); border: 1px solid var(--linha-2);
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--fx), box-shadow .25s; }
.redes-bts a svg{ width: 22px; height: 22px; }
.redes-bts a:hover{ background: var(--amarelo); color: #08080A; border-color: var(--amarelo); transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(244,223,72,.6); }

@media (max-width: 980px){
  .cx{ border-radius: 26px 26px 0 0; }
  .cx > section, .cx > .pr-declaracao{ padding-top: 80px; padding-bottom: 72px; }
  .cx > section:first-child{ border-radius: 26px 26px 0 0; }
  .cx .pr-razoes{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){ .cx .pr-razoes{ grid-template-columns: 1fr; } }

/* ---------- paginas de venda: pecas novas de 18-09 (copy das empresas) ---------- */
/* dor so' com titulo (sem corpo): a frase passa a ser o cartao inteiro */
.cx .pr-razoes article.so-titulo h3{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.32;font-weight:600;letter-spacing:-.01em;margin-bottom:0}
/* bloco a duas colunas: titulo a esquerda, texto e botao a direita */
.cx .cx-duo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:start}
.cx .cx-duo h2{margin:0}
.cx .cx-duo p{font-size:1.06rem;line-height:1.65;color:var(--texto);margin:0 0 1.05em;max-width:58ch}
.cx .cx-duo p:first-child{font-size:1.2rem;color:var(--titulo)}
.cx .cx-duo .pr-btn{margin-top:.6em}
.cx .cx-passos-acao{margin-top:clamp(28px,3.4vw,48px)}
@media (max-width:860px){.cx .cx-duo{grid-template-columns:1fr;gap:22px}}
/* ---------- home, #modelo: «a passadeira» (18-09 a noite, no lugar de «o rolo») ---------- */
/* sai do envelope para a direita: os cartoes correm ate' a margem do ecra */
.cx #modelo .cx-pass-wrap{margin-right:calc((var(--lj,100vw) - 100%) / -2);margin-top:clamp(28px,3.4vw,52px)}
.cx .cx-pass{display:flex;gap:20px;overflow-x:auto;padding:12px 48px 44px 4px;scrollbar-width:none;cursor:grab;outline:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 90px),transparent)}
.cx .cx-pass::-webkit-scrollbar{display:none}
.cx .cx-pass.arrasta{cursor:grabbing;user-select:none}
.cx .cx-pc{position:relative;flex:0 0 min(380px,82vw);min-height:440px;border-radius:28px;padding:34px 32px 36px;display:flex;flex-direction:column;overflow:hidden;
  background:#FFFDF8;color:var(--texto);box-shadow:0 26px 54px -34px rgba(35,30,15,.5);transition:transform .45s var(--fx),background .35s,color .35s}
.cx .cx-pn{position:absolute;right:20px;top:4px;font-size:150px;font-weight:800;letter-spacing:-.07em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(25,24,19,.13);transition:-webkit-text-stroke-color .35s;pointer-events:none}
.cx .cx-pi{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;background:#F4DF48;color:#14130C}
.cx .cx-pi svg{display:block;width:30px;height:30px}
.cx .cx-pc h3{margin:auto 0 0;padding-top:40px;font-size:clamp(1.5rem,2vw,1.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;color:var(--titulo);transition:color .35s}
.cx .cx-pc p{margin:14px 0 0;font-size:1.02rem;line-height:1.55}
@media (hover:hover){
  .cx .cx-pc:not(.cx-pc-fim):hover{transform:translateY(-8px);background:linear-gradient(180deg,#1A1A21,#0A0A0D);color:#ADADBA}
  .cx .cx-pc:not(.cx-pc-fim):hover h3{color:#F7F7F9}
  .cx .cx-pc:not(.cx-pc-fim):hover .cx-pn{-webkit-text-stroke-color:rgba(244,223,72,.5)}
}
.cx .cx-pc-fim{flex-basis:min(440px,86vw);justify-content:flex-end;background:linear-gradient(160deg,#FFF2A0,#F4DF48 55%,#E9CF2A)}
.cx .cx-pc-fim h3{margin:0 0 18px;padding:0;font-size:clamp(1.9rem,2.8vw,2.6rem);color:#14130C}
.cx .cx-pc-fim a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid rgba(20,19,12,.28);font-weight:700;font-size:1.12rem;color:#14130C;text-decoration:none}
.cx .cx-pc-fim a:hover .pr-arrow{transform:translateX(6px)}
.cx .cx-pc-fim .pr-arrow{transition:transform .3s}
.cx .cx-pass-ctl{display:flex;align-items:center;gap:18px}
.cx .cx-pass-ctl button{flex:0 0 54px;width:54px;height:54px;border-radius:50%;border:1px solid #C6C0AC;background:#FFFDF8;font-size:20px;color:#14130C;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.cx .cx-pass-ctl button:hover{background:#14130C;color:#F4DF48;border-color:#14130C}
.cx .cx-pass-barra{flex:1;height:4px;border-radius:4px;background:#D9CFB8;overflow:hidden}
.cx .cx-pass-barra i{display:block;height:100%;width:14%;background:#14130C;border-radius:4px}
@media (max-width:700px){.cx .cx-pc{min-height:400px}.cx .cx-pn{font-size:120px}}

/* azulejo amarelo com duas saidas lado a lado (18-09) */
.cx-vd-cta .vd-cta-acoes{ display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 6px; }
.cx-vd-cta .vd-cta-acoes .vd-l{ text-decoration: none; margin-top: 0; white-space: nowrap; }
.cx-vd-cta .vd-cta-acoes .vd-l:hover{ border-bottom-color: #14130C; }
.cx-vd-cta .vd-cta-acoes .vd-l .pr-arrow{ display: inline-block; transition: transform .3s; }
.cx-vd-cta .vd-cta-acoes .vd-l:hover .pr-arrow{ transform: translateX(6px); }

/* rodape: envelope antes do e-mail (18-09) */
footer .rd-mail{ display: inline-flex; align-items: center; gap: 8px; }
footer .rd-mail svg{ flex: 0 0 16px; color: #F4DF48; }

/* ---------- home, #modelo: fundo «o grafico» (escolha dela a 18-09, opcao 3 de
   ensaios/fundos-3-opcoes.html): papel quadriculado fino sobre o creme e, por tras dos
   cartoes, a linha do resultado a subir, com o amarelo por baixo ---------- */
.cx #modelo{ position: relative; isolation: isolate; overflow: hidden; }
.cx #modelo > *{ position: relative; z-index: 1; }
.cx #modelo::before, .cx #modelo::after{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cx #modelo::before{ background-image:
    linear-gradient(rgba(27,26,18,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(27,26,18,.07) 1px, transparent 1px),
    linear-gradient(rgba(27,26,18,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(27,26,18,.035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent); }
.cx #modelo::after{ background: url("img/fundo-grafico.svg") center bottom / 100% 78% no-repeat; }
/* ---------- home, #casos: «case studies» (18-09 a noite) ---------- */
.cx #casos{ background: #F2EADB; }
.cx .cx-casos-nota{ font: 500 12px/1.5 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6B6754; }
.cx .cx-casos{ display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 20px; align-items: stretch; }
.cx .cx-caso{ display: flex; flex-direction: column; padding: 30px 30px 32px; border-radius: 28px; background: #FFFDF8; color: var(--texto);
  box-shadow: 0 26px 54px -34px rgba(35,30,15,.5); transition: transform .45s var(--fx), box-shadow .45s; }
.cx .cx-caso:hover{ transform: translateY(-6px); box-shadow: 0 38px 70px -36px rgba(35,30,15,.6); }
.cx .cx-caso-topo{ display: flex; align-items: center; gap: 10px; font: 600 11.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.cx .cx-caso-via{ padding: 7px 10px; border-radius: 999px; background: #F4DF48; color: #14130C; }
.cx .cx-caso-setor{ color: #6B6754; }
.cx .cx-caso-n{ margin-left: auto; color: #A39D86; }
.cx .cx-caso h3{ margin: 26px 0 26px; font-size: clamp(1.45rem, 1.9vw, 1.85rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; color: var(--titulo); }
.cx .cx-caso dl{ margin: auto 0 0; display: grid; gap: 0; }
.cx .cx-caso dl > div{ padding: 16px 0; border-top: 1px solid rgba(27,26,18,.12); }
.cx .cx-caso dt{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; margin-bottom: 8px; }
.cx .cx-caso dd{ margin: 0; font-size: .98rem; line-height: 1.5; }
.cx .cx-caso-mudou dd{ font-weight: 600; color: var(--titulo); }
/* o primeiro caso vai a escuro, com a luz amarela do canto, e le-se maior */
.cx .cx-caso-1{ color: #ADADBA; background: radial-gradient(110% 80% at 100% 0%, rgba(244,223,72,.20), transparent 60%), linear-gradient(180deg, #1A1A21, #0A0A0D); }
.cx .cx-caso-1 h3{ color: #F7F7F9; font-size: clamp(1.7rem, 2.5vw, 2.35rem); }
.cx .cx-caso-1 .cx-caso-setor{ color: #ADADBA; } .cx .cx-caso-1 .cx-caso-n{ color: #6E6E7A; }
.cx .cx-caso-1 dl > div{ border-top-color: rgba(255,255,255,.12); }
.cx .cx-caso-1 dt{ color: #F4DF48; }
.cx .cx-caso-1 .cx-caso-mudou dd{ color: #F7F7F9; }
.cx .cx-casos-acao{ margin-top: clamp(28px, 3.4vw, 48px); }
@media (max-width: 1020px){ .cx .cx-casos{ grid-template-columns: 1fr 1fr; } .cx .cx-caso-1{ grid-column: 1 / -1; } }
@media (max-width: 680px){ .cx .cx-casos{ grid-template-columns: 1fr; } }

/* =====================================================================================
   VIDEO EM FUNDO (18-09 a noite): a janela, o triptico e as letras. Ensaio em
   ensaios/videos-3-opcoes.html; o comportamento esta' em assets/video.js.
   ===================================================================================== */
.vj video, .vt video, .vl video{ display: block; width: 100%; height: 100%; object-fit: cover; }

/* 1. a janela (home): sai do .pr-wrap para ir de lado a lado, como a fita */
.vj{ position: relative; z-index: 2; isolation: isolate; overflow: hidden; background: #0A0A0D;
  width: var(--lj); margin-left: calc(50% - var(--lj) / 2); height: clamp(340px, 40vw, 520px); }
.vj video{ position: absolute; inset: 0; filter: grayscale(1) contrast(1.08) brightness(.82); transition: opacity .6s; }
.vj::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,10,13,.92) 0, rgba(10,10,13,.62) 42%, rgba(10,10,13,.12) 100%); }
.vj::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: #F4DF48; mix-blend-mode: multiply; opacity: .55; }
.vj-txt{ position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 0 max(28px, calc(var(--lj) / 2 - 592px)); }
.vj-et{ font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #F4DF48; }
.vj h2{ margin: 0; max-width: 16ch; font-size: clamp(34px, 4.8vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: .98; color: #F7F7F9; }
.vj h2 em{ font-style: normal; color: #F4DF48; }
.vj p{ margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.5; color: #D6D6DE; }
.vj-pts{ position: absolute; right: max(28px, calc(var(--lj) / 2 - 592px)); bottom: 28px; z-index: 2; display: flex; gap: 8px; }
.vj-pts i{ width: 34px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); }
.vj-pts i.on{ background: #F4DF48; }
.vj + .cx{ margin-top: 0; border-radius: 0; box-shadow: none; }
.vj + .cx > section:first-child{ border-radius: 0; }

/* 2. o triptico (paginas de venda, seccao dos tres passos) */
.cx .vt{ display: flex; gap: 14px; height: clamp(320px, 34vw, 460px); }
.cx .vt-pn{ position: relative; flex: 1 1 0; min-width: 0; border-radius: 26px; overflow: hidden; background: #0A0A0D; isolation: isolate;
  transition: flex-grow .7s var(--fx); }
.cx .vt-pn video{ position: absolute; inset: 0; filter: grayscale(1) contrast(1.05) brightness(.8); transition: filter .6s; }
.cx .vt-pn::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,13,.1) 30%, rgba(10,10,13,.9)); }
.cx .vt-pn:hover, .cx .vt-pn.on{ flex-grow: 2.1; }
.cx .vt-pn:hover video, .cx .vt-pn.on video{ filter: grayscale(0) contrast(1.02) brightness(.9); }
.cx .vt-n{ position: absolute; left: 24px; top: 22px; z-index: 2; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: #F4DF48; }
.cx .vt-c{ position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; }
.cx .vt-c h3{ margin: 0; font-size: clamp(22px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; color: #F7F7F9; }
.cx .vt-c p{ margin: 10px 0 0; max-width: 38ch; font-size: 16px; line-height: 1.45; color: #D6D6DE; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s, opacity .5s; }
.cx .vt-pn:hover p, .cx .vt-pn.on p{ max-height: 120px; opacity: 1; }
@media (max-width: 760px){ .cx .vt{ flex-direction: column; height: auto; } .cx .vt-pn{ height: 230px; flex: none; } .cx .vt-c p{ max-height: 120px; opacity: 1; } }

/* 3. as letras («O nosso ADN»): o video dentro de uma palavra gigante, sobre o creme */
.cx > .vl{ background: #FAF7F0; padding: 72px max(28px, calc(var(--lj) / 2 - 592px)) 24px; }
.cx .vl-palco{ position: relative; height: clamp(104px, 27vw, 400px); overflow: hidden; isolation: isolate; }
.cx .vl-palco video{ position: absolute; inset: 0; filter: saturate(1.15) contrast(1.05); }
.cx .vl-masc{ position: absolute; inset: -1px; z-index: 1; background: #fff; mix-blend-mode: screen; display: flex; align-items: center; }
.cx .vl-masc span{ display: block; width: 100%; font-size: min(20.6vw, 334px); font-weight: 800; letter-spacing: -.075em; line-height: .84; color: #000; white-space: nowrap; }
.cx .vl-palco::after{ content: ""; position: absolute; inset: -1px; z-index: 2; background: #FAF7F0; mix-blend-mode: multiply; pointer-events: none; }
.cx .vl-leg{ display: flex; justify-content: space-between; align-items: baseline; gap: 30px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid #D9CFB8; }
.cx .vl-leg b{ font-size: clamp(20px, 2vw, 27px); font-weight: 700; letter-spacing: -.03em; max-width: 30ch; color: var(--titulo); }
.cx .vl-leg small{ font: 500 12px/1.5 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6B6754; }

/* casos: o «Ler mais» ao fundo de cada cartao da home, e a pagina casos-de-estudo.html */
.cx .cx-caso-mais{ align-self: flex-start; margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; text-decoration: none; color: #14130C; background: #F4DF48; box-shadow: 0 10px 24px -12px rgba(122,108,0,.7); transition: transform .3s, box-shadow .3s; }
.cx .cx-caso-mais:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(122,108,0,.8); }
.cx .cx-caso-mais .pr-arrow{ display: inline-block; transition: transform .3s; } .cx .cx-caso-mais:hover .pr-arrow{ transform: translateX(5px); }
.cx .cx-casop{ scroll-margin-top: 96px; }
.cx .cx-casop-in{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.cx .cx-casop h2{ margin: 26px 0 0; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.cx .cx-casop dl{ margin: 0; display: grid; }
.cx .cx-casop dl > div{ padding: 20px 0; border-top: 1px solid rgba(27,26,18,.16); }
.cx .cx-casop dt{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; margin-bottom: 10px; }
.cx .cx-casop dd{ margin: 0; font-size: 1.08rem; line-height: 1.6; }
.cx .cx-casop .cx-caso-mudou dd{ font-weight: 600; color: var(--titulo); font-size: 1.2rem; }
@media (max-width: 860px){ .cx .cx-casop-in{ grid-template-columns: 1fr; gap: 20px; } }

/* =====================================================================================
   MENU NO TELEMOVEL (18-09, 23h). Estava PARTIDO: uma regra tardia do style.css
   («nav.menu{display:flex}») ganhava a' que o escondia, e o menu aparecia sempre aberto,
   com o painel das empresas cortado a' esquerda. Aqui fica fechado ate' se tocar no
   hamburguer; aberto, e' uma folha a toda a altura, com os paineis em lista simples.
   ===================================================================================== */
@media (max-width: 880px){
  nav.menu{ display: none; }
  nav.menu.aberto{ display: block; position: fixed; left: 0; right: 0; top: 60px; bottom: auto; height: calc(100vh - 60px); height: calc(100dvh - 60px); z-index: 95; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 22px 40px; background: #0A0A0D; border-top: 1px solid rgba(255,255,255,.08); }
  nav.menu.aberto .mi{ position: static; border-bottom: 1px solid rgba(255,255,255,.1); padding: 4px 0 10px; }
  nav.menu.aberto .mi > a{ display: flex; height: auto; padding: 16px 0 8px; border: 0; background: transparent; color: #F7F7F9; font-size: 15px; letter-spacing: .06em; white-space: normal; }
  nav.menu.aberto .mi.on > a{ color: #F4DF48; }
  nav.menu.aberto .mi > a .ix{ color: #F4DF48; }
  nav.menu.aberto .seta{ display: none; }
  nav.menu.aberto .mega{ display: block; position: static; width: auto; max-width: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  nav.menu.aberto .mega::before{ display: none; }
  nav.menu.aberto .mega-in{ display: block; padding: 0; }
  nav.menu.aberto .mcol{ padding: 0; border: 0; }
  nav.menu.aberto .mcol h6, nav.menu.aberto .mcartao, nav.menu.aberto .mitem .ico, nav.menu.aberto .mitem i{ display: none; }
  nav.menu.aberto .mitem, nav.menu.aberto .mtxt{ display: block; padding: 9px 0 9px 14px; margin: 0; border: 0; border-radius: 0; background: transparent; font-size: 15px; font-weight: 500; color: #ADADBA; }
  nav.menu.aberto .mitem b{ font-weight: 500; color: inherit; font-size: inherit; }
  nav.menu.aberto .mitem:hover, nav.menu.aberto .mtxt:hover{ color: #F7F7F9; background: transparent; }
  /* a via da home que sai 8 px do ecra */
  .pr-fork, .pr-vias{ max-width: 100%; }
  .pr-fork-c{ min-width: 0; max-width: 100%; }
}@media (max-width: 880px){ .dm-cursor{ display: none; } }
@media (max-width: 760px){ .cx > .vl{ padding-top: 44px; } }

/* as letras com TOM AMARELO (pedido dela, captura 232015): o fundo da seccao passa a amarelo
   palido e o video dentro das letras vai a preto e branco tingido de amarelo, como na janela */
.cx > .vl{ background: #FBF2B9; }
.cx .vl-palco video{ z-index: 0; filter: grayscale(1) contrast(1.45) brightness(.72); }
.cx .vl-palco::before{ content: ""; position: absolute; inset: 0; z-index: 1; background: #F4DF48; mix-blend-mode: multiply; opacity: .85; pointer-events: none; }
.cx .vl-masc{ z-index: 2; }
.cx .vl-palco::after{ z-index: 3; background: #FBF2B9; }
.cx .vl-leg{ border-top-color: rgba(20,19,12,.22); }
.cx .vl-leg small{ color: #5E5300; }.cx .vl-masc{ inset: -3px; }

/* a janela com o paragrafo de identidade (19-09): a caixa cresce com o texto em vez de ter altura fixa */
.vj{ height: auto; min-height: clamp(360px, 40vw, 540px); display: flex; }
.vj-txt{ position: relative; inset: auto; width: 100%; padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(64px, 7vw, 96px); }
.vj p.vj-quem{ max-width: 58ch; font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; color: #E4E4EA; }
.vj::before{ background: linear-gradient(90deg, rgba(10,10,13,.94) 0, rgba(10,10,13,.78) 48%, rgba(10,10,13,.22) 100%); }
@media (max-width: 760px){ .vj::before{ background: rgba(10,10,13,.8); } }
/* a linha com o termo pesquisado, por cima do h1 das paginas interiores (19-09) */
.pr-olho{ margin: 0 0 18px; font: 600 12.5px/1.3 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #F4DF48; }
.pr-olho::before{ content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #F4DF48; margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 12px rgba(244,223,72,.7); }

/* =====================================================================================
   AUDITORIA DE DESIGN (19-09), correcoes P1
   ===================================================================================== */
/* P1.1 indice de servicos das paginas de venda: a regra de #servicos (escrita para a home)
   punha titulos brancos sobre o cartao creme (contraste 1,05:1). O cartao passa a vidro
   escuro, como a parede da home. Na home #servicos nao tem .pr-svc, por isso nao muda. */
.cx > section#servicos .pr-svc{ background: rgba(255,255,255,.03); box-shadow: none; border: 1px solid rgba(255,255,255,.10); }
.cx > section#servicos .pr-svc a{ border-color: rgba(255,255,255,.10); }
.cx > section#servicos .pr-svc a::before{ background: linear-gradient(90deg, rgba(244,223,72,.16), transparent 60%); }
.cx > section#servicos .pr-svc a:hover .pr-n{ color: #F4DF48; }

/* P1.2 no telemovel a demo do heroi nascia deslocada 70 px para o lado e alargava a pagina */
@media (max-width: 980px){ .pr-demo{ overflow: clip; } .pr-demo::before{ inset: -4% 0 -2% 0; } .pr-demo.rise{ transform: translateY(26px) scale(.98); } }

/* P1.3 heroi das paginas interiores com 190 px de vazio por baixo da barra (a regra certa perdia por especificidade) */
.pr-wrap header.pr-cabeca-interior{ padding-top: 104px; }
@media (max-width: 980px){ .pr-wrap header.pr-cabeca-interior{ padding-top: 60px; } }

/* P1.4 foco de teclado: o contorno amarelo nao se via sobre o creme */
.cx{ --foco: #14130C; }
.cx > section#servicos, .cx .pr-close-card, .cx .cx-caso-1, .cx .vt-pn, .nlp, .vj{ --foco: #F4DF48; }
:focus-visible{ outline: 2px solid var(--foco, #F4DF48); outline-offset: 3px; }
.cx .cx-pass:focus-visible{ outline: 2px solid #14130C; outline-offset: 6px; }

/* P1.5 «movimento reduzido»: faltavam a fita e as transicoes das pecas novas */
@media (prefers-reduced-motion: reduce){
  .fita-int{ animation: none !important; } .fita{ overflow-x: auto; scrollbar-width: none; }
  .vj video, .cx .vt-pn, .cx .vt-pn video, .cx .vt-c p, .cx .cx-pc, .cx .cx-caso, .pr-kb-foto .kb-fundo, .cx-vd-cta .vd-cta-fig{ transition: none !important; }
  .nlp-bola::before, .nlp-bola::after{ animation: none !important; }
}

/* P2.1 titulos sem viuvas: as quebras equilibram-se sozinhas */
h1, h2, h3, .cx-faixa p, .pr-decl-frase{ text-wrap: balance; }
.pr-lede, .pr-sec-note, .cx p{ text-wrap: pretty; }
@media (max-width: 640px){ .cx h2, .cx h2.pr-h2-largo, .vj h2{ max-width: none; } }

/* P2.9 alvos de toque no telemovel */
@media (pointer: coarse){ .hamb{ min-width: 48px; } footer a{ padding-top: 5px; padding-bottom: 5px; display: inline-block; } .cx-vd-cta .vd-l{ padding: 10px 0; } .nlp-x{ width: 44px; height: 44px; } }

/* P2.12 contactos: os dois mapas a mesma altura, mesmo com um escritorio sem telefone */
.pr-moradas > div{ display: flex; flex-direction: column; } .pr-moradas .pr-mapa{ margin-top: auto; } .pr-moradas .pr-mapa-liga{ align-self: flex-start; }

/* a bola da newsletter pulsa tres vezes e sossega (pulsar para sempre cansa) */
.nlp-bola::before, .nlp-bola::after{ animation-iteration-count: 3; }

/* janela: cross-fade entre dois videos (19-09) e tracos que se enchem enquanto o clip da' */
.vj video{ transition: opacity 1.1s var(--fx, cubic-bezier(.16,.84,.34,1)); object-fit: cover; }
.vj video.fora{ opacity: 0; }
.vj-pts i{ position: relative; overflow: hidden; }
.vj-pts i.on{ background: rgba(255,255,255,.3); }
.vj-pts i.on::after{ content: ""; position: absolute; inset: 0; background: #F4DF48; transform-origin: 0 50%; animation: vj-enche 6s linear both; }
@keyframes vj-enche{ from{ transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce){ .vj-pts{ display: none; } .vj video{ transition: none; } }

/* =====================================================================================
   FECHAR O DEGRAU (19-09): as paginas de servico, institucionais, FAQ e casos passam a falar
   a lingua da home: cartoes, marcador nos titulos, titulos que abrem, microinteracoes.
   ===================================================================================== */
/* fichas unicas de raio e sombra */
.cx{ --r-s: 14px; --r-m: 22px; --r-l: 28px; --sombra-1: 0 16px 40px -26px rgba(35,30,15,.36); --sombra-2: 0 26px 54px -34px rgba(35,30,15,.5); --sombra-2h: 0 38px 70px -36px rgba(35,30,15,.6); }

/* a lista numerada (40% da largura vazia) passa a grelha de cartoes */
.cx .pr-lista{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; margin-top: 0; }
.cx .pr-lista article{ grid-template-columns: 1fr; gap: 14px; align-content: start; padding: 28px 28px 30px; border: 0; border-radius: var(--r-m); background: #FFFDF8; box-shadow: var(--sombra-1);
  transition: transform .45s var(--fx), box-shadow .45s var(--fx); }
.cx .pr-lista article:hover{ padding-left: 28px; transform: translateY(-4px); box-shadow: var(--sombra-2); }
.cx .pr-lista .pr-n{ justify-self: start; padding: 7px 10px; border-radius: 999px; background: #F4DF48; color: #14130C; font-weight: 600; font-size: 11.5px; letter-spacing: .08em; }
.cx .pr-lista article:hover .pr-n{ color: #14130C; }
.cx .pr-lista h3{ font-size: clamp(1.25rem, 1.55vw, 1.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.cx .pr-lista p{ font-size: 1rem; line-height: 1.58; margin-top: 8px; max-width: none; }
.cx .pr-lista article:last-child:nth-child(odd){ grid-column: 1 / -1; }
@media (max-width: 760px){ .cx .pr-lista{ grid-template-columns: 1fr; } }

/* os cartoes de texto a 13 px, colados numa so' caixa, passam a cartoes soltos */
.cx .pr-duplas{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.cx .pr-duplas > div{ padding: 28px 28px 30px; border: 0; border-radius: var(--r-m); background: #FFFDF8; box-shadow: var(--sombra-1); transition: transform .45s var(--fx), box-shadow .45s var(--fx); }
.cx .pr-duplas > div:hover{ background: #FFFDF8; transform: translateY(-4px); box-shadow: var(--sombra-2); }
.cx .pr-duplas > div:last-child:nth-child(odd){ grid-column: auto; }
.cx .pr-duplas h3, .cx .pr-duplas b{ display: block; margin: 0; font-size: clamp(1.2rem, 1.5vw, 1.45rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; color: var(--titulo); }
.cx .pr-duplas p{ font-size: 1rem; line-height: 1.58; margin-top: 10px; }

/* o titulo que abre e o marcador que se risca (viviam so' na home, no anima.css) */
.cx .pr-sec-head h2.rise{ opacity: 1; transform: none; clip-path: inset(-10% 100% -20% -4%); transition: clip-path 1.1s var(--fx); }
.cx .pr-sec-head h2.rise.on{ clip-path: inset(-10% -6% -20% -4%); }
.cx .pr-sec-head h2.rise em{ background-size: 0% 44%; transition: background-size .9s var(--fx) .75s; }
.cx .pr-sec-head h2.rise.on em{ background-size: 100% 44%; }
.cx h2 em{ padding: 0 .08em; margin: 0 -.08em; }
@media (prefers-reduced-motion: reduce){ .cx .pr-sec-head h2.rise{ clip-path: none; transition: none; } .cx .pr-sec-head h2.rise em{ background-size: 100% 44%; transition: none; } }

/* casos: o titulo acompanha a leitura em vez de deixar a coluna esquerda vazia */
@media (min-width: 861px){ .cx .cx-casop-in > :first-child{ position: sticky; top: 110px; } }

/* perguntas: o + roda e a resposta abre com altura animada (melhoria progressiva) */
:root{ interpolate-size: allow-keywords; }
.cx details.faq summary::after{ content: '+'; transition: transform .35s var(--fx), color .25s; }
.cx details.faq[open] summary::after{ content: '+'; transform: rotate(45deg); color: var(--titulo); }
.cx details.faq::details-content{ block-size: 0; overflow: clip; transition: block-size .5s var(--fx), content-visibility .5s allow-discrete; }
.cx details.faq[open]::details-content{ block-size: auto; }
.cx details.faq summary{ font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.cx details.faq p{ font-size: 1rem; line-height: 1.62; }

/* microinteracoes de assinatura */
.cx p a:not(.pr-btn), .cx .pr-mapa-liga{ background: linear-gradient(100deg, #FFF24A, #F5E53A) 0 88% / 0% 38% no-repeat; transition: background-size .5s var(--fx); }
.cx p a:not(.pr-btn):hover, .cx .pr-mapa-liga:hover{ background-size: 100% 38%; }
.pr-btn-primary{ position: relative; overflow: hidden; }
.pr-btn-primary::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-120%); transition: transform .9s var(--fx); pointer-events: none; }
.pr-btn-primary:hover::after{ transform: translateX(120%); }
@media (hover: hover){
  .cx .cx-pn{ background: linear-gradient(#F4DF48, #F4DF48) 0 100% / 100% 0% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-size .6s var(--fx), -webkit-text-stroke-color .4s; }
  .cx .cx-pc:hover .cx-pn{ background-size: 100% 100%; }
}
/* passagem entre paginas sem salto (onde o browser souber; nos outros fica como estava) */
@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: reduce){ .pr-btn-primary::after{ display: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation: none !important; } }

/* a faixa de declaracao leva agora uma frase inteira do lead: letra mais contida e linha mais larga */
.cx > .pr-declaracao .pr-decl-frase{ font-size: clamp(26px, 2.9vw, 42px); max-width: 32ch; line-height: 1.12; }
.cx > .pr-declaracao .pr-decl-apoio{ font-size: 1.05rem; }

/* trilho de navegacao: a pagina atual */
.pr-migalhas [aria-current]{ color: inherit; opacity: .75; }
.pr-migalhas a{ text-decoration: none; }

/* as <img> tem agora width/height no HTML (reserva de espaco): a altura continua a ser a do CSS ou a proporcional */
:where(img){ height: auto; }

/* o grafico que se desenha com o scroll (19-09): substitui a imagem de fundo parada */
.cx #modelo::after{ display: none; }
.cx #modelo > svg.cx-grafico{ position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 78%; z-index: 0; pointer-events: none; --p: 0; }
.cx-grafico .g-linha{ stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); }
.cx-grafico .g-area{ clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }

/* telemovel: as entradas laterais do heroi (anima.css, carregado depois) nao podem alargar a pagina */
@media (max-width: 980px){ .pr-wrap .pr-cabeca-foto{ overflow-x: clip; } .pr-wrap .pr-cabeca-foto .pr-demo.rise:not(.on){ transform: translateY(26px) scale(.98); } .pr-wrap .pr-cabeca-foto .pr-fork-c.rise:not(.on), .pr-wrap .pr-cabeca-foto .pr-fork .rise:not(.on){ transform: translateY(18px); } }

/* perguntas frequentes NUMERADAS (pedido dela, 19-09): 01, 02, 03… seguidas em cada pagina */
body{ counter-reset: pergunta; }
details.faq{ counter-increment: pergunta; }
details.faq summary{ display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; padding-right: 44px; }
details.faq summary::before{ content: counter(pergunta, decimal-leading-zero); font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .1em; color: #14130C; background: #F4DF48; padding: 6px 9px; border-radius: 999px; position: relative; top: -2px; }
.cx details.faq > p{ padding-left: calc(18px + 2.6em); }
@media (max-width: 640px){ details.faq summary{ column-gap: 12px; } .cx details.faq > p{ padding-left: 0; } }
/* =====================================================================================
   «O PALCO» das socias (O nosso ADN, 19-09). Banda escura dentro da zona clara.
   ===================================================================================== */
.cx > section#socias{ background: #0A0A0D; --titulo: #F7F7F9; --texto: #ADADBA; --texto-2: #ADADBA; --foco: #F4DF48; color: #ADADBA; padding-bottom: 0; overflow: hidden; }
.cx > section#socias h2{ color: #F7F7F9; }
.cx > section#socias h2 em{ background: none; color: #F4DF48; padding: 0; margin: 0; }
.cx > section#socias .pr-sec-note{ color: #ADADBA; }
.cx .cx-palco{ display: flex; height: clamp(540px, 56vw, 740px); }
.cx .cx-pl{ position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; cursor: pointer; outline: none; container-type: inline-size;
  border-radius: 32px 32px 0 0; background: radial-gradient(90% 70% at 50% 100%, rgba(244,223,72,.10), transparent 70%), #101014;
  transition: flex-grow .8s var(--fx), background .6s; }
.cx .cx-pl + .cx-pl{ margin-left: 14px; }
.cx .cx-pl.on{ flex-grow: 2.2; background: radial-gradient(80% 70% at 30% 100%, rgba(244,223,72,.30), transparent 70%), #14130C; cursor: default; }
.cx .cx-pl:focus-visible{ outline: 2px solid #F4DF48; outline-offset: -4px; }
.cx .cx-pl img{ position: absolute; left: 4%; bottom: 0; height: 92%; width: auto; max-width: none; z-index: 1; filter: grayscale(1) brightness(.62); transition: filter .7s, left .8s var(--fx); }
.cx .cx-pl.on img{ filter: none; left: 2%; }
/* o nome de fundo mede-se pela largura do PAINEL (cqw), com teto: cabe sempre inteiro */
.cx .cx-pl-nome{ position: absolute; left: 5%; top: 4%; z-index: 0; white-space: nowrap; font-size: min(22cqw, 112px); font-weight: 800; letter-spacing: -.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.12); transition: -webkit-text-stroke-color .6s; pointer-events: none; }
.cx .cx-pl.on .cx-pl-nome{ -webkit-text-stroke-color: rgba(244,223,72,.55); }
.cx .cx-pl-leg{ position: absolute; left: 24px; bottom: 24px; z-index: 3; padding: 12px 16px; border-radius: 14px; background: rgba(13,13,17,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); transition: opacity .4s; }
.cx .cx-pl-leg b{ display: block; font-size: 18px; color: #F7F7F9; }
.cx .cx-pl-leg small{ font: 500 11px/1.4 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #ADADBA; }
.cx .cx-pl.on .cx-pl-leg{ opacity: 0; }
.cx .cx-pl-painel{ position: absolute; right: 0; top: 0; bottom: 0; width: 50%; z-index: 2; padding: 40px 40px 40px 8px; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateX(30px); transition: opacity .5s .1s, transform .7s var(--fx) .1s; pointer-events: none; }
.cx .cx-pl.on .cx-pl-painel{ opacity: 1; transform: none; pointer-events: auto; }
.cx .cx-pl-painel h3{ margin: 0; font-size: clamp(1.8rem, 2.6vw, 2.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #F7F7F9; }
.cx .cx-pl-cargo{ margin-top: 10px; font: 600 11.5px/1.5 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #F4DF48; }
.cx .cx-pl-painel p{ margin: 20px 0 0; font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.6; color: #D6D6DE; }
.cx .cx-pl-painel ul{ list-style: none; margin: 22px 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.cx .cx-pl-painel li{ padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); font: 500 12px/1.4 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #F7F7F9; }
.cx .cx-pl-painel li::before{ content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #F4DF48; margin-right: 12px; }
.cx .cx-pl-painel a{ align-self: flex-start; color: #F4DF48; font-weight: 700; text-decoration: none; background: none; }
/* telemovel: uma por baixo da outra, as duas acesas e com o percurso a vista */
@media (max-width: 900px){
  .cx .cx-palco{ flex-direction: column; height: auto; }
  .cx .cx-pl, .cx .cx-pl.on{ flex: none; border-radius: 26px; padding-top: min(86vw, 420px); background: radial-gradient(80% 40% at 50% 38%, rgba(244,223,72,.26), transparent 70%), #14130C; }
  .cx .cx-pl + .cx-pl{ margin: 14px 0 0; } .cx .cx-pl:last-child{ margin-bottom: 40px; }
  .cx .cx-pl img, .cx .cx-pl.on img{ left: 50%; translate: -50% 0; top: 18px; bottom: auto; height: min(80vw, 390px); filter: none; }
  .cx .cx-pl-nome{ -webkit-text-stroke-color: rgba(244,223,72,.4); font-size: min(24cqw, 96px); }
  .cx .cx-pl-painel{ position: relative; width: auto; opacity: 1; transform: none; pointer-events: auto; padding: 24px 24px 30px; background: linear-gradient(180deg, transparent, #0A0A0D 22%); }
  .cx .cx-pl-leg{ display: none; }
}
@media (prefers-reduced-motion: reduce){ .cx .cx-pl, .cx .cx-pl img, .cx .cx-pl-painel, .cx .cx-pl-nome{ transition: none; } }

/* palco: o percurso nao toca no retrato */
@media (min-width: 901px){ .cx .cx-pl.on img{ left: -1%; height: 90%; } .cx .cx-pl-painel{ width: 47%; padding-left: 20px; } }

/* palco: altura que aguenta o percurso mais longo, e rede de seguranca se mesmo assim nao couber */
@media (min-width: 901px){ .cx .cx-palco{ height: clamp(640px, 60vw, 860px); } .cx .cx-pl-painel{ justify-content: safe center; overflow-y: auto; scrollbar-width: none; } .cx .cx-pl-painel::-webkit-scrollbar{ display: none; } .cx .cx-pl-painel p{ font-size: clamp(.9rem, 1vw, .98rem); line-height: 1.58; } }

@media (min-width: 901px){ .cx .cx-palco{ height: clamp(660px, 60vw, 900px); } .cx .cx-pl.on img{ left: -5%; height: 86%; } .cx .cx-pl-painel{ width: 54%; padding: 32px 36px 32px 16px; } .cx .cx-pl-painel ul{ margin: 16px 0; } .cx .cx-pl-painel li{ padding: 9px 0; } .cx .cx-pl-painel p{ margin-top: 16px; } }

/* palco: o retrato da socia acesa nunca entra na coluna do texto (cabe nos 46% da esquerda) */
@media (min-width: 901px){ .cx .cx-pl.on img{ left: 0; width: 46%; height: 88%; object-fit: contain; object-position: left bottom; } }

/* letras: em janelas muito largas o ponto final ficava cortado */
.cx .vl-masc span{ font-size: min(20.6vw, 326px); }

/* janela: o titulo parte-se em TRES linhas, como ela as escreveu (19-09) */
.vj h2.vj-3l{ max-width: none; text-wrap: nowrap; }
.vj h2.vj-3l span{ display: block; }
@media (max-width: 640px){ .vj h2.vj-3l{ text-wrap: balance; white-space: normal; font-size: clamp(30px, 8.6vw, 40px); } }

/* =====================================================================================
   HEROI DA HOME: fundo «de bolsa» (19-09). Vai de lado a lado do ecra, por tras de tudo,
   desliza devagar e desfaz-se para cima, para baixo e atras do titulo (para nao roubar leitura).
   ===================================================================================== */
.pr-cabeca-foto{ position: relative; isolation: isolate; }
.pr-cabeca-foto > *:not(.pr-bolsa){ position: relative; z-index: 1; }
.pr-bolsa{ position: absolute; z-index: 0; top: -40px; bottom: 0; left: calc(50% - var(--lj, 100vw) / 2); width: var(--lj, 100vw); overflow: hidden; pointer-events: none; opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 74%, transparent 100%), linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.55) 38%, #000 62%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 74%, transparent 100%), linear-gradient(90deg, rgba(0,0,0,.35) 0, rgba(0,0,0,.55) 38%, #000 62%); mask-composite: intersect; }
.pr-bolsa svg{ display: block; height: 100%; width: auto; min-width: 200%; animation: bolsa-corre 90s linear infinite; will-change: transform; }
@keyframes bolsa-corre{ to{ transform: translateX(-50%); } }
@media (max-width: 980px){ .pr-bolsa{ left: -28px; right: -28px; width: auto; opacity: .26; } }
@media (prefers-reduced-motion: reduce){ .pr-bolsa svg{ animation: none; } }

/* o heroi tem de ser o contentor do fundo de bolsa (uma regra mais forte deixava-o estatico) */
.pr-wrap header.pr-cabeca.pr-cabeca-foto{ position: relative; isolation: isolate; }

/* fundo de bolsa MAIS DISCRETO (pedido dela, 19-09): era .34 no computador e .26 no telemovel */
.pr-bolsa{ opacity: .16; }
@media (max-width: 980px){ .pr-bolsa{ opacity: .12; } }

/* fundo de bolsa ainda mais discreto (segundo pedido dela, 19-09) */
.pr-bolsa{ opacity: .10; }
@media (max-width: 980px){ .pr-bolsa{ opacity: .08; } }

/* titulo de #modelo em DUAS linhas, como ela o escreveu (a marca « // » no copy.md parte a linha) */
.cx h2.pr-h2-2l{ max-width: none; text-wrap: nowrap; }
@media (max-width: 760px){ .cx h2.pr-h2-2l{ text-wrap: balance; white-space: normal; } .cx h2.pr-h2-2l br{ display: none; } }

/* o titulo em duas linhas nao encolhe (senao a animacao que o abre cortava o fim da segunda linha) */
@media (min-width: 761px){ .cx .pr-sec-head h2.pr-h2-2l{ flex: none; width: max-content; max-width: 100%; } }

/* pagina dos casos: indice por setor no topo da zona clara (19-09, passaram a ser nove casos) */
.cx > .cx-casos-idx{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 44px max(28px, calc(var(--lj) / 2 - 592px)) 0; background: #FAF7F0; }
.cx-casos-idx span{ flex: 0 0 100%; margin-bottom: 6px; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; }
.cx-casos-idx a{ display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #FFFDF8; box-shadow: var(--sombra-1); font-weight: 600; font-size: .95rem; color: #14130C; text-decoration: none; transition: transform .35s var(--fx), background .25s; }
.cx-casos-idx a b{ font: 600 11px/1 'JetBrains Mono', monospace; padding: 6px 8px; border-radius: 999px; background: #F4DF48; }
.cx-casos-idx a:hover{ transform: translateY(-2px); background: #14130C; color: #F7F7F9; }

/* quebra de linha pedida no titulo (marca « // »): no computador o titulo nao encolhe; no telemovel quebra sozinho */
@media (min-width: 761px){ .cx .pr-sec-head h2:has(br.q2l){ flex: none; max-width: none; text-wrap: nowrap; } }
@media (max-width: 760px){ br.q2l{ display: none; } }

/* triptico: ALGARISMOS GRANDES com contorno amarelo por cima de cada video (pedido dela, captura 165328),
   e os titulos medem-se pela largura do painel para «acompanhamento» nao ficar cortado */
.cx .vt-pn{ container-type: inline-size; }
.cx .vt-n{ left: 22px; top: 16px; font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: min(34cqw, 132px); line-height: .9; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px #F4DF48; text-shadow: 0 0 40px rgba(244,223,72,.18); transition: -webkit-text-stroke-color .5s, color .5s; }
.cx .vt-pn.on .vt-n, .cx .vt-pn:hover .vt-n{ color: rgba(244,223,72,.16); }
.cx .vt-c h3{ font-size: clamp(18px, 10.4cqw, 34px); overflow-wrap: anywhere; hyphens: manual; }
.cx .vt-pn.on .vt-c h3, .cx .vt-pn:hover .vt-c h3{ font-size: clamp(22px, 5.6cqw, 36px); }
.cx .vt-pn:not(.on):not(:hover) .vt-c h3{ font-size: clamp(17px, 9.2cqw, 32px); letter-spacing: -.04em; }

/* =====================================================================================
   «A CONVERSA» na faixa amarela das paginas de venda (19-09): mensagens que se escrevem em ciclo
   ===================================================================================== */
.cx > section.cx-faixa.cx-faixa-duo{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cx-conv{ display: flex; flex-direction: column; gap: 14px; justify-content: center; min-height: 300px; }
.cx-bl{ max-width: 84%; padding: 16px 20px; border-radius: 22px; font-size: 1.06rem; line-height: 1.4; font-weight: 600; opacity: 0; transform: translateY(14px) scale(.97); animation: cx-aparece 9s var(--fx) infinite; }
.cx-bl-p{ align-self: flex-end; background: #14130C; color: #F7F7F9; border-bottom-right-radius: 6px; }
.cx-bl-r{ align-self: flex-start; background: #FFFBE0; color: #14130C; border-bottom-left-radius: 6px; box-shadow: 0 18px 40px -22px rgba(20,19,12,.55); }
.cx > section.cx-faixa .cx-bl small{ all: unset; display: block; margin-bottom: 8px; font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.cx-bl:nth-child(1){ animation-delay: 0s; } .cx-bl:nth-child(2){ animation-delay: 1.6s; } .cx-bl:nth-child(3){ animation-delay: 3.4s; }
@keyframes cx-aparece{ 0%{ opacity: 0; transform: translateY(14px) scale(.97); } 6%, 78%{ opacity: 1; transform: none; } 86%, 100%{ opacity: 0; transform: translateY(-8px); } }
.cx-mini{ display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: 12px; }
.cx-mini i{ flex: 1; background: #14130C; border-radius: 3px 3px 0 0; transform-origin: 50% 100%; animation: cx-sobe 9s var(--fx) infinite; animation-delay: 3.9s; transform: scaleY(0); }
.cx-mini i:nth-child(1){ height: 34%; } .cx-mini i:nth-child(2){ height: 52%; } .cx-mini i:nth-child(3){ height: 44%; } .cx-mini i:nth-child(4){ height: 70%; } .cx-mini i:nth-child(5){ height: 62%; background: #8A7600; } .cx-mini i:nth-child(6){ height: 100%; background: #8A7600; }
@keyframes cx-sobe{ 0%{ transform: scaleY(0); } 8%, 78%{ transform: scaleY(1); } 86%, 100%{ transform: scaleY(0); } }
.cx-pontos{ display: inline-flex; gap: 5px; margin-left: 6px; } .cx-pontos b{ width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: cx-pisca 1.2s infinite; }
.cx-pontos b:nth-child(2){ animation-delay: .2s; } .cx-pontos b:nth-child(3){ animation-delay: .4s; }
@keyframes cx-pisca{ 0%, 60%, 100%{ opacity: .25; } 30%{ opacity: 1; } }
@media (max-width: 900px){ .cx > section.cx-faixa.cx-faixa-duo{ grid-template-columns: 1fr; } .cx-conv{ min-height: 0; } .cx-bl{ max-width: 92%; } }
@media (prefers-reduced-motion: reduce){ .cx-bl, .cx-mini i, .cx-pontos b{ animation: none; opacity: 1; transform: none; } .cx-bl:nth-child(2){ display: none; } }

/* =====================================================================================
   «O ESQUEMA» (19-09): tres nos, um fio que corre e um ponto que percorre o caminho
   ===================================================================================== */
.cx > .pr-declaracao.pr-declaracao-duo{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cx-esquema svg{ width: 100%; height: auto; display: block; overflow: visible; }
.cx-esquema .eq-fio{ fill: none; stroke: #14130C; stroke-width: 2.5; stroke-dasharray: 6 9; animation: eq-corre 1.6s linear infinite; }
@keyframes eq-corre{ to{ stroke-dashoffset: -30; } }
.cx-esquema .eq-no{ fill: #14130C; }
.cx-esquema text{ font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; fill: #14130C; }
.cx-esquema .eq-gl{ font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 54px; letter-spacing: -.04em; fill: #F4DF48; text-transform: none; }
.cx-esquema .eq-barra{ fill: #F4DF48; transform-box: fill-box; transform-origin: 50% 100%; animation: eq-sobe 3.2s var(--fx) infinite; }
.cx-esquema .eq-barra:nth-of-type(2){ animation-delay: .15s; } .cx-esquema .eq-barra:nth-of-type(3){ animation-delay: .3s; } .cx-esquema .eq-barra:nth-of-type(4){ animation-delay: .45s; }
@keyframes eq-sobe{ 0%, 12%{ transform: scaleY(.15); } 45%, 88%{ transform: scaleY(1); } 100%{ transform: scaleY(.15); } }
.cx-esquema .eq-visto{ fill: none; stroke: #F4DF48; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; animation: eq-risca 3.2s var(--fx) infinite; }
@keyframes eq-risca{ 0%, 45%{ stroke-dashoffset: 70; } 70%, 92%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 70; } }
.cx-esquema .eq-ponteiro{ animation: eq-roda 3.2s linear infinite; }
@keyframes eq-roda{ to{ transform: rotate(360deg); } }
.cx-esquema .eq-mais{ animation: eq-entra 3.2s var(--fx) infinite; }
@keyframes eq-entra{ 0%, 20%{ opacity: 0; } 45%, 90%{ opacity: 1; } 100%{ opacity: 0; } }
.cx-esquema .eq-viajante{ fill: #FFF6B0; stroke: #14130C; stroke-width: 2.5; offset-path: path('M92 150 C 190 60, 250 240, 330 150 S 470 60, 568 150'); animation: eq-viaja 3.2s linear infinite; }
@keyframes eq-viaja{ from{ offset-distance: 0%; } to{ offset-distance: 100%; } }
@media (max-width: 900px){ .cx > .pr-declaracao.pr-declaracao-duo{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .cx-esquema *{ animation: none !important; } .cx-esquema .eq-visto{ stroke-dashoffset: 0; } .cx-esquema .eq-viajante{ display: none; } }

/* =====================================================================================
   CARTAO DE FECHO AMARELO com a pessoa e o pedido de contacto (19-09)
   ===================================================================================== */
.cx-fecho{ position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; min-height: 520px; padding: clamp(28px, 4.5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); align-items: end;
  background: linear-gradient(160deg, #FFF2A0, #F4DF48 55%, #E9CF2A); color: #14130C; box-shadow: 0 50px 90px -50px rgba(122,108,0,.7); }
.cx-fecho-fig{ position: absolute; z-index: -1; right: 38%; bottom: 0; height: 97%; width: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(60,50,0,.28)); }
.cx-fecho-txt h3{ margin: 0; max-width: 9.5ch; font-size: clamp(34px, 4.2vw, 58px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #14130C; text-wrap: balance; }
.cx-fecho-txt p{ margin: 20px 0 0; max-width: 31ch; font-size: 1.12rem; line-height: 1.55; color: #2B2A16; }
.cx-fecho-acoes{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.pr-btn.cx-fecho-btn, .pr-btn.cx-pedido-btn{ background: #14130C; color: #F4DF48; border: 0; box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); }
.cx-fecho-liga{ font-weight: 700; color: #14130C; text-decoration: none; border-bottom: 2px solid rgba(20,19,12,.5); padding-bottom: 3px; }
.cx-fecho-liga:hover{ border-bottom-color: #14130C; }
.cx-fecho-txt p.cx-fecho-linha{ margin-top: 26px; max-width: none; font: 500 13px/1.6 'JetBrains Mono', monospace; letter-spacing: .08em; color: #3B3712; }
.cx-pedido{ position: relative; background: #FFFDF8; border-radius: 24px; padding: 26px; box-shadow: 0 30px 60px -30px rgba(20,19,12,.5); }
.cx-pedido b{ display: block; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: 4px; color: #14130C; }
.cx-pedido small{ display: block; color: #6B6754; font-size: .9rem; margin-bottom: 18px; }
.cx-pedido input{ display: block; width: 100%; padding: 15px 16px; margin-bottom: 10px; border-radius: 12px; border: 1px solid #DED9CA; background: #FAF7F0; font: 500 15px 'Inter Tight', sans-serif; color: #14130C; }
.cx-pedido input:focus{ outline: 2px solid #14130C; outline-offset: 1px; }
.cx-pedido .pr-btn{ width: 100%; justify-content: center; margin-top: 6px; cursor: pointer; font-family: inherit; }
.cx-pedido em{ display: block; font-style: normal; font-size: .8rem; color: #8A8468; margin-top: 12px; line-height: 1.5; }
.cx-pedido em a{ color: inherit; }
.cx-pedido-ok{ position: absolute; inset: 0; display: grid; place-items: center; border-radius: 24px; background: #FFFDF8; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: #14130C; opacity: 0; pointer-events: none; transition: opacity .4s; }
.cx-pedido.feito .cx-pedido-ok{ opacity: 1; }
@media (max-width: 900px){ .cx-fecho{ grid-template-columns: 1fr; padding-top: 300px; min-height: 0; } .cx-fecho-fig{ right: 50%; translate: 50% 0; top: 16px; bottom: auto; height: 300px; } .cx-fecho-txt h3{ max-width: none; } }

/* =====================================================================================
   CONTACTOS: topo em video, com a regua de contactos na base (19-09)
   ===================================================================================== */
.pr-wrap header.pr-cabeca-interior.vh{ padding-top: 84px; padding-bottom: 40px; }
.vh-janela{ position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-end; background: #0A0A0D; box-shadow: 0 50px 90px -50px rgba(0,0,0,.8); }
.vh-janela video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(1) contrast(1.1) brightness(.75); }
.vh-janela::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,13,.30), rgba(10,10,13,.93) 70%), linear-gradient(0deg, rgba(244,223,72,.20), rgba(244,223,72,.20)); }
.vh-in{ padding: clamp(28px, 4.5vw, 64px) clamp(28px, 4.5vw, 64px) 34px; }
.vh-in h1{ margin: 0; max-width: 15ch; font-size: clamp(40px, 5.6vw, 84px); }
.vh-in .pr-lede{ max-width: 56ch; color: #D6D6DE; }
.vh-regua{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.16); background: rgba(10,10,13,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vh-regua div{ padding: 20px clamp(16px, 2.4vw, 32px); border-right: 1px solid rgba(255,255,255,.12); color: #F7F7F9; font-weight: 700; font-size: .95rem; }
.vh-regua div:last-child{ border: 0; }
.vh-regua small{ display: block; margin-bottom: 8px; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #F4DF48; }
.vh-regua a{ color: inherit; text-decoration: none; }
@media (max-width: 900px){ .vh-regua{ grid-template-columns: 1fr 1fr; } .vh-regua div:nth-child(2){ border-right: 0; } .vh-regua div:nth-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,.12); } }

/* «A AGENDA»: fecho escuro com a semana a' direita (19-09, pagina dos casos de estudo) */
.cx-agenda{ border-radius: 32px; padding: clamp(28px, 4.5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; color: #ADADBA; --foco: #F4DF48;
  background: radial-gradient(70% 90% at 0% 0%, rgba(244,223,72,.16), transparent 60%), linear-gradient(180deg, #1A1A21, #0A0A0D); box-shadow: 0 50px 90px -50px rgba(0,0,0,.8); }
.cx-agenda h3{ margin: 0; font-size: clamp(34px, 4.2vw, 58px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #F7F7F9; text-wrap: balance; }
.cx-agenda p{ margin: 20px 0 30px; max-width: 44ch; font-size: 1.12rem; line-height: 1.55; color: #ADADBA; }
.cx-agenda .pr-btn-ghost{ color: #F7F7F9; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.cx-agenda p.cx-agenda-linha{ margin: 26px 0 0; max-width: none; font: 500 13px/1.6 'JetBrains Mono', monospace; letter-spacing: .08em; color: #8E8E9C; }
.cx-ag{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 24px; padding: 24px; }
.cx-ag-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: #F7F7F9; font-weight: 700; }
.cx-ag-top span{ font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #F4DF48; }
.cx-ag-gr{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cx-ag-d{ padding-bottom: 8px; text-align: center; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #8E8E9C; }
.cx-ag-h{ padding: 12px 0; border-radius: 12px; text-align: center; font: 500 13px/1 'JetBrains Mono', monospace; color: #D6D6DE; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.cx-ag-h.oc{ opacity: .28; text-decoration: line-through; }
.cx-ag-h.esc{ animation: cx-escolhe 6s var(--fx) infinite; }
@keyframes cx-escolhe{ 0%, 30%{ background: rgba(255,255,255,.05); color: #D6D6DE; transform: none; box-shadow: none; } 42%, 88%{ background: #F4DF48; color: #14130C; transform: scale(1.06); box-shadow: 0 12px 30px -10px rgba(244,223,72,.7); } 100%{ background: rgba(255,255,255,.05); color: #D6D6DE; transform: none; } }
.cx-ag-pe{ margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: .9rem; color: #ADADBA; }
.cx-ag-pe i{ width: 8px; height: 8px; border-radius: 50%; background: #F4DF48; box-shadow: 0 0 12px #F4DF48; }
@media (max-width: 900px){ .cx-agenda{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce){ .cx-ag-h.esc{ animation: none; background: #F4DF48; color: #14130C; } }

/* agenda: as horas livres piscam a amarelo A' VEZ (pedido dela), em vez de ser sempre a mesma */
.cx-ag-h.lv{ animation: cx-vez 10.8s var(--fx) infinite; animation-delay: calc(var(--k) * .9s); }
@keyframes cx-vez{ 0%{ background: rgba(255,255,255,.05); color: #D6D6DE; transform: none; box-shadow: none; } 2.5%, 7%{ background: #F4DF48; color: #14130C; transform: scale(1.06); box-shadow: 0 12px 30px -10px rgba(244,223,72,.7); } 10.5%, 100%{ background: rgba(255,255,255,.05); color: #D6D6DE; transform: none; box-shadow: none; } }
@media (prefers-reduced-motion: reduce){ .cx-ag-h.lv{ animation: none; } }
/* cartao amarelo: o titulo nao toca na figura */
.cx-fecho-txt h3{ max-width: 8.4ch; } .cx-fecho-fig{ right: 36%; }
/* =====================================================================================
   RECURSOS (blogue.html), 19-09: topo com «a roleta» e seccao «o arquivo»
   ===================================================================================== */
.cx-rol{ display: flex; align-items: baseline; flex-wrap: wrap; gap: .35em; margin: 34px 0 6px; font-family: 'Inter Tight', sans-serif; font-size: clamp(28px, 4.6vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.cx-rol-fixo{ color: #6E6E7A; }
.cx-rol-janela{ display: inline-block; height: 1.1em; overflow: hidden; border-bottom: 4px solid #F4DF48; padding-right: .2em; }
.cx-rol-fita{ display: flex; flex-direction: column; animation: cx-roda 17.6s var(--fx) infinite; }
.cx-rol-fita b{ display: block; height: 1.1em; white-space: nowrap; color: #F7F7F9; font-weight: 800; }
.cx-rol-topo h1{ max-width: 16ch; }
@media (prefers-reduced-motion: reduce){ .cx-rol-fita{ animation: none; } }

.cx > section#arquivo{ background: #0A0A0D; --titulo: #F7F7F9; --texto: #ADADBA; --foco: #F4DF48; color: #ADADBA; overflow: hidden; }
.cx-arq-in{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cx > section#arquivo h2{ margin: 0; color: #F7F7F9; font-size: clamp(2.2rem, 4.2vw, 4rem); }
.cx > section#arquivo h2 em{ display: block; background: none; padding: 0; margin: 0; color: #F4DF48; }
.cx > section#arquivo p{ margin: 22px 0 0; max-width: 36ch; font-size: 1.12rem; line-height: 1.55; color: #ADADBA; }
.cx-arq{ position: relative; height: 540px; perspective: 1600px; }
.cx-pasta{ position: absolute; left: calc(var(--i) * 5.6%); top: calc(44px + var(--i) * 6px); width: 56%; height: 420px; text-decoration: none; color: #14130C; z-index: calc(var(--i) + 1);
  transform: rotateY(-28deg) translateZ(calc(var(--i) * -2px)); transform-origin: left center; transition: transform .6s var(--fx); }
.cx-aba{ position: absolute; left: 0; top: -30px; height: 34px; padding: 0 16px; display: flex; align-items: center; border-radius: 12px 12px 0 0; background: #F4DF48; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cx-pasta:nth-child(even) .cx-aba{ left: 34%; } .cx-pasta:nth-child(3n) .cx-aba{ left: 60%; background: #FFF2A0; }
.cx-folha{ position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 30px; border-radius: 4px 18px 18px 4px; border-left: 5px solid #F4DF48; background: linear-gradient(180deg, #FFFDF8, #F2EADB); box-shadow: -18px 24px 50px -20px rgba(0,0,0,.75); }
.cx-folha b{ font-size: clamp(1.25rem, 1.7vw, 1.6rem); letter-spacing: -.035em; line-height: 1.1; }
.cx-folha u{ align-self: flex-start; margin-top: 18px; padding-bottom: 3px; text-decoration: none; font-weight: 700; border-bottom: 2px solid #F4DF48; }
.cx-pasta:hover, .cx-pasta:focus-visible{ transform: rotateY(-6deg) translateY(-44px) translateZ(60px); z-index: 30; outline: none; }
@media (max-width: 900px){ .cx-arq-in{ grid-template-columns: 1fr; } .cx-arq{ height: auto; perspective: none; display: grid; gap: 12px; } .cx-pasta, .cx-pasta:hover{ position: relative; left: auto; top: auto; width: auto; height: auto; transform: none; margin-top: 30px; } .cx-folha{ position: relative; padding: 22px; } }
@media (prefers-reduced-motion: reduce){ .cx-pasta{ transition: none; } }

/* =====================================================================================
   CASOS DE ESTUDO: «A LOMBADA» (19-09). Lombada escura de alto a baixo em cada caso.
   ===================================================================================== */
.cx > section.cx-casop{ --lomb: clamp(96px, 10.5vw, 150px); overflow: hidden; padding-left: calc(max(28px, calc(var(--lj) / 2 - 592px)) + var(--lomb) + clamp(24px, 3vw, 44px)); }
.cx-lomb{ position: absolute; left: 0; top: 0; bottom: 0; width: calc(max(28px, calc(var(--lj) / 2 - 592px)) + var(--lomb)); display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  padding: 100px 22px 92px 0; background: linear-gradient(90deg, #0A0A0D, #1A1A21); border-right: 5px solid #F4DF48; }
.cx-lomb b{ font-family: 'Inter Tight', sans-serif; font-size: clamp(84px, 9.6vw, 146px); font-weight: 800; letter-spacing: -.07em; line-height: .82; color: transparent; -webkit-text-stroke: 2.5px #F4DF48; }
.cx-lomb span{ writing-mode: vertical-rl; transform: rotate(180deg); font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: #ADADBA; white-space: nowrap; }
@media (max-width: 860px){
  .cx > section.cx-casop{ padding-left: 28px; padding-top: 170px; }
  .cx-lomb{ right: 0; bottom: auto; width: auto; height: 116px; flex-direction: row; align-items: center; padding: 0 28px; border-right: 0; border-bottom: 5px solid #F4DF48; }
  .cx-lomb b{ font-size: 84px; } .cx-lomb span{ writing-mode: horizontal-tb; transform: none; white-space: normal; text-align: right; }
}
/* topo da pagina dos casos em «arquivo» (19-09) */
.pr-wrap header.pr-cabeca-interior.cx-arq-topo{ padding-bottom: 72px; }
.cx-arq-topo .cx-arq-in{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.cx-arq-topo h1{ font-size: clamp(38px, 4.6vw, 70px); max-width: 12ch; }
.cx-arq-9 .cx-pasta{ left: calc(var(--i) * 5.2%); width: 54%; }
.cx-folha small{ margin-bottom: 12px; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #7A6C00; }
@media (max-width: 900px){ .cx-arq-topo .cx-arq-in{ grid-template-columns: 1fr; } }

/* abas compridas nao saem da pasta */
.cx-aba{ max-width: 96%; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 34px; }
.cx-arq-9 .cx-pasta:nth-child(3n) .cx-aba{ left: auto; right: 0; }

/* seletor de lingua PT · EN na barra de topo (19-09) */
.sessao .ling{ display: inline-flex; align-items: center; margin-right: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .1em; }
.sessao .ling a{ padding: 8px 10px; color: #ADADBA; text-decoration: none; transition: background .2s, color .2s; }
.sessao .ling a[aria-current]{ background: #F4DF48; color: #14130C; pointer-events: none; }
.sessao .ling a:not([aria-current]):hover{ color: #F7F7F9; background: rgba(255,255,255,.08); }
@media (max-width: 880px){ .sessao .ling{ margin-right: 6px; } }

/* «ALGO AO LADO» da faixa de declaracao (19-09): muda de pagina para pagina */
.cx > .pr-declaracao.pr-declaracao-duo > :last-child{ justify-self: end; width: 100%; max-width: 560px; }
/* video emoldurado */
.cx-lv{ position: relative; margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 10; background: #14130C; box-shadow: 0 40px 70px -40px rgba(20,19,12,.75); transform: rotate(1.2deg); }
.cx-lv video{ width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); }
.cx-lv::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(244,223,72,.30), rgba(20,19,12,.10) 45%, rgba(20,19,12,.72)); mix-blend-mode: multiply; pointer-events: none; }
.cx-lv figcaption, .cx-li figcaption{ font: 600 11px/1.3 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cx-lv figcaption{ position: absolute; left: 22px; bottom: 20px; z-index: 1; color: #F4DF48; }
/* icone que se desenha (institucionais) */
.cx-li{ margin: 0; display: flex; align-items: center; gap: 26px; }
.cx-li svg{ flex: 0 0 auto; width: clamp(150px, 17vw, 230px); height: auto; padding: 30px; border-radius: 36px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); box-shadow: 0 40px 70px -40px rgba(20,19,12,.8), 0 0 70px -24px rgba(244,223,72,.55); }
.cx-li path{ fill: none; stroke: #F4DF48; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: li-desenha 5.5s var(--fx) infinite; animation-delay: calc(var(--k) * .45s); }
.cx-li figcaption{ color: #14130C; max-width: 14ch; line-height: 1.5; }
@keyframes li-desenha{ 0%{ stroke-dashoffset: 1; } 30%, 86%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 1; } }
/* comparador A/B */
.cx-cmp{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx-cmp-c{ position: relative; padding: 20px 20px 0; border-radius: 24px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); box-shadow: 0 40px 70px -44px rgba(20,19,12,.8); }
.cx-cmp small, .cx-cmp p, .cx-sem small, .cx-sem p{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cx-cmp small{ color: #ADADBA; }
.cx-cmp-b{ display: flex; align-items: flex-end; gap: 12px; height: 170px; margin-top: 16px; }
.cx-cmp-b i{ flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: #55555F; transform-origin: 50% 100%; animation: cmp-sobe 6s var(--fx) infinite; }
.cx-cmp-b i:nth-child(2){ animation-delay: .15s; } .cx-cmp-b i:nth-child(3){ animation-delay: .3s; }
.cx-cmp-sim .cx-cmp-b i{ animation-name: cmp-sobe, cmp-acende; }
.cx-cmp-sim b{ position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: #F4DF48; opacity: 0; animation: cmp-visto 6s var(--fx) infinite; }
.cx-cmp-sim b::after{ content: ''; position: absolute; left: 8px; top: 5px; width: 7px; height: 12px; border: solid #14130C; border-width: 0 3px 3px 0; transform: rotate(42deg); }
.cx-cmp p{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 12px 0 16px; color: #8E8E9C; text-align: center; font-size: 9px; letter-spacing: .08em; border-top: 1px solid #33333C; }
@keyframes cmp-sobe{ 0%{ transform: scaleY(0); } 22%, 90%{ transform: scaleY(1); } 100%{ transform: scaleY(0); } }
@keyframes cmp-acende{ 0%, 45%{ background: #55555F; } 58%, 90%{ background: #F4DF48; } 100%{ background: #55555F; } }
@keyframes cmp-visto{ 0%, 52%{ opacity: 0; transform: scale(.4); } 62%, 90%{ opacity: 1; transform: scale(1); } 100%{ opacity: 0; } }
/* a semana (outsourcing financeiro) */
.cx-sem{ padding: 26px 26px 22px; border-radius: 28px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); box-shadow: 0 40px 70px -44px rgba(20,19,12,.8); }
.cx-sem p, .cx-sem-l{ display: grid; grid-template-columns: 9.5em repeat(5, 1fr); gap: 8px; align-items: center; margin: 0; }
.cx-sem p{ color: #8E8E9C; text-align: center; margin-bottom: 14px; font-size: 10px; } .cx-sem p span:first-child{ grid-column: 2; }
.cx-sem-l{ margin-top: 10px; } .cx-sem small{ color: #ADADBA; font-size: 10px; line-height: 1.4; }
.cx-sem i{ height: 38px; border-radius: 10px; background: #F4DF48; animation: sem-pisca 5s var(--fx) infinite; animation-delay: calc(var(--l) * .5s + var(--d) * .12s); }
.cx-sem i.off{ background: #26262E; animation: none; }
@keyframes sem-pisca{ 0%{ opacity: .15; transform: scale(.9); } 18%, 88%{ opacity: 1; transform: none; } 100%{ opacity: .15; transform: scale(.9); } }
/* a lista que se risca sozinha (outsourcing administrativo) */
.cx-risca{ list-style: none; margin: 0; padding: 12px 28px; border-radius: 28px; background: #FFFDF7; box-shadow: 0 40px 70px -44px rgba(20,19,12,.55); transform: rotate(-1.2deg); }
.cx-risca li{ position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 0; font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.03em; color: #14130C; }
.cx-risca li + li{ border-top: 1px solid rgba(20,19,12,.12); }
.cx-risca b{ position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; border: 2.5px solid #14130C; animation: rs-caixa 7s var(--fx) infinite; animation-delay: calc(var(--k) * .9s); }
.cx-risca b::after{ content: ''; position: absolute; left: 8px; top: 2px; width: 7px; height: 14px; border: solid #14130C; border-width: 0 3px 3px 0; transform: rotate(42deg); opacity: 0; animation: rs-visto 7s var(--fx) infinite; animation-delay: inherit; }
.cx-risca span{ position: relative; }
.cx-risca span::after{ content: ''; position: absolute; left: 0; top: 54%; height: 2.5px; width: 100%; background: #14130C; transform: scaleX(0); transform-origin: 0 50%; animation: rs-risco 7s var(--fx) infinite; animation-delay: inherit; }
.cx-risca li span{ animation-delay: calc(var(--k) * .9s); } .cx-risca li span::after, .cx-risca li b::after{ animation-delay: calc(var(--k) * .9s); }
@keyframes rs-caixa{ 0%, 8%{ background: transparent; } 16%, 88%{ background: #F4DF48; } 100%{ background: transparent; } }
@keyframes rs-visto{ 0%, 10%{ opacity: 0; } 18%, 88%{ opacity: 1; } 100%{ opacity: 0; } }
@keyframes rs-risco{ 0%, 12%{ transform: scaleX(0); } 24%, 88%{ transform: scaleX(1); } 100%{ transform: scaleX(0); } }
/* os perfis (recrutamento) */
.cx-pf{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.cx-pf-c{ position: relative; padding: 22px 18px 24px; border-radius: 22px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); box-shadow: 0 40px 70px -44px rgba(20,19,12,.8); animation: pf-escolhe 9s var(--fx) infinite; animation-delay: calc(var(--k) * 3s); }
.cx-pf-c i{ display: block; width: 46px; height: 46px; border-radius: 50%; background: #3A3A44; margin-bottom: 18px; }
.cx-pf-c span{ display: block; height: 8px; border-radius: 4px; background: #33333C; margin-top: 9px; } .cx-pf-c span:nth-of-type(2){ width: 72%; } .cx-pf-c span:nth-of-type(3){ width: 48%; }
.cx-pf-c b{ position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; background: #F4DF48; opacity: 0; animation: pf-visto 9s var(--fx) infinite; animation-delay: inherit; }
.cx-pf-c b::after{ content: ''; position: absolute; left: 8px; top: 5px; width: 7px; height: 12px; border: solid #14130C; border-width: 0 3px 3px 0; transform: rotate(42deg); }
@keyframes pf-escolhe{ 0%, 4%{ transform: none; box-shadow: 0 40px 70px -44px rgba(20,19,12,.8); } 10%, 28%{ transform: translateY(-16px); box-shadow: 0 40px 70px -40px rgba(20,19,12,.8), 0 0 0 2.5px #14130C, 0 0 60px -12px rgba(255,255,255,.9); } 34%, 100%{ transform: none; } }
@keyframes pf-visto{ 0%, 6%{ opacity: 0; transform: scale(.4); } 12%, 28%{ opacity: 1; transform: scale(1); } 34%, 100%{ opacity: 0; } }
@media (max-width: 900px){ .cx > .pr-declaracao.pr-declaracao-duo > :last-child{ justify-self: start; } .cx-lv, .cx-risca{ transform: none; } .cx-sem p, .cx-sem-l{ grid-template-columns: 6.5em repeat(5, 1fr); } }
@media (prefers-reduced-motion: reduce){ .cx-li path{ animation: none; stroke-dashoffset: 0; } .cx-cmp *, .cx-sem i, .cx-risca *, .cx-risca *::after, .cx-pf-c, .cx-pf-c b{ animation: none !important; } .cx-cmp-b i{ transform: none; } .cx-risca b{ background: #F4DF48; } .cx-risca b::after{ opacity: 1; } }
/* icone: um traco de base sempre visivel, para o mosaico nunca ficar vazio entre ciclos; legenda com peso de titulo */
.cx-li path.b{ stroke: rgba(244,223,72,.22); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.cx-li figcaption{ font: 800 clamp(22px, 2.1vw, 30px)/1.05 'Inter Tight', sans-serif; letter-spacing: -.04em; text-transform: none; max-width: 9ch; }
@media (max-width: 560px){ .cx-li{ gap: 18px; } .cx-li svg{ width: 120px; padding: 22px; border-radius: 28px; } }

/* PEDIR ORCAMENTO (19-09): formulario claro em tres blocos + resumo escuro que acompanha */
.cx > section.orc-sec{ padding-top: 72px; }
.orc{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
.orc-form{ background: #FFFDF7; border-radius: 32px; padding: clamp(26px, 3.2vw, 48px); box-shadow: 0 50px 90px -60px rgba(20,19,12,.55); }
.orc fieldset{ border: 0; margin: 0 0 40px; padding: 0; min-width: 0; }
.orc legend{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0; margin-bottom: 20px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.04em; color: #14130C; }
.orc legend small, .orc-campo small{ font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #8A8468; }
.orc-chips{ display: flex; flex-wrap: wrap; gap: 10px; border-radius: 18px; }
.orc-chips label{ position: relative; cursor: pointer; }
.orc-chips input{ position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.orc-chips span{ display: block; padding: 13px 18px; border-radius: 999px; border: 1.5px solid rgba(20,19,12,.2); background: #fff; font-size: 15.5px; font-weight: 600; color: #3B392F; transition: background .2s, color .2s, border-color .2s, transform .3s var(--fx); }
.orc-chips label:hover span{ border-color: #14130C; transform: translateY(-2px); }
.orc-chips input:checked + span{ background: #14130C; border-color: #14130C; color: #F4DF48; }
.orc-chips input:focus-visible + span{ outline: 3px solid #F4DF48; outline-offset: 2px; }
.orc-grelha{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.orc-campo{ display: flex; flex-direction: column; gap: 9px; font: 600 11px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.orc-grelha + .orc-campo{ margin-top: 16px; }
.orc-campo input, .orc-campo select, .orc-campo textarea{ width: 100%; padding: 15px 16px; border-radius: 14px; border: 1.5px solid rgba(20,19,12,.2); background: #fff; font: 500 16px/1.4 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #14130C; transition: border-color .2s, box-shadow .2s; }
.orc-campo textarea{ resize: vertical; }
.orc-campo input:focus, .orc-campo select:focus, .orc-campo textarea:focus{ outline: 0; border-color: #14130C; box-shadow: 0 0 0 4px rgba(244,223,72,.7); }
.orc-rot{ margin: 26px 0 12px; font: 600 11px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.orc-consent{ display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; padding: 6px; border-radius: 12px; font-size: 15px; color: #4A483F; cursor: pointer; }
.orc-consent input{ width: 20px; height: 20px; margin: 1px 0 0; accent-color: #14130C; flex: 0 0 auto; }
.orc-consent a{ color: #14130C; font-weight: 600; }
.orc .pr-btn-primary{ background: #14130C; color: #F4DF48; box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); }
.orc .pr-btn-primary[disabled]{ opacity: .6; cursor: default; }
.orc-aviso{ margin: 16px 0 0; font-size: 13px; color: #8A8468; }
.orc-erro{ margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #FBE3DC; color: #7A1F0A; font-weight: 600; font-size: 15px; }
.orc-falta, .orc-campo .orc-falta{ border-color: #C43D1B !important; box-shadow: 0 0 0 4px rgba(196,61,27,.16); border-radius: 14px; }
.orc-resumo{ position: sticky; top: 96px; border-radius: 32px; padding: 34px 32px 32px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; box-shadow: 0 50px 90px -50px rgba(20,19,12,.85); }
.orc-et{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #F4DF48; }
.orc-barra{ height: 5px; margin: 18px 0 8px; border-radius: 3px; background: #26262E; overflow: hidden; }
.orc-barra i{ display: block; height: 100%; width: 0; background: #F4DF48; border-radius: 3px; transition: width .6s var(--fx); }
.orc-resumo dl{ margin: 0; } .orc-resumo dl div{ padding: 18px 0; border-bottom: 1px solid #26262E; }
.orc-resumo dt{ font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8E8E9C; margin-bottom: 9px; }
.orc-resumo dd{ margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; color: #55555F; transition: color .3s; }
.orc-resumo dd.on{ color: #F7F7F9; }
.orc-nota{ margin: 22px 0 0; font-size: 14.5px; line-height: 1.55; color: #ADADBA; }
.orc-feito{ margin-top: 22px; padding: 18px 20px; border-radius: 18px; background: #F4DF48; color: #14130C; }
.orc-feito b{ display: block; font-size: 19px; letter-spacing: -.03em; margin-bottom: 4px; } .orc-feito span{ font-size: 15px; }
@media (max-width: 980px){ .orc{ grid-template-columns: 1fr; } .orc-resumo{ position: static; } }
@media (max-width: 560px){ .orc-grelha{ grid-template-columns: 1fr; } .orc-form{ border-radius: 24px; } .orc-chips span{ padding: 12px 15px; font-size: 15px; } }

/* CATALOGO DE FORMACAO (19-09) */
.fm-filtros{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.fm-filtros button{ padding: 11px 16px; border-radius: 999px; border: 1.5px solid rgba(20,19,12,.2); background: transparent; font: 600 11.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #4A483F; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.fm-filtros button:hover{ border-color: #14130C; } .fm-filtros button.on{ background: #14130C; border-color: #14130C; color: #F4DF48; }
.fm-c{ background: #FFFDF7; border-radius: 24px; margin-bottom: 10px; box-shadow: 0 24px 50px -40px rgba(20,19,12,.5); transition: box-shadow .3s; }
.fm-c[open]{ box-shadow: 0 40px 80px -50px rgba(20,19,12,.7), inset 5px 0 0 #F4DF48; }
.fm-c summary{ list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 22px 28px; cursor: pointer; }
.fm-c summary::-webkit-details-marker{ display: none; }
.fm-c summary::after{ content: '+'; font-size: 28px; font-weight: 400; line-height: 1; color: #14130C; transition: transform .35s var(--fx); }
.fm-c[open] summary::after{ transform: rotate(45deg); }
.fm-nome{ font-size: clamp(20px, 2vw, 28px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; color: #14130C; }
.fm-tags{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fm-tags i{ font: 600 10.5px/1 'JetBrains Mono', monospace; font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px; border-radius: 999px; background: rgba(20,19,12,.07); color: #4A483F; white-space: nowrap; }
.fm-tags i.fm-novo{ background: #F4DF48; color: #14130C; } .fm-tags i.fm-gab{ background: #14130C; color: #F4DF48; }
.fm-in{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding: 6px 28px 34px 28px; }
.fm-resumo{ margin: 0 0 22px; font-size: 18px; line-height: 1.55; color: #14130C; font-weight: 500; }
.fm-para{ margin: 0 0 16px; font-size: 15.5px; line-height: 1.55; color: #4A483F; }
.fm-para b, .fm-prog > b{ display: block; font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8A8468; margin-bottom: 8px; }
.fm-in .pr-btn-primary, .fm-dlg .pr-btn-primary{ margin-top: 10px; background: #14130C; color: #F4DF48; box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); }
.fm-prog{ padding: 24px 26px; border-radius: 20px; background: #F2EADB; }
.fm-prog ol{ margin: 0; padding: 0; list-style: none; counter-reset: fm; }
.fm-prog li{ counter-increment: fm; display: grid; grid-template-columns: 2.2em 1fr; padding: 11px 0; font-size: 16px; line-height: 1.45; color: #14130C; font-weight: 500; }
.fm-prog li + li{ border-top: 1px solid rgba(20,19,12,.12); }
.fm-prog li::before{ content: counter(fm, decimal-leading-zero); font: 600 11px/1.9 'JetBrains Mono', monospace; color: #8A8468; }
.fm-dlg{ border: 0; padding: 0; border-radius: 28px; width: min(520px, calc(100vw - 32px)); background: #FFFDF7; color: #14130C; box-shadow: 0 60px 120px -40px rgba(0,0,0,.7); }
.fm-dlg::backdrop{ background: rgba(10,10,13,.62); backdrop-filter: blur(4px); }
.fm-dlg-in{ position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 34px 30px; }
.fm-et{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8A8468; }
.fm-dlg h3{ margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.045em; line-height: 1.05; padding-right: 30px; }
.fm-dlg label{ display: flex; flex-direction: column; gap: 8px; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.fm-dlg input[type="text"], .fm-dlg input[type="email"], .fm-dlg select{ padding: 14px 15px; border-radius: 13px; border: 1.5px solid rgba(20,19,12,.2); background: #fff; font: 500 16px/1.3 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #14130C; }
.fm-dlg input:focus, .fm-dlg select:focus{ outline: 0; border-color: #14130C; box-shadow: 0 0 0 4px rgba(244,223,72,.7); }
.fm-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fm-dlg label.fm-consent{ flex-direction: row; gap: 10px; align-items: flex-start; font: 500 14px/1.45 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #4A483F; }
.fm-consent input{ width: 18px; height: 18px; margin: 1px 0 0; accent-color: #14130C; flex: 0 0 auto; } .fm-consent a{ color: #14130C; font-weight: 600; }
.fm-x{ position: absolute; top: 18px; right: 20px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(20,19,12,.07); font-size: 24px; line-height: 1; cursor: pointer; color: #14130C; }
.fm-aviso{ margin: 0; font-size: 12.5px; color: #8A8468; }
@media (max-width: 860px){ .fm-in{ grid-template-columns: 1fr; padding: 0 20px 26px; } .fm-c summary{ grid-template-columns: auto minmax(0, 1fr) auto; padding: 18px 20px; gap: 12px; } .fm-tags{ grid-column: 2 / -1; grid-row: 2; justify-content: flex-start; } }

/* ADN · a historia em linha do tempo (19-09) */
.cx-hist{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.cx-hist li{ position: relative; padding: 34px 0 44px; border-top: 2.5px solid #14130C; }
.cx-hist li::before{ content: ''; position: absolute; top: -10px; left: 0; width: 17px; height: 17px; border-radius: 50%; background: #F4DF48; border: 3px solid #14130C; }
.cx-hist b{ display: block; font-size: clamp(44px, 5vw, 76px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: transparent; -webkit-text-stroke: 2px #14130C; margin-bottom: 18px; white-space: nowrap; }
.cx-hist li.cx-hist-hoje b{ color: #14130C; -webkit-text-stroke: 0; background: linear-gradient(transparent 58%, #F4DF48 58%); display: inline-block; }
.cx-hist p{ margin: 0; font-size: 16.5px; line-height: 1.6; color: #3B392F; max-width: 38ch; }
@media (max-width: 900px){ .cx-hist{ grid-template-columns: 1fr; } .cx-hist li{ padding: 28px 0 34px; } }
.orc-outro{ margin-top: 14px; max-width: 420px; } .orc-outro[hidden]{ display: none; }

/* «A REGUA» dos modelos de pagamento (19-09) */
.cx-regua{ --x: 10%; }
.cx-rg-pontas{ display: flex; justify-content: space-between; margin-bottom: 22px; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #6B6754; }
.cx-rg-trilho{ position: relative; height: 78px; }
.cx-rg-trilho::before{ content: ''; position: absolute; left: 0; right: 0; top: 40px; height: 3px; background: repeating-linear-gradient(90deg, rgba(20,19,12,.35) 0 2px, transparent 2px 14px); }
.cx-rg-p{ position: absolute; top: 0; width: 20%; transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; text-align: center; font: inherit; }
.cx-rg-p span{ display: flex; align-items: flex-end; justify-content: center; height: 28px; font-weight: 800; letter-spacing: -.03em; font-size: clamp(13px, 1.35vw, 19px); line-height: 1.05; color: rgba(20,19,12,.42); transition: color .3s; }
.cx-rg-p::after{ content: ''; display: block; width: 14px; height: 14px; margin: 6px auto 0; border-radius: 50%; background: #F2EADB; border: 3px solid rgba(20,19,12,.45); }
.cx-rg-p.on span, .cx-rg-p:hover span{ color: #14130C; }
.cx-rg-p:focus-visible{ outline: 3px solid #14130C; outline-offset: 4px; border-radius: 10px; }
.cx-rg-bola{ position: absolute; top: 24px; left: var(--x); width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: #F4DF48; border: 4px solid #14130C; box-shadow: 0 0 0 10px rgba(244,223,72,.35), 0 16px 30px -10px rgba(20,19,12,.6); transition: left .9s var(--fx); pointer-events: none; }
.cx-rg-cartao{ position: relative; margin-top: 38px; border-radius: 32px; background: #FFFDF7; padding: 40px 44px; display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; box-shadow: 0 50px 80px -56px rgba(20,19,12,.6); }
.cx-rg-cartao::before{ content: ''; position: absolute; top: -13px; left: var(--x); width: 26px; height: 26px; margin-left: -13px; background: #FFFDF7; transform: rotate(45deg); transition: left .9s var(--fx); }
.cx-rg-num{ font-size: clamp(90px, 10vw, 150px); font-weight: 800; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 2.5px #14130C; }
.cx-rg-cartao h3{ margin: 0 0 12px; font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #14130C; }
.cx-rg-cartao p{ margin: 0; font-size: 18px; line-height: 1.6; color: #4A483F; max-width: 56ch; min-height: 3.2em; }
.cx-rg-troca{ animation: cx-rg-troca .55s var(--fx); } @keyframes cx-rg-troca{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
/* a lista completa fica no HTML (leitores de ecra, motores de busca, sem JavaScript); com a regua viva, esconde-se a' vista */
.cx-rg-lista{ margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; color: #4A483F; }
.cx-regua.viva .cx-rg-lista{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px){
  /* no telemovel a regua deita-se: as paragens passam a botoes em linha, que se deslizam com o dedo */
  .cx-rg-pontas{ display: none; } .cx-rg-trilho{ height: auto; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; } .cx-rg-trilho::before, .cx-rg-bola, .cx-rg-cartao::before{ display: none; }
  .cx-rg-p{ position: static; transform: none; width: auto; flex: 0 0 auto; } .cx-rg-p::after{ display: none; }
  .cx-rg-p span{ height: auto; padding: 12px 16px; border-radius: 999px; border: 1.5px solid rgba(20,19,12,.25); font-size: 14.5px; white-space: nowrap; } .cx-rg-p.on span{ background: #14130C; border-color: #14130C; color: #F4DF48; }
  .cx-rg-cartao{ margin-top: 18px; grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; border-radius: 24px; } .cx-rg-num{ font-size: 72px; }
}

/* «A TUA FRASE» (paginas de venda) e «AS ETAPAS» (paginas de servico) · 19-09 */
.cx-troca{ animation: cx-troca .55s var(--fx); } @keyframes cx-troca{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
.cx-fr{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cx-fr-falas{ display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cx-fr-falas button{ position: relative; max-width: 36ch; padding: 20px 24px; border: 0; border-radius: 24px 24px 24px 6px; background: #FFFDF7; font: 600 18px/1.4 'Inter Tight', sans-serif; text-align: left; color: #4A483F; cursor: pointer; box-shadow: 0 20px 40px -30px rgba(20,19,12,.5); transition: transform .45s var(--fx), background .3s, color .3s; }
.cx-fr-falas button:nth-child(even){ margin-left: 48px; }
.cx-fr-falas button.on{ background: #14130C; color: #F7F7F9; transform: translateX(16px); }
.cx-fr-falas button:focus-visible{ outline: 3px solid #F4DF48; outline-offset: 3px; }
.cx-fr-resp{ border-radius: 32px; background: #F4DF48; padding: 44px 44px 40px; box-shadow: 0 50px 80px -50px rgba(20,19,12,.7); }
.cx-fr-et, .cx-et-et{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cx-fr-et{ color: rgba(20,19,12,.7); }
.cx-fr-resp h3{ margin: 18px 0 16px; font-size: clamp(32px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: .98; color: #14130C; }
.cx-fr-resp p{ margin: 0 0 26px; font-size: 18px; line-height: 1.6; color: #14130C; max-width: 40ch; min-height: 4.8em; }
.cx-fr-resp .pr-btn-primary{ background: #14130C; color: #F4DF48; box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); }
.cx-fr-pts{ display: flex; gap: 8px; margin-top: 30px; } .cx-fr-pts i{ width: 34px; height: 5px; border-radius: 3px; background: rgba(20,19,12,.2); } .cx-fr-pts i.on{ background: #14130C; }
.cx-fr-lista, .cx-et-todas{ margin: 24px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 1.6; color: #4A483F; grid-column: 1 / -1; }
.cx-fr.viva .cx-fr-lista, .cx-et.viva .cx-et-todas{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cx-et{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.cx-et-lista{ display: flex; flex-direction: column; justify-content: center; }
.cx-et-lista button{ display: flex; align-items: baseline; gap: 18px; padding: 22px 0; border: 0; border-top: 1px solid rgba(20,19,12,.16); background: none; text-align: left; cursor: pointer; font: 800 clamp(22px, 2.4vw, 34px)/1.05 'Inter Tight', sans-serif; letter-spacing: -.045em; color: rgba(20,19,12,.38); transition: color .3s, padding .4s var(--fx), box-shadow .3s; }
.cx-et-lista button:last-child{ border-bottom: 1px solid rgba(20,19,12,.16); }
.cx-et-lista small{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; color: inherit; }
.cx-et-lista button.on{ color: #14130C; padding-left: 18px; box-shadow: inset 5px 0 0 #F4DF48; }
.cx-et-lista button:focus-visible{ outline: 3px solid #14130C; outline-offset: 2px; }
.cx-et-painel{ display: flex; flex-direction: column; border-radius: 32px; padding: 36px 36px 30px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; box-shadow: 0 50px 80px -50px rgba(20,19,12,.85); }
.cx-et-et{ color: #F4DF48; } .cx-et-et b{ font-weight: 600; }
.cx-et-painel h3{ margin: 16px 0 12px; font-size: clamp(26px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #F7F7F9; }
.cx-et-painel p{ margin: 0; font-size: 17px; line-height: 1.6; color: #C9C9D2; max-width: 46ch; min-height: 6.4em; }
.cx-et-fio{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; align-items: end; height: 96px; margin-top: auto; padding-top: 26px; border-bottom: 1px solid #33333C; }
.cx-et-fio i{ display: block; height: 22%; border-radius: 6px 6px 0 0; border: 1.5px dashed #55555F; border-bottom: 0; transition: height .7s var(--fx), background .4s, border-color .4s; transition-delay: calc(var(--k) * 26ms); }
.cx-et-fio i.feito{ height: 38%; background: rgba(244,223,72,.32); border-color: transparent; }
.cx-et-fio i.agora{ height: 100%; background: #F4DF48; border-color: transparent; }
.cx-et-eixo{ display: flex; justify-content: space-between; margin-top: 12px; font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8E8E9C; }
@media (max-width: 900px){ .cx-fr, .cx-et{ grid-template-columns: 1fr; } .cx-fr-falas button:nth-child(even){ margin-left: 20px; } .cx-fr-falas button.on{ transform: translateX(8px); } .cx-fr-resp{ padding: 32px 26px; border-radius: 26px; } .cx-et-painel{ padding: 28px 24px; border-radius: 26px; } .cx-et-painel p, .cx-fr-resp p{ min-height: 0; } }

.fm-prog-i{ margin: 0 0 6px; font-size: 15px; color: #4A483F; }
/* algarismo em contorno da regua: o enchimento da cor do cartao tapa os tracos interiores que a fonte variavel deixa a' vista */
.cx-rg-num{ color: #FFFDF7; -webkit-text-stroke: 5px #14130C; paint-order: stroke fill; }

/* TOPO EM VIDEO das paginas de venda (19-09): o mesmo tratamento da «janela» da home */
.pr-wrap header.pr-cabeca-interior.pr-cabeca-video{ position: relative; isolation: isolate; }
.pr-topo-video{ position: absolute; top: 0; bottom: 0; left: 50%; width: var(--lj, 100vw); transform: translateX(-50%); z-index: -1; overflow: hidden; background: #0A0A0D; }
.pr-topo-video video{ display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.82); }
.pr-topo-video::before{ content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,10,13,.95) 0, rgba(10,10,13,.80) 46%, rgba(10,10,13,.30) 100%), linear-gradient(180deg, rgba(10,10,13,.55) 0, rgba(10,10,13,0) 30%, rgba(10,10,13,0) 70%, rgba(10,10,13,.75) 100%); }
.pr-topo-video::after{ content: ''; position: absolute; inset: 0; z-index: 1; background: #F4DF48; mix-blend-mode: multiply; opacity: .55; }
.pr-cabeca-video .pr-provas{ background: rgba(10,10,13,.55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 760px){ .pr-topo-video::before{ background: linear-gradient(180deg, rgba(10,10,13,.82), rgba(10,10,13,.9)); } }

/* CATALOGO DE FORMACAO «QUEM ES» (19-09) */
.fq{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.fq-perfis{ position: sticky; top: 96px; display: flex; flex-direction: column; gap: 10px; }
.fq-eu{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8A8468; margin-bottom: 8px; }
.fq-perfis button{ padding: 20px 24px; border: 0; border-radius: 20px; background: #FFFDF7; font: 700 19px/1.2 'Inter Tight', sans-serif; letter-spacing: -.02em; text-align: left; color: #4A483F; cursor: pointer; box-shadow: 0 20px 40px -32px rgba(20,19,12,.5); transition: transform .4s var(--fx), background .3s, color .3s; }
.fq-perfis button:hover{ color: #14130C; transform: translateX(6px); }
.fq-perfis button.on{ background: #14130C; color: #F4DF48; transform: translateX(14px); }
.fq-perfis button:focus-visible{ outline: 3px solid #F4DF48; outline-offset: 3px; }
.fq-perfis .fq-todos{ background: transparent; box-shadow: none; border: 1.5px dashed rgba(20,19,12,.3); font-size: 16px; }
.fq-res{ display: flex; flex-direction: column; gap: 14px; }
.fq-c{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; padding: 30px 32px; border-radius: 26px; background: #FFFDF7; color: #14130C; box-shadow: 0 40px 70px -56px rgba(20,19,12,.6); scroll-margin-top: 110px; }
.fq-c[hidden]{ display: none; }
.fq-entra{ animation: fq-sobe .6s var(--fx) both; animation-delay: calc(var(--k, 0) * 90ms); } @keyframes fq-sobe{ from{ opacity: 0; transform: translateY(22px); } to{ opacity: 1; transform: none; } }
.fq-num{ font-size: 76px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: #FFFDF7; -webkit-text-stroke: 4px #14130C; paint-order: stroke fill; }
.fq-tag{ display: inline-block; margin-bottom: 12px; font: 600 11px/1.4 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; }
.fq-tag b, .fq-tag i{ font: inherit; } .fq-tag b{ display: none; } .fq:not(.viva) .fq-tag i{ display: none; }
.fq-c h3{ margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.fq-c p{ margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: #4A483F; }
.fq-c summary{ cursor: pointer; font-weight: 700; font-size: 15px; list-style: none; padding: 4px 0 10px; } .fq-c summary::-webkit-details-marker{ display: none; }
.fq-c summary::after{ content: ' +'; } .fq-c details[open] summary::after{ content: ' –'; }
.fq-c ol{ margin: 0 0 8px; padding: 0; list-style: none; counter-reset: fq; }
.fq-c li{ counter-increment: fq; display: grid; grid-template-columns: 2.2em 1fr; padding: 10px 0; font-size: 15.5px; line-height: 1.45; font-weight: 500; border-top: 1px solid rgba(128,128,128,.25); }
.fq-c li::before{ content: counter(fq, decimal-leading-zero); font: 600 11px/1.9 'JetBrains Mono', monospace; opacity: .55; }
.fq-c .pr-btn-primary{ margin-top: 10px; background: #14130C; color: #F4DF48; box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); }
.fq-c.pri{ background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; }
.fq-c.pri p{ color: #C9C9D2; } .fq-c.pri .fq-tag{ color: #F4DF48; } .fq-c.pri .fq-tag b{ display: inline; } .fq-c.pri .fq-tag i{ display: none; }
.fq-c.pri .fq-num{ color: #15151B; -webkit-text-stroke-color: #F4DF48; } .fq-c.pri .pr-btn-primary{ background: #F4DF48; color: #14130C; }
@media (max-width: 900px){ .fq{ grid-template-columns: 1fr; } .fq-perfis{ position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; } .fq-eu{ width: 100%; } .fq-perfis button{ padding: 13px 16px; font-size: 15.5px; border-radius: 999px; } .fq-perfis button.on, .fq-perfis button:hover{ transform: none; } .fq-c{ grid-template-columns: 1fr; gap: 12px; padding: 24px 22px; } .fq-num{ font-size: 54px; } }

/* «AS ESCOTILHAS» da home (19-09) */
.ve{ position: relative; z-index: 2; overflow: hidden; background: #FAF7F0; color: #14130C; padding: clamp(72px, 8vw, 120px) max(28px, calc(var(--lj, 100vw) / 2 - 592px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ve + .cx{ margin-top: 0; border-radius: 0; box-shadow: none; } .ve + .cx > section:first-child{ border-radius: 0; border-top: 1px solid rgba(20,19,12,.1); }
.ve-et{ display: block; margin-bottom: 26px; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; }
.ve h2{ margin: 0; font-size: clamp(34px, 4.6vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #14130C; }
.ve h2 span{ display: block; } .ve h2 em{ font-style: normal; } .ve h2 em span{ display: table; background: linear-gradient(transparent 58%, #F4DF48 58%); }
.ve p{ margin: 28px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.65; color: #4A483F; }
.ve-palco{ position: relative; isolation: isolate; height: clamp(420px, 40vw, 560px); }
.ve-e{ position: absolute; border-radius: 50%; overflow: hidden; background: #14130C; box-shadow: 0 50px 90px -40px rgba(20,19,12,.7), 0 0 0 10px #FAF7F0, 0 0 0 12px #14130C; animation: ve-flutua 9s ease-in-out infinite alternate; }
.ve-e video{ display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.ve-e1{ width: 68%; aspect-ratio: 1; right: 0; top: 0; } .ve-e2{ width: 45%; aspect-ratio: 1; left: 0; top: 38%; animation-delay: -3s; } .ve-e3{ width: 34%; aspect-ratio: 1; right: 18%; bottom: -2%; animation-delay: -6s; }
.ve-e2::after{ content: ''; position: absolute; inset: 0; background: #F4DF48; mix-blend-mode: multiply; }
.ve-sol{ position: absolute; left: 24%; top: 5%; width: 27%; aspect-ratio: 1; border-radius: 50%; background: #F4DF48; z-index: -1; }
@keyframes ve-flutua{ from{ transform: translateY(-10px); } to{ transform: translateY(14px); } }
@media (max-width: 900px){ .ve{ grid-template-columns: 1fr; } .ve-palco{ height: 86vw; max-height: 460px; } }
@media (prefers-reduced-motion: reduce){ .ve-e{ animation: none; } }
/* escotilhas: a toda a largura do ecra, como a janela antiga; e o realce e' marcador, nao texto amarelo */
.ve{ width: var(--lj); margin-left: calc(50% - var(--lj) / 2); }
.ve h2 em, .ve h2 em span{ color: #14130C; -webkit-text-fill-color: #14130C; text-shadow: none; }
.pr-wrap section.ve{ padding: clamp(72px, 8vw, 120px) max(28px, calc(var(--lj, 100vw) / 2 - 592px)); margin-top: 0; margin-bottom: 0; max-width: none; }
.pr-wrap section.ve{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.ve h2{ font-size: clamp(32px, 4.1vw, 60px); } .ve h2 em span{ display: block; width: fit-content; }
@media (min-width: 901px){ .ve h2 span{ white-space: nowrap; } }
@media (max-width: 900px){ .pr-wrap section.ve{ grid-template-columns: 1fr; } }

.orc-se[hidden]{ display: none; } .orc-se .orc-grelha{ margin-top: 0; } .orc-se + .orc-grelha{ margin-top: 16px; } .orc-resumo dd{ overflow-wrap: anywhere; }

/* ADN · «O nosso nome»: a conta 1 × 2 (19-09) */
.cx-conta{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.cx-ct{ position: relative; overflow: hidden; border-radius: 28px; padding: 30px 28px 32px; background: #FFFDF7; box-shadow: 0 40px 70px -56px rgba(20,19,12,.6); display: flex; flex-direction: column; }
.cx-ct-s{ display: block; font-size: clamp(110px, 12vw, 190px); font-weight: 800; letter-spacing: -.07em; line-height: .82; margin: 0 0 26px -6px; color: #FFFDF7; -webkit-text-stroke: 5px #14130C; paint-order: stroke fill; animation: ct-acende 8s var(--fx) infinite; animation-delay: calc(var(--k) * 2s); }
.cx-ct h3{ margin: auto 0 10px; font-size: clamp(21px, 2vw, 28px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: #14130C; }
.cx-ct p{ margin: 0; font-size: 15.5px; line-height: 1.55; color: #4A483F; }
.cx-ct-op{ background: linear-gradient(160deg, #1A1A21, #0A0A0D); } .cx-ct-op h3{ color: #F7F7F9; } .cx-ct-op p{ color: #C9C9D2; }
.cx-ct-op .cx-ct-s{ color: #15151B; -webkit-text-stroke-color: #F4DF48; animation-name: ct-acende-esc; }
.cx-ct-res{ background: #F4DF48; } .cx-ct-res h3, .cx-ct-res p{ color: #14130C; } .cx-ct-res .cx-ct-s{ color: #F4DF48; -webkit-text-stroke-color: #14130C; animation-name: ct-acende-am; }
@keyframes ct-acende{ 0%, 20%, 100%{ color: #FFFDF7; } 5%, 15%{ color: #F4DF48; } }
@keyframes ct-acende-esc{ 0%, 20%, 100%{ color: #15151B; } 5%, 15%{ color: #F4DF48; } }
@keyframes ct-acende-am{ 0%, 20%, 100%{ color: #F4DF48; } 5%, 15%{ color: #14130C; } }
@media (max-width: 1000px){ .cx-conta{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .cx-conta{ grid-template-columns: 1fr; } .cx-ct-s{ font-size: 96px; margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce){ .cx-ct-s{ animation: none; } }
/* a nota dos casos deixou de ser aviso em letra pequena: e' o subtitulo da seccao (19-09) */
.cx .cx-casos-nota{ font: 500 clamp(17px, 1.5vw, 21px)/1.5 'Inter Tight', sans-serif; letter-spacing: -.01em; text-transform: none; color: #4A483F; }
.cx #casos .pr-sec-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .cx #casos .cx-casos-nota{ max-width: none; margin: 0; text-align: left; }

/* RECURSOS · «A REVISTA» (19-09) */
.pr-wrap header.pr-cabeca-interior.cx-rv-capa{ padding-bottom: 64px; }
.cx-rv-ed{ display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 26px 0 0; padding-bottom: 16px; border-bottom: 1px solid #33333C; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8E8E9C; }
.cx-rv-ed b{ color: #F4DF48; font-weight: 600; }
.cx-rv-in{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 80px); align-items: stretch; margin-top: 44px; }
.cx-rv-capa h1{ font-size: clamp(50px, 7.6vw, 120px); letter-spacing: -.065em; line-height: .88; max-width: 9ch; }
.cx-rv-manchete{ display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 440px; padding: 34px 32px 34px; border-radius: 28px; background: #F4DF48; color: #14130C; text-decoration: none; box-shadow: 0 50px 90px -40px rgba(244,223,72,.35); transition: transform .5s var(--fx); }
.cx-rv-manchete:hover{ transform: translateY(-10px) rotate(-.6deg); }
.cx-rv-et{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cx-rv-manchete h2{ margin: 18px 0 14px; font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -.05em; line-height: .98; color: #14130C; }
.cx-rv-manchete p{ margin: 0; font-size: 16.5px; line-height: 1.55; color: #14130C; }
.cx-rv-manchete .pr-btn-primary{ align-self: flex-start; background: #14130C; color: #F4DF48; box-shadow: none; }
.cx-rv-linha{ display: grid; grid-template-columns: 150px minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 30px 0; border-top: 1.5px solid #14130C; color: #14130C; text-decoration: none; transition: padding .45s var(--fx), background .3s; }
.cx-rv-linha:last-child{ border-bottom: 1.5px solid #14130C; }
.cx-rv-linha:hover, .cx-rv-linha:focus-visible{ padding-left: 22px; padding-right: 22px; background: #F4DF48; outline: 0; }
.cx-rv-n{ font-size: 88px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: #FAF7F0; -webkit-text-stroke: 4px #14130C; paint-order: stroke fill; transition: color .3s; }
.cx-rv-linha:hover .cx-rv-n, .cx-rv-linha:focus-visible .cx-rv-n{ color: #F4DF48; }
.cx-rv-linha h3{ margin: 0; font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.cx-rv-linha p{ margin: 0; font-size: 16px; line-height: 1.55; color: #4A483F; } .cx-rv-linha:hover p{ color: #14130C; }
.cx-rv-ir{ font-weight: 700; white-space: nowrap; }
.cx > section.cx-rv-supl{ background: #14130C; color: #F7F7F9; }
.cx > section.cx-rv-supl h2{ color: #F7F7F9; } .cx > section.cx-rv-supl h2 em{ background: none; color: #F4DF48; } .cx > section.cx-rv-supl .pr-sec-note{ color: #ADADBA; }
.cx-rv-gr{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cx-rv-gr a{ display: flex; flex-direction: column; justify-content: space-between; min-height: 250px; padding: 28px 26px 30px; border-radius: 24px; background: linear-gradient(160deg, #1F1F27, #121217); border: 1px solid #2A2A33; color: #F7F7F9; text-decoration: none; transition: transform .45s var(--fx), border-color .3s; }
.cx-rv-gr a:hover, .cx-rv-gr a:focus-visible{ transform: translateY(-8px); border-color: #F4DF48; outline: 0; }
.cx-rv-gr .cx-rv-et, .cx-rv-gr .cx-rv-ir{ color: #F4DF48; }
.cx-rv-gr h3{ margin: 16px 0 10px; font-size: 23px; font-weight: 800; letter-spacing: -.04em; line-height: 1.08; color: #F7F7F9; } .cx-rv-gr p{ margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: #ADADBA; }
.cx > section.cx-rv-fim{ background: #F4DF48; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.cx-rv-fim h2{ margin: 0; font-size: clamp(34px, 4vw, 60px); font-weight: 800; letter-spacing: -.05em; line-height: .98; color: #14130C; }
.cx-rv-fim p{ margin: 0 0 22px; font-size: 18px; line-height: 1.55; color: #14130C; } .cx-rv-fim .pr-btn-primary{ background: #14130C; color: #F4DF48; }
@media (max-width: 900px){ .cx-rv-in, .cx > section.cx-rv-fim{ grid-template-columns: 1fr; } .cx-rv-manchete{ min-height: 0; } .cx-rv-linha{ grid-template-columns: 64px minmax(0, 1fr); gap: 8px 14px; padding: 22px 0; } .cx-rv-n{ font-size: 46px; -webkit-text-stroke-width: 3px; grid-row: span 3; align-self: start; } .cx-rv-linha p, .cx-rv-ir{ grid-column: 2; } .cx-rv-gr{ grid-template-columns: 1fr; } .cx-rv-gr a{ min-height: 0; } }
/* escotilhas retiradas a pedido dela (19-09): fica so' o titulo e o paragrafo, lado a lado */
.pr-wrap section.ve.ve-so{ display: block; }
.ve-so .ve-txt{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.ve-so .ve-txt p{ margin: 0 0 8px; max-width: 52ch; }
@media (max-width: 900px){ .ve-so .ve-txt{ grid-template-columns: 1fr; gap: 24px; } }
/* so' o titulo (19-09): uma coluna, maior */
.ve-so .ve-txt{ display: block; } .ve-so h2{ font-size: clamp(36px, 5.4vw, 84px); }
.pr-wrap section.ve.ve-so{ padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px); }

/* o sublinhado que passa, na frase da faixa (19-09): um troco de cada vez, pela ordem, e recomeca */
.cx-sub{ background: linear-gradient(transparent 60%, #F4DF48 60%) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pr-decl-in.on .cx-sub{ animation: cx-sublinha 10s var(--fx) infinite; animation-delay: calc(.6s + var(--k) * 1.5s); }
@keyframes cx-sublinha{ 0%{ background-size: 0% 100%; } 11%, 82%{ background-size: 100% 100%; } 90%, 100%{ background-size: 0% 100%; background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce){ .pr-decl-in .cx-sub{ animation: none !important; background-size: 100% 100%; } }
/* titulo das FAQ numa linha so' (19-09) */
@media (min-width: 761px){ .cx .pr-faq .pr-sec-head h2{ max-width: none; white-space: nowrap; } }

/* «Também tratamos DISTO»: palavra numa caixa amarela cheia, como ela marcou na captura 184200 (19-09) */
.cx section h2 em.cx-cheio{ background: #F4DF48; background-image: none; padding: 0 .08em; color: #14130C; }
/* algarismos da lista de servicos em pastilha amarela, como os das outras listas (19-09; amarelo so' no texto nao se lia sobre o creme) */
.cx .pr-svc .pr-n{ justify-self: start; align-self: center; padding: 7px 10px; border-radius: 999px; background: #F4DF48; color: #14130C; font-weight: 600; font-size: 11.5px; letter-spacing: .08em; }
/* ligacao da privacidade no cartao de fecho: na linha de baixo, mais pequena e sublinhada (19-09) */
.cx-fecho .cx-priv{ display: block; margin-top: 6px; font-size: .88em; text-decoration: underline; text-underline-offset: 3px; color: inherit; } .cx-fecho .cx-priv:hover{ color: #14130C; }

/* «os numeros viram palavras» no titulo da home (19-09) */
.nm-p{ display: inline-block; white-space: nowrap; } .ve h2 .nm-p, .ve h2 .nm-c{ background: none; width: auto; }
.nm-c{ display: inline-block; text-align: center; }
.nm-c.nm-num{ font-family: 'JetBrains Mono', monospace; font-weight: 600; letter-spacing: 0; font-size: .74em; color: #B9B39A; -webkit-text-fill-color: #B9B39A; }
.ve h2.nm-viva em > span{ background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1.1s var(--fx); }
.ve h2.nm-viva.nm-fim em > span{ background-size: 100% 100%; } .ve h2.nm-viva.nm-fim em > span + span{ transition-delay: .25s; }
/* as letras e as palavras do titulo animado sao em linha (a regra «.ve h2 span{display:block}» apanhava-as e punha uma letra por linha) */
.ve h2 span.nm-p, .ve h2 em span.nm-p, .ve h2 span.nm-c, .ve h2 em span.nm-c{ display: inline-block; background: none; }
.ve h2 span.nm-p, .ve h2 em span.nm-p{ width: auto; white-space: nowrap; }

/* efeito 2 · o marcador que se escreve com o scroll (19-09) */
.cx h2.ms-viva .ms-p{ color: rgba(20,19,12,.16); -webkit-text-fill-color: currentColor; transition: color .25s; } .cx h2.ms-viva .ms-p.on{ color: #14130C; }
.cx h2.ms-viva em{ background-repeat: no-repeat; background-size: var(--r, 0%) 100%; }
.cx h2.ms-viva{ clip-path: none !important; opacity: 1 !important; transform: none !important; }
/* efeito 3 · os numeros a passar por tras do topo do «Pedir orcamento» (19-09) */
.pr-wrap header.pr-cabeca-interior.cx-nf-topo{ position: relative; isolation: isolate; }
.cx-nf{ position: absolute; top: 0; bottom: 0; left: 50%; width: var(--lj, 100vw); transform: translateX(-50%); z-index: -1; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 0; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 55%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 55%); }
.cx-nf div{ white-space: nowrap; font-size: clamp(70px, 9vw, 150px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.09); animation: cx-nf-corre 70s linear infinite; }
.cx-nf div:nth-child(2){ animation-direction: reverse; animation-duration: 85s; -webkit-text-stroke-color: rgba(244,223,72,.34); } .cx-nf div:nth-child(3){ animation-duration: 100s; }
@keyframes cx-nf-corre{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .cx-nf div{ animation: none; } }

/* ADN · a abertura da historia em destaque (19-09) */
.cx-hist-dest{ margin: 0 0 64px; max-width: 30ch; font-size: clamp(26px, 3.1vw, 46px); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; color: rgba(20,19,12,.45); }
.cx-hist-dest span{ display: block; } .cx-hist-dest span + span{ margin-top: .35em; }
.cx-hist-dest .cx-hist-fim{ color: #14130C; width: fit-content; background: linear-gradient(transparent 60%, #F4DF48 60%); -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; }
.cx-hist-dest span:nth-last-child(2){ margin-bottom: .35em; }

/* ADN · LINHA DO TEMPO DINAMICA, na horizontal (19-09) */
.cx-tl{ outline: 0; }
.cx-tl-fio{ position: relative; display: flex; justify-content: space-between; margin: 0 0 44px; padding-top: 6px; }
.cx-tl-fio::before{ content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 3px; background: rgba(20,19,12,.16); }
.cx-tl-barra{ position: absolute; left: 0; top: 14px; height: 3px; width: 0; background: #14130C; transition: width .9s var(--fx); }
.cx-tl-fio button{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .1em; color: rgba(20,19,12,.45); transition: color .3s; }
.cx-tl-fio button:first-child{ align-items: flex-start; } .cx-tl-fio button:last-of-type{ align-items: flex-end; }
.cx-tl-fio button i{ width: 19px; height: 19px; border-radius: 50%; background: #FAF7F0; border: 3px solid rgba(20,19,12,.3); transition: background .3s, border-color .3s, transform .4s var(--fx), box-shadow .3s; }
.cx-tl-fio button.feito i{ background: #14130C; border-color: #14130C; }
.cx-tl-fio button.on{ color: #14130C; } .cx-tl-fio button.on i{ background: #F4DF48; border-color: #14130C; transform: scale(1.35); box-shadow: 0 0 0 8px rgba(244,223,72,.4); }
.cx-tl-fio button:hover{ color: #14130C; } .cx-tl-fio button:focus-visible i{ outline: 3px solid #14130C; outline-offset: 3px; }
.cx-tl-janela{ overflow: hidden; border-radius: 32px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); box-shadow: 0 50px 90px -56px rgba(20,19,12,.85); touch-action: pan-y; }
.cx-tl-pista{ list-style: none; margin: 0; padding: 0; display: flex; transition: transform 1s var(--fx); }
.cx-tl-pista li{ position: relative; flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(36px, 5vw, 72px); color: #F7F7F9; }
.cx-tl-pista li > b{ font-size: clamp(84px, 12.5vw, 200px); font-weight: 800; letter-spacing: -.07em; line-height: .82; white-space: nowrap; color: #15151B; -webkit-text-stroke: 3px #F4DF48; paint-order: stroke fill; opacity: .25; transform: translateX(60px); transition: opacity .9s var(--fx), transform 1.1s var(--fx); }
.cx-tl-pista li.cx-tl-hoje > b{ color: #F4DF48; -webkit-text-stroke: 0; }
.cx-tl-pista li > div{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--fx) .25s, transform .9s var(--fx) .25s; }
.cx-tl-pista li.on > b{ opacity: 1; transform: none; } .cx-tl-pista li.on > div{ opacity: 1; transform: none; }
.cx-tl-n{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: #F4DF48; }
.cx-tl-pista h3{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cx-tl-pista p{ margin: 18px 0 0; font-size: clamp(18px, 1.7vw, 23px); line-height: 1.55; color: #E4E4EA; max-width: 40ch; }
.cx-tl-setas{ display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.cx-tl-setas button{ width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(20,19,12,.3); background: transparent; font-size: 20px; color: #14130C; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.cx-tl-setas button:hover, .cx-tl-setas button:focus-visible{ background: #14130C; border-color: #14130C; color: #F4DF48; outline: 0; }
/* sem JavaScript: os momentos ficam lado a lado e percorrem-se com scroll */
.cx-tl:not(.viva) .cx-tl-janela{ overflow-x: auto; } .cx-tl:not(.viva) .cx-tl-pista li{ flex-basis: 86%; } .cx-tl:not(.viva) .cx-tl-pista li > b, .cx-tl:not(.viva) .cx-tl-pista li > div{ opacity: 1; transform: none; } .cx-tl:not(.viva) .cx-tl-setas{ display: none; }
@media (max-width: 860px){ .cx-tl-fio button span{ display: none; } .cx-tl-fio button.on span{ display: block; position: absolute; top: 34px; white-space: nowrap; } .cx-tl-fio{ margin-bottom: 56px; } .cx-tl-pista li{ grid-template-columns: 1fr; gap: 18px; padding: 32px 26px 36px; } .cx-tl-pista li > b{ font-size: clamp(64px, 19vw, 110px); } .cx-tl-janela{ border-radius: 24px; } }
@media (prefers-reduced-motion: reduce){ .cx-tl-pista, .cx-tl-pista li > b, .cx-tl-pista li > div, .cx-tl-barra{ transition: none; } }

/* anos duplos (2015-2019): o algarismo gigante nao cabia na coluna e passava por cima do texto (reparo dela, 19-09) */
.cx-tl-pista li{ overflow: hidden; } .cx-tl-pista li > b{ min-width: 0; }
.cx-tl-pista li.cx-tl-longo > b{ font-size: clamp(52px, 6.6vw, 104px); letter-spacing: -.06em; }
@media (max-width: 860px){ .cx-tl-pista li.cx-tl-longo > b{ font-size: clamp(44px, 12vw, 76px); } }

/* CARREIRAS · as duas seccoes em abas grandes (19-09) */
.cx > .cx-carr{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 56px max(28px, calc(var(--lj, 100vw) / 2 - 592px)) 0; background: #FAF7F0; }
.cx-carr a{ display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; padding: 26px 30px; border-radius: 24px; background: #FFFDF7; color: #14130C; text-decoration: none; box-shadow: 0 30px 56px -46px rgba(20,19,12,.6); transition: transform .4s var(--fx), background .3s, color .3s; }
.cx-carr a:hover{ transform: translateY(-5px); }
.cx-carr small{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; color: #8A8468; }
.cx-carr b{ font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.cx-carr span{ grid-column: 2; font-size: 15.5px; color: #4A483F; }
.cx-carr a[aria-current]{ background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; box-shadow: 0 40px 70px -46px rgba(20,19,12,.85), inset 0 -5px 0 #F4DF48; } .cx-carr a[aria-current] small{ color: #F4DF48; } .cx-carr a[aria-current] span{ color: #C9C9D2; }
@media (max-width: 700px){ .cx > .cx-carr{ grid-template-columns: 1fr; padding-top: 36px; } }

/* MENU COM SETE ENTRADAS (19-09: entraram Carreiras e Contactos): a barra aperta para caberem todas. O relogio
   «Sessao aberta» so' aparece onde ha' largura de sobra; abaixo de 1240 px a barra aperta mais um pouco. */
nav.menu .mi > a{ padding: 0 13px; gap: 7px; font-size: 11px; letter-spacing: .07em; }
header .marca{ padding: 0 16px 0 22px; }
.sessao{ padding-left: 14px; gap: 10px; } .sessao .btn{ margin-left: 4px; padding: 9px 14px; }
@media (max-width: 1799px){ .sessao .ponto, .sessao .lab, .sessao .hora{ display: none; } }
@media (max-width: 1420px){ nav.menu .mi > a{ padding: 0 10px; gap: 6px; font-size: 10.5px; letter-spacing: .04em; } nav.menu .mi > a .ix{ display: none; } header .marca{ padding: 0 12px 0 18px; } .sessao .btn{ padding: 9px 12px; font-size: 11px; } }
@media (max-width: 1140px){ nav.menu .mi > a{ padding: 0 7px; font-size: 10px; letter-spacing: .02em; } nav.menu .seta{ display: none; } }

/* ADN · «O INTERRUPTOR» (19-09) */
.cx-int-barra{ display: flex; align-items: center; gap: 18px; margin: -12px 0 34px; }
.cx-int-barra span{ font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: rgba(20,19,12,.4); transition: color .3s; } .cx-int-barra span.on{ color: #14130C; }
.cx-int-botao{ position: relative; flex: 0 0 auto; width: 92px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: #CFCBBB; cursor: pointer; transition: background .4s; }
.cx-int-botao i{ position: absolute; top: 5px; left: 5px; width: 38px; height: 38px; border-radius: 50%; background: #FFFDF7; box-shadow: 0 6px 14px -4px rgba(20,19,12,.5); transition: transform .5s var(--fx), background .4s; }
.cx-int-botao:focus-visible{ outline: 3px solid #14130C; outline-offset: 4px; }
.cx-int.ligado .cx-int-botao{ background: #14130C; } .cx-int.ligado .cx-int-botao i{ transform: translateX(44px); background: #F4DF48; }
.cx-int-gr{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cx-int-c{ position: relative; display: grid; min-height: 250px; border-radius: 28px; padding: 30px 30px 32px; overflow: hidden; background: #E4E0D2; color: #6B6754; transition: background .6s var(--fx), color .4s, box-shadow .5s; transition-delay: calc(var(--k) * 80ms); }
.cx-int-l{ grid-area: 1 / 1; transition: opacity .45s, transform .6s var(--fx); transition-delay: calc(var(--k) * 80ms); }
.cx-int-nos{ opacity: 0; transform: translateY(18px); }
.cx-int-et{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.cx-int-c h3{ margin: 14px 0 12px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: inherit; }
.cx-int-c p{ margin: 0; font-size: 16.5px; line-height: 1.55; max-width: 46ch; color: inherit; }
.cx-int-antes h3{ text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(20,19,12,.35); }
.cx-int.ligado .cx-int-c{ background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; box-shadow: 0 40px 70px -50px rgba(20,19,12,.85); }
.cx-int.ligado .cx-int-c:nth-child(4n+2), .cx-int.ligado .cx-int-c:nth-child(4n+3){ background: #F4DF48; color: #14130C; }
.cx-int.ligado .cx-int-antes{ opacity: 0; transform: translateY(-18px); } .cx-int.ligado .cx-int-nos{ opacity: 1; transform: none; }
.cx-int.ligado .cx-int-et{ color: #F4DF48; } .cx-int.ligado .cx-int-c:nth-child(4n+2) .cx-int-et, .cx-int.ligado .cx-int-c:nth-child(4n+3) .cx-int-et{ color: #14130C; }
@media (max-width: 860px){ .cx-int-gr{ grid-template-columns: 1fr; } .cx-int-barra span{ font-size: 16px; } .cx-int-c{ min-height: 0; } }

/* ===== CORRECOES DO QA FUNCIONAL (19-09) ===== */
/* consultoria fiscal no telemovel: o comparador A/B alargava a seccao para 411 px numa janela de 390 */
.cx-cmp{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cx > .pr-declaracao.pr-declaracao-duo > *{ min-width: 0; }
@media (max-width: 480px){ .cx-cmp-c{ padding: 14px 14px 0; } .cx-cmp p{ font-size: 8px; letter-spacing: .02em; gap: 4px; } .cx-cmp-b{ height: 130px; gap: 8px; } }
/* home no telemovel: o texto do cartao amarelo ficava por cima da cara da fotografia */
@media (max-width: 620px){ .cx-vd-cta{ padding-bottom: 270px; } .cx-vd-cta .vd-cta-fig{ top: auto; bottom: 0; height: 250px; right: 50%; translate: 50% 0; } }
/* triptico no telemovel: o algarismo gigante passava por cima do titulo do passo */
@media (max-width: 760px){ .cx .vt-n{ font-size: 56px; top: 14px; } }
/* entre 881 e 1040 px o menu de sete entradas era cortado: sai o botao (a pagina tem-no mais abaixo) e a barra aperta */
@media (min-width: 881px) and (max-width: 1040px){ .sessao .btn{ display: none; } nav.menu .mi > a{ padding: 0 6px; font-size: 9.5px; letter-spacing: 0; } nav.menu .seta{ display: none; } header .marca{ padding: 0 10px 0 14px; } }
/* painel das socias entre 901 e 1200 px: o conteudo que nao cabe passa a ter barra de scroll a' vista */
@media (max-width: 1200px){ .cx-pl-painel{ scrollbar-width: thin; scrollbar-color: #F4DF48 transparent; } }
/* cartao de fecho: o texto e a 2.a acao passavam por cima da fotografia */
.cx-fecho-acoes{ flex-direction: column; align-items: flex-start; }
@media (min-width: 901px) and (max-width: 1200px){ .cx-fecho-txt p{ max-width: 26ch; } .cx-fecho-txt h3{ max-width: 7.4ch; } .cx-fecho-fig{ height: 84%; } }
/* os <button> nao herdavam a letra do site (saiam em Arial) */
button.pr-btn, .pr-btn{ font-family: inherit; }
/* contraste dos estados inativos (mediam 2,4:1) e dos algarismos dos casos da home */
.cx-et-lista button{ color: rgba(20,19,12,.62); } .cx-rg-p span{ color: rgba(20,19,12,.64); } .cx-tl-fio button{ color: rgba(20,19,12,.62); } .cx .cx-caso-n{ color: #6F6A55; }
/* cinco valores: 3 em cima e 2 em baixo, em vez de 4 + 1 sozinho; tres passos: tres colunas */
@media (min-width: 981px){ .cx .pr-duplas:has(> :nth-child(5):last-child){ grid-template-columns: repeat(6, minmax(0, 1fr)); } .cx .pr-duplas:has(> :nth-child(5):last-child) > *{ grid-column: span 2; } .cx .pr-duplas:has(> :nth-child(5):last-child) > :nth-child(n+4){ grid-column: span 3; }
  .cx .pr-lista:has(> :nth-child(3):last-child){ grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx .pr-lista:has(> :nth-child(3):last-child) > *{ grid-column: auto; } }
/* pedir orcamento: os algarismos de fundo ficam fora da zona do texto */
.cx-nf{ -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 46%, #000 78%); mask-image: linear-gradient(90deg, transparent 0, transparent 46%, #000 78%); }
@media (max-width: 760px){ .cx-nf{ opacity: .45; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 38%); mask-image: linear-gradient(180deg, #000 0, transparent 38%); } }
/* arquivo dos casos: abas so' com o numero; o setor abre na pasta ativa (acabam as reticencias e as abas ilegiveis) */
.cx-arq-9 .cx-aba b{ font-weight: inherit; } .cx-arq-9 .cx-aba i{ font-style: normal; display: none; } .cx-arq-9 .cx-pasta:hover .cx-aba i, .cx-arq-9 .cx-pasta:focus-visible .cx-aba i{ display: inline; }
.cx-arq-9 .cx-pasta:hover .cx-aba, .cx-arq-9 .cx-pasta:focus-visible .cx-aba{ max-width: none; overflow: visible; z-index: 3; }
/* regua no telemovel: pista de que ha' mais para o lado */
@media (max-width: 760px){ .cx-rg-trilho{ -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } }
/* o botao do menu vira cruz quando o menu esta' aberto */
#hamb[aria-expanded="true"]{ font-size: 0; } #hamb[aria-expanded="true"]::before{ content: '\00D7'; font-size: 30px; line-height: 1; }
/* alvos de toque do rodape e das migalhas, sem depender de (pointer: coarse) */
@media (max-width: 760px){ footer a, .pr-migalhas a{ display: inline-block; padding-top: 7px; padding-bottom: 7px; } .sessao .ling a{ padding: 12px 12px; } .cx-tl-fio button i{ width: 24px; height: 24px; } }
/* titulos com uma palavra pendurada */
.cx .pr-sec-head h2{ text-wrap: balance; }
/* QA, 2.a volta: o triptico no telemovel ainda tocava no titulo nos paineis 2 e 3; e o cartao de fecho empilha ja' aos 1100 px */
@media (max-width: 760px){ .cx .vt-n{ font-size: 30px; top: 12px; left: 18px; } .cx .vt-pn .vt-c{ padding-top: 46px; } }
@media (max-width: 1100px){ .cx-fecho{ grid-template-columns: 1fr; padding-top: 300px; min-height: 0; } .cx-fecho-fig{ right: 50%; translate: 50% 0; top: 16px; bottom: auto; height: 300px; } .cx-fecho-txt h3, .cx-fecho-txt p{ max-width: none; } }

/* «O BARALHO» (19-09) */
.cx-bar{ display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cx-bar-cont{ display: block; font-size: clamp(90px, 11vw, 170px); font-weight: 800; letter-spacing: -.07em; line-height: .8; color: #FAF7F0; -webkit-text-stroke: 4px #14130C; paint-order: stroke fill; }
.cx-bar-ctr{ display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; }
.cx-bar-ctr button{ width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid rgba(20,19,12,.3); background: transparent; font-size: 20px; color: #14130C; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.cx-bar-ctr button:hover, .cx-bar-ctr button:focus-visible{ background: #14130C; border-color: #14130C; color: #F4DF48; outline: 0; }
.cx-bar-ctr small, .cx-bar-esq p{ font: 600 11px/1.5 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; margin: 0; }
.cx-bar-monte{ position: relative; height: 400px; cursor: pointer; }
.cx-carta{ position: absolute; inset: 0 44px 44px 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 38px 38px 40px; border-radius: 30px; background: #FFFDF7; color: #14130C; box-shadow: 0 40px 70px -46px rgba(20,19,12,.7); transition: transform .8s var(--fx), opacity .6s, background .4s; }
.cx-carta-n{ position: absolute; right: 26px; top: 18px; font-size: 110px; font-weight: 800; letter-spacing: -.07em; line-height: .85; color: transparent; -webkit-text-stroke: 2.5px rgba(20,19,12,.2); }
.cx-carta h3{ position: relative; margin: 0; max-width: 13ch; font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.cx-carta p{ position: relative; margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.55; color: #14130C; }
.cx-bar.viva .cx-carta[data-p="0"]{ z-index: 4; background: #F4DF48; }
.cx-bar.viva .cx-carta[data-p="1"]{ transform: translate(15px, 15px) rotate(1.6deg); z-index: 3; }
.cx-bar.viva .cx-carta[data-p="2"]{ transform: translate(30px, 30px) rotate(3.2deg); z-index: 2; background: #EFEADC; }
.cx-bar.viva .cx-carta[data-p="3"], .cx-bar.viva .cx-carta[data-p="4"], .cx-bar.viva .cx-carta[data-p="5"]{ transform: translate(44px, 44px) rotate(4.8deg); z-index: 1; background: #E4E0D2; }
.cx-bar.viva .cx-carta:not([data-p="0"]) > *{ opacity: 0; }
.cx-bar.viva .cx-carta.sai{ transform: translate(-115%, -30px) rotate(-14deg) !important; opacity: 0; }
.cx-bar:not(.viva) .cx-bar-monte{ height: auto; display: grid; gap: 12px; cursor: default; } .cx-bar:not(.viva) .cx-carta{ position: relative; inset: auto; } .cx-bar:not(.viva) .cx-bar-esq{ display: none; }
@media (max-width: 860px){ .cx-bar{ grid-template-columns: 1fr; } .cx-bar-esq{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cx-bar-cont{ font-size: 72px; -webkit-text-stroke-width: 3px; } .cx-bar-ctr{ margin: 0; } .cx-bar-esq p{ display: none; } .cx-bar-monte{ height: 460px; } .cx-carta{ inset: 0 26px 26px 0; padding: 28px 26px; } .cx-carta-n{ font-size: 72px; } .cx-carta p{ font-size: 16.5px; } }
/* «AS PROVAS»: mosaico com desenhos que se tracam (19-09) */
.cx-pv{ display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-auto-rows: minmax(280px, auto); gap: 14px; }
.cx-pv article{ position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 128px 30px 30px; border-radius: 28px; background: #FFFDF7; color: #14130C; box-shadow: 0 36px 64px -52px rgba(20,19,12,.65); transition: transform .5s var(--fx); }
.cx-pv article:hover{ transform: translateY(-8px); }
.cx-pv article:nth-child(1){ grid-row: span 2; padding-top: 30px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; }
.cx-pv article:nth-child(2){ grid-column: span 2; background: #F4DF48; } .cx-pv article:nth-child(4){ background: #E9EDE4; } .cx-pv article:nth-child(5){ grid-column: 1 / -1; background: #F2EADB; }
.cx-pv svg{ position: absolute; right: 26px; top: 22px; width: 104px; height: 104px; overflow: visible; }
.cx-pv article:nth-child(1) svg{ position: static; width: min(100%, 250px); height: auto; margin: 0 auto auto; padding: 10px 0 30px; }
.cx-pv path{ fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: li-desenha 6s var(--fx) infinite; animation-delay: calc(var(--k) * .5s); }
.cx-pv path.b{ stroke-dasharray: none; stroke-dashoffset: 0; animation: none; opacity: .16; }
.cx-pv article:nth-child(1) path:not(.b){ stroke: #F4DF48; }
.cx-pv-n{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; opacity: .6; }
.cx-pv h3{ margin: 12px 0 10px; max-width: 16ch; font-size: clamp(24px, 2.3vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; color: inherit; }
.cx-pv p{ margin: 0; max-width: 58ch; font-size: 16px; line-height: 1.55; color: inherit; opacity: .85; }
@media (max-width: 900px){ .cx-pv{ grid-template-columns: 1fr; grid-auto-rows: auto; } .cx-pv article:nth-child(n){ grid-column: auto; grid-row: auto; padding-top: 118px; } .cx-pv article:nth-child(1) svg{ position: absolute; width: 104px; padding: 0; margin: 0; } }
@media (prefers-reduced-motion: reduce){ .cx-pv path{ animation: none; stroke-dashoffset: 0; } }
.cx .cx-bar.viva .cx-bar-monte .cx-carta[data-p="0"]{ background: #F4DF48; }

/* ADN · «AS TRES PORTAS» (19-09) */
.cx-trps{ display: flex; gap: 12px; height: 560px; }
.cx-trp{ position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 34px 32px; border-radius: 28px; background: #EFEADC; color: #14130C; cursor: pointer; outline: 0; transition: flex .8s var(--fx), background .4s, color .3s; }
.cx-trp-l{ position: absolute; right: -.06em; bottom: -.2em; font-size: clamp(260px, 30vw, 460px); font-weight: 800; letter-spacing: -.08em; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(20,19,12,.16); pointer-events: none; }
.cx-trp-n{ position: relative; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; opacity: .65; }
.cx-trp h3{ position: relative; margin: 14px 0 0; font-size: clamp(30px, 3.2vw, 48px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: inherit; }
.cx-trp p{ position: relative; margin: 0; max-width: 36ch; font-size: 19px; line-height: 1.55; color: inherit; }
.cx-trp:focus-visible{ box-shadow: 0 0 0 3px #14130C; }
.cx-trps.viva .cx-trp p{ opacity: 0; transform: translateY(16px); transition: opacity .5s .25s, transform .7s var(--fx) .25s; }
.cx-trps.viva .cx-trp.on{ flex: 2.6 1 0; cursor: default; background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; }
.cx-trps.viva .cx-trp:nth-child(2).on{ background: #F4DF48; color: #14130C; }
.cx-trps.viva .cx-trp.on p{ opacity: 1; transform: none; }
.cx-trps.viva .cx-trp.on .cx-trp-n{ color: #F4DF48; opacity: 1; } .cx-trps.viva .cx-trp:nth-child(2).on .cx-trp-n{ color: #14130C; }
.cx-trps.viva .cx-trp.on .cx-trp-l{ -webkit-text-stroke-color: rgba(244,223,72,.5); } .cx-trps.viva .cx-trp:nth-child(2).on .cx-trp-l{ -webkit-text-stroke-color: rgba(20,19,12,.3); }
.cx-trps:not(.viva){ flex-direction: column; height: auto; }
@media (max-width: 900px){ .cx-trps{ flex-direction: column; height: auto; } .cx-trp{ min-height: 96px; padding: 26px 24px; } .cx-trps.viva .cx-trp.on{ min-height: 400px; } .cx-trps.viva .cx-trp:not(.on) p{ display: none; } .cx-trp-l{ font-size: 240px; } }
.cx-trp{ background: #FFFDF7; box-shadow: 0 30px 56px -48px rgba(20,19,12,.55); }

/* «O MANIFESTO» (paginas institucionais, 19-09) */
.cx-man article{ display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: start; padding: 46px 0; border-top: 2.5px solid #14130C; }
.cx-man article:last-child{ border-bottom: 2.5px solid #14130C; }
.cx-man-rot{ position: sticky; top: 110px; display: flex; flex-direction: column; gap: 12px; }
.cx-man-rot b{ font-size: 64px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: #FAF7F0; -webkit-text-stroke: 3px #14130C; paint-order: stroke fill; }
.cx-man-rot span{ font: 600 11px/1.3 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #14130C; }
.cx-man-frase{ margin: 0; max-width: 22ch; font-size: clamp(28px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.045em; line-height: 1.06; color: #14130C; }
.cx-man-frase.ms-viva .ms-p{ color: rgba(20,19,12,.16); transition: color .25s; } .cx-man-frase.ms-viva .ms-p.on{ color: #14130C; }
.cx-man p{ margin: 22px 0 0; max-width: 56ch; font-size: 18px; line-height: 1.6; color: #4A483F; }
@media (max-width: 860px){ .cx-man article{ grid-template-columns: 1fr; padding: 34px 0; } .cx-man-rot{ position: static; flex-direction: row; align-items: baseline; } .cx-man-rot b{ font-size: 46px; } }
/* «A ORBITA» (paginas institucionais, 19-09) */
.cx-orb{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cx-orb-roda{ position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin: 30px auto; }
.cx-orb-anel{ position: absolute; inset: 8%; border-radius: 50%; border: 2.5px dashed rgba(20,19,12,.3); animation: cx-orb-gira 60s linear infinite; }
.cx-orb-centro{ position: absolute; inset: 30%; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F4DF48; font-size: clamp(34px, 4.4vw, 64px); font-weight: 800; letter-spacing: -.05em; box-shadow: 0 40px 70px -30px rgba(20,19,12,.8), 0 0 0 14px rgba(244,223,72,.35); }
.cx-orb-no{ position: absolute; width: 32%; aspect-ratio: 1; margin: -16% 0 0 -16%; padding: 8px; border: 0; border-radius: 50%; background: #FFFDF7; display: grid; place-items: center; text-align: center; font: 800 clamp(13px, 1.25vw, 18px)/1.1 'Inter Tight', sans-serif; letter-spacing: -.02em; color: #14130C; cursor: pointer; box-shadow: 0 26px 50px -30px rgba(20,19,12,.7); transition: background .4s, transform .6s var(--fx); }
.cx-orb-no.on{ background: #F4DF48; transform: scale(1.16); } .cx-orb-no:focus-visible{ outline: 3px solid #14130C; outline-offset: 4px; }
.cx-orb-no:nth-of-type(1){ left: 50%; top: 8%; } .cx-orb-no:nth-of-type(2){ left: 86.4%; top: 71%; } .cx-orb-no:nth-of-type(3){ left: 13.6%; top: 71%; }
@keyframes cx-orb-gira{ to{ transform: rotate(360deg); } }
.cx-orb-et{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8A8468; }
.cx-orb-txt h3{ margin: 16px 0 18px; font-size: clamp(36px, 4.4vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: .95; color: #14130C; }
.cx-orb-txt p{ margin: 0; max-width: 42ch; min-height: 6.4em; font-size: 20px; line-height: 1.6; color: #4A483F; }
.cx-orb-pts{ display: flex; gap: 8px; margin-top: 26px; } .cx-orb-pts i{ width: 40px; height: 5px; border-radius: 3px; background: rgba(20,19,12,.18); } .cx-orb-pts i.on{ background: #14130C; }
.cx-orb-todas{ grid-column: 1 / -1; margin: 20px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 1.6; color: #4A483F; }
.cx-orb.viva .cx-orb-todas{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px){ .cx-orb{ grid-template-columns: 1fr; } .cx-orb-roda{ max-width: 340px; } .cx-orb-txt p{ min-height: 0; } }
@media (prefers-reduced-motion: reduce){ .cx-orb-anel{ animation: none; } }
/* «A TUA PERGUNTA» · fecho do ADN (19-09) */
.cx-perg{ border-radius: 36px; background: #FFFDF7; padding: clamp(36px, 5vw, 76px); box-shadow: 0 60px 110px -70px rgba(20,19,12,.7); }
.cx-perg-et{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8A8468; }
.cx-perg h2{ margin: 18px 0 0; max-width: 16ch; font-size: clamp(36px, 4.8vw, 72px); font-weight: 800; letter-spacing: -.05em; line-height: .98; color: #14130C; }
.cx-perg-linha{ position: relative; display: block; margin: 44px 0 0; padding: 0 0 16px; min-height: 1.9em; border-bottom: 3px solid #14130C; font-size: clamp(22px, 3vw, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; cursor: text; }
.cx-perg-linha input{ position: absolute; inset: 0 0 16px 0; width: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; letter-spacing: inherit; color: #14130C; opacity: 0; }
.cx-perg-linha input:focus, .cx-perg-linha.escrita input{ opacity: 1; }
.cx-perg-ex{ color: #B9B39A; } .cx-perg-ex::after{ content: ''; display: inline-block; width: 3px; height: 1em; margin-left: 4px; vertical-align: -.12em; background: #F4DF48; animation: cx-perg-pisca 1s steps(1) infinite; }
.cx-perg-linha input:focus + .cx-perg-ex, .cx-perg-linha.escrita .cx-perg-ex{ visibility: hidden; }
.cx-perg-linha:focus-within{ border-bottom-color: #F4DF48; box-shadow: 0 3px 0 #14130C; }
@keyframes cx-perg-pisca{ 50%{ opacity: 0; } }
.cx-perg-baixo{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 30px; }
.cx-perg-baixo input{ min-width: 0; padding: 18px 20px; border-radius: 14px; border: 1.5px solid rgba(20,19,12,.22); background: #fff; font: 500 16px/1.3 'Inter Tight', sans-serif; color: #14130C; }
.cx-perg-baixo input:focus{ outline: 0; border-color: #14130C; box-shadow: 0 0 0 4px rgba(244,223,72,.7); }
.cx-perg .pr-btn-primary{ background: #14130C; color: #F4DF48; box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); } .cx-perg .pr-btn-primary[disabled]{ opacity: .7; }
.cx-perg-nota{ margin: 20px 0 0; font-size: 15px; color: #6B6754; } .cx-perg-nota a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px){ .cx-perg-baixo{ grid-template-columns: 1fr; } .cx-perg{ border-radius: 26px; } }

/* contactos por cima de cada mapa (19-09) */
.pr-morada-ct{ display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 18px; }
.pr-morada-ct a{ display: flex; flex-direction: column; gap: 6px; padding: 13px 18px; border-radius: 14px; background: #14130C; color: #F7F7F9; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .3s var(--fx), background .25s, color .25s; }
.pr-morada-ct a:hover, .pr-morada-ct a:focus-visible{ transform: translateY(-3px); background: #F4DF48; color: #14130C; outline: 0; }
.pr-morada-ct small{ font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #F4DF48; } .pr-morada-ct a:hover small, .pr-morada-ct a:focus-visible small{ color: #14130C; }

/* CONTACTOS · topo com a fotografia a' secretaria (19-09) */
.pr-wrap header.pr-cabeca-interior.cx-ctf{ padding-bottom: 0; background-image: radial-gradient(70% 90% at 85% 30%, rgba(244,223,72,.16), transparent 70%); }
.cx-ctf-in{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 84px); align-items: end; }
.cx-ctf-txt{ padding-bottom: 56px; } .cx-ctf h1{ max-width: 11ch; }
.cx-ctf-ret{ position: relative; margin: 0; height: clamp(440px, 44vw, 620px); }
.cx-ctf-ret::before{ content: ''; position: absolute; left: -7%; right: 9%; top: 14%; bottom: 0; border-radius: 36px 36px 0 0; background: #F4DF48; }
.cx-ctf-mold{ position: absolute; left: 4%; right: 0; top: 0; bottom: 0; border-radius: 36px 36px 0 0; overflow: hidden; box-shadow: 0 60px 100px -40px #000; }
.cx-ctf-mold img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: scale(1.04); transition: transform 1.4s var(--fx); }
.cx-ctf-ret:hover .cx-ctf-mold img{ transform: scale(1.09); }
.cx-ctf-balao{ position: absolute; left: -16%; bottom: 22%; max-width: 300px; padding: 18px 22px; border-radius: 22px 22px 6px 22px; background: #FFFDF7; color: #14130C; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; box-shadow: 0 30px 60px -24px #000; animation: cx-ctf-flutua 6s ease-in-out infinite alternate; }
.cx-ctf-balao small{ display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #6B6754; }
.cx-ctf-balao small::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3FBF6B; box-shadow: 0 0 0 4px rgba(63,191,107,.25); }
.cx-ctf-ret figcaption{ position: absolute; right: 18px; bottom: 18px; padding: 12px 16px; border-radius: 14px; background: rgba(10,10,13,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F7F7F9; font-weight: 700; font-size: 15px; }
.cx-ctf-ret figcaption small{ display: block; margin-top: 5px; font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #F4DF48; }
@keyframes cx-ctf-flutua{ from{ transform: translateY(-6px); } to{ transform: translateY(8px); } }
.cx-ctf-regua{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #2A2A33; }
.cx-ctf-regua div{ padding: 22px clamp(14px, 2vw, 28px) 26px 0; color: #F7F7F9; font-weight: 700; font-size: 16px; } .cx-ctf-regua div + div{ padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid #2A2A33; }
.cx-ctf-regua small{ display: block; margin-bottom: 9px; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #F4DF48; } .cx-ctf-regua a{ color: inherit; text-decoration: none; }
@media (max-width: 900px){ .cx-ctf-in{ grid-template-columns: 1fr; } .cx-ctf-txt{ padding-bottom: 8px; } .cx-ctf-ret{ height: 440px; margin-top: 10px; } .cx-ctf-balao{ left: 0; bottom: 16%; max-width: 250px; font-size: 15.5px; } .cx-ctf-regua{ grid-template-columns: 1fr 1fr; } .cx-ctf-regua div{ padding: 16px 12px 18px 0; font-size: 14.5px; } .cx-ctf-regua div:nth-child(odd){ padding-left: 0; border-left: 0; } .cx-ctf-regua div:nth-child(n+3){ border-top: 1px solid #2A2A33; } }
@media (prefers-reduced-motion: reduce){ .cx-ctf-balao{ animation: none; } }

/* contactos: a 2.a frase do titulo em linha propria */
.cx-ctf h1 .pr-lit{ display: block; }
/* «O LIVRO VIVO» (faixa da contabilidade financeira, 19-09) */
.cx-lvv{ position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 32px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; font-family: 'JetBrains Mono', monospace; box-shadow: 0 50px 90px -50px rgba(20,19,12,.85); }
.cx-lvv-barra{ display: flex; gap: 8px; align-items: center; padding: 14px 20px; border-bottom: 1px solid #2A2A33; color: #8E8E9C; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cx-lvv-barra i{ width: 10px; height: 10px; border-radius: 50%; background: #33333C; } .cx-lvv-barra i:first-child{ background: #F4DF48; } .cx-lvv-barra span{ margin-left: 8px; }
.cx-lvv-linhas{ padding: 12px 22px 0; }
.cx-lvv-l{ display: grid; grid-template-columns: 4.5em 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #1D1D24; font-size: clamp(11.5px, 1.05vw, 14px); color: #C9C9D2; opacity: 0; animation: cx-lvv-escreve 10s infinite; animation-delay: calc(var(--k) * .55s); }
.cx-lvv-l small{ font-size: inherit; color: #6F6F7C; } .cx-lvv-l em{ font-style: normal; padding: 5px 9px; border-radius: 999px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; background: #26262E; color: #ADADBA; }
.cx-lvv-l.ob em{ background: #F4DF48; color: #14130C; }
.cx-lvv-nota{ position: absolute; left: 20px; right: 20px; bottom: 18px; padding: 15px 18px; border-radius: 16px; background: #F4DF48; color: #14130C; font: 700 clamp(14.5px, 1.4vw, 18px)/1.3 'Inter Tight', sans-serif; letter-spacing: -.02em; opacity: 0; animation: cx-lvv-nota 10s infinite; }
@keyframes cx-lvv-escreve{ 0%{ opacity: 0; transform: translateX(-10px); } 4%, 88%{ opacity: 1; transform: none; } 96%, 100%{ opacity: 0; } }
@keyframes cx-lvv-nota{ 0%, 58%{ opacity: 0; transform: translateY(16px); } 64%, 90%{ opacity: 1; transform: none; } 97%, 100%{ opacity: 0; } }
@media (max-width: 560px){ .cx-lvv{ aspect-ratio: auto; min-height: 330px; } .cx-lvv-l{ grid-template-columns: 3.6em 1fr auto; gap: 8px; } }
@media (prefers-reduced-motion: reduce){ .cx-lvv-l, .cx-lvv-nota{ animation: none; opacity: 1; } .cx-lvv-nota{ position: static; margin: 14px 20px 18px; } }
/* fotografia da calculadora + passos em linhas grandes (Pedir orcamento, 19-09) */
.cx > section.cx-cw{ display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(30px, 5vw, 90px); align-items: center; overflow: hidden; }
.cx-cw-foto{ position: relative; margin: 0; height: clamp(440px, 44vw, 620px); }
.cx-cw-foto::before{ content: ''; position: absolute; inset: 8% -6% -5% 12%; border-radius: 36px; background: #F4DF48; transform: rotate(3deg); }
.cx-cw-mold{ position: absolute; inset: 0; border-radius: 36px; overflow: hidden; box-shadow: 0 50px 90px -46px rgba(20,19,12,.8); transform: rotate(-2deg); transition: transform .9s var(--fx); }
.cx-cw-foto:hover .cx-cw-mold{ transform: rotate(0); }
.cx-cw-mold img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cx-cw-selo{ position: absolute; right: -7%; bottom: 9%; width: 168px; height: 168px; padding: 20px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: #14130C; color: #F4DF48; font-weight: 800; font-size: 19px; letter-spacing: -.03em; line-height: 1.08; box-shadow: 0 30px 50px -22px rgba(20,19,12,.8); animation: cx-cw-balanca 7s ease-in-out infinite alternate; }
@keyframes cx-cw-balanca{ from{ transform: rotate(-8deg); } to{ transform: rotate(6deg); } }
.cx-cw-intro{ margin: 20px 0 34px; max-width: 44ch; font-size: 18px; line-height: 1.55; color: #4A483F; }
.cx-cw-passo{ display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; padding: 26px 0; border-top: 1.5px solid #14130C; transition: padding .45s var(--fx), background .3s; }
.cx-cw-passo:last-child{ border-bottom: 1.5px solid #14130C; } .cx-cw-passo:hover{ padding-left: 18px; padding-right: 18px; background: #FFFDF7; }
.cx-cw-passo b{ font-size: 64px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: #FAF7F0; -webkit-text-stroke: 3px #14130C; paint-order: stroke fill; transition: color .3s; } .cx-cw-passo:hover b{ color: #F4DF48; }
.cx-cw-passo h3{ margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: #14130C; }
.cx-cw-passo p{ margin: 0; max-width: 52ch; font-size: 16.5px; line-height: 1.55; color: #4A483F; }
@media (max-width: 900px){ .cx > section.cx-cw{ grid-template-columns: 1fr; } .cx-cw-foto{ height: 440px; margin: 0 6% 20px 0; } .cx-cw-selo{ right: -2%; width: 132px; height: 132px; font-size: 15.5px; } .cx-cw-passo{ grid-template-columns: 64px 1fr; gap: 14px; } .cx-cw-passo b{ font-size: 44px; } }
@media (prefers-reduced-motion: reduce){ .cx-cw-selo{ animation: none; } }
.cx-cw-mold img{ object-position: 50% 12%; }
.pr-wrap .cx-ctf h1{ max-width: 14ch; font-size: clamp(40px, 4.7vw, 76px); } .cx-ctf-in{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }

/* ── FECHO COM FOTOGRAFIA DE CENA (19-09, pedido dela para a formacao): a fotografia nao e' recorte, vai emoldurada
   ao meio do cartao amarelo, entre o texto e o formulario; em ecras estreitos sobe para o topo do cartao ── */
.cx-fecho.cx-fecho-cena{ grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, .8fr); align-items: stretch; }
.cx-fecho-cena .cx-fecho-fig{ position: static; z-index: auto; order: 2; width: 100%; height: 100%; min-height: 420px; max-height: 560px; object-fit: cover; object-position: 50% 22%;
  border-radius: 24px; filter: none; box-shadow: 0 30px 60px -28px rgba(20,19,12,.6); }
.cx-fecho-cena .cx-fecho-txt{ order: 1; align-self: end; }
.cx-fecho-cena .cx-pedido{ order: 3; align-self: end; }
@media (max-width: 1100px){
  .cx-fecho.cx-fecho-cena{ grid-template-columns: 1fr; padding-top: clamp(28px, 4.5vw, 64px); }
  .cx-fecho-cena .cx-fecho-fig{ order: 0; right: auto; top: auto; translate: none; height: 340px; min-height: 0; object-position: 50% 18%; }
}
@media (min-width: 601px) and (max-width: 1100px){
  .cx-fecho.cx-fecho-cena{ grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); align-items: center; }
  .cx-fecho-cena .cx-fecho-fig{ height: 100%; min-height: 380px; max-height: 480px; object-position: 50% 22%; }
  .cx-fecho-cena .cx-fecho-txt{ order: 1; align-self: center; } .cx-fecho-cena .cx-pedido{ grid-column: 1 / -1; }
}
/* ══ SEIS BLOCOS DAS PAGINAS DE SERVICO (19-09): escolhas dela em ensaios/como-trabalhamos-3-opcoes.html e
   ensaios/apoios-familias-3-opcoes.html; as quatro opcoes que sobraram foram para zonas que eram so' listas. JS em assets/blocos.js ══ */
.cx-mono{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }

/* 1 · TRES DEMONSTRACOES (apoio a gestao, «Como trabalhamos contigo») */
.cx-dm{ display: grid; gap: 14px; }
.cx-dm article{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(22px, 2.6vw, 34px); border-radius: 30px; background: #FFFDF7; box-shadow: 0 36px 64px -54px rgba(20,19,12,.65); }
.cx-dm article:nth-child(2){ background: #E9EDE4; } .cx-dm article:nth-child(3){ background: #F2EADB; }
.cx-dm-n{ display: block; font-size: 64px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 2.5px #14130C; }
.cx-dm h3{ margin: 18px 0 10px; font-size: clamp(26px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: #14130C; }
.cx-dm article > div > p{ margin: 0; font-size: 17px; line-height: 1.6; color: #4A483F; max-width: 46ch; }
.cx-dm-demo{ position: relative; min-height: 230px; border-radius: 24px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; padding: 24px 26px; overflow: hidden; }
.cx-dm-demo .cx-mono{ color: #F4DF48; }
.cx-dm-ag{ margin: 14px 0 0; padding: 0; }
.cx-dm-ag li{ display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #26262E; font-weight: 600; font-size: 16px; list-style: none; color: #F7F7F9; }
.cx-dm-ag i{ position: relative; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid #55555F; animation: cx-agv 9s infinite; animation-delay: calc(var(--k) * 1.6s); }
.cx-dm-ag i::after{ content: ''; position: absolute; left: 6px; top: 1px; width: 6px; height: 12px; border: solid #14130C; border-width: 0 3px 3px 0; transform: rotate(42deg); }
@keyframes cx-agv{ 0%, 8%{ background: transparent; border-color: #55555F; } 14%, 84%{ background: #F4DF48; border-color: #F4DF48; } 92%, 100%{ background: transparent; border-color: #55555F; } }
.cx-dm-demo p.cx-dm-jarg{ margin: 16px 0 0; max-width: 100%; width: fit-content; font: 500 14.5px/1.5 'JetBrains Mono', monospace; color: #C9C9D2; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: transparent; animation: cx-risca 9s var(--fx) infinite; }
.cx-dm-demo p.cx-dm-claro{ margin: 18px 0 0; padding: 16px 18px; border-radius: 16px 16px 16px 5px; background: #F4DF48; color: #14130C; font-weight: 700; font-size: 17px; line-height: 1.35; opacity: 0; animation: cx-sobe 9s var(--fx) infinite; }
@keyframes cx-risca{ 0%, 18%{ text-decoration-color: transparent; color: #C9C9D2; } 30%, 88%{ text-decoration-color: #F4DF48; color: #6F6F7C; } 96%, 100%{ text-decoration-color: transparent; color: #C9C9D2; } }
@keyframes cx-sobe{ 0%, 30%{ opacity: 0; transform: translateY(14px); } 40%, 88%{ opacity: 1; transform: none; } 96%, 100%{ opacity: 0; } }
.cx-dm-lg{ width: 100%; height: 150px; margin-top: 10px; overflow: visible; }
.cx-dm-lg text{ font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .12em; fill: #ADADBA; text-transform: uppercase; }
.cx-dm-lg .fio{ fill: none; stroke: #55555F; stroke-width: 2.5; stroke-dasharray: 6 9; animation: cx-corre 1.4s linear infinite; } @keyframes cx-corre{ to{ stroke-dashoffset: -30; } }
.cx-dm-lg .pt{ fill: #F4DF48; offset-path: path('M86 70 C 160 10, 240 130, 314 70'); animation: cx-viaja 3s linear infinite; } .cx-dm-lg .pt:nth-of-type(2){ animation-delay: 1s; } .cx-dm-lg .pt:nth-of-type(3){ animation-delay: 2s; }
@keyframes cx-viaja{ from{ offset-distance: 0%; } to{ offset-distance: 100%; } }

/* 2 · A MESA (apoio a gestao, «Quatro frentes») */
.cx-ms{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cx-ms-sala{ position: relative; aspect-ratio: 1; max-width: 500px; width: 100%; margin: 0 auto; border-radius: 40px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); box-shadow: 0 50px 90px -50px rgba(20,19,12,.85); }
.cx-ms-tampo{ position: absolute; inset: 29%; border-radius: 50%; background: #2A2A33; display: grid; place-items: center; text-align: center; color: #F7F7F9; font-weight: 800; font-size: clamp(14px, 1.4vw, 19px); letter-spacing: -.03em; line-height: 1.1; padding: 14px; box-shadow: inset 0 0 0 2px #3A3A44, 0 0 0 12px rgba(244,223,72,.12); }
button.cx-ms-lugar{ position: absolute; width: 21%; aspect-ratio: 1; translate: -50% -50%; padding: 0; border-radius: 50%; background: #15151B; border: 2.5px solid #3A3A44; color: #ADADBA; font: 800 clamp(18px, 2vw, 28px)/1 'Inter Tight', sans-serif; letter-spacing: -.04em; display: grid; place-items: center; cursor: pointer; transition: background .4s, color .4s, transform .6s var(--fx), border-color .4s; }
button.cx-ms-lugar.on{ background: #F4DF48; border-color: #F4DF48; color: #14130C; transform: scale(1.16); }
.cx-ms-txt .cx-mono{ color: #8A8468; }
.cx-ms-txt h3{ margin: 16px 0 18px; font-size: clamp(32px, 3.8vw, 56px); font-weight: 800; letter-spacing: -.05em; line-height: .98; color: #14130C; }
.cx-ms-txt p{ margin: 0; font-size: 19px; line-height: 1.6; color: #4A483F; max-width: 42ch; min-height: 6.4em; }
.cx-ms-pts{ display: flex; gap: 8px; margin-top: 24px; } .cx-ms-pts i{ width: 40px; height: 5px; border-radius: 3px; background: rgba(20,19,12,.18); transition: background .3s; } .cx-ms-pts i.on{ background: #14130C; }
.cx-ms-todas{ grid-column: 1 / -1; margin: 8px 0 0; padding-left: 1.2em; font-size: 16px; line-height: 1.6; color: #4A483F; }
.cx-ms.viva .cx-ms-todas{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 3 · O FIO (consultoria fiscal, «Cinco frentes») */
.cx-fo{ position: relative; max-width: 980px; margin: 0 auto; display: grid; gap: 16px; }
.cx-fo > svg{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cx-fo .base{ fill: none; stroke: rgba(20,19,12,.14); stroke-width: 4; } .cx-fo .vivo{ fill: none; stroke: #14130C; stroke-width: 4; stroke-linecap: round; }
.cx-fo-cartao{ position: relative; z-index: 1; padding: 30px; border-radius: 28px; background: #FFFDF7; box-shadow: 0 36px 64px -52px rgba(20,19,12,.7); }
.cx-fo-cartao b{ display: block; font-size: 64px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 2.5px #14130C; margin-bottom: 16px; }
.cx-fo h3{ margin: 0 0 10px; font-size: clamp(24px, 2.5vw, 34px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: #14130C; } .cx-fo p{ margin: 0; font-size: 16.5px; line-height: 1.6; color: #4A483F; }
.cx-fo-no{ display: none; }
@media (min-width: 901px){
  .cx-fo.viva{ display: block; } .cx-fo.viva > svg{ display: block; }
  .cx-fo.viva .cx-fo-est{ position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 250px; }
  .cx-fo.viva .cx-fo-cartao{ opacity: .35; transform: translateY(20px); transition: opacity .6s, transform .8s var(--fx), background .4s; }
  .cx-fo.viva .cx-fo-est.on .cx-fo-cartao{ opacity: 1; transform: none; }
  .cx-fo.viva .cx-fo-est:nth-of-type(odd) .cx-fo-cartao{ grid-column: 1; margin-right: 70px; } .cx-fo.viva .cx-fo-est:nth-of-type(even) .cx-fo-cartao{ grid-column: 2; margin-left: 70px; }
  .cx-fo.viva .cx-fo-est.on:last-of-type .cx-fo-cartao{ background: #F4DF48; }
  .cx-fo.viva .cx-fo-no{ display: block; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #FAF7F0; border: 4px solid rgba(20,19,12,.25); z-index: 2; transition: background .4s, border-color .4s, box-shadow .4s; }
  .cx-fo.viva .cx-fo-est.on .cx-fo-no{ background: #F4DF48; border-color: #14130C; box-shadow: 0 0 0 10px rgba(244,223,72,.4); }
}

/* 4 · O DIAGNOSTICO (apoios e incentivos, «O que existe para a tua empresa») */
.cx-dg-perg{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 34px; }
.cx-dg-perg > span{ font-weight: 800; font-size: 22px; letter-spacing: -.03em; margin-right: 8px; color: #14130C; }
.cx-dg-perg button{ padding: 15px 20px; border-radius: 999px; border: 2px solid #14130C; background: none; color: #14130C; font: 700 16px/1 'Inter Tight', sans-serif; cursor: pointer; transition: background .25s, color .25s, transform .3s var(--fx); }
.cx-dg-perg button:hover{ transform: translateY(-3px); } .cx-dg-perg button.on{ background: #14130C; color: #F4DF48; }
.cx-dg-gr{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cx-dg-c{ position: relative; overflow: hidden; min-height: 230px; padding: 26px 26px 28px; border-radius: 26px; background: #FFFDF7; color: #14130C; box-shadow: 0 30px 56px -48px rgba(20,19,12,.6); transition: transform .6s var(--fx), opacity .4s, background .4s, color .4s, box-shadow .4s; }
.cx-dg-n{ position: absolute; right: 14px; bottom: -22px; font-size: 120px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(20,19,12,.1); transition: -webkit-text-stroke-color .4s; }
.cx-dg-c h3{ position: relative; margin: 0 0 10px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: inherit; } .cx-dg-c p{ position: relative; margin: 0; font-size: 15.5px; line-height: 1.55; color: #4A483F; transition: color .4s; }
.cx-dg.filtra .cx-dg-c:not(.serve){ opacity: .28; transform: scale(.96); }
.cx-dg.filtra .cx-dg-c.serve{ background: linear-gradient(160deg, #1A1A21, #0A0A0D); color: #F7F7F9; transform: translateY(-8px); box-shadow: 0 40px 70px -40px rgba(20,19,12,.85), inset 0 -6px 0 #F4DF48; }
.cx-dg.filtra .cx-dg-c.serve p{ color: #C9C9D2; } .cx-dg.filtra .cx-dg-c.serve .cx-dg-n{ -webkit-text-stroke-color: rgba(244,223,72,.4); }
.cx-dg-res{ margin: 30px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; min-height: 1.6em; color: #14130C; }

/* 5 · O PAINEL DE PARTIDAS (contabilidade, «O que fica do nosso lado») */
.cx-pp{ border-radius: 26px; border: 1px solid #2A2A33; background: #101015; color: #F7F7F9; overflow: hidden; box-shadow: 0 60px 120px -70px #000, 0 0 120px -70px rgba(244,223,72,.5); }
.cx-pp-cab, .cx-pp-l{ display: grid; grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; }
.cx-pp-cab{ padding: 16px 26px; border-bottom: 1px solid #2A2A33; color: #8E8E9C; }
.cx-pp-l{ align-items: center; padding: 16px 26px; border-bottom: 1px solid #1D1D24; transition: background .25s; outline: none; } .cx-pp-l:last-child{ border-bottom: 0; }
.cx-pp-l:hover, .cx-pp-l.on, .cx-pp-l:focus-visible{ background: #1A1A21; }
.cx-pp-num{ font: 700 15px/1 'JetBrains Mono', monospace; color: #F4DF48; }
.cx-pp h3.cx-pp-nome{ margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #F7F7F9; }
.cx-pp-nome .pal{ display: inline-flex; gap: 3px; white-space: nowrap; }
.cx-pp-nome i{ display: inline-grid; place-items: center; min-width: 1.05em; height: 1.75em; padding: 0 .12em; border-radius: 5px; background: #26262E; font: 700 clamp(11px, 1.05vw, 14.5px)/1 'JetBrains Mono', monospace; font-style: normal; letter-spacing: 0; text-transform: uppercase; color: #F7F7F9; box-shadow: inset 0 -1px 0 #000, inset 0 1px 0 #3A3A44; transition: background .25s, color .25s; }
.cx-pp-l.on .cx-pp-nome i{ background: #F4DF48; color: #14130C; }
.cx-pp-nome i.vira{ animation: cx-vira .18s linear; } @keyframes cx-vira{ 0%{ transform: rotateX(0); } 50%{ transform: rotateX(90deg); } 100%{ transform: rotateX(0); } }
.cx-pp p.cx-pp-desc{ margin: 0; max-width: none; font-size: 15px; line-height: 1.5; color: #8E8E9C; transition: color .25s; } .cx-pp-l.on .cx-pp-desc, .cx-pp-l:hover .cx-pp-desc{ color: #F7F7F9; }

/* 6 · O CILINDRO (recrutamento, as oito vantagens). Sem JS e' uma grelha. */
.cx-cl-anel{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cx-cl-c{ padding: 28px 26px; border-radius: 28px; background: #FFFDF7; color: #14130C; box-shadow: 0 30px 60px -40px rgba(20,19,12,.7); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.cx-cl-n{ font-size: 60px; font-weight: 800; letter-spacing: -.07em; line-height: .8; color: transparent; -webkit-text-stroke: 2.5px #14130C; }
.cx-cl-c h3{ margin: 0 0 10px; font-size: 25px; font-weight: 800; letter-spacing: -.045em; line-height: 1.02; color: #14130C; } .cx-cl-c p{ margin: 0; font-size: 15.5px; line-height: 1.5; color: #3B392F; }
.cx-cl-ctr{ display: none; }
.cx-cl.viva{ overflow: hidden; margin: 0 calc(-1 * clamp(0px, 3vw, 40px)); padding-bottom: 10px; }
.cx-cl.viva .cx-cl-palco{ position: relative; height: 460px; perspective: 1500px; margin-top: 10px; touch-action: pan-y; }
.cx-cl.viva .cx-cl-anel{ display: block; position: absolute; left: 50%; top: 50%; width: 330px; height: 340px; margin: -170px 0 0 -165px; transform-style: preserve-3d; transition: transform 1s var(--fx); }
.cx-cl.viva .cx-cl-c{ position: absolute; inset: 0; backface-visibility: hidden; opacity: .55; cursor: pointer; transition: background .5s, opacity .5s; user-select: none; }
.cx-cl.viva .cx-cl-c.on{ background: #F4DF48; opacity: 1; cursor: default; }
.cx-cl.viva .cx-cl-ctr{ display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 26px; color: #14130C; }
.cx-cl-ctr button{ width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid rgba(20,19,12,.3); background: none; color: #14130C; font: 500 20px/1 'Inter Tight', sans-serif; cursor: pointer; transition: all .25s; } .cx-cl-ctr button:hover{ background: #14130C; color: #F4DF48; border-color: #14130C; }

@media (max-width: 1100px){ .cx-dg-gr{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px){
  .cx-dm article, .cx-ms{ grid-template-columns: 1fr; } .cx-ms-txt p{ min-height: 8em; }
  .cx-pp-cab, .cx-pp-l{ grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; padding-left: 18px; padding-right: 18px; } .cx-pp-desc, .cx-pp-cab span:last-child{ grid-column: 2; }
  .cx-cl.viva .cx-cl-anel{ width: 270px; margin-left: -135px; height: 380px; margin-top: -190px; } .cx-cl.viva .cx-cl-palco{ height: 480px; }
}
@media (max-width: 560px){ .cx-dg-gr{ grid-template-columns: 1fr; } .cx-dg-c{ min-height: 0; padding-bottom: 60px; } .cx-dg-perg button{ padding: 13px 16px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce){ .cx-dm-ag i, .cx-dm-demo p.cx-dm-jarg, .cx-dm-demo p.cx-dm-claro, .cx-dm-lg .fio, .cx-dm-lg .pt{ animation: none; } .cx-dm-demo p.cx-dm-claro{ opacity: 1; } .cx-dm-ag i{ background: #F4DF48; border-color: #F4DF48; } }
/* ══ «A PAREDE BRANCA» (19-09): topo CLARO com a fotografia dela ao portatil a toda a largura e o texto na parede vazia a' direita.
   So' na pagina dos apoios (TOPO_FOTO no gerador). A faixa de cima fica escura por baixo do menu, para o menu continuar a ler-se. ══ */
.pr-cabeca.cx-tpb{ position: relative; isolation: isolate; min-height: min(860px, 96vh); display: grid; align-items: center; padding-top: 150px; padding-bottom: 90px; color: #14130C; }
.cx-tpb::before{ content: ''; position: absolute; z-index: -3; top: 0; bottom: 0; left: 50%; width: var(--lj, 100vw); transform: translateX(-50%); background: #F3F1EC; }
.cx-tpb-img{ position: absolute; z-index: -2; top: 0; left: 50%; width: var(--lj, 100vw); max-width: none; height: 100%; transform: translateX(-50%); object-fit: cover; object-position: 100% 30%; }
.cx-tpb::after{ content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: var(--lj, 100vw); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,13,.82) 0, rgba(10,10,13,.35) 70px, rgba(10,10,13,0) 130px), linear-gradient(90deg, rgba(243,241,236,0) 54%, rgba(246,245,241,.8) 64%, #F7F6F2 76%); }
.cx-tpb-txt{ width: min(520px, 34vw); margin-left: auto; margin-right: calc((var(--lj, 100vw) - 100%) / -2 + max(28px, 4vw)); }
.cx-tpb .pr-migalhas, .cx-tpb .pr-migalhas a{ color: #6B6754; } .cx-tpb .pr-migalhas [aria-current]{ color: #14130C; }
.pr-cabeca.cx-tpb h1{ font-size: clamp(34px, 3.7vw, 60px); color: #14130C; max-width: none; }
.cx-tpb h1 .pr-lit{ color: #14130C; -webkit-text-fill-color: #14130C; background: linear-gradient(transparent 60%, #F4DF48 60%); text-shadow: none; }
.cx-tpb h1 .pr-ghost{ color: #6B6754; -webkit-text-fill-color: #6B6754; }
.cx-tpb .pr-olho{ color: #14130C; } .cx-tpb .pr-lede{ color: #3B392F; font-size: 17px; max-width: none; }
.cx-tpb .pr-btn-primary{ background: #14130C; color: #F4DF48; box-shadow: 0 18px 40px -16px rgba(20,19,12,.6); }
.cx-tpb .pr-btn-ghost{ color: #14130C; border-color: rgba(20,19,12,.45); background: rgba(255,255,255,.5); }
.cx-tpb .pr-provas{ grid-template-columns: 1fr 1fr; background: none; border: 0; border-top: 1px solid rgba(20,19,12,.2); border-radius: 0; gap: 18px; padding-top: 22px; margin-top: 38px; }
.cx-tpb .pr-provas > div{ background: none; padding: 0; } .cx-tpb .pr-provas > div:first-child{ display: none; }
.cx-tpb .pr-provas span{ color: #6B6754; } .cx-tpb .pr-provas b{ color: #14130C; }
.cx-tpb-nome{ position: absolute; left: calc((var(--lj, 100vw) - 100%) / -2 + max(28px, 4vw)); bottom: 34px; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; background: rgba(20,19,12,.78); color: #F7F7F9; backdrop-filter: blur(8px); font-size: 14px; font-weight: 600; }
.cx-tpb-nome i{ width: 9px; height: 9px; border-radius: 50%; background: #F4DF48; }
@media (max-width: 900px){
  .pr-wrap header.pr-cabeca.cx-tpb{ min-height: 0; padding-top: 420px !important; padding-bottom: 50px; align-items: end; }
  .cx-tpb-img{ height: 440px; object-position: 45% 20%; }
  .cx-tpb::after{ background: linear-gradient(180deg, rgba(10,10,13,.82) 0, rgba(10,10,13,0) 120px), linear-gradient(180deg, rgba(243,241,236,0) 270px, #F3F1EC 430px); }
  .cx-tpb-txt{ width: 100%; margin-right: 0; } .cx-tpb-nome{ bottom: auto; top: 352px; left: 0; font-size: 12.5px; }
}
/* ══ «A CONVERSA» (19-09, escolha dela em ensaios/sobre-empresas-3-opcoes.html): no bloco «sobre» da pagina Para empresas, o titulo e o
   texto ficam a' esquerda e, a' direita, uma conversa que se escreve sozinha (assets/blocos.js). Sem JS as falas ficam todas a' vista. ══ */
.cx .cx-duo.cx-duo-cv{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.cx .cx-duo-cv h2{ margin-bottom: 26px; }
.cx-cv{ justify-self: center; width: min(440px, 100%); min-height: 470px; border-radius: 36px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); padding: 26px 22px 30px; box-shadow: 0 60px 110px -60px rgba(20,19,12,.95), 0 0 0 1px rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 12px; }
.cx-cv-cab{ display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid #2A2A33; color: #F7F7F9; font-weight: 700; }
.cx-cv-cab i{ width: 10px; height: 10px; border-radius: 50%; background: #F4DF48; box-shadow: 0 0 0 5px rgba(244,223,72,.18); } .cx-cv-cab small{ margin-left: auto; color: #8E8E9C; }
.cx-cv-b{ max-width: 84%; padding: 14px 16px; font-size: 15.5px; line-height: 1.45; font-weight: 600; transition: opacity .5s, transform .6s var(--fx); }
.cx-cv.viva .cx-cv-b{ opacity: 0; transform: translateY(14px); } .cx-cv.viva .cx-cv-b.on{ opacity: 1; transform: none; }
.cx-cv-tu{ align-self: flex-end; background: #2A2A33; color: #F7F7F9; border-radius: 18px 18px 5px 18px; } .cx-cv-nos{ align-self: flex-start; background: #F4DF48; color: #14130C; border-radius: 18px 18px 18px 5px; }
.cx-cv-pts{ align-self: flex-start; display: none; gap: 5px; padding: 14px 16px; border-radius: 18px; background: #2A2A33; } .cx-cv-pts.on{ display: flex; }
.cx-cv-pts i{ width: 7px; height: 7px; border-radius: 50%; background: #ADADBA; animation: cx-salta 1s infinite; } .cx-cv-pts i:nth-child(2){ animation-delay: .15s; } .cx-cv-pts i:nth-child(3){ animation-delay: .3s; }
@keyframes cx-salta{ 0%, 60%, 100%{ transform: none; opacity: .5; } 30%{ transform: translateY(-5px); opacity: 1; } }
@media (max-width: 860px){ .cx .cx-duo.cx-duo-cv{ grid-template-columns: 1fr; } .cx-cv{ min-height: 0; } }
/* ══ NOTA DE TRANSPARENCIA (19-09): pagina «Apoio nos servicos publicos online»; campo «nota» do copy. Empresa privada, nao representa o Estado. ══ */
.cx-nota{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 40px; align-items: start; padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #14130C; color: #F7F7F9; box-shadow: inset 6px 0 0 #F4DF48, 0 40px 80px -56px rgba(20,19,12,.9); }
.cx-nota .cx-mono{ color: #F4DF48; padding-top: 7px; } .cx-nota p{ margin: 0; max-width: 78ch; font-size: 17px; line-height: 1.65; color: #E4E4EA; }
@media (max-width: 760px){ .cx-nota{ grid-template-columns: 1fr; } }
/* ══ PILULA DO TIPO DE CONTEUDO no blogue (19-09, pedido dela): Artigo · Noticia · Ferramenta · E-book. Amarela; onde o fundo ja' e' amarelo
   (a manchete e a linha do indice com o rato por cima) inverte para escuro, senao desaparecia. ══ */
.cx-rv-pil{ display: inline-flex; align-items: center; padding: 7px 12px 6px; border-radius: 999px; background: #F4DF48; color: #14130C; font: 700 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s; }
.cx-rv-linha .cx-rv-pil{ margin-bottom: 12px; } .cx-rv-linha:hover .cx-rv-pil, .cx-rv-linha:focus-visible .cx-rv-pil{ background: #14130C; color: #F4DF48; }
.cx-rv-mch{ display: flex; align-items: center; gap: 12px; } .cx-rv-manchete .cx-rv-pil{ background: #14130C; color: #F4DF48; }
.cx-rv-gr .cx-rv-pil{ align-self: flex-start; }
/* ══ «O DIPTICO» (20-09): topo da formacao com as duas socias (TOPO_DUO no gerador). Substitui «duas salas». Texto a' esquerda; a' direita as duas
   fotografias coladas, ate' a' margem do ecra e com a altura toda do topo, tingidas de amarelo; com o rato voltam a' cor e mexem, as duas. ══ */
.pr-wrap header.pr-cabeca.cx-tpd{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; padding-top: 0 !important; padding-bottom: 0 !important; min-height: min(860px, 96vh); }
.cx-tpd-txt{ align-self: center; padding: 150px clamp(28px, 4vw, 70px) 90px 0; }
.pr-cabeca.cx-tpd h1{ font-size: clamp(38px, 4.4vw, 72px); }
.cx-tpd .pr-provas{ grid-template-columns: 1fr 1fr; } .cx-tpd .pr-provas > div:first-child{ display: none; }
.cx-tpd-dip{ position: relative; display: grid; grid-template-columns: 1.5fr .62fr; gap: 4px; background: #F4DF48; margin-right: calc((var(--lj, 100vw) - 200%) / -2); /* num item de grelha, 100% e' a CELULA (meio topo): o topo inteiro sao 200% */ }
.cx-tpd-dip figure{ position: relative; margin: 0; overflow: hidden; background: #0A0A0D; }
.cx-tpd-dip img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.92); transition: filter .7s, transform 1.4s var(--fx); }
.cx-tpd-dip .f1 img{ object-position: 56% 30%; } .cx-tpd-dip .f2 figcaption{ right: auto; left: 14px; bottom: 74px; } .cx-tpd-dip .f2 img{ object-position: 50% 0; }
.cx-tpd-dip figure::after{ content: ''; position: absolute; inset: 0; background: #F4DF48; mix-blend-mode: multiply; opacity: .5; transition: opacity .7s; pointer-events: none; }
.cx-tpd-dip figure:hover img, .cx-tpd-dip figure:focus-within img{ filter: none; transform: scale(1.06); } .cx-tpd-dip figure:hover::after{ opacity: 0; }
.cx-tpd-dip::before{ content: ''; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 140px; background: linear-gradient(90deg, #0A0A0D, transparent); pointer-events: none; }
.cx-tpd-dip figcaption{ position: absolute; z-index: 3; right: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 11px 15px; border-radius: 14px; background: rgba(14,14,18,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); color: #F7F7F9; }
.cx-tpd-dip figcaption b{ display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; } .cx-tpd-dip figcaption small{ font-size: 12.5px; color: #C9C9D2; }
@media (max-width: 1000px){ .pr-wrap header.pr-cabeca.cx-tpd{ grid-template-columns: 1fr; min-height: 0; } .cx-tpd-txt{ padding: 110px 0 40px; } .cx-tpd .pr-provas{ grid-template-columns: 1fr; }
  .cx-tpd-dip{ height: 460px; margin-left: calc((var(--lj, 100vw) - 100%) / -2); margin-right: calc((var(--lj, 100vw) - 100%) / -2); } .cx-tpd-dip .f2 figcaption{ right: auto; left: 14px; } .cx-tpd-dip::before{ display: none; } }
/* ══ 20-09 · TRES BLOCOS (ensaios/faz-as-contas-3-opcoes.html): ela ficou com «a frase que troca» no sitio de origem; «a calculadora» foi para
   os gabinetes («O que muda no teu gabinete») e «as tres capas» para as paginas de carreiras (seccoes com tres itens). JS em assets/blocos.js ══ */
/* A FRASE QUE TROCA */
.cx > section.cx-ft-sec{ background: radial-gradient(900px 500px at 20% 60%, rgba(244,223,72,.13), transparent 70%), #0A0A0D !important; color: #F7F7F9; }
.cx-ft .cx-mono{ display: block; margin-bottom: 26px; color: #F4DF48; }
.cx .cx-ft h2.cx-ft-gr{ margin: 0; max-width: none; font-size: clamp(40px, 6.6vw, 108px); font-weight: 800; letter-spacing: -.06em; line-height: .98; color: #F7F7F9; perspective: 900px; }
.cx-ft-slot{ display: block; width: fit-content; max-width: 100%; margin: .08em 0; padding: .02em .16em .08em; border-radius: .12em; background: #F4DF48; color: #14130C; -webkit-text-fill-color: #14130C; }
.cx-ft-slot.vira{ animation: cx-ftvira .5s var(--fx); } @keyframes cx-ftvira{ 0%{ transform: rotateX(0); } 49%{ transform: rotateX(90deg); } 51%{ transform: rotateX(-90deg); } 100%{ transform: rotateX(0); } }
.cx-ft-pts{ display: flex; gap: 8px; margin-top: 30px; } .cx-ft-pts i{ width: 44px; height: 5px; border-radius: 3px; background: #3A3A44; transition: background .3s; } .cx-ft-pts i.on{ background: #F4DF48; }
.cx-ft-baixo{ display: flex; justify-content: space-between; align-items: flex-end; gap: 30px 40px; flex-wrap: wrap; margin-top: 44px; } .cx .cx-ft-baixo p{ margin: 0; max-width: 52ch; font-size: 18px; line-height: 1.6; color: #C9C9D2; }
/* A CALCULADORA */
[data-calc]:not(.viva){ display: none; }
[data-calc].viva + .cx-ad-calc{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cx-calc-duo{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.cx-calc-hoje .cx-mono{ color: #8A8468; } .cx-calc-hoje p{ margin: 18px 0 0; font-size: clamp(30px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; color: #14130C; min-height: 3.1em; text-wrap: balance; }
.cx-calc{ justify-self: center; width: min(460px, 100%); padding: 24px; border-radius: 34px; background: linear-gradient(160deg, #1A1A21, #0A0A0D); box-shadow: 0 60px 110px -60px rgba(20,19,12,.95); }
.cx-calc-visor{ min-height: 190px; border-radius: 20px; background: #0E1A12; border: 1px solid #23402C; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.cx-calc-visor small{ color: #5E9C70; } .cx-calc-visor p{ margin: 0; max-width: none; font: 600 clamp(16px, 1.35vw, 19px)/1.4 'JetBrains Mono', monospace; color: #B9F5C8; }
.cx-calc-teclas{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 16px; }
.cx-calc-teclas button{ padding: 20px 8px; border: 0; border-radius: 16px; background: #26262E; color: #F7F7F9; font: 700 15px/1 'Inter Tight', sans-serif; cursor: pointer; box-shadow: inset 0 -3px 0 #000, inset 0 1px 0 #3A3A44; transition: transform .15s, background .25s, color .25s; }
.cx-calc-teclas button:active{ transform: translateY(2px); } .cx-calc-teclas button.on{ background: #F4DF48; color: #14130C; }
.cx-calc-igual{ display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; padding: 18px; border-radius: 16px; background: #F4DF48; color: #14130C; font-weight: 800; text-decoration: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.35); }
/* AS TRES CAPAS */
.cx-capas{ position: relative; height: 480px; max-width: 1000px; margin: 10px auto 0; }
.cx-capa{ position: absolute; left: 50%; top: 50%; width: min(300px, 32%); min-height: 390px; padding: 26px; border-radius: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; box-shadow: 0 40px 80px -40px rgba(20,19,12,.75);
  transform: translate(-50%, -50%) rotate(var(--r)) translateX(var(--x)); transition: transform .8s var(--fx); }
.cx-capas:hover .cx-capa{ transform: translate(-50%, -50%) rotate(calc(var(--r) * 1.4)) translateX(calc(var(--x) * 1.12)); } .cx-capa:hover{ z-index: 5; }
.cx-capa:nth-child(1){ --r: -7deg; --x: -300px; background: #14130C; color: #F7F7F9; } .cx-capa:nth-child(2){ --r: 0deg; --x: 0px; background: #F4DF48; color: #14130C; z-index: 2; } .cx-capa:nth-child(3){ --r: 7deg; --x: 300px; background: #FFFDF7; color: #14130C; }
.cx-capa:nth-child(1) .cx-mono{ color: #F4DF48; }
.cx .cx-capa h3{ margin: 0 0 12px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: inherit; } .cx .cx-capa p{ margin: 0; font-size: 15.5px; line-height: 1.55; color: inherit; opacity: .82; }
@media (max-width: 1000px){ .cx-calc-duo{ grid-template-columns: 1fr; } .cx-calc-hoje p{ min-height: 0; }
  .cx-capas{ height: auto; display: grid; gap: 14px; } .cx-capa, .cx-capas:hover .cx-capa{ position: static; width: 100%; min-height: 0; transform: none; } }
/* ══ ASSINATURA DOS ARTIGOS no blogue (20-09): iniciais numa bola, «Por Nome» e o cargo por baixo ══ */
.cx-rv-aut{ display: flex; align-items: center; gap: 11px; margin-top: 14px; color: #14130C; }
.cx-rv-aut i{ flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #14130C; color: #F4DF48; font: 700 12px/1 'JetBrains Mono', monospace; font-style: normal; letter-spacing: .04em; }
.cx-rv-aut > span{ font-size: 14px; line-height: 1.25; } .cx-rv-aut b{ font-weight: 800; } .cx-rv-aut small{ display: block; font-size: 12px; color: #6B6754; }
.cx-rv-linha:hover .cx-rv-aut small{ color: #3B3712; } .cx-rv-manchete .cx-rv-aut{ margin-top: 20px; } .cx-rv-manchete .cx-rv-aut small{ color: #3B3712; }
/* ══ 20-09 · casos de estudo: «O desafio», «O que fizemos», «Como trabalhamos» e «O que mudou» com o marcador amarelo por baixo (pedido dela) ══ */
.cx .cx-casop dt{ width: fit-content; padding: 0 .18em; margin-left: -.18em; background: linear-gradient(transparent 52%, #F4DF48 52%); color: #14130C; }
/* ══ PEDIDO DE DADOS ANTES DE DESCARREGAR (20-09): dialogo do blogue (reaproveita .fm-dlg) com a caixa «Nao sou um robo» simulada e o campo-armadilha escondido ══ */
.dl-mel{ position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dl-robo{ display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(20,19,12,.2); background: #FAF7F0; transition: border-color .25s, box-shadow .25s; }
.dl-robo.falta{ border-color: #B3261E; box-shadow: 0 0 0 4px rgba(179,38,30,.14); }
.dl-robo small{ font: 600 9.5px/1.3 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #8A8468; text-align: right; }
.dl-robo-b{ display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; font: 600 15px/1 'Inter Tight', sans-serif; color: #14130C; cursor: pointer; }
.dl-robo-b i{ position: relative; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 2px solid #14130C; background: #fff; transition: background .25s, border-color .25s; }
.dl-robo-b.a-ver i{ border-color: rgba(20,19,12,.25); border-top-color: #14130C; border-radius: 50%; animation: dl-roda .7s linear infinite; } @keyframes dl-roda{ to{ transform: rotate(360deg); } }
.dl-robo-b.ok i{ background: #F4DF48; } .dl-robo-b.ok i::after{ content: ''; position: absolute; left: 8px; top: 3px; width: 7px; height: 13px; border: solid #14130C; border-width: 0 3px 3px 0; transform: rotate(42deg); }
.dl-dlg .pr-btn{ justify-content: center; cursor: pointer; font-family: inherit; }
/* 20-09: o reset do site tira a margem ao <dialog> e ele abria no canto de cima; com margin:auto volta ao centro (formacao e blogue) */
.fm-dlg{ margin: auto; max-height: calc(100dvh - 32px); overflow: auto; }

/* ══ 20-09 · menu «Recursos», coluna «Para descarregar»: subtitulos (Ferramentas, E-books) e os titulos exatos dos seis descarregaveis ══ */
.mega .msub{ display: block; margin: 14px 12px 4px; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #14130C; padding-bottom: 6px; border-bottom: 2px solid #F4DF48; width: fit-content; }
.mega .mcol h6 + .msub{ margin-top: 4px; }
.mega .mcol.estreita .mtxt{ padding-top: 7px; padding-bottom: 7px; line-height: 1.3; }
@media (max-width: 880px){ nav.menu.aberto .msub{ display: block; margin: 10px 0 2px 14px; color: #8E8E9C; } }
/* ══ 20-09 · menu «Carreiras»: «Sabias que…» na coluna do meio; tres frases do copy que rodam sozinhas (12 s), uma de cada vez ══ */
.mega .msab{ position: relative; min-height: 190px; margin: 4px 12px 0; padding: 20px 20px 20px 24px; border-radius: 18px; background: #14130C; color: #F7F7F9; box-shadow: inset 5px 0 0 #F4DF48; }
.mega .msab p{ position: absolute; inset: 20px 20px 20px 24px; margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.45; opacity: 0; animation: msab 12s infinite; animation-delay: calc(var(--k) * 4s); }
@keyframes msab{ 0%{ opacity: 0; transform: translateY(8px); } 4%, 30%{ opacity: 1; transform: none; } 34%, 100%{ opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .mega .msab p{ animation: none; } .mega .msab p:first-child{ opacity: 1; } }
@media (max-width: 880px){ nav.menu.aberto .msab{ display: none; } }
/* ══ «O MURAL» (20-09, escolha dela em ensaios/blogue-filtros-3-opcoes.html): o blogue e os recursos numa so' parede de pecas de tamanhos e cores
   diferentes, com a doca de filtros de vidro por cima. Artigos em claro, ferramentas em escuro, e-books em amarelo. JS em assets/mural.js ══ */
.pr-cabeca.cx-mu-capa{ padding-bottom: 40px; }
.cx-mu-anc{ display: block; position: relative; top: -110px; }
.cx > section.cx-mu-sec{ padding-top: 0; }
.cx-mu-doca{ position: sticky; top: 64px; z-index: 40; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 26px; align-items: center;
  padding: 16px 18px; border-radius: 26px; background: rgba(21,21,27,.86); border: 1px solid #33333D; backdrop-filter: blur(18px); color: #F7F7F9; box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
.cx-mu-rot{ color: #8E8E9C; } .cx-mu-grupos{ display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.cx-mu-g{ display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .cx-mu-g > .cx-mono{ color: #8E8E9C; margin-right: 4px; }
button.cx-mu-f{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid #3A3A44; background: none; color: #F7F7F9; font: 600 14px/1 'Inter Tight', sans-serif; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .3s var(--fx); }
button.cx-mu-f:hover{ transform: translateY(-2px); border-color: #F7F7F9; } button.cx-mu-f.on{ background: #F4DF48; border-color: #F4DF48; color: #14130C; }
.cx-mu-f small{ font: 600 10px/1 'JetBrains Mono', monospace; opacity: .6; } .cx-mu-f[hidden]{ display: none; }
.cx-mu-f i{ display: grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 -4px -6px; border-radius: 50%; background: #2A2A33; color: #F4DF48; font: 700 9.5px/1 'JetBrains Mono', monospace; font-style: normal; }
.cx-mu-f.on i{ background: #14130C; }
.cx-mu-fim{ display: flex; gap: 14px; align-items: center; } .cx-mu-cont{ font: 700 13px/1.2 'JetBrains Mono', monospace; color: #F4DF48; white-space: nowrap; }
button.cx-mu-limpa{ padding: 10px 14px; border: 0; border-radius: 999px; background: #F7F7F9; color: #14130C; font: 700 13px/1 'Inter Tight', sans-serif; cursor: pointer; } button.cx-mu-limpa[hidden]{ display: none; }
.cx-mu{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; grid-auto-flow: dense; margin-top: 22px; }
a.cx-mu-t{ position: relative; grid-column: span 4; min-height: 300px; padding: 26px; border-radius: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 26px; overflow: hidden; text-decoration: none; transition: transform .5s var(--fx); }
a.cx-mu-t:hover{ transform: translateY(-8px) rotate(-.4deg); } a.cx-mu-t[hidden]{ display: none; }
/* a entrada .rise nestas fichas: o a.cx-mu-t manda no transition (e' mais especifico que o .rise da produto.css), por isso
   a opacidade tinha de ser dita aqui. Depois de entrar (.on) volta o tempo do hover, que e' mais curto. */
a.cx-mu-t.rise{ transition: opacity .8s var(--fx), transform .8s var(--fx); }
a.cx-mu-t.rise.on{ transition: transform .5s var(--fx), opacity .3s var(--fx); }
a.cx-mu-t.cx-mu-artigo, a.cx-mu-t.cx-mu-noticia{ background: #FAF7F0; color: #14130C; }
a.cx-mu-t.cx-mu-ferramenta{ background: linear-gradient(160deg, #1F1F27, #121217); color: #F7F7F9; border: 1px solid #2A2A33; }
a.cx-mu-t.cx-mu-ebook{ background: #F4DF48; color: #14130C; }
a.cx-mu-t.cx-mu-g1{ grid-column: span 8; min-height: 420px; } a.cx-mu-t.cx-mu-g2{ grid-column: span 6; }
.cx-mu-cima{ display: flex; justify-content: space-between; align-items: center; gap: 10px; } .cx-mu-ass{ opacity: .7; }
.cx-mu-ferramenta .cx-rv-pil{ background: #F4DF48; } .cx-mu-ebook .cx-rv-pil{ background: #14130C; color: #F4DF48; }
.cx .cx-mu-t h3{ margin: 0 0 12px; font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: inherit; }
.cx .cx-mu-t.cx-mu-g1 h3{ font-size: clamp(34px, 4.4vw, 68px); }
.cx .cx-mu-t p{ margin: 0; max-width: 52ch; font-size: 15.5px; line-height: 1.55; color: inherit; opacity: .78; }
.cx-mu-n{ position: absolute; right: -8px; bottom: -34px; font-size: 190px; font-weight: 800; letter-spacing: -.08em; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(20,19,12,.09); pointer-events: none; }
.cx-mu-ferramenta .cx-mu-n{ -webkit-text-stroke-color: rgba(244,223,72,.16); }
.cx-mu-pe{ position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: 14px; }
.cx-mu-aut{ display: inline-flex; align-items: center; gap: 10px; } .cx-mu-aut b{ font-weight: 800; }
.cx-mu-aut i{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #14130C; color: #F4DF48; font: 700 12px/1 'JetBrains Mono', monospace; font-style: normal; }
.cx-mu-ferramenta .cx-mu-aut i{ background: #F4DF48; color: #14130C; } .cx-mu-ebook .cx-mu-aut i{ background: #14130C; color: #F4DF48; }
.cx .cx-mu-zero{ grid-column: 1 / -1; display: grid; gap: 10px; place-items: center; padding: 70px 30px; border-radius: 28px; border: 2px dashed rgba(20,19,12,.3); text-align: center; font-size: 21px; font-weight: 700; line-height: 1.4; max-width: none; }
.cx-mu-zero a{ font-weight: 800; color: inherit; }
::view-transition-group(*){ animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
@media (max-width: 1100px){ .cx-mu-doca{ position: static; grid-template-columns: 1fr; } a.cx-mu-t, a.cx-mu-t.cx-mu-g2{ grid-column: span 6; } a.cx-mu-t.cx-mu-g1{ grid-column: span 12; } }
@media (max-width: 680px){ a.cx-mu-t, a.cx-mu-t.cx-mu-g1, a.cx-mu-t.cx-mu-g2{ grid-column: span 12; min-height: 0; } .cx-mu-n{ font-size: 130px; } }
/* ══ 20-09 · «Perguntas frequentes (FAQ)» rasurado a amarelo, como marcador fluorescente (pedido dela). O h2Marca parte o titulo em duas
   partes e so' a segunda leva <em>; aqui o marcador tem de apanhar a frase INTEIRA, por isso pinta-se o h2 todo. ══ */
.cx .pr-faq .pr-sec-head h2{ width: fit-content; max-width: 100%; padding: 0 .12em; background: linear-gradient(transparent 54%, #F4DF48 54%); }
.cx .pr-faq .pr-sec-head h2 em{ background: none; padding: 0; color: inherit; }
/* ══ 20-09 · rodape: assinatura de quem fez o site (pedido dela) ══ */
.fim-cred{ color: inherit; opacity: .75; } .fim-cred a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* ══ 20-09 · formulario de contacto com verificacao anti-robo: campos largos e a caixa «Nao sou um robo» a toda a largura ══ */
.pr-form .pr-form-larga{ grid-column: 1 / -1; }
.pr-form textarea{ padding: 14px 15px; border-radius: 13px; border: 1.5px solid rgba(20,19,12,.2); background: #fff; font: 500 16px/1.5 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #14130C; resize: vertical; }
.pr-form select{ padding: 14px 15px; border-radius: 13px; border: 1.5px solid rgba(20,19,12,.2); background: #fff; font: 500 16px/1.3 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #14130C; }
.pr-form textarea:focus, .pr-form select:focus{ outline: 0; border-color: #14130C; box-shadow: 0 0 0 4px rgba(244,223,72,.7); }
.pr-form .dl-robo{ margin-top: 2px; }
/* ══ «O CONTADOR» (20-09, escolha dela; classes cx-cnt-, porque cx-ct- ja' era da conta 1x2 do ADN e partia-a): carreiras, «O que encontras do lado de cá». Algarismo gigante preso a' esquerda, a fotografia do
   escritorio A CORES por baixo (pedido dela), e os pontos em letra grande a' direita: so' o que esta' a ser lido fica aceso. ══ */
.cx-cnt{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 100px); margin-top: 20px; }
.cx-cnt-preso{ position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: 26px; }
.cx-cnt-num{ font-size: clamp(120px, 15vw, 250px); font-weight: 800; letter-spacing: -.08em; line-height: .78; color: transparent; -webkit-text-stroke: 3px #F4DF48; }
.cx-cnt-num b{ font-weight: 800; } .cx-cnt-num small{ font: 600 14px/1 'JetBrains Mono', monospace; letter-spacing: .14em; -webkit-text-stroke: 0; color: #8A8468; margin-left: 14px; vertical-align: top; }
.cx-cnt-foto{ position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 10; background: #1A1A21; box-shadow: 0 40px 80px -46px rgba(20,19,12,.8); }
.cx-cnt-foto img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s; }   /* A CORES, por decisao dela */
.cx-cnt-foto img.on{ opacity: 1; }
.cx-cnt-foto figcaption{ position: absolute; left: 14px; bottom: 14px; padding: 9px 13px; border-radius: 999px; background: rgba(14,14,18,.8); color: #F7F7F9; backdrop-filter: blur(8px); font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.cx-cnt-it{ padding: 30px 0 30px 34px; border-left: 3px solid rgba(20,19,12,.14); transition: opacity .5s, border-color .5s, transform .7s var(--fx); }
.cx-cnt.viva .cx-cnt-it{ opacity: .3; transform: translateX(18px); } .cx-cnt.viva .cx-cnt-it.on{ opacity: 1; transform: none; } .cx-cnt-it.on{ border-left-color: #F4DF48; }
.cx .cx-cnt-it h3{ margin: 0 0 12px; font-size: clamp(26px, 3vw, 44px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #14130C; }
.cx .cx-cnt-it p{ margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.6; color: #4A483F; }
@media (max-width: 950px){ .cx-cnt{ grid-template-columns: 1fr; } .cx-cnt-preso{ position: static; } .cx-cnt-num{ font-size: 110px; } }
/* ══ 20-09 · rodape: as duas linhas do fundo (direitos reservados e a assinatura de quem fez o site) levam marcador amarelo, como na captura dela ══ */
.fim > span:not(.fim-legal){ background: #F4DF48; color: #14130C; padding: 2px 7px 3px; border-radius: 3px; opacity: 1; }
.fim > span:not(.fim-legal) a{ color: #14130C; }
/* ══ 20-09 · rodape: «Política de privacidade · Livro de reclamações» sobe para a mesma linha do copyright e do credito (pedido dela,
   captura 092629). Antes o gap de 110px atirava-a para uma linha sozinha, muito mais abaixo. ══ */
footer .fim{ justify-content: space-between; gap: 14px 40px; align-items: center; }
footer .fim .fim-legal{ margin-left: auto; }
@media (max-width: 900px){ footer .fim{ justify-content: flex-start; } footer .fim .fim-legal{ margin-left: 0; } }
/* ══ 20-09 · a parede da home passou a OITO serviços (escolha dela, arranjo A de ensaios/home-servicos-com-oitavo.html): quatro colunas em
   duas filas, todos do mesmo tamanho, e o azulejo amarelo com a Marisa passa a faixa a toda a largura por baixo. ══ */
.cx-parede{ grid-template-columns: repeat(4, 1fr); }
.cx-vd-cta{ grid-column: 1 / -1; min-height: 262px; padding-left: 6%; padding-right: 34%; }
.cx .cx-vd h3{ font-size: clamp(19px, 1.5vw, 23px); } .cx .cx-vd p{ font-size: 14.5px; }
@media (max-width: 1100px){ .cx-parede{ grid-template-columns: 1fr 1fr; } .cx-vd-cta{ padding-right: 40%; } }
@media (max-width: 620px){ .cx-parede{ grid-template-columns: 1fr; } }
/* ══ 20-09 · o «Sabias que…» do menu Carreiras aplicado no vazio ao meio da faixa amarela da home (pedido dela, captura 093847).
   Mesmas frases a rodar de 4 em 4 s, mesma caixa escura com o fio amarelo. A fotografia da Marisa fica por trás, à direita. ══ */
.cx-vd-cta{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.cx-vd-cta .vd-cta-sab{ position: relative; z-index: 1; margin: 0; min-height: 168px; padding: 22px 24px; border-radius: 20px; background: #14130C; color: #F7F7F9; box-shadow: inset 5px 0 0 #F4DF48, 0 30px 60px -40px rgba(20,19,12,.8); }
.cx-vd-cta .vd-cta-sab .cx-mono{ color: #F4DF48; } .cx-vd-cta .vd-cta-sab p{ inset: 56px 24px 22px; color: #F7F7F9; max-width: none; font-size: 16.5px; }
@media (max-width: 1100px){ .cx-vd-cta{ grid-template-columns: 1fr; } .cx-vd-cta .vd-cta-sab{ max-width: 520px; } }
@media (max-width: 620px){ .cx-vd-cta .vd-cta-sab{ min-height: 190px; } }
/* 20-09: as regras do «Sabias que…» estavam presas a `.mega` (o menu), por isso na home as frases apareciam todas ao mesmo tempo.
   Aqui ficam as mesmas regras, agora para a faixa amarela da home. */
.cx-vd-cta .vd-cta-sab{ overflow: hidden; }
.cx-vd-cta .vd-cta-sab p{ position: absolute; margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.45; opacity: 0; animation: msab 12s infinite; animation-delay: calc(var(--k) * 3s); }
@media (prefers-reduced-motion: reduce){ .cx-vd-cta .vd-cta-sab p{ animation: none; } .cx-vd-cta .vd-cta-sab p:first-of-type{ opacity: 1; } }
/* ══ «A RECEITA» (20-09, escolha dela): fecho da pagina da formacao. Tres perguntas a' esquerda, com «Outro: qual?» e um campo aberto para
   detalhes (pedido dela); a' direita a proposta escreve-se numa folha com o fio amarelo. JS em assets/receita.js ══ */
.cx-rc{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.cx-rc-esq{ display: grid; gap: 22px; }
.cx-rc-t{ display: block; margin-bottom: 10px; font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: #14130C; }
.cx-rc-ops{ display: flex; flex-wrap: wrap; gap: 8px; }
.cx-rc-ops button{ padding: 12px 17px; border-radius: 999px; border: 2px solid #14130C; background: none; color: #14130C; font: 700 15px/1 'Inter Tight', sans-serif; cursor: pointer; transition: background .25s, color .25s, transform .3s var(--fx); }
.cx-rc-ops button:hover{ transform: translateY(-3px); } .cx-rc-ops button.on{ background: #14130C; color: #F4DF48; }
.cx-rc-ops .cx-rc-outro{ border-style: dashed; }
.cx-rc-livre, .cx-rc-det{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.cx-rc-livre[hidden]{ display: none; }
.cx-rc-livre input, .cx-rc-det textarea{ padding: 14px 15px; border-radius: 13px; border: 1.5px solid rgba(20,19,12,.2); background: #fff; font: 500 16px/1.5 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #14130C; resize: vertical; }
.cx-rc-livre input:focus, .cx-rc-det textarea:focus{ outline: 0; border-color: #14130C; box-shadow: 0 0 0 4px rgba(244,223,72,.7); }
.cx-rc-folha{ position: relative; padding: 34px 34px 30px; border-radius: 24px; background: #FFFDF7; box-shadow: 0 40px 80px -46px rgba(20,19,12,.65); min-height: 420px; display: flex; flex-direction: column; }
.cx-rc-folha::before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 24px 0 0 24px; background: #F4DF48; }
.cx-rc-folha .cx-mono{ color: #8A8468; }
.cx .cx-rc-folha h3{ margin: 14px 0 20px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: #14130C; }
.cx-rc-l{ display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid #E6E0D0; font-size: 16.5px; line-height: 1.45; }
.cx-rc-l i{ font-style: normal; color: #8A8468; font: 600 11px/1.6 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.cx-rc-l b{ font-weight: 700; color: #14130C; }
.cx-rc-fim{ margin-top: auto; padding-top: 24px; } .cx-rc-fim .cx-mono{ display: block; margin-top: 14px; }
@media (max-width: 900px){ .cx-rc{ grid-template-columns: 1fr; } .cx-rc-folha{ min-height: 0; } .cx-rc-l{ grid-template-columns: 1fr; gap: 4px; } }
/* ══ «A FAIXA» no topo do blogue (20-09, escolha dela): faixa escura a toda a largura, titulo centrado, numeros a correr por tras e a caixa
   de pesquisa branca por baixo, com atalhos. A pesquisa filtra o mural a serio (assets/mural.js). ══ */
/* 20-09: o `isolation: isolate` saiu daqui. Fechava um plano proprio e prendia la' dentro TUDO o que nasce na
   capa, ate' o que esta' em `position: fixed`, e era por isso que os paineis dos filtros abriam por baixo da fita
   amarela dos prazos. O que o isolate garantia (as camadas de fundo, em z-index negativo, nao fugirem para tras da
   pagina) passa a ser garantido pelo `z-index: 0` da propria capa, que cria o plano sem prender os descendentes
   posicionados. */
.pr-cabeca.cx-mu-capa{ position: relative; z-index: 0; text-align: center; padding-bottom: 34px; }
.cx-mu-capa::before{ content: ''; position: absolute; z-index: -3; top: 0; bottom: 0; left: 50%; width: var(--lj, 100vw); transform: translateX(-50%);
  background: radial-gradient(900px 500px at 25% 25%, rgba(244,223,72,.20), transparent 65%), radial-gradient(700px 420px at 78% 70%, rgba(244,223,72,.10), transparent 70%); }
.cx-mu-capa::after{ content: ''; position: absolute; z-index: -2; top: 0; bottom: 0; left: 50%; width: var(--lj, 100vw); transform: translateX(-50%); opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 62px 62px; }
.cx-mu-num{ position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: var(--lj, 100vw); transform: translateX(-50%); overflow: hidden; pointer-events: none;
  font: 700 15px/2.4 'JetBrains Mono', monospace; color: rgba(244,223,72,.12); white-space: nowrap; letter-spacing: .3em; }
.cx-mu-num div{ animation: cx-desliza 34s linear infinite; } .cx-mu-num div:nth-child(even){ animation-direction: reverse; }
@keyframes cx-desliza{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.cx-mu-capa .pr-migalhas{ text-align: left; }
.cx-mu-capa h1{ margin-left: auto; margin-right: auto; max-width: 16ch; }
.cx-mu-capa .pr-lede{ margin-left: auto; margin-right: auto; max-width: 58ch; }
.cx-mu-busca{ margin: 46px auto 0; max-width: 860px; }
.cx-mu-b{ display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 26px; border-radius: 999px; background: #FFFDF7; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.cx-mu-b svg{ flex: 0 0 auto; width: 22px; height: 22px; stroke: #8A8468; fill: none; stroke-width: 2; stroke-linecap: round; }
.cx-mu-b input{ flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 17px/1.4 'Inter Tight', sans-serif; color: #14130C; }
.cx-mu-b input::placeholder{ color: #8A8468; }
.cx-mu-b button{ padding: 16px 28px; border: 0; border-radius: 999px; background: #14130C; color: #F4DF48; font: 700 15px/1 'Inter Tight', sans-serif; cursor: pointer; white-space: nowrap; }
.cx-mu-sug{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.cx-mu-sug button{ padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: none; color: #C9C9D2; font: 600 13.5px/1 'Inter Tight', sans-serif; cursor: pointer; }
.cx-mu-sug button:hover{ background: #F4DF48; border-color: #F4DF48; color: #14130C; }
@media (max-width: 680px){ .cx-mu-b{ flex-wrap: wrap; border-radius: 26px; } .cx-mu-b input{ width: 100%; } .cx-mu-b button{ width: 100%; } }
/* ══ 20-09 · transição do «Sabias que…»: a frase nova entrava antes de a anterior sair e liam-se as duas ao mesmo tempo. Agora cada frase sai
   por completo antes de a seguinte entrar, com meio segundo de intervalo. Vale para o menu Carreiras e para a faixa da home. ══ */
@keyframes msab2{ 0%{ opacity: 0; transform: translateY(10px); } 3%{ opacity: 1; transform: none; } 27%{ opacity: 1; transform: none; } 30%{ opacity: 0; transform: translateY(-8px); } 100%{ opacity: 0; transform: translateY(10px); } }
.mega .msab p, .cx-vd-cta .vd-cta-sab p{ animation-name: msab2; animation-duration: 12s; animation-delay: calc(var(--k) * 4s); animation-timing-function: var(--fx); }
/* 20-09: os números ficavam demasiado presentes e competiam com o título; menos opacidade e uma clareira ao centro, onde o texto vive */
.cx-mu-num{ color: rgba(244,223,72,.085); -webkit-mask-image: radial-gradient(70% 60% at 50% 46%, transparent 18%, #000 78%); mask-image: radial-gradient(70% 60% at 50% 46%, transparent 18%, #000 78%); }
/* ══ RECOLHER O TEMA (20-09, ideia dela): quando a pesquisa nao devolve nada, o mural pergunta sobre o que a pessoa queria ler. O campo
   chega ja' preenchido com o que ela escreveu. Substituiu o beco sem saida que so' dizia «ainda nao escrevemos sobre isso». ══ */
form.cx-mu-zero{ grid-column: 1 / -1; display: grid; gap: 12px; max-width: 620px; margin: 30px auto; padding: 38px 34px 32px; border-radius: 28px; background: #14130C; color: #F7F7F9; box-shadow: inset 6px 0 0 #F4DF48, 0 40px 80px -50px rgba(0,0,0,.9); text-align: left; }
form.cx-mu-zero[hidden]{ display: none; }
form.cx-mu-zero .cx-mono{ color: #F4DF48; }
.cx form.cx-mu-zero h3{ margin: 4px 0 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: #F7F7F9; }
.cx form.cx-mu-zero p{ margin: 0 0 6px; max-width: none; font-size: 16px; line-height: 1.55; color: #C9C9D2; font-weight: 400; }
form.cx-mu-zero label{ display: flex; flex-direction: column; gap: 8px; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8E8E9C; }
form.cx-mu-zero label small{ letter-spacing: .06em; text-transform: none; color: #6F6F7C; }
form.cx-mu-zero input[type="text"], form.cx-mu-zero input[type="email"]{ padding: 14px 15px; border-radius: 13px; border: 1px solid #3A3A44; background: #1A1A21; font: 500 16px/1.3 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #F7F7F9; }
form.cx-mu-zero input:focus{ outline: 0; border-color: #F4DF48; box-shadow: 0 0 0 4px rgba(244,223,72,.25); }
form.cx-mu-zero .dl-robo{ background: #1A1A21; border-color: #3A3A44; } form.cx-mu-zero .dl-robo-b{ color: #F7F7F9; } form.cx-mu-zero .dl-robo-b i{ border-color: #F7F7F9; background: #14130C; }
form.cx-mu-zero .dl-robo-b.ok i{ background: #F4DF48; } form.cx-mu-zero .dl-robo small{ color: #6F6F7C; }
form.cx-mu-zero .pr-btn{ justify-content: center; cursor: pointer; font-family: inherit; margin-top: 4px; }
.cx form.cx-mu-zero .cx-mu-av{ margin: 0; font-size: 12.5px; color: #6F6F7C; }
/* ══ «A RÉGUA DE VIDRO» (20-09, escolha dela): a doca do blogue passou de três filas a uma linha. Pesquisa à esquerda, três botões que abrem
   um painel com as contagens e as FOTOGRAFIAS das autoras, e as escolhas por baixo como fichas que se tiram uma a uma. ══ */
.cx-mu-doca{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; grid-template-columns: none; padding: 11px 12px 11px 22px; border-radius: 999px; }
.cx-mu-lupa{ display: flex; align-items: center; gap: 10px; flex: 1; min-width: 190px; }
.cx-mu-lupa svg{ width: 19px; height: 19px; stroke: #8E8E9C; fill: none; stroke-width: 2; stroke-linecap: round; }
.cx-mu-lupa input{ flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #F7F7F9; font: 500 15.5px/1.4 'Inter Tight', sans-serif; }
.cx-mu-lupa input::placeholder{ color: #6F6F7C; }
.cx-mu-grupos{ display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cx-mu-g{ position: relative; }
button.cx-mu-gb{ display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid #3A3A44; border-radius: 999px; background: none; color: #F7F7F9; font: 600 14.5px/1 'Inter Tight', sans-serif; cursor: pointer; transition: all .25s; }
button.cx-mu-gb:hover{ border-color: #F7F7F9; } .cx-mu-g.ab > .cx-mu-gb, .cx-mu-g.tem > .cx-mu-gb{ background: #F4DF48; border-color: #F4DF48; color: #14130C; }
.cx-mu-gb i{ font-style: normal; font-size: 10px; opacity: .6; transition: transform .3s; } .cx-mu-g.ab .cx-mu-gb i{ transform: rotate(180deg); }
.cx-mu-pop{ position: absolute; z-index: 200; left: 0; top: calc(100% + 10px); min-width: 264px; padding: 8px; border-radius: 20px; background: #14130C; border: 1px solid #2A2A33; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); display: none; }
.cx-mu-g.ab .cx-mu-pop{ display: block; animation: cx-mu-sobe .28s var(--fx); }
@keyframes cx-mu-sobe{ from{ opacity: 0; transform: translateY(-8px); } }
button.cx-mu-f{ display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: 0; border-radius: 13px; background: none; color: #C9C9D2; font: 600 14.5px/1.3 'Inter Tight', sans-serif; cursor: pointer; text-align: left; transition: background .2s, color .2s; }
button.cx-mu-f:hover{ background: #1F1F27; color: #F7F7F9; } button.cx-mu-f.on{ background: #F4DF48; color: #14130C; }
button.cx-mu-f img{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: 0 0 auto; filter: grayscale(1); transition: filter .25s; }
button.cx-mu-f:hover img, button.cx-mu-f.on img{ filter: none; }
button.cx-mu-f small{ margin-left: auto; font: 600 11px/1 'JetBrains Mono', monospace; opacity: .55; }
.cx-mu-fim{ margin-left: auto; padding-left: 6px; }
button.cx-mu-limpa{ display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 17px; }
.cx-mu-fichas{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.cx-mu-fichas:empty{ display: none; }
.cx-mu-fichas button{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 999px; background: #14130C; color: #F7F7F9; font: 600 13px/1 'Inter Tight', sans-serif; cursor: pointer; }
.cx-mu-fichas button span{ opacity: .55; font-size: 15px; line-height: 1; }
.cx-mu-fichas button:hover{ background: #F4DF48; color: #14130C; } .cx-mu-fichas button:hover span{ opacity: 1; }
@media (max-width: 1100px){ .cx-mu-doca{ border-radius: 26px; } .cx-mu-lupa{ width: 100%; flex: none; } .cx-mu-fim{ margin-left: 0; } }
/* 20-09 (pedido dela): a assinatura de cada peça do mural leva a FOTOGRAFIA da autora, como nos filtros, em vez das iniciais */
.cx-mu-aut img{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: 0 0 auto; background: #2A2A33; }
.cx-mu-artigo .cx-mu-aut img, .cx-mu-noticia .cx-mu-aut img, .cx-mu-ebook .cx-mu-aut img{ box-shadow: 0 0 0 2px rgba(20,19,12,.12); }
.cx-mu-ferramenta .cx-mu-aut img{ box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
/* ══ 20-09 · os cartões «Sabias que…» (menu Carreiras e faixa da home) deixam de ter fundo preto liso: levam os números a correr por trás,
   como a faixa do blogue. São gerados na geração, com semente fixa, e deslizam só com CSS. ══ */
.msab{ position: relative; isolation: isolate; overflow: hidden; }
.cx-nf-num{ position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; display: block;
  font: 700 12px/2.1 'JetBrains Mono', monospace; letter-spacing: .26em; color: rgba(244,223,72,.26); white-space: nowrap; }
.cx-nf-num span{ display: block; animation: cx-desliza 13s linear infinite; }
.cx-nf-num span:nth-child(even){ animation-direction: reverse; animation-duration: 18s; }
.msab::after{ content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(78% 72% at 50% 50%, rgba(20,19,12,.86) 30%, rgba(20,19,12,.35) 100%); }
@media (prefers-reduced-motion: reduce){ .cx-nf-num span{ animation: none; } }
/* 20-09 (pedido dela): a régua estava colada à faixa amarela dos prazos; fica com uma linha em branco antes */
.cx-mu-doca{ margin-top: 36px; }
@media (max-width: 680px){ .cx-mu-doca{ margin-top: 24px; } }

/* ══ 20-09 (pedido dela): no h1 do ADN, «com clareza» leva sublinhado. A expressão vem de `SUBLINHA_H1` no gerador, não de uma marca no copy. ══ */
.cx .pr-cabeca h1 .pr-sub{ text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 10px; text-decoration-skip-ink: none; }

/* «ADERE TAMBEM» (20-09, pedido dela): o convite do Compromisso e' um cartao AMARELO FIXO com o selo oficial da iniciativa.
   A primeira versao levava fotografia de fundo; ela recusou-a. */
.cx-ade-sec{ margin-top: 10px; }
.cx-ade{ position: relative; overflow: hidden; border-radius: 34px; background: #F4DF48; color: #14130C;
  box-shadow: 0 60px 110px -60px rgba(20,19,12,.45), 0 0 0 1px rgba(20,19,12,.06); }
.cx-ade-txt{ position: relative; z-index: 2; padding: clamp(36px, 4.4vw, 60px) clamp(24px, 4vw, 60px); max-width: 760px; }
.cx-ade-selo{ display: block; width: 200px; height: auto; margin-bottom: 24px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -26px rgba(20,19,12,.5); }
.cx-ade-txt h2{ margin: 0 0 12px; color: #14130C; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.02em; }
.cx-ade-txt p{ margin: 0 0 26px; color: #3D3A22; font-size: 17px; line-height: 1.6; }
.cx-ade .pr-btn-primary{ background: #14130C; color: #F7F7F9; box-shadow: none; }
.cx-ade .pr-btn-primary:hover{ background: #2A2A33; }
@media (max-width: 720px){ .cx-ade{ border-radius: 26px; } .cx-ade-selo{ width: 160px; } }


/* «O QUE DIZEM OS NOSSOS CLIENTES» (20-09). Tres formatos na mesma folha, escolhidos pelo numero de
   testemunhos autorizados: .cx-tst-so (um so), .cx-tst-asp (tres a cinco) e .cx-tst-pass (seis ou mais). */
.cx-tst{ padding-block: clamp(50px, 6vw, 84px); }
.cx-tst-grelha{ display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; margin-top: 34px; }
.cx-tst-c{ position: relative; margin: 0; padding: 34px 28px 26px; border-radius: 26px; background: #fff;
  box-shadow: 0 30px 60px -44px rgba(20,19,12,.5), 0 0 0 1px rgba(20,19,12,.07); display: flex; flex-direction: column; gap: 20px; }
.cx-tst-c, .cx-tst-c blockquote, .cx-tst-c figcaption b{ color: #14130C; }
.cx-tst-am{ background: #F4DF48; box-shadow: 0 30px 60px -44px rgba(20,19,12,.5); }
.cx-tst-am, .cx-tst-am blockquote, .cx-tst-am figcaption b{ color: #14130C; }
.cx-tst-es, .cx-tst-es blockquote, .cx-tst-es figcaption b{ color: #F7F7F9; }
.cx-tst-es{ background: #14130C; color: #F7F7F9; }
.cx-tst-es small{ color: #ADADBA; } .cx-tst-es .cx-tst-av{ background: #2A2A33; color: #F4DF48; }
.cx-tst-as{ position: absolute; top: 10px; right: 22px; font: 700 68px/1 var(--tit, inherit); color: rgba(20,19,12,.1); }
.cx-tst-es .cx-tst-as{ color: rgba(255,255,255,.14); }
.cx-tst-c blockquote, .cx-tst-grande blockquote{ margin: 0; font-size: 17px; line-height: 1.55; font-weight: 500; }
.cx-tst-c b, .cx-tst-grande b{ font-weight: 800; }
.cx-tst-c figcaption, .cx-tst-grande figcaption{ display: flex; align-items: center; gap: 12px; margin-top: auto; }
.cx-tst-c figcaption b, .cx-tst-grande figcaption b{ display: block; font-size: 15px; font-weight: 700; }
.cx-tst-c small, .cx-tst-grande small{ display: block; font-size: 13px; color: #6B6B78; }
.cx-tst-av{ display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: #14130C; color: #F4DF48; font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.cx-tst-am .cx-tst-av{ background: #14130C; color: #F4DF48; } .cx-tst-am small{ color: #3D3A22; }
/* um so' testemunho: citacao grande, sozinha */
.cx-tst-grande{ margin: 34px auto 0; max-width: 860px; padding: 44px clamp(26px, 4vw, 54px); border-radius: 30px;
  background: #F4DF48; box-shadow: 0 40px 80px -56px rgba(20,19,12,.55); }
.cx-tst-grande blockquote{ font-size: clamp(20px, 2.4vw, 27px); line-height: 1.4; font-weight: 600; letter-spacing: -.01em; }
.cx-tst-grande figcaption{ margin-top: 26px; } .cx-tst-grande small{ color: #3D3A22; }
/* seis ou mais: a passadeira, duas fitas em sentidos opostos, que param com o rato */
.cx-tst{ position: relative; overflow: hidden; }
/* as fitas sangram para fora da margem da pagina, para se perceber que continuam */
.cx-tst-fita{ display: flex; gap: 20px; width: max-content; margin-top: 22px;
  margin-inline: calc(50% - 50vw); animation: cx-tst-anda 60s linear infinite; }
.cx-tst-fita.cx-tst-b{ animation-direction: reverse; animation-duration: 77s; animation-delay: -19s; }
.cx-tst-fita .cx-tst-c{ width: 360px; flex: none; }
.cx-tst:hover .cx-tst-fita, .cx-tst:focus-within .cx-tst-fita{ animation-play-state: paused; }
/* as pontas desvanecem, para os cartoes nao aparecerem cortados a seco */
.cx-tst::before, .cx-tst::after{ content: ""; position: absolute; top: 0; bottom: 0; width: clamp(20px, 3.5vw, 62px); z-index: 3; pointer-events: none; }
.cx-tst::before{ left: 0; background: linear-gradient(90deg, #F0EBE0, rgba(240,235,224,0)); }
.cx-tst::after{ right: 0; background: linear-gradient(270deg, #F0EBE0, rgba(240,235,224,0)); }
@keyframes cx-tst-anda{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .cx-tst-fita{ animation: none; } }


/* 20-09: aqui havia uma regra a forcar o marcador amarelo nos titulos dos testemunhos, dos clientes e do «Precisas
   desta». Saiu: o marcador nao estava partido, so' nao aparecia nas CAPTURAS, porque acende com a classe .on, que o
   titulo recebe ao entrar no ecra (regras .cx .pr-sec-head h2.rise em, mais acima). Forca'-lo matava a animacao. */


/* «O CASO REAL» (20-09): o caso da ETP Sico' dentro da pagina da consultoria financeira e fiscal.
   Cartao escuro, para se distinguir do resto da pagina e do tom dos casos ilustrativos. */
.cx-cr-sec{ margin-block: 10px; }
.cx-cr{ position: relative; overflow: hidden; border-radius: 32px; padding: clamp(32px, 4vw, 54px); color: #F7F7F9;
  background: linear-gradient(165deg, #1A1A21, #0A0A0D); box-shadow: 0 60px 110px -60px rgba(20,19,12,.9); }
.cx-cr-topo{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cx-cr-et{ padding: 5px 12px; border-radius: 999px; background: #F4DF48; color: #14130C; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cx-cr-setor{ color: #8E8E9C; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.cx-cr h2{ margin: 0 0 24px; color: #F7F7F9; font-size: clamp(25px, 3.1vw, 36px); line-height: 1.14; letter-spacing: -.02em; max-width: 19ch; }
.cx-cr-prova{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.cx-cr-prova div{ flex: 1 1 150px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.cx-cr-prova b{ display: block; color: #F4DF48; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.1; }
.cx-cr-prova span{ display: block; margin-top: 5px; color: #ADADBA; font-size: 13px; line-height: 1.35; }
.cx-cr dl{ margin: 0 0 28px; display: grid; gap: 20px; }
.cx-cr dt{ margin-bottom: 6px; color: #F4DF48; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cx-cr dd{ margin: 0; color: #D6D6DE; font-size: 16px; line-height: 1.6; max-width: 72ch; }
.cx-cr-mudou dd{ color: #F7F7F9; font-weight: 600; }
.cx-cr .pr-btn-ghost{ border-color: rgba(255,255,255,.25); color: #F7F7F9; }
.cx-cr .pr-btn-ghost:hover{ background: rgba(255,255,255,.08); }
@media (min-width: 900px){ .cx-cr dl{ grid-template-columns: 1fr 1fr; } .cx-cr-mudou{ grid-column: 1 / -1; } }


/* 20-09: distinguir o caso REAL dos exemplos, na home e na pagina dos casos. */
.cx-caso-via.cx-caso-real{ background: #F4DF48; color: #14130C; font-weight: 800; }
.cx-caso-ex{ margin-left: auto; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(20,19,12,.2);
  color: #6B6B78; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cx-cr-prova-clara{ margin: 4px 0 22px; }
.cx-cr-prova-clara div{ background: rgba(20,19,12,.04); border-color: rgba(20,19,12,.1); }
.cx-cr-prova-clara b{ color: #14130C; } .cx-cr-prova-clara span{ color: #6B6B78; }


/* «ESTA OU A OUTRA?» (20-09): a distincao por escrito entre a consultoria financeira e fiscal e o apoio a' gestao. */
.cx-qual{ display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 860px){ .cx-qual{ grid-template-columns: 1fr 1fr; } }
.cx-qual-c{ padding: 30px 28px; border-radius: 24px; background: #fff; border: 1px solid rgba(20,19,12,.09);
  display: flex; flex-direction: column; gap: 12px; }
.cx-qual-esta{ background: #F4DF48; border-color: transparent; }
.cx-qual-c .cx-mono{ font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #6B6B78; }
.cx-qual-esta .cx-mono{ color: #3D3A22; }
.cx-qual-c h3{ margin: 0; font-size: clamp(19px, 2.2vw, 23px); line-height: 1.2; letter-spacing: -.01em; color: #14130C; }
.cx-qual-esta h3{ color: #14130C; }
.cx-qual-c .pr-btn-ghost{ border-color: rgba(20,19,12,.28); color: #14130C; }
.cx-qual-c .pr-btn-ghost:hover{ background: rgba(20,19,12,.06); }
.cx-qual-c p{ margin: 0; color: #4A4A57; font-size: 16px; line-height: 1.6; }
.cx-qual-esta p{ color: #3D3A22; }
.cx-qual-c .pr-btn{ align-self: flex-start; margin-top: auto; }

/* CARTOES DE TAMANHOS DIFERENTES na passadeira (pedido dela, 20-09): a largura segue o tamanho da frase,
   para a fita ganhar ritmo em vez de parecer uma grelha a andar. */
.cx-tst-fita .cx-tst-c{ width: 360px; }
.cx-tst-fita .cx-tst-p{ width: 288px; }
.cx-tst-fita .cx-tst-g{ width: 430px; }
@media (max-width: 620px){ .cx-tst-fita .cx-tst-c,
  .cx-tst-fita .cx-tst-p, .cx-tst-fita .cx-tst-g{ width: 78vw; } }


/* «QUEM CONFIA OS NUMEROS CONNOSCO» (20-09): os clientes numa FITA de uma fila so', a correr devagar (pedido dela;
   antes era uma grelha de cartoes). Os logotipos entram a cinzento e ganham cor ao passar o rato, para a fila se ler
   como um conjunto e nao como uma colecao de cores alheias. So' entra quem tem logotipo (decisao dela, 20-09). */
.cx-cli{ padding-block: clamp(34px, 4vw, 56px); overflow: hidden; }
.cx-cli-janela{ position: relative; margin-top: 30px; margin-inline: calc(50% - 50vw); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cx-cli-fita{ display: flex; width: max-content; animation: cx-cli-anda 70s linear infinite; }
.cx-cli-janela:hover .cx-cli-fita, .cx-cli-janela:focus-within .cx-cli-fita{ animation-play-state: paused; }
@keyframes cx-cli-anda{ to{ transform: translateX(-50%); } }
/* 20-09 (pedido dela): SEM CAIXA a' volta de cada logotipo. Os logotipos correm soltos, separados so' pelo espaco.
   Sem caixa a dar-lhes o mesmo tamanho, o que os alinha e' a ALTURA: todos cabem na mesma faixa de 56 px. */
.cx-cli-fita ul{ list-style: none; margin: 0; padding: 0 clamp(22px, 3vw, 38px); display: flex; align-items: center; gap: clamp(44px, 6vw, 76px); flex: none; }
.cx-cli-fita li{ flex: none; margin: 0; display: grid; place-items: center; height: 84px; }
.cx-cli-logo{ display: block; max-width: 176px; max-height: 56px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1) contrast(1.25) brightness(.78); opacity: .82; transition: filter .3s, opacity .3s, transform .3s var(--fx, ease); }
.cx-cli-fita li:hover .cx-cli-logo{ filter: none; opacity: 1; transform: scale(1.06); }
@media (max-width: 620px){ .cx-cli-fita li{ height: 68px; } .cx-cli-logo{ max-width: 128px; max-height: 44px; } }
@media (prefers-reduced-motion: reduce){ .cx-cli-fita{ animation: none; } .cx-cli-janela{ overflow-x: auto; } .cx-cli-fita ul[aria-hidden]{ display: none; } }


/* 20-09 (reparo dela): os paineis dos filtros do blogue abriam ATRAS da fita amarela dos prazos. A culpa nao era
   do z-index do painel: era o `isolation: isolate` da .cx-mu-capa, que fecha um plano proprio e prende la' dentro
   tudo o que nasce na capa, por mais alto que esteja. A capa precisa do isolate para as camadas do fundo, por isso
   o que se faz e' tirar o painel de dentro do plano: passa a `position: fixed`, posicionado pelo JS junto ao botao.
   Assim vive na pagina e nao na capa, e fica por cima da fita. */
.cx-mu-busca{ z-index: 120; }
.cx-mu-g{ position: relative; }
.cx-mu-g.ab{ z-index: 200; }
/* o painel, quando aberto, e' mudado pelo JS para o <body> com esta classe: fica fixo e acima do cabecalho */
.cx-mu-pop.cx-mu-pop-solto{ position: fixed; z-index: 400; display: block; }


/* «A CALCULADORA» (20-09, escolha dela): os cinco valores do ADN sao cinco teclas. A' esquerda a maquina, com o visor
   a escrever o valor em letra de maquina; a' direita o talao com a promessa e a explicacao. Prefixo cx-vl-, porque
   .cx-calc ja' e' de outro bloco. Sem JS (sem a classe .viva) os cinco taloes ficam todos a' vista. */
.cx-vl{ display: grid; gap: clamp(20px, 3vw, 44px); align-items: stretch; margin-top: 30px; }
@media (min-width: 920px){ .cx-vl{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.cx-vl-maq{ background: linear-gradient(165deg, #22222B, #0A0A0D); border-radius: 34px; padding: clamp(20px, 2.6vw, 32px); align-self: start;
  box-shadow: 0 60px 110px -60px rgba(20,19,12,.95), inset 0 1px 0 rgba(255,255,255,.08); }
.cx-vl-visor{ background: #0D120B; border-radius: 18px; padding: 18px 20px; min-height: 132px; border: 1px solid #273022;
  box-shadow: inset 0 0 40px rgba(0,0,0,.8); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.cx-vl-n{ font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #5F7A4A; margin-bottom: 8px; }
.cx-vl-v{ font: 700 clamp(19px, 2.3vw, 27px)/1.15 'JetBrains Mono', ui-monospace, monospace; color: #F4DF48; letter-spacing: -.02em;
  text-shadow: 0 0 18px rgba(244,223,72,.45); word-break: break-word; }
.cx-vl-v::after{ content: "_"; animation: cx-vl-pisca 1s steps(1) infinite; }
@keyframes cx-vl-pisca{ 50%{ opacity: 0; } }
.cx-vl-teclas{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 16px; }
.cx-vl-tc{ grid-column: span 2; border: 0; cursor: pointer; border-radius: 16px; padding: 16px 8px 14px; background: #2E2E38; color: #F7F7F9;
  font: 800 13.5px/1.15 'Inter Tight', system-ui, sans-serif; letter-spacing: -.01em; display: grid; gap: 6px; justify-items: center;
  box-shadow: 0 6px 0 #15151B, 0 14px 20px -10px #000; transition: transform .12s, box-shadow .12s, background .25s, color .25s; }
.cx-vl-tc:nth-child(4), .cx-vl-tc:nth-child(5){ grid-column: span 3; }
.cx-vl-tc i{ font: 700 20px/1 'JetBrains Mono', ui-monospace, monospace; font-style: normal; color: #F4DF48; transition: color .25s; }
.cx-vl-tc:hover{ background: #3A3A46; }
.cx-vl-tc:focus-visible{ outline: 3px solid #F4DF48; outline-offset: 3px; }
.cx-vl-tc:active, .cx-vl-tc.on{ transform: translateY(5px); box-shadow: 0 1px 0 #15151B, 0 4px 10px -6px #000; }
.cx-vl-tc.on{ background: #F4DF48; color: #14130C; } .cx-vl-tc.on i{ color: #14130C; }
.cx-vl-taloes{ display: grid; gap: 16px; }
.cx-vl-talao{ position: relative; background: #FFFEFA; border-radius: 4px 4px 22px 22px; padding: clamp(24px, 3vw, 40px); color: #14130C;
  box-shadow: 0 50px 90px -60px rgba(20,19,12,.7), 0 0 0 1px rgba(20,19,12,.08); display: flex; flex-direction: column; justify-content: center; }
.cx-vl-talao::before{ content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 10px;
  background: radial-gradient(circle at 8px -2px, var(--faixa, #F0EBE0) 7px, transparent 7.5px) 0 0 / 16px 10px repeat-x; }
.cx-vl-et{ font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #87878F; margin-bottom: 12px; }
.cx-vl-p{ align-self: flex-start; margin-bottom: 16px; font: 900 15px/1 'Inter Tight', system-ui, sans-serif; background: #F4DF48; padding: 7px 12px; border-radius: 999px; }
.cx-vl-talao h3{ margin: 0 0 12px; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.12; letter-spacing: -.025em; color: #14130C; }
.cx-vl-talao p{ margin: 0; color: #4A4A57; font-size: 16.5px; line-height: 1.6; }
/* com JS: so' o talao escolhido fica a' vista, e sai da maquina a deslizar */
.cx-vl.viva .cx-vl-taloes{ display: block; height: 100%; }
.cx-vl.viva .cx-vl-talao{ display: none; height: 100%; }
.cx-vl.viva .cx-vl-talao.on{ display: flex; animation: cx-vl-sai .5s var(--fx, ease); }
@keyframes cx-vl-sai{ from{ opacity: 0; transform: translateY(-16px); } }
@media (prefers-reduced-motion: reduce){ .cx-vl-v::after, .cx-vl.viva .cx-vl-talao.on{ animation: none; } }


/* ===================================================================================================================
   REPOSTO A 20-09-2026. Estes quatro blocos tinham sido APAGADOS POR ENGANO quando a parede de clientes passou a fita:
   a substituicao foi feita «do inicio do bloco antigo ate' ao fim do bloco dos logotipos» e levou tudo o que estava
   no meio. LICAO: nunca substituir um intervalo entre dois marcadores distantes sem ver o que la' esta' dentro.
   =================================================================================================================== */

/* (1) Os numeros de fundo do bloco «Por tras de cada numero» ficam SEMPRE a correr por tras (pedido dela). Os algarismos
   do titulo assentam nas letras e somem; estes nao. Clareira ao centro, para a frase nao competir com eles. */
.ve.ve-nf{ position: relative; isolation: isolate; overflow: hidden; }
.ve.ve-nf .cx-nf-num{ z-index: 0; opacity: .085; color: #14130C;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 30%, #000 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 30%, #000 78%); }
.ve.ve-nf .ve-txt{ position: relative; z-index: 1; }

/* (2) O blogue tem UMA so' caixa de pesquisa (reparo dela): a caixa branca do topo leva a lupa e os filtros Tipo,
   Assunto e Autora la' dentro. Vive sobre fundo preto e herdava letra branca, por isso tudo la' dentro escurece. */
.cx-mu-busca{ position: relative; background: #fff; border-radius: 30px; padding: 14px 16px 16px;
  box-shadow: 0 30px 70px -50px rgba(0,0,0,.75), 0 0 0 1px rgba(20,19,12,.06); }
.cx-mu-busca .cx-mu-b{ box-shadow: none; background: rgba(20,19,12,.04); }
.cx-mu-busca .cx-mu-b input{ color: #14130C; }
.cx-mu-busca .cx-mu-b input::placeholder{ color: #87878F; }
.cx-mu-busca .cx-mu-b svg{ color: #6B6B78; }
.cx-mu-barra{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  padding: 12px 6px 0; border-top: 1px solid rgba(20,19,12,.1); }
.cx-mu-busca .cx-mu-grupos{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-mu-busca .cx-mu-fim{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cx-mu-busca .cx-mu-gb{ color: #14130C; border-color: rgba(20,19,12,.2); background: transparent; }
.cx-mu-busca .cx-mu-gb:hover{ background: rgba(20,19,12,.05); }
.cx-mu-busca .cx-mu-g.tem .cx-mu-gb{ background: #F4DF48; border-color: transparent; color: #14130C; }
.cx-mu-busca .cx-mu-cont{ color: #6B6B78; }
.cx-mu-busca .cx-mu-limpa{ color: #14130C; }
@media (max-width: 680px){ .cx-mu-busca .cx-mu-fim{ margin-left: 0; width: 100%; justify-content: space-between; } }

/* (3) «O CARTAZ» (escolha dela, opcao C do ensaio, sem os algarismos 1 e 2): o titulo e as tres frases a' esquerda, e a'
   direita dois cartazes tortos, um sobre o outro, em duotone preto sobre o amarelo da casa. O duotone faz-se sem tratar
   as fotografias: a figura e' amarela e a imagem, a preto e branco, multiplica-se por cima. Ao passar o rato (ou com o
   foco do teclado), o cartaz endireita-se, vem para a frente e a fotografia ganha a cor verdadeira. */
.cx-hist2{ display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 940px){ .cx-hist2{ grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); } }
.cx-ctz{ position: relative; isolation: isolate; overflow: hidden; border-radius: 36px; background: #14130C;
  padding: clamp(28px, 3.4vw, 50px) clamp(12px, 2vw, 30px) clamp(40px, 4.6vw, 64px);
  box-shadow: 0 70px 120px -70px rgba(20,19,12,.9); }
.cx-ctz .cx-nf-num{ z-index: -1; opacity: .1; color: #F4DF48; }
.cx-ctz-par{ position: relative; display: flex; justify-content: center; align-items: flex-start; }
.cx-ctz-c{ position: relative; margin: 0; width: 54%; background: #F4DF48; border-radius: 10px; overflow: hidden; cursor: pointer;
  box-shadow: 0 40px 80px -36px #000; transition: transform .7s var(--fx, ease), box-shadow .5s; outline: none; }
.cx-ctz-c:first-child{ transform: rotate(-4deg) translateX(9%); z-index: 1; }
.cx-ctz-c:nth-child(2){ transform: rotate(3.5deg) translate(-9%, 7%); z-index: 2; }
.cx-ctz-c img{ display: block; width: 100%; height: auto; aspect-ratio: 21 / 27; object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(1.12); mix-blend-mode: multiply; transition: filter .6s; }
.cx-ctz-cl img{ filter: grayscale(1) contrast(1.2) brightness(1.5); }
.cx-ctz-c:hover, .cx-ctz-c:focus-visible{ transform: rotate(0) scale(1.06); z-index: 5; box-shadow: 0 60px 100px -30px #000, 0 0 0 4px #F4DF48; }
.cx-ctz-c:hover img, .cx-ctz-c:focus-visible img{ filter: none; mix-blend-mode: normal; }
.cx-ctz-c figcaption{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 38px 16px 14px;
  background: linear-gradient(transparent, rgba(10,10,13,.92)); color: #fff; text-align: left; }
.cx-ctz-c figcaption b{ display: block; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.cx-ctz-c figcaption small{ display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: #D6D6DE; }
.cx-ctz-selo{ position: absolute; z-index: 6; left: 50%; top: 46%; translate: -50% -50%; width: clamp(56px, 5.4vw, 74px); height: clamp(56px, 5.4vw, 74px);
  border-radius: 50%; background: #14130C; color: #F4DF48; display: grid; place-items: center; border: 3px solid #F4DF48;
  font: 900 clamp(26px, 2.8vw, 36px)/1 'Inter Tight', system-ui, sans-serif; box-shadow: 0 0 50px rgba(244,223,72,.55);
  animation: cx-ctz-roda 14s linear infinite; pointer-events: none; }
@keyframes cx-ctz-roda{ to{ rotate: 360deg; } }
@media (max-width: 520px){ .cx-ctz-c:first-child{ transform: rotate(-3deg) translateX(6%); } .cx-ctz-c:nth-child(2){ transform: rotate(3deg) translate(-6%, 6%); } }
@media (prefers-reduced-motion: reduce){ .cx-ctz-selo{ animation: none; } .cx-ctz-c{ transition: none; } }

/* (4) A pastilha do tipo de cliente no cartao do testemunho (Gabinete, Empresa, Entidade), igual a' dos casos de estudo. */
.cx-tst-tipo{ align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #F4DF48; color: #14130C;
  font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.cx-tst-am .cx-tst-tipo{ background: #14130C; color: #F4DF48; }
.cx-tst-es .cx-tst-tipo{ background: #F4DF48; color: #14130C; }


/* LINGUAS ESTRANGEIRAS (20-09): os titulos em ingles e em espanhol sao bastante mais longos que os portugueses (o h1
   da home passa de 6 para 12 palavras) e transbordavam as capas, que estao afinadas para frases curtas. Nestas linguas
   o corpo do titulo desce um degrau e a largura maxima alarga, para a frase caber em tres ou quatro linhas. */
html:not([lang^="pt"]) .pr-cabeca-foto h1{ font-size: clamp(34px, 4.05vw, 62px); max-width: 17ch; }
html:not([lang^="pt"]) .vh-in h1{ font-size: clamp(34px, 4.3vw, 66px); max-width: 19ch; }
html:not([lang^="pt"]) .cx-arq-topo h1{ font-size: clamp(34px, 3.9vw, 58px); max-width: 15ch; }
html:not([lang^="pt"]) .pr-wrap .cx-ctf h1{ font-size: clamp(34px, 3.9vw, 62px); max-width: 17ch; }
html:not([lang^="pt"]) .pr-cabeca.cx-tpd h1{ font-size: clamp(32px, 3.7vw, 58px); }
html:not([lang^="pt"]) .pr-cabeca.cx-mu-capa h1{ font-size: clamp(38px, 5.4vw, 84px); }


/* «A SECRETARIA» (20-09, escolha dela): os testemunhos da home sao papeis pousados numa secretaria escura, presos com
   fita-cola, e pode-se pegar-lhes e arrasta'-los. Substituiu a passadeira (as regras .cx-tst-fita ficaram sem uso).
   POR OMISSAO os papeis vao em grelha, ligeiramente tortos: e' o que se ve sem JS e no telemovel. So' com a classe
   .viva, que o assets/blocos.js poe em ecras largos, e' que passam a posicao absoluta e ficam arrastaveis. */
.cx-sc{ position: relative; isolation: isolate; margin-top: 30px; padding: clamp(26px, 3vw, 40px) clamp(16px, 2.4vw, 32px) 40px; border-radius: 38px; background: #0E0E12;
  box-shadow: 0 70px 120px -70px rgba(20,19,12,.9); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 22px; overflow: hidden; }
.cx-sc::before{ content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-size: 56px 56px;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); }
.cx-sc::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 60% at 50% 45%, rgba(244,223,72,.12), transparent 70%); }
.cx-sc-p{ position: relative; margin: 0; padding: 22px 22px 18px; border-radius: 6px; background: #FFFEFA; color: #14130C; transform: rotate(var(--r, 0deg));
  box-shadow: 0 26px 50px -22px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.5) inset; }
.cx-sc-p::before{ content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 20px; translate: -50% 0; transform: rotate(-2deg);
  background: rgba(244,223,72,.55); border: 1px solid rgba(20,19,12,.12); }
.cx-sc-am{ background: #F4DF48; } .cx-sc-am::before{ background: rgba(255,255,255,.6); }
.cx-sc-es{ background: #23232B; color: #F7F7F9; }
.cx-sc-am .cx-tst-tipo{ background: #14130C; color: #F4DF48; }
.cx-sc-p blockquote{ margin: 12px 0 14px; font-size: 15px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em; color: inherit; }
.cx-sc-p blockquote b{ font-weight: 800; background: linear-gradient(transparent 62%, rgba(244,223,72,.9) 62%); }
.cx-sc-am blockquote b, .cx-sc-es blockquote b{ background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cx-sc-q b{ display: block; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.cx-sc-q small{ display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: #6B6B78; }
.cx-sc-es .cx-sc-q small{ color: #ADADBA; }
.cx-sc-dica, .cx-sc-bt{ display: none; }
/* ATENCAO: a assinatura de cada papel e' um <div class="cx-sc-q"> e NAO um <footer>. A primeira versao usava <footer> e
   herdava o estilo do rodape' do site (caixa bege, letra de maquina), que fazia os papeis enormes. */
/* com JS, em ecra largo: a secretaria a serio */
.cx-sc.viva{ display: block; padding: 0; height: calc(var(--linhas, 2) * 330px); min-height: 640px; touch-action: none; user-select: none; }
.cx-sc.viva .cx-sc-p{ position: absolute; left: var(--x); top: var(--y); z-index: var(--z); width: clamp(220px, 21vw, 272px); cursor: grab;
  transition: transform .55s var(--fx, ease), box-shadow .3s, left .7s var(--fx, ease), top .7s var(--fx, ease); will-change: transform; }
.cx-sc.viva .cx-sc-p.pega{ cursor: grabbing; transition: box-shadow .2s; z-index: 999 !important; box-shadow: 0 50px 90px -24px #000, 0 0 0 3px #F4DF48; }
.cx-sc.viva .cx-sc-dica{ display: block; position: absolute; left: 24px; bottom: 26px; z-index: 1000; color: #8E8E9C;
  font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.cx-sc.viva .cx-sc-bt{ display: flex; gap: 8px; position: absolute; right: 20px; bottom: 20px; z-index: 1000; }
.cx-sc-bt button{ border: 1px solid rgba(255,255,255,.25); background: rgba(20,19,12,.7); color: #F7F7F9; border-radius: 999px; padding: 10px 16px; cursor: pointer;
  font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cx-sc-bt button:hover, .cx-sc-bt button:focus-visible{ background: #F4DF48; color: #14130C; border-color: transparent; outline: none; }
@media (prefers-reduced-motion: reduce){ .cx-sc.viva .cx-sc-p{ transition: none; } }


/* «O BALCAO DE VOZES» (20-09, pedido dela): os testemunhos de contabilistas na pagina Para gabinetes. Palco escuro, uma
   frase de cada vez em letra grande, e os clientes em baixo como separadores. POR OMISSAO (sem JS) veem-se todas as
   frases, umas por baixo das outras; com a classe .viva, so' a escolhida. */
.cx-bv-sec{ padding-block: clamp(40px, 5vw, 70px); }
.cx-bv{ position: relative; isolation: isolate; overflow: hidden; margin-top: 30px; border-radius: 38px; background: #14130C; color: #F7F7F9;
  padding: clamp(34px, 5vw, 72px) clamp(24px, 5vw, 80px) clamp(28px, 3.4vw, 44px); box-shadow: 0 70px 120px -70px rgba(20,19,12,.9); }
.cx-bv::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 30% 20%, rgba(244,223,72,.14), transparent 70%); }
.cx-bv-as{ position: absolute; z-index: -1; top: -.04em; left: clamp(10px, 2.4vw, 40px); font: 900 clamp(180px, 22vw, 320px)/1 'Inter Tight', system-ui, sans-serif;
  color: transparent; -webkit-text-stroke: 2px rgba(244,223,72,.32); user-select: none; }
.cx-bv-palco{ display: grid; gap: 34px; }
.cx-bv-v{ margin: 0; }
.cx-bv-v blockquote{ margin: 0; font-size: clamp(22px, 3vw, 40px); font-weight: 700; line-height: 1.24; letter-spacing: -.02em; color: #F7F7F9; text-wrap: balance; }
.cx-bv-v blockquote b{ color: #F4DF48; font-weight: 800; }
.cx-bv-v figcaption{ display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.cx-bv-v figcaption b{ display: block; font-size: 16px; font-weight: 800; color: #F7F7F9; }
.cx-bv-v figcaption small{ display: block; margin-top: 2px; font-size: 13px; color: #9E9EAC; }
.cx-bv-av{ display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #F4DF48; color: #14130C;
  font: 800 14px/1 'JetBrains Mono', ui-monospace, monospace; }
.cx-bv-tabs{ display: none; }
.cx-bv.viva .cx-bv-palco{ display: block; min-height: clamp(250px, 26vw, 330px); }
.cx-bv.viva .cx-bv-v{ display: none; }
.cx-bv.viva .cx-bv-v.on{ display: block; animation: cx-bv-entra .55s var(--fx, ease); }
@keyframes cx-bv-entra{ from{ opacity: 0; transform: translateY(14px); } }
.cx-bv.viva .cx-bv-tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.cx-bv-tabs button{ border: 1px solid rgba(255,255,255,.22); background: transparent; color: #C9C9D2; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  font: 700 13.5px/1 'Inter Tight', system-ui, sans-serif; transition: background .25s, color .25s, border-color .25s; }
.cx-bv-tabs button:hover{ color: #F7F7F9; border-color: rgba(255,255,255,.5); }
.cx-bv-tabs button.on{ background: #F4DF48; color: #14130C; border-color: transparent; }
.cx-bv-tabs button:focus-visible{ outline: 3px solid #F4DF48; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .cx-bv.viva .cx-bv-v.on{ animation: none; } }

/* EN e ES, ecra estreito (20-09): a frase traduzida e mais longa e parte-se em duas linhas; com o span em bloco o marcador
   enchia a largura toda. Em linha, o marcador acompanha o texto linha a linha. O portugues nao muda. */
@media (max-width: 900px){ html:not([lang^="pt"]) .ve h2 em > span{ display: inline; width: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; } }

/* Contactos em telemovel (20-09): a regra das duas colunas da linha «.pr-wrap .cx-ctf h1 ... .cx-ctf-in» vinha DEPOIS da regra
   de telemovel e ganhava-lhe: o retrato ficava ao lado do texto, numa coluna de 160px. Em ecra estreito, uma coluna so:
   texto e botoes em cima, retrato em baixo. */
@media (max-width: 900px){ .cx-ctf-in{ grid-template-columns: minmax(0, 1fr); } .cx-ctf-ret{ width: min(100%, 420px); justify-self: center; } }

/* Titulo da FAQ em telemovel (20-09): quando o titulo parte em duas linhas, o marcador enchia a largura toda da segunda.
   O titulo esta dentro de um contentor flex, por isso em ecra estreito o contentor passa a bloco
   e o h2 a linha: com box-decoration-break o marcador acompanha o texto de cada linha. */
@media (max-width: 900px){ .cx .pr-faq .pr-sec-head{ display: block; } .cx .pr-faq .pr-sec-head h2{ display: inline; width: auto; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .cx .pr-faq .pr-sec-head h2 + *{ display: block; margin-top: 22px; } }

.cx-bv + .pr-sec-note{ margin: 20px 0 0 clamp(24px, 5vw, 80px); }   /* a nota «traduzido do portugues» por baixo do balcao de vozes (so EN e ES) */

/* «EM QUE TE PODEMOS AJUDAR» dos servicos publicos (20-09, pedido dela): cartoes com icone e lista de pontos */
.cx .pr-lista.cx-lpt article{ grid-template-columns: 1fr; gap: 18px; }
.cx-lpt-ic{ display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #F4DF48; color: #14130C; transition: transform .45s var(--fx), background .3s, color .3s; }
.cx-lpt-ic svg{ width: 26px; height: 26px; }
.cx .pr-lista.cx-lpt article:hover .cx-lpt-ic{ transform: rotate(-6deg) scale(1.06); background: #14130C; color: #F4DF48; }
.cx-lpt-ul{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.cx-lpt-ul li{ position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.45; color: #3A382C; }
.cx-lpt-ul li::before{ content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 3px; background: #F4DF48; box-shadow: 0 0 0 1.5px #14130C inset; }
.cx .pr-lista.cx-lpt article p{ margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(20,19,12,.12); }
/* o topo desta pagina fica so com «A quem se destina» */
.pr-provas:has(> div:only-child){ grid-template-columns: 1fr; }

/* «ENVIA-NOS O TEU CURRICULO» (21-09, pedido dela): a fotografia do corredor do escritorio e' o fundo da seccao INTEIRA,
   sem caixa, de ponta a ponta do retangulo. A frase pintada na parede fica a' esquerda, a' vista; o texto vai para um
   cartao de vidro a' direita. (A classe cx-cv ja' existia: e' a «conversa».) */
.cx > section.cx-curr{ isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; min-height: min(720px, 56vw); color: #fff;
  background: linear-gradient(90deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.25) 48%, rgba(8,8,10,.80) 100%), url(img/carreiras-corredor.webp) center 40% / cover no-repeat, #0B0B0E; }
.cx > section.cx-curr > *{ width: min(440px, 100%); }
.cx > section.cx-curr .pr-sec-head{ display: block; margin-bottom: 16px; }
.cx > section.cx-curr .pr-sec-head h2{ color: #fff; margin: 0; font-size: clamp(30px, 3.2vw, 44px); text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.cx > section.cx-curr .pr-duplas{ display: block; margin: 0; padding: 24px 26px; border-radius: 22px; background: rgba(12,12,16,.66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.16); }
.cx > section.cx-curr .pr-duplas > div{ border: 0; padding: 0; background: none; box-shadow: none; }
.cx > section.cx-curr .pr-duplas h3{ color: #F4DF48; margin: 0 0 8px; }
.cx > section.cx-curr .pr-duplas p{ color: #E4E4E8; margin: 0; }
.cx > section.cx-curr a.uvd-mail{ color: #F4DF48; }
@media (max-width: 760px){
  .cx > section.cx-curr{ min-height: 560px; align-items: stretch;
    background: linear-gradient(180deg, rgba(8,8,10,.05) 0%, rgba(8,8,10,.45) 45%, rgba(8,8,10,.88) 100%), url(img/carreiras-corredor.webp) 24% center / cover no-repeat, #0B0B0E; }
  .cx > section.cx-curr > *{ width: auto; }
}
.cx > section.cx-curr.cx-curr-esq{ align-items: flex-start;
  background: linear-gradient(270deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.30) 50%, rgba(8,8,10,.82) 100%), url(img/carreiras-estagio.webp) center 72% / cover no-repeat, #0B0B0E; }
@media (max-width: 760px){
  .cx > section.cx-curr.cx-curr-esq{ align-items: stretch;
    background: linear-gradient(180deg, rgba(8,8,10,.05) 0%, rgba(8,8,10,.45) 45%, rgba(8,8,10,.88) 100%), url(img/carreiras-estagio.webp) 70% center / cover no-repeat, #0B0B0E; }
}
/* os e-mails no texto sao ligacoes: sublinhado discreto, a cor do texto a' volta */
a.uvd-mail{ color: inherit; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a.uvd-mail:hover, a.uvd-mail:focus-visible{ text-decoration-color: currentColor; }

/* «O PERCURSO» (21-09, escolha dela entre tres opcoes): as sete coisas do estagio como paragens numa linha. */
.cx-perc{ position: relative; margin-top: 26px; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.cx-perc::before{ content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, #14130C 0, #14130C var(--p, 7%), rgba(20,19,12,.16) var(--p, 7%)); }
.cx-perc-p{ position: relative; display: grid; grid-template-rows: 1fr 46px 1fr; min-height: 440px; padding: 0 10px; outline: 0; }
.cx-perc-n{ grid-row: 2; align-self: center; justify-self: center; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #FAF7F0; border: 3px solid #14130C; font: 700 12px/1 'JetBrains Mono', monospace; color: #14130C; transition: background .25s, transform .25s; }
.cx-perc-p.on .cx-perc-n{ background: #F4DF48; }
.cx-perc-p:hover .cx-perc-n, .cx-perc-p:focus-visible .cx-perc-n{ background: #F4DF48; transform: scale(1.14); }
.cx-perc-t{ display: flex; flex-direction: column; gap: 8px; text-align: center; }
.cx-perc-p:nth-child(odd) .cx-perc-t{ grid-row: 1; justify-content: flex-end; padding-bottom: 22px; }
.cx-perc-p:nth-child(even) .cx-perc-t{ grid-row: 3; justify-content: flex-start; padding-top: 22px; }
.cx-perc-t h3{ margin: 0; font-size: 18px; line-height: 1.12; letter-spacing: -.03em; font-weight: 800; }
.cx-perc-t p{ margin: 0; font-size: 14px; line-height: 1.45; color: #4A483F; }
.cx-perc-pontas{ display: flex; justify-content: space-between; margin-top: 8px; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
@media (max-width: 980px){
  .cx-perc{ grid-template-columns: 1fr; }
  .cx-perc::before{ left: 21.5px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; margin: 0; background: linear-gradient(180deg, #14130C 0, #14130C var(--p, 7%), rgba(20,19,12,.16) var(--p, 7%)); }
  .cx-perc-p{ grid-template-rows: auto; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; min-height: 0; padding: 16px 0; align-items: start; }
  .cx-perc-n{ grid-row: 1; grid-column: 1; align-self: start; }
  .cx-perc-p .cx-perc-t{ grid-row: 1 !important; grid-column: 2; text-align: left; padding: 4px 0 0 !important; }
  .cx-perc-t h3{ font-size: 20px; } .cx-perc-t p{ font-size: 15.5px; }
  .cx-perc-pontas{ display: none; }
}

/* FUNDO AMARELO EM GRADIENTE (21-09, pedido dela): «Por tras de cada numero» e «Quem nos confia» deixam de ser brancas.
   E' UM so' gradiente que atravessa as duas seccoes: amarelo da marca em cima, mais claro na costura das duas seccoes e de novo amarelo da marca em baixo (o amarelo NAO desmaia: ela viu-o «acabar» nos clientes).
   Sobre amarelo o marcador amarelo do titulo desaparecia: nestas duas seccoes o marcador passa a branco. */
.pr-wrap section.ve.ve-nf#janela-clara{ background: linear-gradient(180deg, #F4DF48 0%, #FBEE8A 100%); }
#janela-clara.ve h2 em span{ background-image: linear-gradient(transparent 58%, rgba(255,255,255,.82) 58%); }
#janela-clara.ve-nf .cx-nf-num{ opacity: .11; }
.ve + .cx > section.cx-cli:first-child, .cx > section.cx-cli{ background: linear-gradient(180deg, #FBEE8A 0%, #F8E768 55%, #F4DF48 100%); border-top: 0; }
.cx > section.cx-cli h2 em{ background-image: linear-gradient(100deg, transparent 1.2%, rgba(255,255,255,.86) 3%, rgba(255,255,255,.78) 38%, rgba(255,255,255,.9) 71%, rgba(255,255,255,.8) 96.5%, transparent 98.6%); }
/* sem linha na costura entre as duas seccoes amarelas */
#janela-clara + .cx, #janela-clara + .cx > section.cx-cli:first-child{ border-top: 0 !important; box-shadow: none !important; }
#janela-clara{ border-bottom: 0 !important; margin-bottom: -1px; }
/* CARREIRAS (21-09, pedido dela): a caixa que NAO e' a pagina atual passa a amarelo, para se ver que e' um caminho a seguir. */
.cx-carr a:not([aria-current]){ background: linear-gradient(160deg, #F8E768, #F4DF48); box-shadow: 0 30px 56px -40px rgba(140,120,0,.55); }
.cx-carr a:not([aria-current]) small{ color: #5E5300; }
.cx-carr a:not([aria-current]) span{ color: #2A2819; }
/* o enchimento da linha do percurso anima-se (a variavel tem de ser registada para poder ter transicao) */
@property --p{ syntax: '<percentage>'; inherits: true; initial-value: 7%; }
.cx-perc{ transition: --p .5s cubic-bezier(.16,.84,.34,1); }
.cx-perc-p.on .cx-perc-n{ transform: scale(1.06); }
/* «ONDE TRABALHAS E O QUE VEM DEPOIS» (21-09, pedido dela): a parede «Make yourself proud» e' o fundo da seccao INTEIRA,
   de ponta a ponta, sem caixa (a mesma regra que ela deu para o curriculo). Para a frase se ler inteira por cima dos cartoes,
   o cabecalho ganha altura. A fotografia e' clara: o texto fica escuro e um veu creme a' esquerda segura o titulo sobre as folhas.
   A nota passa para baixo do titulo, para nao ficar por cima das letras da parede. */
.cx > section.cx-foto-depois{ isolation: isolate;
  background: linear-gradient(90deg, rgba(250,247,240,.92) 0%, rgba(250,247,240,.70) 30%, rgba(250,247,240,0) 56%), linear-gradient(180deg, rgba(228,226,224,0) 62%, #E4E2E0 86%), url(img/carreiras-depois.webp) center top / 100% auto no-repeat, #E4E2E0; }
.cx > section.cx-foto-depois .pr-sec-head{ display: block; min-height: clamp(320px, 30vw, 520px); }
.cx > section.cx-foto-depois .pr-sec-head .pr-sec-note{ margin: 18px 0 0; max-width: 34ch; text-align: left; color: #2A2819; }
@media (max-width: 900px){
  .cx > section.cx-foto-depois{ background: linear-gradient(180deg, rgba(250,247,240,0) 0, rgba(250,247,240,0) 58vw, #FAF7F0 67vw), url(img/carreiras-depois.webp) center top / 100% auto no-repeat, #FAF7F0; padding-top: calc(66.7vw + 30px); }
  .cx > section.cx-foto-depois .pr-sec-head{ min-height: 0; }
}
/* A AGENDA (Calendly) dentro de um dialogo do site (21-09). */
.fm-dlg.ag-cal{ width: min(860px, calc(100vw - 24px)); }
.ag-cal-in{ position: relative; display: flex; flex-direction: column; gap: 10px; padding: 32px 28px 22px; }
.ag-cal-in h3{ margin: 0 0 4px; }
.ag-cal-m{ border-radius: 18px; overflow: hidden; background: #fff; border: 1.5px solid rgba(20,19,12,.14); height: min(680px, 68vh); }
.ag-cal-m iframe{ display: block; width: 100%; height: 100%; border: 0; }
.ag-cal-liga{ appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 600px){ .ag-cal-in{ padding: 26px 14px 16px; } .ag-cal-m{ height: 72vh; } }

/* 21-09: as fotos das autoras passaram a ter o fundo transparente: nas bolinhas do mural leva o amarelo por tras */
button.cx-mu-f img, .cx-mu-aut img{ background: #F4DF48; object-position: 50% 12%; }

/* ══ O BALCAO DOS SERVICOS PUBLICOS (22-09, conceito A escolhido por ela; versao 2: a marcacao abre por cima, em passos,
   como no video; JS em assets/balcao.js) ══ */
.cx-bal{ display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 100px; }
.cx-bal-pesq{ position: relative; max-width: 680px; z-index: 3; }
.cx-bal-pesq svg{ position: absolute; left: 18px; top: 29px; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: #6B6754; stroke-width: 2; pointer-events: none; }
.cx-bal-pesq input{ width: 100%; padding: 18px 20px 18px 50px; border-radius: 16px; border: 1.5px solid rgba(20,19,12,.14); background: #fff; font: 500 17px/1.3 'Inter Tight', sans-serif; color: #14130C; }
.cx-bal-pesq input:focus{ outline: 0; border-color: #14130C; box-shadow: 0 0 0 4px rgba(244,223,72,.7); }
.cx-bal-sug{ position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 16px; border: 1px solid #E6E1D2; box-shadow: 0 30px 60px -30px rgba(20,19,12,.5); }
.cx-bal-sug[hidden]{ display: none; }
.cx-bal-sug li{ display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-radius: 11px; cursor: pointer; }
.cx-bal-sug li:hover, .cx-bal-sug li.on{ background: #FFFBE0; }
.cx-bal-sug small{ font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; }
.cx-bal-sug b{ font-size: 16px; font-weight: 700; color: #14130C; }
.cx-bal-sug li.cx-bal-sug-vazio{ display: block; cursor: default; color: #4A483F; font-size: 15px; }
.cx-bal-sug-vazio button{ border: 0; background: none; padding: 0; font: 700 15px 'Inter Tight', sans-serif; color: #14130C; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 3px; text-underline-offset: 4px; cursor: pointer; }
.cx-bal-cats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cx-bal-cat{ font-family: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 22px; border-radius: 22px; background: #fff; border: 2px solid transparent; color: #14130C; cursor: pointer; transition: transform .25s var(--fx, ease), border-color .2s, box-shadow .25s; box-shadow: 0 16px 40px -30px rgba(20,19,12,.45); }
.cx-bal-cat:hover{ transform: translateY(-3px); border-color: #14130C; }
.cx-bal-cat:hover .cx-lpt-ic{ background: #14130C; color: #F4DF48; }
.cx-bal-cat:focus-visible{ outline: 3px solid #14130C; outline-offset: 3px; }
.cx-bal-cat b{ margin-top: 6px; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.cx-bal-cat small{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; }
.cx-bal-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cx-bal-chips i{ font-style: normal; font-size: 12.5px; line-height: 1.2; padding: 5px 8px; border-radius: 8px; background: #FAF7F0; border: 1px solid #E6E1D2; color: #6B6754; }
.cx-bal-leg{ display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: 14px; color: #6B6754; }
.cx-bal-leg > span{ display: inline-flex; align-items: center; gap: 8px; }
.cx-bal-selo{ display: inline-block; flex: none; font: 600 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; padding: 7px 9px; border-radius: 7px; white-space: nowrap; }
.cx-bal-selo.por-ti{ background: #F4DF48; color: #14130C; }
.cx-bal-selo.contigo{ background: #fff; color: #14130C; box-shadow: inset 0 0 0 1.5px #14130C; }
/* a lista completa, fechada no fim */
.cx-bal-todos{ border-top: 1.5px solid rgba(20,19,12,.14); padding-top: 6px; }
.cx-bal-todos summary{ cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 14px 0; font-weight: 700; font-size: 16px; color: #14130C; }
.cx-bal-todos summary::-webkit-details-marker{ display: none; }
.cx-bal-todos summary::before{ content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F4DF48; font-weight: 800; }
.cx-bal-todos[open] summary::before{ content: "\2212"; }
.cx-bal-lista{ list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.cx-bal-sv{ display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #E6E1D2; }
.cx-bal-ent{ display: block; margin-bottom: 5px; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; }
.cx-bal-sv h4{ margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.cx-bal-sv p{ margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: #6B6754; }
.cx-bal-sv p b{ color: #4A483F; font-weight: 600; }
.cx-bal-ag{ border: 0; background: none; padding: 6px 0; font: 700 14.5px 'Inter Tight', sans-serif; color: #14130C; white-space: nowrap; cursor: pointer; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* o dialogo em passos (reaproveita o .fm-dlg da formacao) */
.cx-bal-dlg{ width: min(580px, calc(100vw - 32px)); }
.cx-bal-dlg .fm-dlg-in{ overflow-x: hidden; }
.cx-bal-passos{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cx-bal-passos li{ display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 3px solid #E6E1D2; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #8A8468; }
.cx-bal-passos li i{ font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #EFEBDF; color: #6B6754; font-size: 11px; letter-spacing: 0; flex: none; }
.cx-bal-passos li.on{ border-color: #14130C; color: #14130C; }
.cx-bal-passos li.on i{ background: #14130C; color: #F4DF48; }
.cx-bal-passos li.feito{ border-color: #F4DF48; color: #14130C; }
.cx-bal-passos li.feito i{ background: #F4DF48; color: #14130C; }
.cx-bal-passo[hidden]{ display: none; }
.cx-bal-passo{ display: flex; flex-direction: column; gap: 12px; }
.cx-bal-perg{ margin: 0; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.cx-bal-ops{ display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.cx-bal-op{ display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 13px 15px; border-radius: 14px; border: 1.5px solid rgba(20,19,12,.16); background: #fff; cursor: pointer; font-family: inherit; color: #14130C; }
.cx-bal-op:hover, .cx-bal-op:focus-visible{ border-color: #14130C; background: #FFFBE0; outline: 0; }
.cx-bal-op-t{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-bal-op-t b{ font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.cx-bal-op-t small{ font-size: 13px; line-height: 1.35; color: #6B6754; }
.cx-bal-outro{ align-self: flex-start; border: 0; background: none; padding: 4px 0; font: 600 14px 'Inter Tight', sans-serif; color: #4A483F; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cx-bal-traz{ margin: 0; padding: 12px 14px; border-radius: 12px; background: #FAF7F0; border: 1px solid #E6E1D2; font-size: 14.5px; line-height: 1.45; color: #4A483F; }
.cx-bal-traz .cx-bal-selo{ margin-left: 4px; vertical-align: 1px; }
.cx-bal-dlg input[type="tel"]{ padding: 14px 15px; border-radius: 13px; border: 1.5px solid rgba(20,19,12,.2); background: #fff; font: 500 16px/1.3 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #14130C; }
.cx-bal-formas{ border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-bal-formas legend{ padding: 0; margin-bottom: 8px; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.fm-dlg .cx-bal-formas label{ flex-direction: row; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 14px; border: 1.5px solid rgba(20,19,12,.16); background: #fff; cursor: pointer; font: 500 15px/1.3 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #14130C; }
.fm-dlg .cx-bal-formas label:has(input:checked){ border-color: #14130C; background: #FFFBE0; }
.cx-bal-formas input{ accent-color: #14130C; width: 18px; height: 18px; margin: 0; flex: none; }
.cx-bal-formas b{ display: block; font-weight: 700; }
.cx-bal-formas small{ display: block; color: #6B6754; font-size: 13.5px; }
.cx-bal-dlg .fm-duo{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cx-bal-dlg .fm-duo input{ width: 100%; min-width: 0; }
.cx-bal-erro{ margin: 0; padding: 10px 12px; border-radius: 10px; background: #FDECEA; color: #8A1C12; font-size: 14px; }
.cx-bal-erro[hidden]{ display: none; }
.cx-bal-nav{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.cx-bal-nav [hidden]{ display: none; }
.cx-bal-ant{ border: 0; background: none; padding: 8px 0; font: 600 15px 'Inter Tight', sans-serif; color: #4A483F; cursor: pointer; }
.cx-bal-nav .pr-btn{ margin-top: 0; margin-left: auto; }
@media (max-width: 980px){ .cx-bal-cats{ grid-template-columns: 1fr 1fr; } .cx-bal-lista{ grid-template-columns: 1fr; } }
@media (max-width: 560px){
  .cx-bal-cats{ grid-template-columns: 1fr; } .cx-bal-cat{ padding: 18px; }
  .cx-bal-sv{ grid-template-columns: minmax(0, 1fr) auto; } .cx-bal-sv .cx-bal-selo{ grid-row: 1; grid-column: 2; align-self: start; } .cx-bal-ag{ grid-column: 1 / -1; justify-self: start; }
  .cx-bal-dlg .fm-duo{ grid-template-columns: minmax(0, 1fr); }
  .cx-bal-passos li{ font-size: 9px; letter-spacing: .06em; }
  .cx-bal-nav .pr-btn{ padding: 13px 16px; }
}

/* ══ 22-09 (escolha dela: opcao C de ensaios/sabias-que-3-fundos.html): os cartoes «Sabias que…» levam um grafico parado por
   tras (barras finas e uma linha amarela que sobe) em vez dos numeros apagados. O veu escuro sai; o texto leva sombra. ══ */
.msab .cx-gf{ position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit; }
.msab .cx-gf svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.msab .cx-gf .cx-gf-b{ opacity: .6; }
.msab:has(.cx-gf)::after{ display: none; }
.msab:has(.cx-gf) p{ text-shadow: 0 0 14px #14130C, 0 0 4px #14130C, 0 1px 2px #14130C; }

/* 22-09: o passo 4 do balcao, o calendario da equipa (Calendly da Dyane) dentro do dialogo */
.cx-bal-dlg.cx-bal-larga{ width: min(860px, calc(100vw - 24px)); }
.cx-bal-cal{ height: min(640px, 64vh); }
.cx-bal-cal .cx-bal-feito{ margin: 0; padding: 40px 28px; font-size: 18px; font-weight: 700; line-height: 1.45; color: #14130C; background: #FFFBE0; height: 100%; display: grid; place-items: center; text-align: center; }
.cx-bal-liga{ appearance: none; background: none; border: 0; padding: 8px 0; cursor: pointer; font: 600 15px 'Inter Tight', sans-serif; color: #4A483F; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cx-bal-nav .cx-bal-liga{ margin-left: auto; }
.cx-bal-nav .cx-bal-liga + .pr-btn{ margin-left: 0; }
@media (max-width: 560px){ .cx-bal-nav{ flex-wrap: wrap; } .cx-bal-nav .cx-bal-ir{ width: 100%; justify-content: center; order: -1; } .cx-bal-cal{ height: 70vh; } }

/* ══ 22-09 · home PT: o azulejo dos serviços públicos saiu da parede (ficam sete) e ganhou zona própria logo a seguir,
   «Foge das filas» (pedido dela). Sete azulejos em doze colunas: quatro em cima e três mais largos em baixo, sem buraco. ══ */
.cx-parede.cx-parede-7{ grid-template-columns: repeat(12, 1fr); }
.cx-parede-7 > .cx-vd{ grid-column: span 3; }
.cx-parede-7 > .cx-vd:nth-child(n+5){ grid-column: span 4; }
.cx-parede.cx-parede-7 > .cx-vd.cx-vd-cta{ grid-column: 1 / -1; }
@media (max-width: 1100px){ .cx-parede.cx-parede-7{ grid-template-columns: 1fr 1fr; } .cx-parede-7 > .cx-vd, .cx-parede-7 > .cx-vd:nth-child(n+5){ grid-column: auto; } .cx-parede-7 > .cx-vd:nth-child(7), .cx-parede.cx-parede-7 > .cx-vd.cx-vd-cta{ grid-column: 1 / -1; } }
@media (max-width: 620px){ .cx-parede.cx-parede-7{ grid-template-columns: 1fr; } .cx-parede-7 > .cx-vd:nth-child(7){ grid-column: auto; } .cx-parede.cx-parede-7 > .cx-vd.cx-vd-cta{ grid-column: auto; } }

/* a zona: papel claro com o halo amarelo, e à direita o talão de senha das repartições, que em vez do número diz «A tua vez» */
.cx > section.cx-filas{ position: relative; overflow: hidden; padding: clamp(72px, 9vw, 128px) 0; background:
  radial-gradient(60% 80% at 82% 50%, rgba(244,223,72,.42), transparent 70%), #F6F2E6; color: #3B392E; }
.cx-filas-in{ max-width: 1240px; margin: 0 auto; padding: 0 28px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.cx-filas-olho{ display: inline-block; color: #6B6754; margin-bottom: 22px; padding: 7px 12px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px rgba(20,19,12,.08); }
.cx-filas h2{ margin: 0 0 22px; font-size: clamp(38px, 5.4vw, 74px); line-height: .98; letter-spacing: -.045em; font-weight: 800; color: #14130C; max-width: 13ch; }
.cx-filas h2 em{ font-style: normal; background: linear-gradient(transparent 58%, #F4DF48 58%, #F4DF48 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cx-filas-txt > p{ margin: 0 0 28px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 46ch; color: #4A483F; }
.cx-filas-at{ list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
.cx-filas-at a{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: #fff; color: #14130C; text-decoration: none; font: 600 15px/1.2 'Inter Tight', sans-serif; box-shadow: 0 0 0 1px rgba(20,19,12,.10), 0 10px 22px -18px rgba(20,19,12,.5); transition: background .25s, box-shadow .25s, transform .3s var(--fx); }
.cx-filas-at a::after{ content: "→"; color: #8A8468; transition: transform .3s var(--fx), color .25s; }
.cx-filas-at a:hover, .cx-filas-at a:focus-visible{ background: #14130C; color: #F4DF48; transform: translateY(-2px); }
.cx-filas-at a:hover::after, .cx-filas-at a:focus-visible::after{ color: #F4DF48; transform: translateX(3px); }
.cx-filas-acoes{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cx-filas .pr-btn-primary{ background: #14130C; color: #F4DF48; box-shadow: 0 20px 44px -18px rgba(20,19,12,.65); }
.cx-filas-todos{ font: 700 16px 'Inter Tight', sans-serif; color: #14130C; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* o talão: escuro, com os recortes laterais e o picotado, ligeiramente inclinado e a flutuar */
.cx-filas-senha{ display: grid; place-items: center; perspective: 900px; }
.cx-senha{ --papel: #14130C; position: relative; width: min(360px, 100%); padding: 34px 34px 28px; border-radius: 20px; color: #F7F7F9; text-align: center;
  background: radial-gradient(circle at 0 64%, transparent 15px, var(--papel) 16px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 64%, transparent 15px, var(--papel) 16px) right / 51% 100% no-repeat;
  filter: drop-shadow(0 40px 50px rgba(20,19,12,.35)); transform: rotate(-4deg); animation: cx-senha-flutua 6s ease-in-out infinite; }
.cx-senha::before{ content: ""; position: absolute; left: 26px; right: 26px; top: 64%; border-top: 2px dashed rgba(255,255,255,.18); }
.cx-senha-cab{ display: block; font: 600 12px/1 'JetBrains Mono', monospace; letter-spacing: .3em; text-transform: uppercase; color: #ADADBA; }
.cx-senha-vez{ display: block; margin: 18px 0 12px; font: 800 clamp(46px, 5vw, 64px)/.92 'Inter Tight', sans-serif; letter-spacing: -.05em; color: #F4DF48; text-shadow: 0 0 40px rgba(244,223,72,.35); }
.cx-senha-sub{ display: block; font-size: 15px; line-height: 1.4; color: #D6D6DE; padding-bottom: 46px; }
.cx-senha-pe{ display: flex; justify-content: space-between; gap: 10px; padding-top: 22px; font: 500 11px/1.3 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #8C8C9C; }
.cx-senha-pe i{ font-style: normal; }
@keyframes cx-senha-flutua{ 0%, 100%{ transform: rotate(-4deg) translateY(0); } 50%{ transform: rotate(-2.5deg) translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .cx-senha{ animation: none; } }
@media (max-width: 900px){ .cx-filas-in{ grid-template-columns: 1fr; } .cx-filas-senha{ order: -1; } .cx-senha{ width: min(300px, 86%); } .cx > section.cx-filas{ background: radial-gradient(90% 40% at 50% 12%, rgba(244,223,72,.42), transparent 70%), #F6F2E6; } }
@media (max-width: 560px){ .cx-senha-pe{ flex-direction: column; align-items: center; gap: 6px; } }
/* 22-09: com a agenda ha quatro passos, e o quarto caia para uma segunda linha */
.cx-bal-passos{ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
@media (max-width: 560px){ .cx-bal-passos{ gap: 5px; } .cx-bal-passos li{ flex-direction: column; align-items: flex-start; gap: 5px; } }
/* ══ 22-09 (pedido dela): «Quem nos confia os seus números e contas», com a fita dos logotipos, passa de amarelo a BRANCO com picotado.
   Sobre branco, o realce do título volta a ser o marcador amarelo da marca. ══ */
.ve + .cx > section.cx-cli:first-child, .cx > section.cx-cli{ background-color: #FFFFFF;
  background-image: radial-gradient(circle, rgba(20,19,12,.16) 1.2px, transparent 1.6px); background-size: 18px 18px; background-position: 9px 9px; }
.cx > section.cx-cli h2 em{ background-image: linear-gradient(100deg, transparent 1.2%, rgba(244,223,72,.9) 3%, rgba(244,223,72,.78) 38%, rgba(244,223,72,.95) 71%, rgba(244,223,72,.82) 96.5%, transparent 98.6%); }
/* 22-09: sem o recrutamento, a calculadora dos gabinetes tem TRES teclas: numa so fila, sem buraco */
.cx-calc-teclas:has(> :nth-child(3):last-child){ grid-template-columns: repeat(3, 1fr); }
.cx-bal-pre{ margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: #FFFBE0; box-shadow: inset 0 0 0 1px rgba(196,172,24,.45); font-size: 14.5px; line-height: 1.45; color: #3B392E; }
.cx-bal-pre b{ color: #14130C; }
.cx-bal-dlg label small{ font-weight: 500; color: #8A8468; text-transform: none; letter-spacing: 0; }
/* 22-09 (captura dela 142022): os titulos dos azulejos alinham por CIMA (antes o margin-top:auto empurrava-os para baixo e
   ficavam a alturas diferentes conforme tinham uma ou duas linhas). Titulo com espaco para duas linhas, texto sempre a
   comecar na mesma linha e o «Saber mais» encostado ao fundo. */
.cx-parede > a.cx-vd h3{ margin-top: 0; padding-top: 34px; min-height: calc(2 * 1.12em + 34px); }
.cx-parede > a.cx-vd .vd-l{ margin-top: auto; }
.cx-parede > a.cx-vd p{ margin-bottom: 18px; }
@media (max-width: 620px){ .cx-parede > a.cx-vd h3{ min-height: 0; padding-top: 24px; } }

/* ══ 22-09 (tarde) · a zona «Foge das filas» passou a ser a opcao 4 «Sem senhas» (escolha dela em ensaios/filas-3-opcoes.html?c=4).
   Substitui o .cx-filas da manha (as regras antigas ficam por cima, sem uso). ══ */
.cx > section.f4{ --m: max(20px, calc(50vw - 620px)); position: relative; overflow: hidden; background: #F4DF48; color: #14130C; padding: clamp(64px, 8vw, 120px) 0 clamp(70px, 8vw, 110px); }
.f4::before{ content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(20,19,12,.14) 1.2px, transparent 1.6px); background-size: 18px 18px; pointer-events: none; }
.f4-in{ position: relative; padding: 0 var(--m); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.f4-olho{ display: inline-block; padding: 8px 13px; border-radius: 99px; background: #14130C; color: #F4DF48; margin-bottom: 24px; }
.f4 h2{ margin: 0; font-size: clamp(50px, 7.4vw, 124px); line-height: .86; letter-spacing: -.065em; font-weight: 900; color: #14130C; }
.f4-risco{ position: relative; display: inline-block; color: rgba(20,19,12,.3); }
.f4-risco::after{ content: ""; position: absolute; left: -4%; right: -4%; top: 50%; height: .1em; border-radius: .05em; background: #14130C; transform: rotate(-4deg) scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.2,.7,.2,1) .4s; }
.f4.on .f4-risco::after{ transform: rotate(-4deg) scaleX(1); }
.f4-txt > p{ margin: clamp(26px, 3vw, 40px) 0 28px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; max-width: 50ch; font-weight: 500; color: #14130C; }
.cx .f4 .f4-btn{ background: #14130C; color: #F4DF48; box-shadow: 0 22px 50px -18px rgba(20,19,12,.7); }
/* a maquina e a senha riscada */
.f4-maq{ position: relative; justify-self: center; width: min(340px, 100%); padding-top: 34px; cursor: pointer; }
.f4-ranhura{ position: absolute; top: 0; left: -6%; right: -6%; height: 46px; border-radius: 14px 14px 10px 10px; background: linear-gradient(#2A2920, #14130C); box-shadow: 0 18px 30px -18px rgba(20,19,12,.8); z-index: 3; }
.f4-ranhura::after{ content: ""; position: absolute; left: 12%; right: 12%; bottom: 12px; height: 6px; border-radius: 3px; background: #000; }
.f4-ranhura span{ position: absolute; top: 9px; left: 18px; font: 600 9px/1 'JetBrains Mono', monospace; letter-spacing: .24em; color: #8A8468; }
.f4-papel{ position: relative; z-index: 2; overflow: hidden; margin: 0 6%; }
.f4-senha{ position: relative; background: #FFFEF8; color: #14130C; padding: 30px 26px 34px; text-align: center; box-shadow: 0 30px 50px -30px rgba(20,19,12,.55);
  -webkit-mask: linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) bottom/16px 9px repeat-x;
  mask: linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat, radial-gradient(circle at 8px 100%, transparent 7px, #000 7.5px) bottom/16px 9px repeat-x; transform: translateY(-104%); }
.f4-senha > span{ display: block; }
.f4-t{ font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .34em; color: #6B6754; }
.f4-n{ white-space: nowrap; margin: 12px 0 10px; font: 800 clamp(52px, 5.2vw, 74px)/.9 'JetBrains Mono', monospace; letter-spacing: -.04em; }
.f4-e{ font: 600 12px/1.5 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #4A483F; }
.f4-e b{ display: block; font-size: 22px; letter-spacing: 0; color: #14130C; }
.f4-bar{ height: 38px; margin: 18px auto 10px; width: 78%; background: repeating-linear-gradient(90deg, #14130C 0 2px, transparent 2px 4px, #14130C 4px 7px, transparent 7px 9px, #14130C 9px 10px, transparent 10px 13px); }
.f4-ag{ font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8A8468; }
.f4-x{ position: absolute; inset: -6% -10% 0 -10%; width: 120%; height: 106%; z-index: 4; pointer-events: none; overflow: visible; }
.f4-x path{ fill: none; stroke: #E1261C; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 3px 0 rgba(120,10,5,.25)); }
.f4-carimbo{ position: absolute; z-index: 5; left: 50%; top: 66%; padding: 10px 18px 8px; border: 4px solid #E1261C; border-radius: 10px; color: #E1261C; background: rgba(255,254,248,.86);
  font: 900 clamp(26px, 3vw, 36px)/1 'Inter Tight', sans-serif; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%,-50%) rotate(-9deg) scale(1.9); }
.f4-carimbo small{ display: block; margin-top: 5px; font: 700 11px/1 'JetBrains Mono', monospace; letter-spacing: .2em; text-align: center; }
.f4-maq.vivo .f4-senha{ animation: f4-sai 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards; }
.f4-maq.vivo .f4-x path:nth-child(1){ animation: f4-risca .45s cubic-bezier(.6,0,.3,1) 1.45s forwards; }
.f4-maq.vivo .f4-x path:nth-child(2){ animation: f4-risca .45s cubic-bezier(.6,0,.3,1) 1.95s forwards; }
.f4-maq.vivo .f4-carimbo{ animation: f4-bate .38s cubic-bezier(.3,1.6,.5,1) 2.55s forwards; }
.f4-maq.vivo{ animation: f4-treme .3s ease 2.6s; }
@keyframes f4-sai{ to{ transform: translateY(0); } }
@keyframes f4-risca{ to{ stroke-dashoffset: 0; } }
@keyframes f4-bate{ to{ opacity: 1; transform: translate(-50%,-50%) rotate(-9deg) scale(1); } }
@keyframes f4-treme{ 30%{ transform: translate(2px,1px); } 60%{ transform: translate(-2px,-1px); } }
/* o rolo dos pedidos */
.f4-rolo{ position: relative; margin-top: clamp(40px, 5vw, 70px); display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px var(--m) 80px; margin-bottom: -40px; scrollbar-width: none; }
.f4-rolo::-webkit-scrollbar{ display: none; }
.f4-tk{ --r: 0deg; flex: 0 0 260px; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 24px 22px 20px; border-radius: 18px; text-decoration: none; color: #F7F7F9;
  background: radial-gradient(circle at 0 70%, transparent 13px, #14130C 14px) left/51% 100% no-repeat, radial-gradient(circle at 100% 70%, transparent 13px, #14130C 14px) right/51% 100% no-repeat;
  transform: rotate(var(--r)); transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .3s; filter: drop-shadow(0 26px 30px rgba(20,19,12,.35)); }
.f4-tk:nth-child(odd){ --r: -2.5deg; } .f4-tk:nth-child(even){ --r: 2deg; transform: rotate(var(--r)) translateY(14px); }
.f4-tk::before{ content: ""; position: absolute; left: 22px; right: 22px; top: 70%; border-top: 2px dashed rgba(255,255,255,.2); }
.f4-cab{ display: flex; justify-content: space-between; color: #8C8C9C; }
.f4-num, .f4-nm{ display: block; }
.f4-num{ font: 800 64px/1 'JetBrains Mono', monospace; letter-spacing: -.04em; color: #F4DF48; text-shadow: 0 0 30px rgba(244,223,72,.35); margin: 12px 0 6px; }
.f4-nm{ font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.f4-pe{ display: flex; justify-content: space-between; align-items: center; color: #ADADBA; padding-top: 30px; }
.f4-pe b{ color: #F4DF48; font: 700 13px 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; }
.f4-tk:hover, .f4-tk:focus-visible{ transform: rotate(0) translateY(-12px) scale(1.03); filter: drop-shadow(0 40px 40px rgba(20,19,12,.45)); }
.f4-tk.f4-fim{ background: #fff; color: #14130C; filter: drop-shadow(0 26px 30px rgba(20,19,12,.25)); }
.f4-tk.f4-fim::before{ border-color: rgba(20,19,12,.18); } .f4-fim .f4-num{ color: #14130C; text-shadow: none; font-size: 46px; } .f4-fim .f4-cab, .f4-fim .f4-pe{ color: #6B6754; } .f4-fim .f4-pe b{ color: #14130C; }
.f4-dica{ position: relative; padding: 0 var(--m); display: flex; align-items: center; gap: 12px; color: #5A5320; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.f4-dica i{ width: 44px; height: 2px; background: currentColor; position: relative; } .f4-dica i::after{ content: ""; position: absolute; right: 0; top: -4px; border: 5px solid transparent; border-left-color: currentColor; border-right: 0; }
@media (max-width: 900px){ .f4-in{ grid-template-columns: 1fr; } .f4-maq{ width: min(290px, 84%); margin-top: 10px; } }
@media (max-width: 760px){ .f4-pe > span:first-child{ display: none; } .f4-tk{ flex-basis: 220px; min-height: 270px; } .f4-num{ font-size: 52px; } }
@media (prefers-reduced-motion: reduce){ .f4-senha{ transform: none; } .f4-x path{ stroke-dashoffset: 0; } .f4-carimbo{ opacity: 1; transform: translate(-50%,-50%) rotate(-9deg); } .f4-risco::after{ transform: rotate(-4deg) scaleX(1); transition: none; } .f4-tk{ transition: none; } }
/* 22-09 · f4: o estado de partida e' o FINAL (senha a' vista, X desenhado, carimbo, «filas» riscado). So' quando o efeitos.js
   arranca (.f4-js) e' que as pecas partem escondidas e a animacao as traz; sem script nunca se ve a zona vazia. */
.f4-senha{ transform: none; } .f4-x path{ stroke-dashoffset: 0; } .f4-carimbo{ opacity: 1; transform: translate(-50%,-50%) rotate(-9deg) scale(1); } .f4-risco::after{ transform: rotate(-4deg) scaleX(1); }
.f4-js .f4-senha{ transform: translateY(-104%); } .f4-js .f4-x path{ stroke-dashoffset: 1; opacity: 0; } .f4-js .f4-carimbo{ opacity: 0; transform: translate(-50%,-50%) rotate(-9deg) scale(1.9); }
.f4-js .f4-risco::after{ transform: rotate(-4deg) scaleX(0); } .f4-js.on .f4-risco::after{ transform: rotate(-4deg) scaleX(1); }
/* o X so' aparece quando o traco comeca (antes, as pontas redondas viam-se como pontos vermelhos durante a espera) */
.f4-js .f4-maq.vivo .f4-x path:nth-child(1){ animation-name: f4-risca2; } .f4-js .f4-maq.vivo .f4-x path:nth-child(2){ animation-name: f4-risca2; }
@keyframes f4-risca2{ from{ opacity: 1; stroke-dashoffset: 1; } to{ opacity: 1; stroke-dashoffset: 0; } }
/* 22-09 (captura 143812): a fita dos 30 servicos corre sozinha da direita para a esquerda; para com o rato ou o foco */
.f4-rolo{ overflow: hidden; scroll-snap-type: none; padding-left: 0; padding-right: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.f4-fita{ display: flex; width: max-content; animation: f4-anda 150s linear infinite; }
.f4-grupo{ display: flex; gap: 18px; padding-right: 18px; flex: none; }
.f4-rolo:hover .f4-fita, .f4-rolo:focus-within .f4-fita{ animation-play-state: paused; }
@keyframes f4-anda{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .f4-fita{ animation: none; } .f4-rolo{ overflow-x: auto; } .f4-grupo[aria-hidden]{ display: none; } }
@media (hover: none){ .f4-dica{ display: none; } }

/* ══ 22-09 (tarde) · o passo 3 do balcao, «Pre-reserva»: o nosso calendario (dias uteis e meias horas), em pastilhas ══ */
.cx-bal-cal-dias, .cx-bal-cal-horas{ border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.cx-bal-cal-dias legend, .cx-bal-cal-horas legend{ padding: 0; margin-bottom: 8px; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.cx-bal-dias{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cx-bal-horas{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.fm-dlg .cx-bal-slot{ position: relative; display: block; margin: 0; cursor: pointer; letter-spacing: 0; text-transform: none; }
.cx-bal-slot input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.cx-bal-slot span{ display: grid; place-items: center; gap: 2px; padding: 10px 4px; border-radius: 12px; border: 1.5px solid rgba(20,19,12,.16); background: #fff; color: #14130C; text-align: center; transition: border-color .2s, background .2s; }
.cx-bal-slot small{ font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #8A8468; }
.cx-bal-slot b{ font: 700 15px/1.1 'Inter Tight', sans-serif; white-space: nowrap; }
.cx-bal-horas .cx-bal-slot span{ padding: 9px 2px; } .cx-bal-horas .cx-bal-slot b{ font-size: 14px; }
.cx-bal-slot:hover span{ border-color: rgba(20,19,12,.45); }
.cx-bal-slot input:checked + span{ border-color: #14130C; background: #14130C; } .cx-bal-slot input:checked + span b{ color: #F4DF48; } .cx-bal-slot input:checked + span small{ color: #D6D2BC; }
.cx-bal-slot input:focus-visible + span{ box-shadow: 0 0 0 3px rgba(244,223,72,.9); }
.cx-bal-semdata{ border: 0; background: none; padding: 4px 0; font: 600 14px 'Inter Tight', sans-serif; color: #4A483F; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.cx-bal-resumo{ margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: #14130C; color: #F7F7F9; font-size: 14.5px; line-height: 1.45; }
@media (max-width: 560px){ .cx-bal-dias{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-bal-horas{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 22-09 (pedido dela): «Agendar online» no cabecalho, pilula BRANCA ao pe' do «Pedir orcamento» amarelo, com o ponto verde a pulsar */
.sessao .btn-online{ display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: #14130C; box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 12px 30px -12px rgba(255,255,255,.45); }
.sessao .btn-online i{ width: 8px; height: 8px; border-radius: 50%; background: #1FB45A; box-shadow: 0 0 0 0 rgba(31,180,90,.6); animation: pil-pulsa 1.8s ease-out infinite; flex: none; }
.sessao .btn-online:hover{ background: #F4DF48; transform: translateY(-1px); }
.sessao .btn-online + .btn-k{ margin-left: 0; }
@keyframes pil-pulsa{ 70%{ box-shadow: 0 0 0 7px rgba(31,180,90,0); } 100%{ box-shadow: 0 0 0 0 rgba(31,180,90,0); } }
@media (prefers-reduced-motion: reduce){ .sessao .btn-online i{ animation: none; } }
@media (max-width: 1400px){ .sessao .hora{ display: none; } }
/* 22-09: a confirmacao antes de enviar a pre-reserva */
.cx-bal-conf{ margin: 4px 0 14px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px #14130C; }
.cx-bal-conf-t{ margin: 0 0 12px; font: 800 19px/1.2 'Inter Tight', sans-serif; letter-spacing: -.02em; color: #14130C; }
.cx-bal-conf-l{ display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 14px; }
.cx-bal-conf-l dt{ font: 600 10.5px/1.6 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #6B6754; }
.cx-bal-conf-l dd{ margin: 0; font: 600 15px/1.35 'Inter Tight', sans-serif; color: #14130C; overflow-wrap: anywhere; }
.cx-bal-conf-n{ margin: 0; padding: 10px 14px; border-radius: 10px; background: #FFFBE0; font-size: 14px; line-height: 1.45; color: #3B392E; }
.cx-bal-corr{ border: 0; background: none; padding: 8px 0; font: 600 15px 'Inter Tight', sans-serif; color: #14130C; cursor: pointer; }
.cx-bal-nav .cx-bal-corr + .cx-bal-env{ margin-left: auto; }
@media (max-width: 560px){ .cx-bal-conf-l{ grid-template-columns: 1fr; gap: 2px; } .cx-bal-conf-l dd{ margin-bottom: 8px; } }
/* 22-09: com a pilula «Agendar online» o cabecalho precisa de mais espaco: degraus para o menu nunca cortar */
@media (max-width: 1760px){ .sessao .hora{ display: none; } }
@media (max-width: 1640px){ nav.menu .mi > a .ix{ display: none; } nav.menu .mi > a{ padding: 0 12px; } .sessao{ gap: 8px; padding-left: 12px; } .sessao .btn{ margin-left: 2px; padding: 9px 14px; } }
@media (max-width: 1440px){ nav.menu .mi > a{ padding: 0 9px; letter-spacing: .03em; } .sessao .ponto{ display: none; } .sessao .btn{ font-size: 11px; padding: 8px 12px; letter-spacing: .06em; } }
@media (max-width: 1280px){ .sessao .btn-online .bo-x{ display: none; } }
@media (max-width: 1280px){ nav.menu .mi > a{ padding: 0 7px; } }
@media (max-width: 1240px){ .sessao .btn-online{ display: none; } }
/* 22-09 (pedido dela): a confirmacao do envio, ao centro e grande, para nao passar despercebida */
.cx-bal-enviado .fm-et, .cx-bal-enviado .cx-bal-passos, .cx-bal-enviado h3, .cx-bal-enviado .cx-bal-passo, .cx-bal-enviado .cx-bal-nav, .cx-bal-enviado .fm-aviso, .cx-bal-enviado .cx-bal-conf{ display: none !important; }
.cx-bal-ok{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(28px, 6vh, 56px) 10px clamp(20px, 4vh, 36px); }
.cx-bal-ok[hidden]{ display: none; }
.cx-bal-ok-v{ display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #F4DF48; box-shadow: 0 0 0 10px rgba(244,223,72,.28), 0 20px 40px -18px rgba(168,140,0,.7); animation: ok-entra .5s cubic-bezier(.3,1.6,.5,1) both; }
.cx-bal-ok-v svg{ width: 44px; height: 44px; fill: none; stroke: #14130C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: ok-risca .45s ease .35s forwards; }
.cx-bal-ok-t{ margin: 14px 0 0; font: 900 clamp(28px, 4vw, 38px)/1.05 'Inter Tight', sans-serif; letter-spacing: -.04em; color: #14130C; }
.cx-bal-ok-q{ margin: 0; padding: 10px 18px; border-radius: 99px; background: #14130C; color: #F4DF48; font: 700 16px/1.3 'Inter Tight', sans-serif; }
.cx-bal-ok-n{ margin: 4px 0 10px; max-width: 40ch; font-size: 16px; line-height: 1.5; color: #3B392E; }
@keyframes ok-entra{ from{ transform: scale(.4); opacity: 0; } }
@keyframes ok-risca{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){ .cx-bal-ok-v{ animation: none; } .cx-bal-ok-v svg{ animation: none; stroke-dashoffset: 0; } }
/* 22-09: os dois botoes no topo do menu do telemovel (so' aparecem com o menu aberto, abaixo de 880 px) */
.menu-acoes{ display: none; }
@media (max-width: 880px){
  nav.menu.aberto .menu-acoes{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
  nav.menu.aberto .menu-acoes .btn{ display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 14px 10px; border: 0; border-radius: 999px; font: 700 12px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  nav.menu.aberto .menu-acoes .btn-online{ background: #FFFFFF; color: #14130C; }
  nav.menu.aberto .menu-acoes .btn-online i{ width: 8px; height: 8px; border-radius: 50%; background: #1FB45A; animation: pil-pulsa 1.8s ease-out infinite; }
  nav.menu.aberto .menu-acoes .btn-k{ background: #F4DF48; color: #14130C; }
}
@media (max-width: 380px){ nav.menu.aberto .menu-acoes{ grid-template-columns: 1fr; } }
/* 22-09: a pilula diz «Balcão Empresa e Cidadão»; o resto do texto so' aparece quando ha espaco (o menu nunca corta) */
.sessao .btn-online{ white-space: nowrap; }
/* o nome completo aparece a partir de 1300 px; abaixo disso fica so' «Balcão» e, abaixo de 1240, a pilula sai */
@media (max-width: 1360px){ .sessao .btn-online .bo-x{ display: none; } }
/* para o nome completo caber, o menu aperta e os numeros «01» saem mais cedo */
nav.menu .mi > a .ix{ display: none; }   /* 22-09: os numeros sairam do menu para caber «Balcão Empresa e Cidadão» */
@media (max-width: 1700px){ nav.menu .mi > a{ padding: 0 10px; } }
@media (max-width: 1620px){ nav.menu .mi > a{ padding: 0 8px; font-size: 10px; letter-spacing: .02em; } .sessao{ gap: 6px; padding-left: 10px; } .sessao .btn{ padding: 8px 11px; font-size: 10.5px; } }
@media (max-width: 1420px){ .sessao .btn{ padding: 7px 10px; font-size: 10px; } .sessao .ling{ transform: scale(.94); } }
/* 22-09: a caixa do Cloudflare Turnstile, que so' aparece se ele precisar de perguntar alguma coisa */
.uvd-ts{ position: fixed; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 30px 60px -20px rgba(20,19,12,.5), 0 0 0 1px rgba(20,19,12,.12); }
.uvd-ts:empty{ display: none; }
/* 23-09: a nota do formulario de contacto sobre os anexos e o curriculo */
.pr-form-nota{ margin: -4px 0 4px; font-size: 13.5px; line-height: 1.5; color: #6B6754; }
.pr-form-nota a{ color: #14130C; font-weight: 700; text-decoration: underline; text-decoration-color: #F4DF48; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* ══ 23-09 · o formulario de candidatura com curriculo, na pagina «Junta-te a nos» ══ */
.cx-cand{ margin-top: clamp(22px, 3vw, 34px); display: grid; gap: 14px; max-width: 720px; background: #fff; padding: clamp(20px, 3vw, 30px); border-radius: 18px; box-shadow: 0 30px 60px -40px rgba(20,19,12,.45), 0 0 0 1px rgba(20,19,12,.08); }
.cx-cand label{ display: flex; flex-direction: column; gap: 6px; font: 600 10.5px/1.2 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #6B6754; }
.cx-cand label small{ font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #8A8468; }
.cx-cand input[type="text"], .cx-cand input[type="email"], .cx-cand input[type="tel"], .cx-cand select, .cx-cand textarea{
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1.5px solid rgba(20,19,12,.16); background: #FFFDF5; font: 500 15px/1.4 'Inter Tight', sans-serif; color: #14130C; }
.cx-cand input:focus, .cx-cand select:focus, .cx-cand textarea:focus{ outline: 0; border-color: #14130C; box-shadow: 0 0 0 4px rgba(244,223,72,.7); }
.cx-cand .fm-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cx-cand-f input[type="file"]{ font: 500 14px 'Inter Tight', sans-serif; padding: 12px; border: 1.5px dashed rgba(20,19,12,.3); border-radius: 12px; background: #FFFBE0; cursor: pointer; }
.cx-cand-f input[type="file"]::file-selector-button{ margin-right: 12px; padding: 9px 14px; border: 0; border-radius: 99px; background: #14130C; color: #F4DF48; font: 700 13px 'Inter Tight', sans-serif; cursor: pointer; }
.cx-cand-nome{ font: 600 13px 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #3B392E; }
.cx-cand .fm-consent{ flex-direction: row; align-items: flex-start; gap: 10px; font: 500 14px/1.45 'Inter Tight', sans-serif; letter-spacing: 0; text-transform: none; color: #3B392E; }
.cx-cand .fm-consent input{ margin-top: 3px; accent-color: #14130C; width: 18px; height: 18px; flex: none; }
.cx-cand .fm-consent a{ color: #14130C; font-weight: 700; }
.cx-cand button[type="submit"]{ justify-self: start; }
.cx-cand-erro{ margin: 0; color: #B3261E; font: 600 14px 'Inter Tight', sans-serif; }
.cx-cand-ok{ margin: 0; padding: 14px 16px; border-radius: 12px; background: #14130C; color: #F4DF48; font: 700 15px/1.45 'Inter Tight', sans-serif; }
.cx-cand.feito > *:not(.cx-cand-ok){ display: none; }
@media (max-width: 620px){ .cx-cand .fm-duo{ grid-template-columns: 1fr; } }

/* ---------- ZONA DE VAGAS (23-09-2026) ----------
   A lista das vagas abertas vive numa seccao propria, logo acima do formulario de candidatura: o WordPress
   troca o marcador <!--uvd-vagas--> por estes cartoes (inc/vagas.php). No prototipo o marcador nao desenha
   nada, porque as vagas so' existem no WordPress. */
.cx-vg{ padding: clamp(60px, 7vw, 110px) 0 0; }
.cx-vg-nada{ max-width: 760px; font: 500 clamp(16px, 1.5vw, 19px)/1.55 'Inter Tight', sans-serif; color: #3B392E; }
.cx-vg-lista{ display: grid; gap: clamp(18px, 2vw, 26px); margin-top: clamp(24px, 3vw, 38px); }
.cx-vg-v{ position: relative; background: #fff; border-radius: 20px; padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 40px);
  box-shadow: 0 30px 60px -44px rgba(20,19,12,.45), 0 0 0 1px rgba(20,19,12,.08); }
.cx-vg-n{ position: absolute; top: clamp(20px, 2.4vw, 30px); right: clamp(22px, 3vw, 36px); font-size: 12px; color: #C9C3AC; }
.cx-vg-v h3{ margin: 0 0 14px; font: 800 clamp(22px, 2.6vw, 32px)/1.1 'Inter Tight', sans-serif; letter-spacing: -.02em; color: #14130C; }
.cx-vg-pils{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cx-vg-pil{ display: inline-flex; gap: 7px; align-items: baseline; padding: 7px 14px; border-radius: 99px; background: #F4F1EA;
  font: 600 13.5px/1 'Inter Tight', sans-serif; color: #3B392E; }
.cx-vg-pil b{ font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: #8A8468; }
.cx-vg-txt{ max-width: 740px; font: 500 15.5px/1.6 'Inter Tight', sans-serif; color: #3B392E; }
.cx-vg-txt p{ margin: 0 0 12px; }
.cx-vg-txt ul{ margin: 0 0 14px; padding-left: 20px; }
.cx-vg-txt li{ margin-bottom: 6px; }
.cx-vg-txt h3, .cx-vg-txt h4{ margin: 18px 0 8px; font: 800 17px/1.2 'Inter Tight', sans-serif; color: #14130C; }
.cx-vg-btn{ margin-top: 18px; }
/* a vaga escolhida, no cimo do formulario */
.cx-cand-vaga{ margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #FFFBE0;
  font: 500 14.5px/1.4 'Inter Tight', sans-serif; color: #3B392E; }
.cx-cand-vaga b{ font-weight: 800; color: #14130C; }
.cx-cand-vx{ margin-left: auto; width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%; background: #14130C; color: #F4DF48;
  font: 700 15px/1 'Inter Tight', sans-serif; cursor: pointer; }
.cx-cand-vx:hover{ background: #3B392E; }
@media (max-width: 720px){ .cx-vg-n{ display: none; } }
.cx-cand.tem-vaga .cx-cand-area{ display: none; }
.cx-cand.tem-vaga .fm-duo-area{ grid-template-columns: 1fr; }
/* a pagina de UMA vaga */
.cx-vgp-t{ margin: 0 0 16px; font: 800 clamp(28px, 3.6vw, 44px)/1.05 'Inter Tight', sans-serif; letter-spacing: -.03em; color: #14130C; }
.cx-vgp-v{ padding: clamp(28px, 3.4vw, 46px) clamp(24px, 3.4vw, 46px); }
.cx-vgp-outras{ margin-top: clamp(22px, 2.6vw, 34px); }
.cx-vgp-outras h3{ margin: 0 0 10px; font: 700 11px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8A8468; }
.cx-vgp-outras ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cx-vgp-outras a{ font: 700 16px/1.3 'Inter Tight', sans-serif; color: #14130C; text-decoration: none; border-bottom: 2px solid #F4DF48; }
.cx-vgp-voltar{ margin-top: 20px; font: 600 15px/1.3 'Inter Tight', sans-serif; }
.cx-vgp-voltar a{ color: #6B6754; text-decoration: none; }
.cx-vgp-voltar a:hover{ color: #14130C; }
.cx-vg-ver{ margin-top: 16px; display: inline-flex; text-decoration: none; }