/* ============================================================
   FINTRA · Website 2026
   Conceito-assinatura: "Acender a luz", em registo CLARO.

   A pagina e clara do primeiro pixel ao ultimo. A luz nao vem do
   escuro: comeca FRIA E CHAPADA, o cinzento de um dia encoberto
   onde nada tem contraste, e vai AQUECENDO ate ao creme das capas
   dos manuais. A viragem continua a acontecer no bloco 4, onde a
   copy diz "antes andavas as escuras, agora ves": e ai que o
   contraste fecha e o creme entra.

   O navy #1a2238 deixa de ser o chao e passa a ser a TINTA, como
   nas capas dos livros: capa navy sobre papel creme.

   TEMA UNICO, de propriedade. Nao ha bloco de tema escuro em lado
   nenhum: com um, metade dos visitantes com o telemovel em modo
   escuro veria um site escuro, que e precisamente o contrario da
   decisao. Por isso cada cor esta pintada de forma explicita e a
   pagina aguenta qualquer fundo do hospedeiro.
   ============================================================ */

@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url(../fonts/montserrat-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'SourceSans';src:url(../fonts/source-sans-3-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'SourceSans';src:url(../fonts/source-sans-3-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --navy:#1a2238; --green:#1cea96; --blue:#15abff; --purple:#645cff;
  --grad:linear-gradient(90deg,#645cff 0%,#15abff 52%,#1cea96 100%);
  /* O verde da marca e um verde de PREENCHIMENTO: brilhante de
     mais para ser texto sobre claro. Para tinta usa-se este, que
     e a mesma familia e passa contraste AA sobre toda a rampa. */
  --green-ink:#07734d;

  /* A rampa: fria e chapada em cima, creme e quente em baixo.
     Nao ha um so degrau escuro. O que viaja e a TEMPERATURA e o
     contraste, nao a luminosidade. */
  --l0:#e7eaef;   /* 1 heroi          · cinzento frio, encoberto  */
  --l1:#ecedf0;   /* 2 reconhecimento                             */
  --l2:#f1f1f0;   /* 3 prova          · pivot neutro              */
  --l3:#f6f3ea;   /* 4 viragem / 5 manuais · o creme das capas    */
  --l4:#f8f5ee;   /* 6 guias                                      */
  --l5:#faf8f2;   /* 7 contabilistas                              */
  --l6:#fcfaf6;   /* 8 precos                                     */
  --l7:#fffdf9;   /* 9 fecho          · o mais quente e claro     */
  --cream:#f4f1e4;      /* o fundo exacto das capas 3D           */
  --ink-deep:#1a2238;   /* o navy da marca, agora TINTA           */

  --heading:#1a2238; --body:#4d5769; --muted:#838d9e;
  --hair:rgba(26,34,56,.11); --surface:#ffffff;

  --fd:'Montserrat',system-ui,sans-serif;
  --fb:'SourceSans',system-ui,sans-serif;

  /* Medido a 1440x820: a 5.2rem o titulo ia a 83px e atirava os
     botoes para 856, 36px abaixo da dobra. A 4.2rem os CTA e a
     micro-linha entram no primeiro olhar sem scroll. */
  --t-hero:clamp(2.25rem,5.6vw,4.2rem);
  --t-h2:clamp(1.9rem,4.3vw,3.2rem);
  --t-h3:clamp(1.2rem,2.1vw,1.6rem);
  --t-lead:clamp(1.1rem,1.7vw,1.32rem);
  --t-body:clamp(1.0625rem,1.1vw,1.14rem);

  --gutter:clamp(1.15rem,5vw,2.5rem);
  --block-y:clamp(4.25rem,10vh,8rem);
  --maxw:1180px;

  --ease:cubic-bezier(.16,1,.30,1);
  --tap:48px;
}
/* Sem bloco de tema escuro, de propriedade. Ver a nota no topo. */

*,*::before,*::after{box-sizing:border-box}
/* overflow-x tem de estar TAMBEM no html: so no body nao chega,
   um elemento fixo mais largo que o ecra alarga a pagina inteira
   e foi assim que o telemovel saiu cortado. */
html{overflow-x:hidden;max-width:100%}
body{
  margin:0; background:var(--l6); color:var(--body);
  font-family:var(--fb); font-size:var(--t-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--fd);color:var(--heading);margin:0;line-height:1.1;letter-spacing:-.022em}
h1{font-weight:900;font-size:var(--t-hero);line-height:1.02;letter-spacing:-.034em}
h2{font-weight:900;font-size:var(--t-h2)}
h3{font-weight:800;font-size:var(--t-h3)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
/* scroll-margin-top: o cabecalho e fixo, logo uma ancora nativa
   sem JS deixaria o titulo da seccao escondido por baixo dele. */
.band{padding:var(--block-y) 0;position:relative;overflow:hidden;scroll-margin-top:76px}
.measure{max-width:62ch}

/* ---- as tres faixas FRIAS (1 a 3) ----
   Nao sao escuras: sao a luz por aquecer. O contraste do texto
   comeca mais baixo e vai fechando, e e isso que faz a viagem. */
.cool{background:var(--l0)}
.cool .eyebrow{color:#0f9a68}   /* verde travado, para ler em claro */
.cool .dim{color:var(--muted)}

.eyebrow{
  font-family:var(--fd);font-weight:800;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.7rem;margin-bottom:1.4rem
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--grad);border-radius:2px;flex:none}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--body)}

/* ---- listras diagonais: o DNA do logotipo, sempre a sangrar ---- */
/* As tres listras SAO a marca do logotipo: verde, azul, roxo,
   larguras 1 / 0.66 / 0.46, sempre a -40deg e sempre a sangrar
   para fora. Tem de se ler AS TRES, senao vira uma cunha verde. */
/* Sobre fundo claro as listras precisam de MAIS opacidade do que
   precisavam sobre escuro, senao leem-se como pastel decorativo em
   vez da marca. */
.stripes{position:absolute;pointer-events:none;display:flex;gap:13px;transform:rotate(-40deg);opacity:.52}
.stripes i{display:block;border-radius:7px;height:100%}
.stripes i:nth-child(1){width:clamp(30px,3.6vw,54px);background:var(--green)}
.stripes i:nth-child(2){width:clamp(20px,2.4vw,36px);background:var(--blue)}
.stripes i:nth-child(3){width:clamp(14px,1.7vw,25px);background:var(--purple)}
.stripes.tr{top:-24vh;right:5%;height:52vh}
.stripes.bl{bottom:-26vh;left:4%;height:46vh;opacity:.07}

/* ---- botoes ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);padding:0 1.6rem;border-radius:999px;border:1px solid transparent;
  font-family:var(--fd);font-weight:800;font-size:.98rem;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s
}
.btn:active{transform:scale(.965)}
.btn-primary{background:var(--green);color:#08301f;box-shadow:0 6px 26px -8px rgba(28,234,150,.7)}
.btn-primary:hover{box-shadow:0 10px 34px -8px rgba(28,234,150,.85)}
.btn-ghost{border-color:rgba(26,34,56,.22);color:var(--heading);background:transparent}
.btn-ghost:hover{background:rgba(26,34,56,.05);border-color:rgba(26,34,56,.38)}
.btn-outline{border-color:var(--hair);color:var(--heading);background:var(--surface)}
.btn-outline:hover{border-color:var(--green)}
.btn-sm{min-height:44px;padding:0 1.1rem;font-size:.9rem}

/* ---- revelacao: falha VISIVEL ---- */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}

/* ============ CABECALHO ============
   fixed, nunca sticky: um cabecalho sticky fica ACIMA do heroi no
   fluxo, e o resultado e um cabecalho que so aparece depois de se
   fazer scroll. Fixed sobrepoe-se ao heroi desde o primeiro pixel.
   Com a pagina toda clara, o logotipo NAVY serve do topo ao fim e
   nao ha troca de variante nenhuma para gerir. */
header{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
header.stuck{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(14px);border-bottom-color:var(--hair)}
.hbar{max-width:var(--maxw);margin:0 auto;padding:.85rem var(--gutter);display:flex;align-items:center;gap:1.25rem}
.brand{width:132px;height:43px;flex:none;text-decoration:none;display:block}
.brand img{width:100%;height:auto}
nav.main{display:none;gap:1.7rem;margin-left:auto;font-family:var(--fd);font-weight:600;font-size:.94rem}
nav.main a{text-decoration:none;color:var(--heading);opacity:.72;transition:opacity .2s;display:inline-flex;align-items:center;min-height:44px}
nav.main a:hover{opacity:1}
.hcta{margin-left:auto;display:flex;gap:.55rem;align-items:center}
nav.main+.hcta{margin-left:0}
@media(min-width:900px){nav.main{display:flex}}
.wa-ico{width:var(--tap);height:var(--tap);border-radius:999px;display:grid;place-items:center;background:rgba(26,34,56,.07);color:var(--heading);text-decoration:none;flex:none;transition:background .2s,color .2s}
.wa-ico:hover{background:var(--green);color:#08301f}
/* Em ecra estreito o cabecalho tem de encolher: o logotipo desce,
   o icone de WhatsApp sai (o FAB ja cobre esse caminho) e o botao
   perde a palavra "gratis". Sem isto a barra fica mais larga que
   o telemovel e arrasta a pagina toda. */
@media(max-width:560px){
  .hbar{gap:.55rem;padding:.7rem 1rem}
  .brand{width:106px;height:34px}
  .hcta .wa-ico{display:none}
  .hcta .btn{padding:0 .95rem;font-size:.88rem;min-height:44px}
  .opt{display:none}
}

/* ============ 1 · HEROI (--l0, a luz mais fria) ============ */
.hero{background:var(--l0);padding-top:clamp(6.5rem,13vh,8.5rem);padding-bottom:var(--block-y);position:relative}
.hero::after{ /* o ceu encoberto: uma lavagem fria, sem foco */
  content:"";position:absolute;left:50%;top:4%;width:min(130vw,1250px);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(21,171,255,.10) 0%,rgba(100,92,255,.05) 38%,transparent 68%);
}
.hero-grid{position:relative;z-index:2;display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.08fr .92fr}}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.42em)}
.hero h1 .w.on{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
body:not(.js) .hero h1 .w{opacity:1;transform:none}
.hero h1 em{font-style:normal;color:var(--green-ink)}
.hero .lead{margin-top:1.3rem;max-width:46ch}
/* A espinha: os tres verbos que dizem a CATEGORIA e nao o produto.
   Controlar e o meio, financiar e o fim. Sem esta linha o heroi
   descrevia uma app de gestao, que e commodity. */
.spine{
  margin-top:1.35rem;font-family:var(--fd);font-weight:800;
  font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.45;letter-spacing:-.012em;
  color:var(--heading);max-width:44ch;padding-left:.95rem;border-left:3px solid var(--green)
}
.spine b{color:var(--green-ink);font-weight:800}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.hero-micro{margin-top:1rem;font-size:.94rem;color:var(--muted)}

/* ---- TELEMOVEL COM ECRA REAL ----
   O heroi mostrava um cartao abstracto com perguntas. Lia-se bem
   como argumento e nao dizia o principal: que isto e uma APP. Passa
   a mostrar um ecra verdadeiro, capturado de um tenant de
   demonstracao. Nenhuma captura tem dados de cliente real. */
.phone{
  position:relative;width:min(100%,326px);margin-inline:auto;
  border-radius:36px;padding:9px;background:linear-gradient(155deg,#2a3350 0%,#141a2b 100%);
  box-shadow:0 44px 84px -46px rgba(26,34,56,.62)
}
.phone-scr{border-radius:28px;overflow:hidden;background:#fff;line-height:0}
.phone-scr img{width:100%;height:auto}
.phone-cap{
  margin-top:1rem;text-align:center;font-family:var(--fd);font-weight:800;
  font-size:.94rem;color:var(--heading);letter-spacing:-.012em;line-height:1.35
}
.phone-cap span{display:block;font-family:var(--fb);font-weight:400;font-size:.9rem;color:var(--muted);margin-top:.25rem}

/* ============ 2 · RECONHECIMENTO (--l1) ============ */
.recog{background:var(--l1)}
.recog-list{margin-top:3rem;display:grid;gap:.4rem}
.ritem{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:start;padding:1.5rem 0;border-top:1px solid rgba(26,34,56,.10)}
.ritem:first-child{border-top:0}
.ritem .num{font-family:var(--fd);font-weight:900;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(26,34,56,.28)}
.ritem p{font-family:var(--fd);font-weight:800;font-size:clamp(1.15rem,2.5vw,1.7rem);line-height:1.28;color:var(--heading);letter-spacing:-.018em}
@media(min-width:860px){
  /* `auto` numa coluna de grelha ESTICA para absorver o espaco livre,
     e era isso que empurrava os quatro textos todos para a direita e
     matava o zig-zag. `max-content` faz a coluna do numeral abracar
     o numeral, e o `justify-content` e que decide o lado. */
  .ritem{grid-template-columns:max-content minmax(0,30rem);justify-content:start}
  .ritem:nth-child(even){justify-content:end;text-align:right;grid-template-columns:minmax(0,30rem) max-content}
  .ritem:nth-child(even) .num{order:2}
}
.scene{
  margin-top:3.2rem;padding:1.7rem 1.8rem;border-radius:18px;
  background:var(--surface);border-left:3px solid var(--blue);
  font-size:1.06rem;line-height:1.62;color:var(--body);max-width:56ch;
  box-shadow:0 20px 46px -38px rgba(26,34,56,.5)
}
.punch{margin-top:2.6rem;font-family:var(--fd);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.18;color:var(--green-ink);letter-spacing:-.024em}

/* ============ 3 · A TESE (--l2) ============
   A arquitectura da Fintra em cinco passos. Existe porque o site
   estava a descrever um PRODUTO (POS, facturas, stock, relatorios)
   quando a coisa defensavel e a CATEGORIA: a camada que transforma
   actividade diaria em informacao financeira utilizavel. Controlar
   e o meio; financiar e o fim economico.
   Os numeros aqui sao legitimos porque isto E mesmo uma sequencia:
   nao se prova sem registar, nao se financia sem provar. */
.thesis{background:var(--l2)}
.steps{margin-top:3rem;display:grid;gap:0;counter-reset:s}
@media(min-width:900px){.steps{grid-template-columns:repeat(5,1fr);gap:1.4rem}}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:baseline;
  padding:1.15rem 0;border-top:1px solid rgba(26,34,56,.11)
}
@media(min-width:900px){
  .step{grid-template-columns:1fr;padding:0;border-top:0;border-left:2px solid rgba(26,34,56,.13);padding-left:1rem;align-items:start}
  .step:last-child{border-left-color:var(--green)}
}
.step .n{
  font-family:var(--fd);font-weight:900;font-size:.78rem;letter-spacing:.14em;
  color:var(--muted);font-variant-numeric:tabular-nums
}
.step b{font-family:var(--fd);font-weight:900;font-size:1.18rem;color:var(--heading);letter-spacing:-.018em;display:block}
.step span{grid-column:2;font-size:.96rem;color:var(--body);line-height:1.45}
@media(min-width:900px){.step span{grid-column:1;margin-top:.45rem}.step .n{margin-bottom:.5rem;display:block}}
.step:last-child b{color:var(--green-ink)}
.caveat{
  margin-top:2.6rem;padding:1.1rem 1.3rem;border-radius:14px;
  background:var(--surface);border:1px solid var(--hair);
  font-size:1rem;color:var(--body);max-width:60ch
}
.caveat b{color:var(--heading);font-family:var(--fd);font-weight:800}

/* ============ 4 · PROVA (--l2) ============ */
.proof{background:var(--l2)}
.stats{margin-top:3rem;display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:20px;overflow:hidden}
@media(min-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);padding:1.9rem 1.5rem}
.stat .v{font-family:var(--fd);font-weight:900;font-size:clamp(2.1rem,4.6vw,3rem);line-height:1;color:var(--heading);letter-spacing:-.032em;font-variant-numeric:tabular-nums}
.stat .v u{text-decoration:none;color:var(--green-ink)}
.stat .k{margin-top:.7rem;font-size:.98rem;color:var(--body);line-height:1.45}
.pline{margin-top:2.3rem;font-size:1.06rem;color:var(--body);max-width:52ch}
.partners{margin-top:3rem}
.partners .cap{font-family:var(--fd);font-weight:800;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}
/* Chips de largura E altura fixas, com o logotipo limitado pelos
   DOIS lados. So `height:100%` nao chega: os cinco logotipos tem
   proporcoes muito diferentes (um quadrado, um panoramico, um
   vertical) e sem tecto de largura transbordavam o chip e caiam
   por cima uns dos outros e do texto seguinte. */
.chip{
  background:#fff;border:1px solid var(--hair);border-radius:14px;padding:.6rem .8rem;
  display:flex;align-items:center;justify-content:center;
  height:74px;width:114px;flex:none;overflow:hidden
}
.chip img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.seal{margin-top:1.8rem;display:inline-flex;align-items:center;gap:.7rem;padding:.6rem 1.1rem;border-radius:999px;border:1px solid rgba(7,115,77,.30);background:rgba(28,234,150,.13);color:var(--green-ink);font-family:var(--fd);font-weight:800;font-size:.9rem}

/* ============ 4 · A VIRAGEM + O QUE FAZES (--l2 -> --l3) ============
   Eram dois blocos. O "antes/depois" dizia em abstracto o que este
   diz com ecras verdadeiros: tres dos seus quatro pares repetiam-se
   a frente, e custava 765px, 6,2% da pagina. Ficou a frase, que e
   boa e e da marca, como TITULO deste. A viragem passa a acontecer
   exactamente onde a app aparece, que e o sitio certo para ela.

   Este bloco herdou tambem a transicao de temperatura: o fundo
   passa aqui do cinzento FRIO ao CREME das capas. Sem isto o bloco
   3 encostava directo ao creme e o degrau via-se. */
.does{background:linear-gradient(180deg,var(--l2) 0%,var(--l2) 10%,var(--l3) 58%,var(--l3) 100%)}
.does h2 .after{color:var(--green-ink);display:block}
.does .closing{margin-top:2.8rem;font-family:var(--fd);font-weight:800;font-size:clamp(1.15rem,2.3vw,1.55rem);color:var(--heading);letter-spacing:-.018em;max-width:44ch}
/* O bloco passou a 3 + cartao largo + 2, em 17-08-2026. Os seis ecras iguais
   trataram por igual coisas de peso muito diferente, e o POS ocupava um cartao
   sem provar nada. Agora: os tres de leitura imediata em cima, o relatorio de
   margem ao meio a toda a largura (que e onde a pagina precisa de mudar de
   textura), e os dois de fecho em baixo, maiores por serem so dois. */
.does-grid{margin-top:3rem;display:grid;gap:2.2rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.does-grid{grid-template-columns:repeat(3,1fr);gap:2rem}}
.does-grid-2{margin-top:2.6rem}
@media(min-width:900px){
  /* So duas colunas, e limitadas a 2/3 da largura: a 1/1 os telemoveis
     inchavam ate parecerem outro componente. */
  .does-grid-2{grid-template-columns:repeat(2,1fr);max-width:66%}
}
.does-grid .phone{width:100%;max-width:270px;padding:7px;border-radius:28px}
/* As capturas nao tem todas a mesma altura (o POS e o fecho de caixa
   sao mais compridos). Sem altura fixa, as legendas de cada linha
   ficavam a alturas diferentes. Recorta-se pelo FUNDO, que e onde
   nenhuma delas tem o que interessa. */
.does-grid .phone-scr{border-radius:21px;aspect-ratio:430/700;overflow:hidden}
.does-grid .phone-scr img{width:100%;height:100%;object-fit:cover;object-position:top}

/* A marca de plano. Fica no cartao e nao numa nota de rodape porque a
   pergunta "isto esta no meu plano?" nasce a olhar para o ecra, nao no fim
   da pagina. O relatorio de gestao e `advanced_reports`: Growth para cima. */
.phone-cap .plano{
  display:inline-block;margin-top:.5rem;padding:.2rem .55rem;border-radius:999px;
  background:rgba(21,171,255,.14);color:#0a6ea8;
  font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.01em
}

/* ---- Cartao largo: um ecra que nao cabe num telemovel ---- */
.wide-shot{
  margin-top:3rem;display:grid;gap:1.8rem;align-items:center;
  background:var(--surface);border:1px solid var(--hair);border-radius:22px;
  padding:1.7rem;box-shadow:0 1px 2px rgba(10,16,32,.04)
}
@media(min-width:980px){
  .wide-shot{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:2.4rem;padding:2.2rem 2.4rem}
}
.ws-txt .tag{
  font-family:var(--fd);font-weight:900;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green-ink)
}
.ws-txt h3{margin-top:.6rem;font-size:clamp(1.25rem,2.4vw,1.6rem);letter-spacing:-.02em;line-height:1.18}
.ws-txt p{margin-top:.8rem;font-size:1rem;color:var(--body);line-height:1.55}
.ws-img{margin:0;min-width:0}
/* Rola dentro de si em ecra estreito: a tabela tem sete colunas e sem isto
   arrastava a pagina inteira para o lado no telemovel. */
.ws-img img{
  display:block;width:100%;min-width:640px;height:auto;
  border-radius:12px;border:1px solid var(--hair)
}
@media(max-width:700px){
  .ws-img{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
}
.ws-img figcaption{margin-top:.8rem;font-size:.88rem;color:var(--muted);line-height:1.5}

/* Variante empilhada, para os ecras de contabilista. Lado a lado, um balancete
   de seis colunas renderiza a ~620px de uma fonte de 1240 e obriga a apertar os
   olhos — justamente no ecra cuja densidade E o argumento. Empilhado apanha a
   largura toda e fica quase 1:1 com a captura. */
.wide-shot.stack{grid-template-columns:1fr}
@media(min-width:980px){
  .wide-shot.stack{grid-template-columns:1fr;gap:1.6rem}
  .wide-shot.stack .ws-txt{max-width:56rem}
}
/* So aparece onde a tabela nao cabe. Acima disso seria uma instrucao para um
   gesto que nao e preciso, e uma instrucao a mais le-se como aviso. */
.ws-img .rolar{display:none}
@media(max-width:700px){
  .ws-img .rolar{display:inline;color:var(--green-ink);font-weight:600}
}

/* ============ 6 · CASOS REAIS (--l3) ============
   Tres donos de negocio filmados onde trabalham, em 21-07-2026.
   Os videos ja vinham produzidos, verticais, com o logotipo e as
   legendas gravadas. Nao ha nome de ninguem na pagina porque nao
   ha nome nenhum no video: mostra-se o sector e o problema que a
   propria peca nomeia, nada inventado por cima. */
.cases{background:var(--l3)}
.cases-grid{margin-top:3rem;display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:700px){.cases-grid{grid-template-columns:repeat(3,1fr)}}
.case{
  background:var(--surface);border:1px solid rgba(26,34,56,.09);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 12px 30px -26px rgba(26,34,56,.5)
}
.case-media{position:relative;background:#0e1424;aspect-ratio:9/16;overflow:hidden}
.case-media video,.case-media img{width:100%;height:100%;object-fit:cover;display:block}
.case-media video{display:none}
.case.playing .case-media video{display:block}
.case.playing .case-media img,.case.playing .play{display:none}
.play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border:0;background:linear-gradient(180deg,rgba(14,20,36,.05),rgba(14,20,36,.45));
  cursor:pointer;color:#fff;padding:0
}
.play span{
  width:64px;height:64px;border-radius:999px;background:var(--green);color:#08301f;
  display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(28,234,150,.9);
  transition:transform .2s var(--ease)
}
.play:hover span{transform:scale(1.08)}
.play:active span{transform:scale(.94)}
.case-txt{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.case-txt .who{font-family:var(--fd);font-weight:800;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink)}
.case-txt h3{font-size:1.04rem;letter-spacing:-.016em}
.case-txt p{font-size:.95rem;color:var(--body);line-height:1.48}

/* ============ 7 · FINANCIAMENTO (--l4) ============
   O fim da linha. E o unico bloco que explica PARA QUE serve tudo
   o que vem antes, e por isso ganha painel proprio e a faixa de
   marca, como o fecho. */
.fund{background:var(--l3)}
.fund-in{
  border-radius:28px;padding:clamp(1.8rem,4vw,3.2rem);position:relative;overflow:hidden;
  background:var(--cream);border:1px solid rgba(26,34,56,.09);
  box-shadow:0 30px 70px -52px rgba(26,34,56,.5)
}
.fund-in::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad)}
.fund-grid{display:grid;gap:clamp(2rem,4vw,3rem);align-items:center}
@media(min-width:900px){.fund-grid{grid-template-columns:1.1fr .9fr}}
.fund .phone{width:min(100%,290px)}
.dims{margin-top:1.9rem;display:grid;gap:.55rem}
.dim{display:grid;grid-template-columns:1fr auto;gap:.4rem .9rem;align-items:center}
.dim b{font-family:var(--fb);font-weight:400;color:var(--body);font-size:1rem}
.dim i{font-style:normal;font-family:var(--fd);font-weight:900;color:var(--heading);font-size:.95rem;font-variant-numeric:tabular-nums}
.dim .bar{grid-column:1/-1;height:6px;border-radius:99px;background:rgba(26,34,56,.09);overflow:hidden}
.dim .bar span{display:block;height:100%;border-radius:99px;background:var(--grad)}
.fund .note{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid rgba(26,34,56,.12);color:var(--body);max-width:58ch}

/* ============ 7 · MANUAIS (--l4) ============ */
.store{background:var(--l4)}
.store-head{display:grid;gap:1.5rem}
@media(min-width:900px){.store-head{grid-template-columns:1.15fr .85fr;align-items:end}}
.pricetag{
  display:inline-flex;align-items:baseline;gap:.5rem;padding:.7rem 1.25rem;border-radius:999px;
  background:var(--navy);color:#fff;font-family:var(--fd);font-weight:900;letter-spacing:-.02em
}
.pricetag b{font-size:1.5rem;color:var(--green)}
.pricetag span{font-size:.86rem;font-weight:800;opacity:.66;letter-spacing:.04em}
/* Colunas explicitas em vez de auto-fill: o bloco existe para
   alguem encontrar O SEU sector depressa, e dez cartoes um por
   linha no telemovel e demasiada rolagem para isso. Dois a dois
   deixa varrer os dez em dois gestos. Cinco em ecra grande fecha
   os dez em duas linhas certas, em vez de 4+4+2. */
.grid-manuais{margin-top:3rem;display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:660px){.grid-manuais{gap:1.15rem;grid-template-columns:repeat(3,1fr)}}
@media(min-width:920px){.grid-manuais{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1140px){.grid-manuais{grid-template-columns:repeat(5,1fr)}}
/* Com a seccao ja em creme, um cartao tambem creme desaparece
   dentro dela. O cartao passa a BRANCO e so o poco da capa fica
   creme, que e a cor de fundo das proprias capas 3D: assim a capa
   continua sem costura e o cartao volta a ter contorno. */
.mcard{
  background:var(--surface);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(26,34,56,.09);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 10px 26px -22px rgba(26,34,56,.5)
}
.mcard:hover{transform:translateY(-5px);box-shadow:0 26px 54px -32px rgba(26,34,56,.5)}
/* As dez capas foram redesenhadas numa tela unica de 520x600, com o livro
   medido e escalado a uma altura fixa de 508px em todas. Antes tinham quatro
   racios diferentes e o livro a escalas diferentes dentro deles, e a grelha
   lia-se como capas de tamanhos diferentes. O `aspect-ratio` aqui fixa o
   espaco antes de a imagem carregar, para a grelha nao saltar. */
.mcard .shot{background:var(--cream);padding:.45rem;aspect-ratio:520/600}
.mcard .shot img{width:100%;height:100%;object-fit:contain;border-radius:12px;display:block}
.mcard .txt{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;gap:.45rem;flex:1;background:var(--surface)}
.mcard h3{font-size:1rem;letter-spacing:-.016em}
.mcard p{font-size:.9rem;color:var(--body);line-height:1.45;flex:1}
.mbuy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.35rem}
.mbuy .p{font-family:var(--fd);font-weight:900;color:var(--heading);font-size:.98rem;white-space:nowrap}
@media(min-width:660px){
  .mcard .txt{padding:1rem 1.15rem 1.2rem;gap:.5rem}
  .mcard h3{font-size:1.06rem}
  .mcard p{font-size:.95rem}
}
.store-note{margin-top:2.4rem;color:var(--muted);font-size:.98rem;max-width:56ch}

/* ============ CHECKOUT DOS MANUAIS ============
   Formulario normal, sem JavaScript: um POST que redirecciona. O cliente deste
   site esta num telemovel barato com rede fraca, e um checkout que depende de
   JS e um checkout que falha exactamente onde nao pode falhar. */
.checkout{background:var(--l5)}
.cform{
  margin-top:2.4rem;background:var(--surface);border:1px solid var(--hair);
  border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);max-width:44rem;
  box-shadow:0 20px 50px -42px rgba(26,34,56,.55)
}
.cgrid{display:grid;gap:1.1rem}
@media(min-width:640px){.cgrid{grid-template-columns:1fr 1fr}.cf-wide{grid-column:1/-1}}
.cf{margin:0;display:flex;flex-direction:column;gap:.4rem}
.cf label{font-family:var(--fd);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cf input,.cf select{
  min-height:var(--tap);padding:0 .95rem;border-radius:12px;border:1px solid var(--hair);
  background:var(--l4);color:var(--heading);font:inherit;width:100%
}
.cf input:focus,.cf select:focus{outline:2px solid var(--green);outline-offset:1px}
.cf .hint{font-size:.88rem;color:var(--muted)}
.cfoot{
  margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between
}
.ctotal{font-family:var(--fd);font-weight:900;font-size:1.7rem;color:var(--heading);letter-spacing:-.03em;display:flex;flex-direction:column}
.ctotal small{font-family:var(--fb);font-weight:400;font-size:.85rem;color:var(--muted);letter-spacing:0}
.cfoot .btn{flex:1;min-width:15rem}
.cform .fine{margin-top:1.1rem;font-size:.9rem;color:var(--muted)}

.erros{
  margin-top:1.6rem;background:#fff3f3;border:1px solid #f3c9c9;border-left:4px solid #c0392b;
  border-radius:12px;padding:1rem 1.2rem;max-width:44rem
}
.erros p{color:#8c2a1e;font-size:.99rem}
.erros p+p{margin-top:.4rem}

.aviso-teste{
  margin-top:1.4rem;background:#fff8e6;border:1px solid #ecd9a2;border-left:4px solid #b8860b;
  border-radius:12px;padding:.9rem 1.2rem;color:#6b5100;font-size:.95rem;max-width:44rem
}

.obrigado{
  background:var(--cream);border:1px solid rgba(26,34,56,.09);border-radius:24px;
  padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden;max-width:44rem
}
.obrigado::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad)}
.obrigado .fine{font-size:.9rem;color:var(--muted)}

/* ============ 6 · GUIAS (--l4) ============ */
.guides{background:var(--l5)}
.gwrap{display:grid;gap:clamp(2.4rem,4vw,3.6rem)}
/* As capas levam a coluna larga e o formulario a estreita. Era ao contrario,
   e desde que a lista de icones deu lugar a capas isso deixava um vazio
   grande a direita e apertava aquilo que agora e o argumento. O formulario
   fica sticky para nao ficar orfao no topo enquanto se percorrem as capas. */
@media(min-width:960px){
  .gwrap{grid-template-columns:1.15fr .85fr;align-items:start}
  .gform{position:sticky;top:96px}
}
/* Grelha das capas dos guias. Substituiu a lista de icones em 18-08-2026:
   os manuais pagos pareciam produtos e os gratis pareciam um menu, e o gratis
   e que tem de provar qualidade primeiro. Mesma tela 520x600 das capas dos
   manuais, para as duas familias se lerem como a mesma coleccao. */
.gcapas{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media(min-width:640px){.gcapas{gap:1.6rem}}
.gcapa{margin:0}
.gcapa img{
  display:block;width:100%;height:auto;aspect-ratio:520/600;object-fit:cover;
  border-radius:12px;background:var(--cream)
}
.gcapa figcaption{margin-top:.7rem;font-size:.92rem;color:var(--muted);line-height:1.45}
.gcapa figcaption b{
  display:block;font-family:var(--fd);font-weight:800;font-size:1rem;
  color:var(--heading);margin-bottom:.1rem
}

.glist{display:grid;gap:.65rem}
.gitem{display:flex;gap:1rem;align-items:flex-start;padding:1.05rem 1.2rem;border-radius:14px;background:var(--surface);border:1px solid var(--hair)}
.gitem svg{flex:none;margin-top:.15rem;color:var(--blue)}
.gitem b{font-family:var(--fd);font-weight:800;color:var(--heading);display:block;font-size:1.02rem}
.gitem span{font-size:.96rem;color:var(--body)}
.gform{background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:1.6rem}
.gform label{font-family:var(--fd);font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.55rem}
.gform select,.gform input{
  width:100%;min-height:var(--tap);padding:0 .95rem;border-radius:11px;border:1px solid var(--hair);
  background:var(--l4);color:var(--heading);font:inherit;margin-bottom:.9rem
}
.gform select:focus,.gform input:focus{outline:2px solid var(--green);outline-offset:1px}
.gform .btn{width:100%}
.gform .fine{margin-top:.9rem;font-size:.9rem;color:var(--muted)}
.gmsg{margin-top:.9rem;font-size:.96rem;color:var(--heading);font-weight:600;display:none}
.gmsg.on{display:block}

/* ============ 7 · OUTROS PUBLICOS (--l5) ============ */
.others{background:var(--l6)}
.two{margin-top:2.6rem;display:grid;gap:1.15rem}
@media(min-width:820px){.two{grid-template-columns:1fr 1fr}}
.ocard{padding:1.9rem;border-radius:20px;border:1px solid var(--hair);background:var(--surface);display:flex;flex-direction:column;gap:.85rem}
.ocard .tag{font-family:var(--fd);font-weight:800;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.ocard a{font-family:var(--fd);font-weight:800;color:var(--heading);text-decoration:none;border-bottom:2px solid var(--green);align-self:flex-start;padding-bottom:2px;min-height:var(--tap);display:inline-flex;align-items:center}

/* ============ MODULOS ============
   A lista do que a app faz, por modulo. Nao substitui o bloco dos ecras: ali
   mostra-se o gesto de quem usa, aqui responde-se a pergunta de quem esta a
   comparar. Sao leitores diferentes na mesma pagina. */
.mods{background:var(--l4)}
.mods-grid{margin-top:2.8rem;display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:700px){.mods-grid{grid-template-columns:repeat(2,1fr);gap:.8rem 1.6rem}}
@media(min-width:1050px){.mods-grid{grid-template-columns:repeat(3,1fr)}}
.mod{
  display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;align-items:start;
  padding:.9rem 0;border-top:1px solid var(--hair)
}
.mod svg{margin-top:.2rem;color:var(--green-ink);flex:none}
.mod b{font-family:var(--fd);font-weight:800;font-size:1.02rem;color:var(--heading);letter-spacing:-.012em}
.mod span{grid-column:2;font-size:.94rem;color:var(--body);line-height:1.45}
.mods .nota{margin-top:2.2rem;color:var(--muted);font-size:.98rem;max-width:60ch}

/* ============ SELOS DE CONFIANCA ============
   A licenca da AT e a ISO 9001. Ficam junto dos parceiros porque respondem a
   mesma pergunta: quem e que assina por isto. */
.selos{margin-top:2.4rem;display:grid;gap:.8rem}
@media(min-width:820px){.selos{grid-template-columns:repeat(2,1fr)}}
.selo{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:1.1rem 1.3rem
}
.selo .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(28,234,150,.16);color:var(--green-ink);flex:none}
.selo b{font-family:var(--fd);font-weight:800;font-size:1rem;color:var(--heading);display:block;line-height:1.3}
.selo span{font-size:.93rem;color:var(--body);display:block;margin-top:.25rem;line-height:1.45}
/* Fica INLINE de proposito: a regra `.selo span{display:block}` acima tambem
   apanha este span aninhado, e a licenca passava para uma linha so, deixando
   o ponto final orfao a abrir a linha seguinte. */
.selo .ref{display:inline;margin-top:0;font-variant-numeric:tabular-nums;color:var(--green-ink);font-weight:600}
.selo.processo .ic{background:rgba(21,171,255,.16);color:#0a6ea8}

/* Chip de parceiro sem logotipo: o nome, na mesma familia visual dos outros,
   para ler como decisao e nao como imagem que faltou. */
.chip-nome{
  background:#fff;border:1px solid var(--hair);border-radius:14px;height:74px;width:114px;
  display:flex;align-items:center;justify-content:center;text-align:center;flex:none;
  font-family:var(--fd);font-weight:900;font-size:1.02rem;color:var(--heading);letter-spacing:-.01em
}

/* ============ ARTIGOS: INDICE E ARTIGO ============
   Os artigos deixaram de ser uma lista corrida numa pagina so. Cada um tem
   endereco proprio, porque sem endereco um artigo nao e indexavel, nao e
   partilhavel e nao e citavel: existe apenas como um pedaco a meio de outra
   coisa. */

/* --- migalhas: dizem ao leitor e ao motor de busca onde ele esta --- */
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.9rem;color:var(--muted);margin-bottom:1.4rem}
.crumbs a{color:var(--body);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumbs a:hover{color:var(--green-ink)}
.crumbs span[aria-current]{color:var(--heading);font-weight:600}
.crumbs i{font-style:normal;opacity:.5}

/* --- indice --- */
.arts{background:var(--l3)}
.arts-grid{margin-top:3rem;display:grid;gap:1.15rem}
@media(min-width:760px){.arts-grid{grid-template-columns:repeat(2,1fr)}}
.acard{
  display:flex;flex-direction:column;gap:.6rem;text-decoration:none;
  background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:1.6rem 1.7rem;
  transition:border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)
}
.acard:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 20px 44px -32px rgba(26,34,56,.5)}
.acard .kick{font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink)}
.acard h2{font-size:clamp(1.15rem,2vw,1.4rem);letter-spacing:-.018em;line-height:1.25}
.acard p{font-size:.99rem;color:var(--body);line-height:1.5;flex:1}
.acard .meta{display:flex;gap:.9rem;align-items:center;font-size:.88rem;color:var(--muted);margin-top:.2rem}
.acard .go{font-family:var(--fd);font-weight:800;font-size:.95rem;color:var(--heading);display:inline-flex;align-items:center;gap:.4rem;min-height:32px}
.acard .go::after{content:"→";color:var(--green-ink)}

/* --- artigo --- */
.artigo{background:var(--l4)}
.artigo .wrap{max-width:46rem}
.art-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:1.1rem;font-size:.94rem;color:var(--muted)}
.art-meta .dot{opacity:.45}

/* O resumo extraivel. Serve o leitor com pressa, e e a parte que um motor de
   busca ou um modelo de linguagem consegue levar sem interpretar prosa. */
.tldr{
  margin-top:2.2rem;background:var(--cream);border:1px solid rgba(26,34,56,.1);
  border-radius:18px;padding:1.5rem 1.7rem;position:relative;overflow:hidden
}
.tldr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad)}
.tldr h2{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--green-ink);font-weight:800}
.tldr ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.65rem}
.tldr li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;font-size:1.02rem;line-height:1.55;color:var(--heading)}
.tldr li::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--green);margin-top:.6rem}

/* --- perguntas frequentes, visiveis e nao so no schema --- */
.faq-art{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--hair)}
.faq-art h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:1.2rem}
.faq-art .qa{border-top:1px solid var(--hair);padding:1.25rem 0}
.faq-art .qa:first-of-type{border-top:0}
.faq-art h3{font-size:1.06rem;letter-spacing:-.014em}
.faq-art p{margin-top:.55rem;font-size:1.02rem;line-height:1.62;color:var(--body)}

/* --- a seguir --- */
.next{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--hair)}
.next h2{font-size:1.1rem;margin-bottom:1rem}
.next-grid{display:grid;gap:.9rem}
@media(min-width:700px){.next-grid{grid-template-columns:repeat(2,1fr)}}
.next a{
  display:block;text-decoration:none;background:var(--surface);border:1px solid var(--hair);
  border-radius:14px;padding:1.1rem 1.3rem;transition:border-color .2s
}
.next a:hover{border-color:var(--green)}
.next a b{font-family:var(--fd);font-weight:800;color:var(--heading);display:block;font-size:1rem;line-height:1.3}
.next a span{font-size:.92rem;color:var(--muted);display:block;margin-top:.3rem}

/* ============ APRENDER (--l4) ============
   Substituiu a loja de dez cartoes na home. Assimetrico de
   proposito: os artigos sao gratuitos e primarios, os guias e os
   manuais vem a seguir e mais pequenos. Tres cartoes iguais seria
   exactamente o que a regra anti-slop probe, e alem disso mentia
   sobre a hierarquia. */
.learn{background:var(--l4)}
.learn-grid{margin-top:2.8rem;display:grid;gap:1.1rem}
@media(min-width:900px){.learn-grid{grid-template-columns:1.12fr .88fr;align-items:stretch}}
.lside{display:grid;gap:1.1rem}
.lcard{
  display:flex;flex-direction:column;gap:.5rem;text-decoration:none;
  background:var(--surface);border:1px solid var(--hair);border-radius:20px;
  padding:1.5rem 1.6rem;transition:border-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)
}
.lcard:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 20px 44px -32px rgba(26,34,56,.5)}
.lcard .tag{font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green-ink)}
.lcard h3{font-size:1.12rem;letter-spacing:-.016em}
.lcard p{font-size:.97rem;color:var(--body);line-height:1.5;flex:1}
.lcard .go{
  font-family:var(--fd);font-weight:800;font-size:.95rem;color:var(--heading);
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;min-height:32px
}
.lcard .go::after{content:"→";color:var(--green-ink)}
/* O cartao grande estica para acompanhar os dois empilhados da
   direita. Sem isto o `flex:1` do paragrafo empurrava a ligacao
   para o fundo e deixava um buraco a meio. Centrar distribui a
   folga em vez de a juntar toda num sitio. */
.lcard-main{background:var(--cream);border-color:rgba(26,34,56,.1);justify-content:center}
.lcard-main p{flex:0 1 auto}
.lcard-main h3{font-size:clamp(1.25rem,2.3vw,1.65rem);margin-top:.2rem}
.lcard-main p{font-size:1.04rem}

/* ============ 8 · PRECOS (--l6) ============ */
.pricing{background:var(--l6)}
.plans{margin-top:3rem;display:grid;gap:1rem;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
@media(min-width:1080px){.plans{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
.plan{scroll-snap-align:center;border:1px solid var(--hair);border-radius:20px;padding:1.7rem 1.5rem;background:var(--surface);display:flex;flex-direction:column;gap:.35rem;position:relative}
.plan.best{border-color:var(--green);box-shadow:0 22px 60px -40px rgba(28,234,150,.9)}
.plan .badge{position:absolute;top:-11px;left:1.5rem;background:var(--green);color:#08301f;font-family:var(--fd);font-weight:900;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .75rem;border-radius:999px}
.plan .nm{font-family:var(--fd);font-weight:900;font-size:1.2rem;color:var(--heading)}
.plan .pr{font-family:var(--fd);font-weight:900;font-size:2.1rem;color:var(--heading);letter-spacing:-.032em;margin-top:.35rem}
.plan .pr small{font-size:.9rem;font-weight:800;color:var(--muted);letter-spacing:0}
.plan .who{font-size:.96rem;color:var(--body);min-height:3.1em;margin-top:.5rem}
.plan ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.62rem;flex:1}
.plan li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem;color:var(--body)}
.plan li svg{flex:none;margin-top:.28rem;color:var(--green-ink)}
.plan .btn{margin-top:1.5rem;width:100%}
.swipe{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;color:var(--muted);font-size:.9rem}
@media(min-width:1080px){.swipe{display:none}}
.pfine{margin-top:1.6rem;color:var(--muted);font-size:.98rem}

.faq{margin-top:clamp(3rem,6vw,4.5rem);max-width:60rem}
.faq h3{margin-bottom:1.2rem}
details{border-top:1px solid var(--hair)}
details:last-of-type{border-bottom:1px solid var(--hair)}
summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.2rem 1.15rem 0;position:relative;min-height:var(--tap);
  font-family:var(--fd);font-weight:800;color:var(--heading);font-size:1.04rem
}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.35rem;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details p{padding:0 0 1.25rem;color:var(--body);max-width:58ch}

/* ============ 9 · FECHO (--l7, o mais quente) ============
   O painel de fecho era o unico bloco escuro que restava. Passou a
   creme: e onde a viagem da luz tinha de terminar, e nao faria
   sentido a pagina acender-se toda para acabar apagada. A ousadia
   gasta-se aqui, na faixa de marca por cima do painel. */
.close{background:var(--l7);position:relative}
.close-in{
  border-radius:28px;padding:clamp(2.6rem,6vw,4.5rem);position:relative;overflow:hidden;
  background:var(--cream);border:1px solid rgba(26,34,56,.09);
  box-shadow:0 30px 70px -50px rgba(26,34,56,.5)
}
.close-in::before{ /* a faixa da marca, a assinar o fim */
  content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--grad)
}
.close h2{color:var(--heading);max-width:18ch}
.close p{color:var(--body);margin-top:1.3rem;max-width:46ch}
.close .btn{margin-top:2.1rem}
.close .alt{margin-top:1.2rem;font-size:.98rem;color:var(--muted)}
.close .alt a{color:var(--green-ink);text-decoration:none;border-bottom:1px solid rgba(7,115,77,.4)}
.close-in>*{position:relative;z-index:2}

/* ============ RODAPE ============
   Claro tambem. Um rodape navy seria convencional, mas deixaria a
   pagina a acabar num bloco escuro depois de nove blocos a dizer o
   contrario. Aqui a marca vive na tinta e na faixa, nao no chao. */
footer{background:var(--l3);color:var(--body);padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;font-size:.96rem;border-top:1px solid var(--hair)}
.fgrid{display:grid;gap:2.2rem}
@media(min-width:820px){.fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h4{font-family:var(--fd);font-weight:800;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
/* alvo de toque: uma ligacao de rodape em linha fica com ~20px de
   altura, metade do minimo. Passa a caixa com altura propria. */
footer a{color:var(--body);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
footer a:hover{color:var(--green-ink)}
footer .brand{width:132px;height:43px;margin-bottom:1.1rem;display:block}
.fbot{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;color:var(--muted);font-size:.9rem}

/* ============ FAB WHATSAPP ============ */
.fab{
  position:fixed;right:clamp(1rem,3vw,1.9rem);bottom:clamp(1rem,3vw,1.9rem);z-index:70;
  width:58px;height:58px;border-radius:999px;display:grid;place-items:center;
  background:var(--green);color:#08301f;text-decoration:none;
  box-shadow:0 12px 34px -10px rgba(28,234,150,.85);transition:transform .2s var(--ease)
}
.fab:hover{transform:scale(1.07)}
.fab:active{transform:scale(.94)}

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

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1 !important;transform:none !important}
  .hero h1 .w{opacity:1 !important;transform:none !important}
  .beam{display:none}
}

/* ============ ROTEIRO · o que esta a ser escrito ============
   Entrou em 18-08-2026 com o post type dos materiais. So mostra os que tem
   MOTOR PRONTO e estao por escrever: bloqueados e backlog ficam fora, porque
   anunciar trinta titulos sem data le-se como vapor.
   A razao de existir nao e decoracao: cada "avisa-me" e um voto, e passa a
   dizer que sector escrever a seguir com prova em vez de com ordem planeada. */
.roteiro{background:var(--l5)}
.rgrid{margin-top:2.6rem;display:grid;gap:.9rem;grid-template-columns:1fr}
@media(min-width:700px){.rgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rgrid{grid-template-columns:repeat(3,1fr)}}
.ritem2{
  background:var(--surface);border:1px solid var(--hair);border-radius:16px;
  padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.3rem
}
.ritem2 .tag{
  align-self:flex-start;font-family:var(--fd);font-weight:900;font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hair);border-radius:999px;padding:.15rem .5rem;margin-bottom:.35rem
}
.ritem2 b{font-family:var(--fd);font-weight:800;font-size:1.02rem;color:var(--heading)}
.ritem2 .l{font-size:.93rem;color:var(--body);line-height:1.45}
.ritem2 .avisa{
  margin-top:.6rem;align-self:flex-start;min-height:36px;display:inline-flex;align-items:center;
  font-family:var(--fd);font-weight:800;font-size:.86rem;color:var(--green-ink);text-decoration:none
}
.ritem2 .avisa::after{content:" →";margin-left:.3rem}
.ritem2 .avisa:hover{text-decoration:underline}
.roteiro .nota{margin-top:2rem;color:var(--muted);font-size:.97rem}
.roteiro .nota a{color:var(--green-ink);font-weight:600}

/* ============ BIBLIOTECA · /materiais/ ============
   Filtra em JavaScript sobre HTML que ja veio do servidor: indexavel, funciona
   sem JS (mostra tudo), e num telemovel com rede fraca filtrar nao custa uma
   viagem a rede. Mesma decisao da grelha dos manuais, que era feita em JS e
   passou a PHP. */
.biblio{background:var(--l4)}
.filtros{display:grid;gap:.7rem;margin-bottom:2.4rem}
.frow{display:flex;flex-wrap:wrap;gap:.5rem}
.fchip{
  min-height:40px;padding:0 .95rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:var(--surface);color:var(--body);
  font-family:var(--fd);font-weight:800;font-size:.86rem;
  transition:background .16s,border-color .16s,color .16s
}
.fchip:hover{border-color:rgba(26,34,56,.3)}
.fchip.on{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
/* A fila dos motores e secundaria: mais discreta que a de manuais/guias. */
.frow-arq .fchip{font-size:.82rem;font-weight:600}
.frow-arq .fchip.on{background:var(--green);border-color:var(--green);color:#08301f}
/* A "fuga" do arquetipo aparece ao filtrar. O nome do motor e vocabulario
   nosso; a fuga e a lingua do leitor, e ensina enquanto ele filtra. */
.fuga{min-height:1.4em;font-size:.94rem;color:var(--green-ink);font-weight:600}

.bgrid{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.bgrid{grid-template-columns:repeat(3,1fr);gap:1.8rem}}
@media(min-width:1060px){.bgrid{grid-template-columns:repeat(4,1fr)}}
.bcard[hidden]{display:none}
.bshot{display:block;border-radius:14px;overflow:hidden;background:var(--cream)}
.bshot img{width:100%;height:auto;aspect-ratio:520/600;object-fit:cover;transition:transform .4s var(--ease)}
.bcard:hover .bshot img{transform:scale(1.03)}
.btxt{margin-top:.8rem}
.bmeta{
  display:block;font-family:var(--fd);font-weight:800;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.25rem
}
.btxt h3{font-size:1.02rem;letter-spacing:-.014em}
.btxt h3 a{text-decoration:none}
.btxt h3 a:hover{color:var(--green-ink)}
.btxt p{margin-top:.3rem;font-size:.92rem;color:var(--body);line-height:1.45}
.bpreco{
  display:inline-block;margin-top:.55rem;font-family:var(--fd);font-weight:800;
  font-size:.86rem;color:var(--green-ink)
}
.bvazio{margin-top:2rem;color:var(--muted)}
.blimpa{
  border:0;background:none;padding:0;cursor:pointer;color:var(--green-ink);
  font-family:var(--fd);font-weight:800;font-size:inherit;text-decoration:underline
}

/* ---- ficha de um material ---- */
.mwrap{display:grid;gap:2.4rem}
@media(min-width:900px){.mwrap{grid-template-columns:1.15fr .85fr;align-items:center}}
.mcapa{margin:0}
.mcapa img{width:100%;height:auto;border-radius:16px;background:var(--cream)}
.mfuga{
  margin-top:1.2rem;padding-left:1rem;border-left:3px solid var(--green);
  font-size:1rem;color:var(--body);line-height:1.5
}
.mgratis{
  align-self:center;font-family:var(--fd);font-weight:800;color:var(--green-ink);font-size:.95rem
}
.mficha{margin-top:2.2rem;display:grid;gap:.55rem}
.mficha div{display:grid;grid-template-columns:9rem 1fr;gap:.8rem;padding:.55rem 0;border-top:1px solid var(--hair)}
.mficha dt{font-family:var(--fd);font-weight:800;font-size:.86rem;color:var(--muted)}
.mficha dd{margin:0;font-size:.96rem;color:var(--heading)}

/* ============ MODULOS · /modulos/ ============ */
.modgrid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.modgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.modgrid{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.modcard{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s
}
.modcard:hover{transform:translateY(-3px);border-color:rgba(26,34,56,.22);box-shadow:0 14px 34px -20px rgba(10,16,32,.4)}
/* O ecra e um recorte do TOPO: um modulo reconhece-se pelo cabecalho e pelos
   primeiros numeros, nao pelo rodape. */
.modshot{display:block;height:170px;overflow:hidden;background:var(--l2)}
.modshot img{width:100%;height:auto;object-fit:cover;object-position:top}
.modtxt{padding:1.15rem 1.3rem 1.35rem}
.modtxt b{display:block;font-family:var(--fd);font-weight:800;font-size:1.04rem;color:var(--heading)}
.modtxt span{display:block;margin-top:.3rem;font-size:.94rem;color:var(--body);line-height:1.45}
/* Sem captura o cartao fica so texto, e nao com uma imagem parecida. */
.modcard:not(:has(.modshot)) .modtxt{padding-top:1.35rem}

.mecra{margin:0}
.mecra img{width:100%;max-width:420px;height:auto;border-radius:16px;border:1px solid var(--hair);background:var(--surface)}
.mplanos{
  margin-top:1.1rem;display:inline-block;padding:.25rem .7rem;border-radius:999px;
  background:rgba(21,171,255,.14);color:#0a6ea8;
  font-family:var(--fd);font-weight:800;font-size:.8rem
}

/* Os cartoes de modulo na home passaram a ligacoes (cada um tem pagina). */
/* O cartao de modulo passou a ligacao (cada um tem pagina propria). Mantem o
   desenho de linha: icone na coluna 1, titulo e descricao na 2. O "Saber mais"
   ocupa a coluna 2 e so ganha cor ao passar o rato, para nao encher a grelha
   de dezoito chamadas a accao a competir com o botao do heroi. */
a.mod{text-decoration:none;transition:border-color .18s var(--ease)}
/* Posicao EXPLICITA dos quatro. A regra antiga `.mod span{grid-column:2}`
   apanhava tambem o <span class="mic"> do icone e mandava-o para a coluna 2,
   o que empurrava o titulo para a linha de baixo e punha titulo e descricao
   lado a lado. Com auto-placement num grid que ja tem regras herdadas, o
   seguro e nomear cada celula. */
a.mod .mic{grid-column:1;grid-row:1;display:grid;place-items:center;margin-top:.2rem;color:var(--green-ink)}
a.mod b{grid-column:2;grid-row:1}
a.mod .ml{grid-column:2;grid-row:2}
a.mod .msaber{
  grid-column:2;grid-row:3;margin-top:.4rem;font-family:var(--fd);font-weight:800;font-size:.82rem;
  color:var(--muted);transition:color .18s
}
a.mod .msaber::after{content:" →";margin-left:.2rem}
a.mod:hover{border-color:rgba(26,34,56,.28)}
a.mod:hover b{color:var(--green-ink)}
a.mod:hover .msaber{color:var(--green-ink)}

/* A ficha (corpo de um material ou modulo) alinha com o resto da pagina.
   Estava centrada por causa do max-width no .wrap, e o cabecalho ao lado
   ficava a esquerda: lia-se como desalinho e nao como opcao. */
.artigo .measure p{margin-top:1.1rem;font-size:1.06rem;line-height:1.62;color:var(--body)}
.artigo .measure p:first-child{margin-top:0}

/* ============ AS CINCO FASES ============
   Substituiu a grelha de dezoito cartoes em 18-08-2026, depois de uma critica
   de posicionamento. O defeito nao era de design: a home DECLARA cinco fases
   no bloco 3 ("Primeiro controlas. Depois provas. Depois financias.") e seis
   blocos depois contradizia-se com um catalogo plano de dezoito modulos.
   Uma lista de dezoito convida a comparacao funcionalidade a funcionalidade,
   que e o terreno onde um concorrente maior ganha sempre. Agrupada por fases,
   a MESMA informacao conta uma progressao.
   Por omissao o leitor le CINCO frases de resultado; quem esta a comparar
   expande. <details> nativo: sem JavaScript, indexavel, conteudo no HTML. */
.fases{margin-top:2.8rem;display:grid;gap:0;max-width:52rem}
.fase{border-top:1px solid var(--hair)}
.fase:last-child{border-bottom:1px solid var(--hair)}
.fase summary{
  display:grid;grid-template-columns:2.6rem 1fr auto;gap:.2rem 1rem;align-items:baseline;
  padding:1.15rem 0;cursor:pointer;list-style:none
}
.fase summary::-webkit-details-marker{display:none}
.fase .fnum{
  font-family:var(--fd);font-weight:900;font-size:.82rem;color:var(--muted);
  font-variant-numeric:tabular-nums
}
.fase .ftxt b{display:block;font-family:var(--fd);font-weight:800;font-size:1.12rem;color:var(--heading);letter-spacing:-.014em}
.fase .ftxt span{display:block;margin-top:.2rem;font-size:.97rem;color:var(--body);line-height:1.45}
/* O contador diz quantos modulos ha por baixo sem os listar: informa sem
   encher, e e o que faz o expandir valer a pena. */
.fase .fver{
  font-family:var(--fd);font-weight:800;font-size:.78rem;color:var(--muted);
  border:1px solid var(--hair);border-radius:999px;padding:.15rem .5rem;align-self:center
}
.fase[open] .fver{background:var(--ink-deep);border-color:var(--ink-deep);color:#fff}
.fase summary:hover .ftxt b{color:var(--green-ink)}

.fmods{display:grid;gap:.5rem;padding:0 0 1.3rem 3.6rem}
@media(min-width:760px){.fmods{grid-template-columns:repeat(2,1fr);gap:.5rem 1.4rem}}
.fmods a{
  display:block;text-decoration:none;padding:.55rem .8rem;border-radius:10px;
  background:var(--surface);border:1px solid var(--hair);transition:border-color .16s
}
.fmods a:hover{border-color:rgba(26,34,56,.26)}
.fmods a b{display:block;font-family:var(--fd);font-weight:800;font-size:.94rem;color:var(--heading)}
.fmods a span{display:block;margin-top:.1rem;font-size:.87rem;color:var(--body);line-height:1.4}
@media(max-width:560px){.fmods{padding-left:0}}