/* ============================================================
   LKCOM — KIT DE MARCA v0.2 (partilhado por todas as páginas)
   Preto + branco + vermelho. O ponto final vermelho é a marca.
   Tipografia oficial: STÖLZL (fonte da marca LKCOM).
   ============================================================ */
@font-face{font-family:'Stolzl';font-weight:300;font-style:normal;font-display:swap;src:url('/themes/lkcom/fonts/Stolzl-Light.ttf') format('truetype')}
@font-face{font-family:'Stolzl';font-weight:400;font-style:normal;font-display:swap;src:url('/themes/lkcom/fonts/Stolzl-Regular.ttf') format('truetype')}
@font-face{font-family:'Stolzl';font-weight:500;font-style:normal;font-display:swap;src:url('/themes/lkcom/fonts/Stolzl-Medium.ttf') format('truetype')}
@font-face{font-family:'Stolzl';font-weight:700;font-style:normal;font-display:swap;src:url('/themes/lkcom/fonts/Stolzl-Bold.ttf') format('truetype')}
:root{
  --preto:#0B0B0D; --preto-2:#121216; --preto-3:#1A1A20;
  --branco:#FFFFFF; --cinza:#9A9AA4; --cinza-2:#5A5A64;
  --verm:#FB3457; --verm-esc:#C92A46;
  --f: 'Stolzl', -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --fm: "SF Mono", ui-monospace, "Menlo", monospace;
  --larg: min(1180px, 92vw);
  --ease: cubic-bezier(.22,.9,.24,1);
  /* Linhas/traços decorativos que SEGUEM O TOM da secção (bordas, fios, text-stroke
     dos números vazados). Default = tom ESCURO. .bg-branco/.bg-verm e as paletas
     redefinem-nos por tom, para nunca ficarem invisíveis. --traco é mais forte (números). */
  --linha: rgba(255,255,255,.10); --linha-2: rgba(255,255,255,.20); --traco: rgba(255,255,255,.30);
}
/* tons base (default, paleta Preto): claro em .bg-branco, vermelho em .bg-verm */
.bg-branco{--linha:rgba(16,16,20,.12);--linha-2:rgba(16,16,20,.20);--traco:rgba(16,16,20,.28)}
.bg-verm{--linha:rgba(255,255,255,.24);--linha-2:rgba(255,255,255,.40);--traco:rgba(255,255,255,.45)}
/* --linha/--traco por PALETA (níveis que mudam de tom vs o default acima) */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm){--linha:rgba(255,255,255,.24);--linha-2:rgba(255,255,255,.40);--traco:rgba(255,255,255,.45)}
:root[data-palette="verm"] .bg-verm{--linha:rgba(255,255,255,.10);--linha-2:rgba(255,255,255,.20);--traco:rgba(255,255,255,.30)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm),
:root[data-palette="branco"] .bg-preto2{--linha:rgba(16,16,20,.12);--linha-2:rgba(16,16,20,.20);--traco:rgba(16,16,20,.28)}
:root[data-palette="branco"] .bg-branco{--linha:rgba(255,255,255,.10);--linha-2:rgba(255,255,255,.20);--traco:rgba(255,255,255,.30)}
*{margin:0;padding:0;box-sizing:border-box}
/* transição suave e fluida entre páginas (navegação multi-página) — Chrome/Edge;
   nos browsers sem suporte degrada em silêncio para a navegação normal. */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.42s; animation-timing-function:var(--ease); }
@media (prefers-reduced-motion: reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none; } }
/* overflow-x também no html: só no body, o .fantasma (right:-2rem) esticava o
   viewport em mobile (375→407px) e cortava o hambúrguer — auditoria 11-07 */
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--preto);color:var(--branco);font-family:var(--f);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* overflow-x:CLIP (não hidden): hidden forçava overflow-y:auto no body → o body virava
   um 2.º contentor de scroll (além da janela) e o header fixo pintava em posições erradas
   de forma intermitente ("a barra às vezes esconde-se em janelas grandes"). clip recorta
   na horizontal SEM criar scroller → um único scroll, header estável. */
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--verm);color:#fff}

/* ---------- a gramática dos pontos finais (marca da casa) ----------
   texto branco → ponto VERMELHO · texto preto → ponto VERMELHO · texto vermelho → ponto BRANCO */
.pt{color:var(--verm);font-style:normal;font-weight:inherit}
.pt-b{color:#fff;font-style:normal;font-weight:inherit}   /* depois de palavra vermelha em fundo escuro */
.bg-verm .pt{color:#101014}                                /* em fundo vermelho: texto branco → ponto PRETO (vermelho sumia no fundo) */
.bg-branco .pt-b{color:var(--verm)}                        /* em fundo branco não há pontos brancos */
/* utilitários de marca (palavra vermelha / palavra escura) — globais p/ o page-builder e o tema */
.vm{color:var(--verm)}
.pr{color:#101014}

/* ---------- sistema de fundos preto / vermelho / branco (todo o site) ---------- */
.bg-preto2{background:var(--preto-2)}
.bg-branco{background:#F4F2EE;color:#101014}
.bg-branco .corpo{color:#50505a}
.bg-branco .corpo strong{color:#101014}
.bg-branco .eyebrow{color:var(--verm)}
.bg-verm{background:var(--verm);color:#fff}
.bg-verm .corpo{color:rgba(255,255,255,.88)}
.bg-verm .corpo strong{color:#fff}
.bg-verm .eyebrow{color:#fff}.bg-verm .eyebrow::after{background:#fff}
.bg-verm .btn{background:#fff;color:var(--verm);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.bg-verm .btn:hover{background:#101014;color:#fff}
.bg-branco .carimbo{border-color:var(--verm);color:var(--verm)}
.bg-verm .carimbo{border-color:#fff;color:#fff}

/* ---------- palavra-fantasma (identidade de cada secção no fundo) ---------- */
.fantasma{position:absolute;pointer-events:none;user-select:none;z-index:0;
  font-weight:800;letter-spacing:-.04em;line-height:.8;white-space:nowrap;
  font-size:clamp(7rem,20vw,17rem);color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.055);top:.5rem;right:-2rem}
.bg-branco .fantasma{-webkit-text-stroke-color:rgba(16,16,20,.06)}
.bg-verm .fantasma{-webkit-text-stroke-color:rgba(255,255,255,.14)}
.bg-preto2 .fantasma{-webkit-text-stroke-color:rgba(255,255,255,.05)}
@media(max-width:768px){.fantasma{font-size:clamp(4.2rem,26vw,9rem);right:-.5rem}}
.sec>.wrap{position:relative;z-index:1}

/* ---------- tipografia de cartaz ---------- */
.h-giga{font-size:clamp(3rem,8.5vw,7.2rem);font-weight:800;line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.h-grande{font-size:clamp(2.2rem,5.4vw,4.4rem);font-weight:800;line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.h-media{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.eyebrow{font-family:var(--fm);font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--verm);
         display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.eyebrow::after{content:"";width:52px;height:1px;background:var(--verm);opacity:.7}
.corpo{color:var(--cinza);max-width:60ch;font-size:clamp(1rem,1.35vw,1.15rem)}
.corpo strong{color:var(--branco)}

/* ---------- layout ---------- */
.wrap{width:var(--larg);margin-inline:auto}
.sec{padding:clamp(4.5rem,10vh,8rem) 0;position:relative;scroll-margin-top:76px}
.sec-cheia{min-height:92vh;display:flex;align-items:center}

/* ---------- header (só páginas-filho no menu) ---------- */
#topo{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .4s,box-shadow .4s}
#topo.solido{background:rgba(11,11,13,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
#topo .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;width:min(1320px,94vw)}
#topo nav{display:flex;align-items:center;gap:2rem}
#topo nav a{font-size:.92rem;font-weight:600;color:var(--cinza);transition:color .25s;position:relative}
#topo nav a:hover,#topo nav a[aria-current]{color:var(--branco)}
#topo nav a:hover::after{content:".";color:var(--verm);font-weight:800}
#topo .cta-mini{background:var(--verm);color:#fff;padding:.55rem 1.15rem;border-radius:99px;font-weight:700;font-size:.88rem;
                display:inline-flex;gap:.45rem;align-items:center;transition:transform .3s var(--ease),background .3s}
#topo .cta-mini:hover{background:var(--verm-esc);transform:translateY(-1px)}
#topo .cta-mini::after{content:"→"}
@media(max-width:900px){#topo nav a:not(.cta-mini),#idiomas{display:none}}

/* ---------- seletor de idiomas ---------- */
#idiomas{position:relative}
#idi-atual{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;color:var(--cinza);background:transparent;
  border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:.42rem .8rem;cursor:pointer;transition:color .25s,border-color .25s}
#idi-atual::after{content:" ▾";font-size:.6rem}
#idi-atual:hover{color:#fff;border-color:#fff}
#idi-lista{position:absolute;top:calc(100% + 10px);right:0;background:rgba(11,11,13,.96);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:.5rem;display:none;grid-template-columns:1fr;gap:2px;min-width:74px;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}
#idiomas.aberto #idi-lista{display:grid}
#idi-lista span{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;color:var(--cinza);padding:.45rem .7rem;
  border-radius:8px;cursor:pointer;text-align:center;transition:background .2s,color .2s}
#idi-lista span:hover{background:rgba(255,255,255,.07);color:#fff}
#idi-lista span.ativo{background:var(--verm);color:#fff}

/* ---------- logótipo (símbolo no lugar do O) ---------- */
.logo{display:inline-flex;align-items:baseline;gap:.06em;font-weight:800;letter-spacing:.02em;
      font-size:1.35rem;color:var(--branco);line-height:1}
.logo .simb{width:.94em;height:.94em;transform:translateY(.09em);display:inline-block}
.logo .pt{font-size:1.15em;line-height:0}
.logo small{display:block;font-size:.5rem;letter-spacing:.34em;font-weight:600;color:var(--cinza);margin-top:.35rem;text-transform:uppercase}

/* ---------- logótipo NOVO (3 variantes oficiais, inline SVG adaptável à paleta) ----------
   Reutiliza a cor de .logo (currentColor no wordmark) + var(--verm) (ponto/símbolo). */
.lk-logo{align-items:center;gap:.44em}
.lk-logo .lk-logo__wm{display:inline-flex;height:.78em}
.lk-logo .lk-logo__simb{display:inline-flex;height:.5em}
.lk-logo .lk-logo__wm svg,.lk-logo .lk-logo__simb svg{height:100%;width:auto;display:block}
.lk-logo--simbolo{gap:0}
.lk-logo--simbolo .lk-logo__simb{height:1.3em}
/* header: logótipo maior (pedido Filipe — +100%) */
#topo .logo{font-size:2.7rem}
@media(max-width:768px){#topo .logo{font-size:2.1rem}}

/* ---------- menu hambúrguer (mobile e janelas estreitas) ---------- */
#burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;
  width:46px;height:46px;background:none;border:0;cursor:pointer;padding:0 4px}
#burger span{display:block;height:2.5px;width:30px;background:var(--branco);border-radius:99px;
  transition:transform .4s var(--ease),opacity .3s var(--ease),width .35s var(--ease)}
#burger span:nth-child(2){width:20px}
#burger:hover span{background:var(--verm);width:30px}
#burger.aberto span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
#burger.aberto span:nth-child(2){opacity:0;width:0}
#burger.aberto span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
#menu-movel{position:fixed;inset:0;z-index:55;background:rgba(11,11,13,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;justify-content:center;gap:2.4rem;padding:86px 8vw 2.4rem;
  overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
@media(max-height:600px){#menu-movel{justify-content:flex-start}}
#menu-movel.aberto{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
#menu-movel nav{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
#menu-movel nav a{color:var(--branco);font-weight:800;font-size:clamp(1.9rem,7.5vw,3rem);
  letter-spacing:-.02em;line-height:1.05;opacity:0;transform:translateY(30px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
#menu-movel.aberto nav a{opacity:1;transform:none;transition-delay:calc(var(--i)*70ms + .08s)}
#menu-movel nav a::after{content:".";color:var(--verm)}
#menu-movel nav a[aria-current]{color:var(--verm)}
#menu-movel nav a[aria-current]::after{color:var(--branco)}
#menu-movel .mm-cta{margin-top:1rem;background:var(--verm);color:#fff;border-radius:99px;
  padding:.55em 1.1em;font-size:clamp(1.1rem,4vw,1.4rem)}
#menu-movel .mm-cta::after{content:" →";color:#fff}
/* em /contactos o CTA fica com aria-current (página atual) → a regra a[aria-current] pintava-o
   de vermelho sobre a pílula vermelha (ilegível). Força o texto do CTA a branco. */
#menu-movel nav a.mm-cta[aria-current]{color:#fff}
#menu-movel nav a.mm-cta[aria-current]::after{color:#fff}
#menu-movel .mm-idiomas{display:flex;flex-wrap:wrap;gap:.4rem .95rem;font-family:var(--fm);
  font-size:.78rem;letter-spacing:.14em;color:var(--cinza);opacity:0;transition:opacity .5s var(--ease) .5s}
#menu-movel.aberto .mm-idiomas{opacity:1}
#menu-movel .mm-idiomas span{cursor:pointer;font-size:.9rem;padding:.55rem .7rem;margin:-.35rem -.3rem}
#menu-movel .mm-idiomas span.ativo{color:var(--verm);font-weight:700}
@media(max-width:1080px){
  #topo nav{display:none}
  #burger{display:flex}
}

/* ---------- rodapé: redes sociais ---------- */
footer .redes{display:flex;gap:1.15rem;margin-top:1.1rem;font-family:var(--fm);
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
footer .redes a{color:var(--cinza);text-decoration:none;transition:color .25s}
footer .redes a:hover{color:var(--verm)}

/* ---------- assinatura LKCOM (orelha do CMS: selo fixo à esquerda) ---------- */
#lkcom-selo{position:fixed;right:0;bottom:32px;z-index:50;display:flex;align-items:center;gap:14px;
  text-decoration:none;border-radius:10px 0 0 10px;padding:8px 18px 8px 20px;
  background:linear-gradient(45deg,var(--verm) 0%,#CD1448 100%);cursor:pointer;
  /* tamanho: scale(.72) ancorado à direita (+20% a pedido, 07-14; mantém o deslize). */
  transform:translateX(110%) scale(.72);transform-origin:right center;
  /* visibility:hidden até entrar → fora da ordem de tabulação e sem foco enquanto está fora do ecrã */
  visibility:hidden;transition:transform .55s cubic-bezier(.16,1,.3,1),visibility 0s}
#lkcom-selo.visivel{transform:translateX(0) scale(.72);visibility:visible}
#lkcom-selo:hover,#lkcom-selo:focus-visible{filter:brightness(1.08)}
#lkcom-selo .selo-texto{text-align:right;line-height:1.65}
#lkcom-selo .selo-texto span{color:#fff;font-size:11px;font-weight:500;letter-spacing:.02em;
  display:block;white-space:nowrap}
#lkcom-selo img{height:32px;width:auto;display:block;flex-shrink:0}
/* logótipo em TEXTO (como o header) com o símbolo INVERTIDO — tile BRANCO, desenho a ler-se
   sobre o vermelho do selo (antes o tile vermelho fundia-se com o fundo do selo) */
#lkcom-selo .selo-logo{display:flex;align-items:center;gap:11px;color:#fff;font-size:45px;line-height:1}
#lkcom-selo .selo-logo .selo-simb{height:.4em;width:auto;display:block}
#lkcom-selo .selo-logo .selo-wm{height:.62em;width:auto;display:block}
@media (max-width:768px){
  #lkcom-selo{padding:10px 12px;gap:0;bottom:18px;min-height:44px;align-items:center}
  #lkcom-selo .selo-texto{display:none}
  #lkcom-selo img{height:24px}
  footer{padding-bottom:calc(2.4rem + 64px)}          /* reserva o canto para a orelha */
  footer .redes{font-size:.78rem;gap:1.3rem}
  footer .redes a{display:inline-block;padding:.5rem 0}
}

/* ---------- barra de progresso vertical com tracinhos ---------- */
#rail{position:fixed;left:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);z-index:55;
      display:flex;flex-direction:column;gap:14px;align-items:flex-start}
#rail .tick{display:flex;align-items:center;gap:10px;cursor:pointer;opacity:.55;transition:opacity .3s}
#rail .tick i{display:block;width:16px;height:2px;background:var(--branco);border-radius:2px;
              box-shadow:0 1px 2px rgba(0,0,0,.35);transition:width .35s var(--ease),background .35s}
#rail .tick span{font-family:var(--fm);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--branco);
                 text-shadow:0 1px 3px rgba(0,0,0,.55);opacity:0;transform:translateX(-6px);
                 transition:opacity .35s,transform .35s;white-space:nowrap}
#rail .tick.ativo{opacity:1}
#rail .tick.ativo i{width:34px;background:var(--verm);box-shadow:0 1px 3px rgba(0,0,0,.4)}
/* v0.9: adapta a cor do rail à secção ATUAL (o mix-blend-difference ficava confuso sobre
   fundo vermelho e sobre fotografias). A classe é posta pelo kit.js conforme a secção ativa. */
#rail.escuro .tick i{background:#101014;box-shadow:0 1px 2px rgba(255,255,255,.5)}
#rail.escuro .tick span{color:#101014;text-shadow:0 1px 2px rgba(255,255,255,.6)}
#rail.escuro .tick.ativo i{background:var(--verm)}
#rail.verm .tick.ativo i{background:#fff}   /* no fundo vermelho o tracinho ativo passa a branco (o vermelho sumia) */
/* v0.8: SEM o rato — mostra só o rótulo da secção ATUAL (orientação ao scroll; muda com a
   secção). COM o rato sobre/perto do rail (.perto via JS) ou por cima (:hover) — mostra TODOS. */
#rail .tick.ativo span{opacity:1;transform:none}
#rail.na-capa .tick.ativo span{opacity:0}   /* no herói o rótulo colidia com o h1 gigante */
#rail.perto .tick span,#rail:hover .tick span{opacity:.5;transform:none}
#rail.perto .tick.ativo span,#rail:hover .tick.ativo span,#rail .tick:hover span{opacity:1;transform:none}
@media(max-width:1100px){#rail{display:none}}
/* (02-09) Entre 1101px e 1250px o rail AINDA aparece mas o conteudo ja esta encostado:
   o rotulo de texto (117px de largura) passava por cima do titulo dos cartoes do
   portefolio — medido a 1120px, 95px de invasao. Escondemos so o ROTULO e mantemos os
   tracinhos (34px), que continuam clicaveis: a navegacao nao se perde.
   ⚠️ E o MESMO remedio que a linha do `.na-capa` ja usava para o h1 do heroi — aquele
   caso foi corrigido e este ficou por tratar. */
@media (max-width:1250px){#rail .tick span{display:none}}

/* ---------- reveal: só esconde COM js ligado (lição da auditoria) ---------- */
html.js .rv{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-esq{transform:translateX(-40px)}html.js .rv-esq.in{transform:none}
html.js .rv-zoom{transform:scale(.92)}html.js .rv-zoom.in{transform:none}

/* ---------- o site a construir-se: stagger de filhos ---------- */
html.js .rv-kids>*{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0)*90ms)}
html.js .rv-kids.in>*{opacity:1;transform:none}

/* ---------- títulos palavra a palavra (à Lavva) ---------- */
html.js .split-palavras .w{display:inline-block;opacity:0;transform:translateY(.55em);
  transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--wi,0)*70ms)}
html.js .split-palavras.in .w{opacity:1;transform:none}

/* ---------- linhas que se desenham ---------- */
html.js .fio-h{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .15s}
html.js .in .fio-h,html.js .fio-h.in{transform:none}

@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-kids>*,html.js .split-palavras .w,html.js .fio-h{opacity:1;transform:none;transition:none}
}

/* ---------- modo pré-visualização (?preview=1): mostra TUDO, sem animações de entrada ----------
   Usado pelos iframes do editor de conteúdos no CMS. O kit.js marca o <html> com .is-preview.
   Revela todos os elementos do scroll-reveal (que num iframe nunca "entram" no ecrã) e esconde
   o preloader. NÃO afeta a página normal (sem a classe). */
html.is-preview .rv,html.is-preview .rv-esq,html.is-preview .rv-zoom,
html.is-preview .rv-kids,html.is-preview .rv-kids>*,
html.is-preview .split-palavras,html.is-preview .split-palavras .w,
html.is-preview .fio-h,html.is-preview [class*="rv"]{
  opacity:1 !important;transform:none !important;transition:none !important}
html.is-preview #pl{display:none !important}

/* ---------- botões-pílula magnéticos ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--verm);color:#fff;font-weight:700;
     padding:1rem 1.7rem;border-radius:99px;font-size:1.02rem;border:0;cursor:pointer;
     transition:background .3s,box-shadow .3s;will-change:transform;box-shadow:0 8px 30px rgba(251, 52, 87,.25)}
.btn:hover{background:var(--verm-esc);box-shadow:0 12px 40px rgba(251, 52, 87,.4)}
.btn::after{content:"→";transition:transform .3s var(--ease)}
.btn:hover::after{transform:translateX(4px)}
.btn-fantasma{background:transparent;border:1px solid rgba(255,255,255,.25);box-shadow:none}
.btn-fantasma:hover{background:rgba(255,255,255,.06);border-color:#fff;box-shadow:none}

/* ---------- carimbo ---------- */
.carimbo{display:inline-block;border:2px solid var(--verm);color:var(--verm);padding:.7rem 1.1rem;
         font-family:var(--fm);font-size:.78rem;letter-spacing:.18em;font-weight:700;text-transform:uppercase;
         transform:rotate(-4deg);border-radius:6px;line-height:1.5}

/* ---------- preloader de impacto: símbolo em grande → lockup → ponto cai com peso → cortina abre ---------- */
#pl{position:fixed;inset:0;z-index:200;pointer-events:none}
/* 31-07: o preloader vem no HTML (home.blade.php) para tapar o ecrã desde o 1.º pixel.
   Sem movimento, não deve sequer piscar — o kit.js remove-o, isto evita o flash até lá.
   (Sem JS quem o esconde é o <noscript> do próprio Blade.) */
@media(prefers-reduced-motion:reduce){#pl{display:none}}
html.is-preview #pl{display:none}
#pl .pl-cort{position:absolute;left:0;width:100%;height:50.5%;background:var(--preto);
  transition:transform .55s cubic-bezier(.75,0,.2,1) .06s}
#pl .pl-cort.topo{top:0}
#pl .pl-cort.baixo{bottom:0}
#pl.abre .pl-cort.topo{transform:translateY(-101%)}
#pl.abre .pl-cort.baixo{transform:translateY(101%)}
#pl .pl-centro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease,transform .4s var(--ease)}
#pl.abre .pl-centro{opacity:0;transform:scale(1.08)}
#pl .pl-logo{display:flex;align-items:baseline;gap:.07em;font-weight:800;color:#fff;
  font-size:clamp(3rem,9vw,6rem);letter-spacing:.02em;font-family:var(--f);position:relative}
#pl .pl-l{opacity:0}
#pl .pl-simb{width:.94em;height:.94em;transform:translateY(.09em) scale(0);transform-origin:50% 55%;position:relative;z-index:2}
#pl .pl-pt{color:var(--verm);opacity:0;font-size:1.15em;line-height:0;position:relative}
#pl .pl-onda{position:absolute;right:-.12em;bottom:.02em;width:.5em;height:.5em;border:3px solid var(--verm);
  border-radius:50%;opacity:0;transform:scale(.2);pointer-events:none}
#pl.anima .pl-simb{animation:plSimbEpico 1s cubic-bezier(.5,1.4,.4,1) forwards}
#pl.anima .pl-l:nth-child(1){animation:plLetraEsq .38s .62s var(--ease) forwards}
#pl.anima .pl-l:nth-child(2){animation:plLetraEsq .38s .68s var(--ease) forwards}
#pl.anima .pl-l:nth-child(3){animation:plLetraEsq .38s .74s var(--ease) forwards}
#pl.anima .pl-l:nth-child(5){animation:plLetraDir .38s .74s var(--ease) forwards}
#pl.anima .pl-pt{animation:plPontoPeso .5s .95s cubic-bezier(.4,0,.6,1) forwards}
#pl.anima .pl-onda{animation:plOnda .55s 1.18s ease-out forwards}
#pl.anima .pl-logo{animation:plAbanao .22s 1.47s linear}
/* intro COM ÍCONE — reproduz a coreografia ORIGINAL com o novo símbolo+LKCOM:
   símbolo escala (épico), as letras L·K·C·O·M deslizam, e o PONTO cai com estrondo de cima.
   30-07: queda alongada a pedido do Filipe (-1,5em/.5s → -1,8em/.85s).
   31-07 (v3): ainda não se notava em ECRÃ LARGO — o Filipe via a queda no BIMP (janela de
   admin, logo proporcionalmente maior) mas não no site. Duas causas: (a) a opacidade só
   chegava a 100% aos 45% do percurso — quase METADE da queda era invisível; (b) num monitor
   grande a distância era uma fração mínima do ecrã. Agora: -3em em 1s, e o ponto fica
   TOTALMENTE opaco aos 12% — a viagem vê-se inteira, do topo ao impacto.
   Ver [[lkcom-logo-fase2-intro-poslogin]]. */
#pl .pl-logo--ci{align-items:center;gap:.3em;font-family:var(--f);font-weight:600;font-size:clamp(2.4rem,6.5vw,4rem)}
#pl .pl-logo--ci .pl-simb{width:.72em;height:.72em;transform:scale(0);transform-origin:50% 50%}
#pl .pl-logo--ci .pl-wm{display:inline-flex;align-items:baseline;position:relative;letter-spacing:.005em}
#pl .pl-logo--ci .pl-lk{font-weight:600;color:#fff}
#pl .pl-logo--ci .pl-com{font-weight:300;color:rgba(255,255,255,.7)}
#pl .pl-logo--ci .pl-pt{color:var(--verm);font-weight:700;font-size:1.05em;line-height:1;margin-left:.02em;
  /* 31-07 — CINTO E SUSPENSÓRIOS: o ponto TEM de ser transformável. Um <em> é inline por
     defeito e **transform não se aplica a elementos inline** — a queda seria ignorada em
     silêncio (só a opacidade animaria). Hoje ele é flex item do .pl-wm (logo blockified),
     mas basta alguém mudar o markup — ou uma função como a colaPontos() do kit.js, que já
     o moveu uma vez — para o ponto voltar a inline e a animação morrer sem erro nenhum.
     Declarar inline-block torna isso impossível. */
  display:inline-block}
#pl.anima .pl-logo--ci .pl-simb{animation:plSimbNovo .9s cubic-bezier(.5,1.4,.4,1) forwards}
#pl.anima .pl-logo--ci .pl-l:nth-child(1){animation:plLetraEsq .34s .48s var(--ease) forwards}
#pl.anima .pl-logo--ci .pl-l:nth-child(2){animation:plLetraEsq .34s .54s var(--ease) forwards}
#pl.anima .pl-logo--ci .pl-l:nth-child(3){animation:plLetraEsq .34s .6s var(--ease) forwards}
#pl.anima .pl-logo--ci .pl-l:nth-child(4){animation:plLetraEsq .34s .66s var(--ease) forwards}
#pl.anima .pl-logo--ci .pl-l:nth-child(5){animation:plLetraEsq .34s .72s var(--ease) forwards}
#pl.anima .pl-logo--ci .pl-pt{animation:plPontoPeso 1s .92s cubic-bezier(.4,0,.6,1) forwards}
#pl.anima .pl-logo--ci .pl-onda{animation:plOnda .55s 1.37s ease-out forwards}
@keyframes plSimbNovo{0%{transform:scale(0) rotate(-25deg);opacity:0}32%{transform:scale(1.28) rotate(3deg);opacity:1}54%{transform:scale(1.28) rotate(0)}100%{transform:scale(1)}}
@keyframes plSimbEpico{
  0%{transform:translateY(.09em) scale(0) rotate(-30deg);opacity:0}
  30%{transform:translateY(.09em) scale(2.9) rotate(3deg);opacity:1}
  52%{transform:translateY(.09em) scale(2.9) rotate(0)}
  100%{transform:translateY(.09em) scale(1)}}
@keyframes plLetraEsq{from{opacity:0;transform:translateX(-.7em)}to{opacity:1;transform:none}}
@keyframes plLetraDir{from{opacity:0;transform:translateX(.7em)}to{opacity:1;transform:none}}
@keyframes plPontoPeso{
  0%{opacity:0;transform:translateY(-3em)}
  12%{opacity:1}
  45%{opacity:1;transform:translateY(.12em) scale(1.4,.55)}
  65%{transform:translateY(-.144em) scale(.92,1.1)}
  82%{transform:translateY(.036em) scale(1.05,.95)}
  100%{opacity:1;transform:none}}
@keyframes plOnda{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(4.5)}}
@keyframes plAbanao{0%,100%{transform:translate(0,0)}25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}}

/* ---------- cursor personalizado ---------- */
#cur{position:fixed;z-index:300;width:10px;height:10px;border-radius:50%;background:var(--verm);
     pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,opacity .3s;mix-blend-mode:difference}
#cur.grande{width:42px;height:42px}
@media(pointer:coarse){#cur{display:none}}

/* ---------- números que contam ---------- */
.num-giga{font-size:clamp(4.5rem,13vw,11rem);font-weight:800;line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* números que contam ao scroll: dígitos de largura fixa + largura reservada (via JS)
   para o número crescer sem empurrar/saltar o texto à volta */
.count{display:inline-block;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;text-align:left}

/* ---------- rodapé ---------- */
footer{border-top:1px solid rgba(255,255,255,.08);padding:3.2rem 0 calc(2.4rem + 64px);margin-top:2rem}   /* reserva o canto inf-esq p/ o seletor de paleta não cair nas redes */
footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
footer p, footer a{font-size:.85rem;color:var(--cinza)}
footer a:hover{color:#fff}
.rafael{position:relative;cursor:help;display:inline-flex;align-items:center;gap:.55rem}
.rafael-img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 20%;
  background:var(--preto-3);border:1.5px solid rgba(255,255,255,.18);flex:none}
.rafael:hover::after,.rafael.mostra::after{content:"Não aceita subornos abaixo de um biscoito.";position:absolute;bottom:130%;left:0;
  background:var(--verm);color:#fff;padding:.5rem .8rem;border-radius:8px;font-size:.75rem;white-space:nowrap;font-weight:600}
@media(max-width:480px){.rafael:hover::after,.rafael.mostra::after{white-space:normal;max-width:70vw}}

/* ---------- Gesto de riscar em títulos (Cms::mark ~riscada|nova~) ---------- */
/* Palavra riscada (linha vermelha) com a "nova" escrita por cima, à mão. Versão ESTÁTICA,
   disponível em qualquer título do tema (heros de página, cabeçalhos de secção). A home tem
   uma versão ANIMADA própria (regras .hslide[data-gesto]… no <style> da página) que se
   sobrepõe a estas quando presente. */
.risco{position:relative;display:inline-block}
.risco::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:.075em;background:var(--verm);
  border-radius:99px;transform:rotate(-2deg);transform-origin:left center}
.rabisco{position:absolute;left:var(--rb-x,52%);top:var(--rb-y,-.5em);bottom:var(--rb-b,auto);
  transform:translateX(var(--rb-tx,-50%)) rotate(-5deg);color:var(--verm);
  font-size:.4em;font-weight:700;font-style:italic;white-space:nowrap;pointer-events:none}
/* Posicionamento INTELIGENTE do rabisco (kit.js posicionaRabiscos), pedido 07-14:
   1ª linha do bloco → por CIMA, avançado e com folga das letras altas;
   ÚLTIMA linha → por BAIXO (por cima pisava a linha anterior);
   linha do MEIO → à FRENTE da palavra (onde há espaço). */
.risco.rb-cima{--rb-y:-.82em;--rb-x:62%;--rb-tx:-38%}
.risco.rb-baixo{--rb-y:auto;--rb-b:-1.06em;--rb-x:58%;--rb-tx:-36%}
.risco.rb-lado{--rb-x:100%;--rb-tx:.24em;--rb-y:-.26em}
/* modo de MEDIÇÃO (kit.js): neutraliza transforms de entrada para medir a geometria real */
html.rb-medir .pal,html.rb-medir .risco,html.rb-medir .rabisco{transform:none!important;transition:none!important}

/* ══════════ DESAFIO DE CORES — paletas dominantes (só as 4 cores da marca) ══════════
   O DEFAULT (sem [data-palette] ou ="preto") é a paleta PRETO — INTACTA (todo o kit acima).
   Aqui só os OVERRIDES para VERMELHO e BRANCO/CREME. O nível DOMINANTE = as secções/heros
   sem classe de fundo (herdam o body preto); .bg-preto2/.bg-branco/.bg-verm são os outros níveis.
   Cada bloco reaplica o TOM (escuro/claro/vermelho) da matriz. Só as 4 cores da marca. */

/* transição suave — ligada só durante a troca (classe .lk-pal-anim), respeita reduced-motion */
html.lk-pal-anim body,html.lk-pal-anim .sec,html.lk-pal-anim .corpo,html.lk-pal-anim .corpo strong,
html.lk-pal-anim .eyebrow,html.lk-pal-anim .eyebrow::after,html.lk-pal-anim .pt,html.lk-pal-anim .pt-b,
html.lk-pal-anim .btn,html.lk-pal-anim .fantasma,html.lk-pal-anim .carimbo{
  transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease),-webkit-text-stroke-color .5s var(--ease)}
@media(prefers-reduced-motion:reduce){html.lk-pal-anim *{transition:none!important}}

/* ───────── Paleta VERMELHO ───────── */
:root[data-palette="verm"] body{background:var(--verm)}
/* L1 dominante (sec/heros sem bg) → TOM VERMELHO */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm){background:var(--verm);color:#fff}
/* Decisão Filipe (07-13): vermelho VIVO + texto PEQUENO escuro (#101014 sobre #FB3457 = 5.1 AA).
   Os TÍTULOS grandes ficam brancos (herdam o color:#fff do .sec — impacto). */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .corpo{color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .corpo strong{color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .eyebrow{color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .eyebrow::after{background:#101014}
/* legendas/subtextos secundários (liam-se a 1.3 em cinza sobre o vermelho) → escuro */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.orb-dica,.ouvir-leg,.mundo-leg,.eq-fn,.eq-nome,.wire-cap,.legenda,.a-frase,.passo p,.tmeta span,.drucker cite,.svc-lista li i,.eq-fn){color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .pt{color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .pt-b{color:#fff}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .btn{background:#fff;color:var(--verm)}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .btn:hover{background:#101014;color:#fff}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .fantasma{-webkit-text-stroke-color:rgba(255,255,255,.16)}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.carimbo,.carimbo-tinta){border-color:#101014;color:#101014}
/* em fundo vermelho, o gesto de riscar e as palavras .vm passam a BRANCO (senão sumiam no vermelho) */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .risco::after{background:#fff}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .rabisco,
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .vm,
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) [style*="--verm"]{color:#fff!important}
/* L2 .bg-preto2 → escuro #0B0B0D (mesmo tom escuro) */
:root[data-palette="verm"] .bg-preto2{background:var(--preto)}
/* L4 .bg-verm → escuro #121216 (reverter o tom vermelho para ESCURO) */
:root[data-palette="verm"] .bg-verm{background:var(--preto-2);color:#fff}
:root[data-palette="verm"] .bg-verm .corpo{color:var(--cinza)}
:root[data-palette="verm"] .bg-verm .corpo strong{color:#fff}
:root[data-palette="verm"] .bg-verm .eyebrow{color:var(--verm)}
:root[data-palette="verm"] .bg-verm .eyebrow::after{background:var(--verm)}
:root[data-palette="verm"] .bg-verm .pt{color:var(--verm)}
:root[data-palette="verm"] .bg-verm .btn{background:var(--verm);color:#fff}
:root[data-palette="verm"] .bg-verm .btn:hover{background:var(--verm-esc);color:#fff}
:root[data-palette="verm"] .bg-verm .fantasma{-webkit-text-stroke-color:rgba(255,255,255,.05)}
:root[data-palette="verm"] .bg-verm .carimbo{border-color:var(--verm);color:var(--verm)}
/* L3 .bg-branco → creme, INALTERADO (igual ao default) */

/* ───────── Paleta BRANCO/CREME ───────── */
:root[data-palette="branco"] body{background:#F4F2EE}
/* L1 dominante → TOM CLARO (creme) */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm){background:#F4F2EE;color:#101014}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .corpo{color:#50505a}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .corpo strong{color:#101014}
/* eyebrow #FB3457 sobre creme lê só 3.3 → verm-esc #C92A46 lê a 5.0 */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .eyebrow{color:var(--verm-esc)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .pt{color:var(--verm-esc)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .pt-b{color:var(--verm-esc)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .fantasma{-webkit-text-stroke-color:rgba(16,16,20,.06)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .carimbo{border-color:var(--verm-esc);color:var(--verm-esc)}
/* legendas secundárias (liam-se a 2.5-2.8 em cinza sobre creme) → cinza escuro */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.orb-dica,.ouvir-leg,.mundo-leg,.eq-fn,.wire-cap,.legenda,.passo p,.svc-lista li i){color:#50505a}
/* L2 .bg-preto2 → branco puro #fff (TOM CLARO) */
:root[data-palette="branco"] .bg-preto2{background:#fff;color:#101014}
:root[data-palette="branco"] .bg-preto2 .corpo{color:#50505a}
:root[data-palette="branco"] .bg-preto2 .corpo strong{color:#101014}
:root[data-palette="branco"] .bg-preto2 .eyebrow{color:var(--verm-esc)}
:root[data-palette="branco"] .bg-preto2 .pt,:root[data-palette="branco"] .bg-preto2 .pt-b{color:var(--verm-esc)}
:root[data-palette="branco"] .bg-preto2 .fantasma{-webkit-text-stroke-color:rgba(16,16,20,.06)}
:root[data-palette="branco"] .bg-preto2 :is(.orb-dica,.ouvir-leg,.mundo-leg,.eq-fn,.wire-cap,.legenda,.passo p,.svc-lista li i){color:#50505a}
/* L3 .bg-branco → escuro #0B0B0D (reverter o tom claro para ESCURO) */
:root[data-palette="branco"] .bg-branco{background:var(--preto);color:#fff}
:root[data-palette="branco"] .bg-branco .corpo{color:var(--cinza)}
:root[data-palette="branco"] .bg-branco .corpo strong{color:#fff}
:root[data-palette="branco"] .bg-branco .eyebrow{color:var(--verm)}
:root[data-palette="branco"] .bg-branco .pt,:root[data-palette="branco"] .bg-branco .pt-b{color:var(--verm)}
:root[data-palette="branco"] .bg-branco .fantasma{-webkit-text-stroke-color:rgba(255,255,255,.055)}
:root[data-palette="branco"] .bg-branco .carimbo{border-color:var(--verm);color:var(--verm)}
/* L4 .bg-verm → fica vermelho, mas com texto pequeno ESCURO (mesma decisão do dominante:
   branco pequeno sobre vermelho lê só 3.7 → #101014 dá 5.1) */
:root[data-palette="branco"] .bg-verm :is(.corpo,.eyebrow,.orb-dica,.ouvir-leg,.mundo-leg,.eq-fn,.wire-cap,.legenda,.a-frase,.passo p,.tmeta span,.carimbo,.carimbo-tinta){color:#101014}
:root[data-palette="branco"] .bg-verm .eyebrow::after{background:#101014}
:root[data-palette="branco"] .bg-verm :is(.carimbo,.carimbo-tinta){border-color:#101014}
/* carimbo-tinta segue o .carimbo nas secções bg-verm invertidas (paleta vermelho → fundo escuro) */
:root[data-palette="verm"] .bg-verm :is(.carimbo,.carimbo-tinta){border-color:var(--verm);color:var(--verm)}
/* eq-nome do cartão-convite (vermelho fixo) em fundo claro → verm-esc (lê a 5.0) */
:root[data-palette="branco"] .sec:not(.bg-verm) .eq-cartao.convite .eq-nome{color:var(--verm-esc)}

/* ── Elementos VAZADOS / animados (números com contorno, fios) — regra da sessão de design:
   o CONTORNO segue o "detalhe" do tom; um elemento vermelho-por-marca só troca em fundo vermelho. ──*/
/* números vazados .a-num (contorno branco por defeito) → seguem o tom */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-num,
:root[data-palette="verm"] .bg-verm .a-num{-webkit-text-stroke-color:rgba(16,16,20,.6)!important}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-num,
:root[data-palette="branco"] .bg-preto2 .a-num{-webkit-text-stroke-color:rgba(16,16,20,.28)!important}
:root[data-palette="branco"] .bg-branco .a-num{-webkit-text-stroke-color:rgba(255,255,255,.24)!important}
/* .passo .n é vermelho-por-marca → só troca em FUNDO vermelho (para escuro) */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .passo .n,
:root[data-palette="verm"] .bg-verm .passo .n{-webkit-text-stroke-color:#101014!important}
/* fios/linhas seguem o tom */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .fio,
:root[data-palette="verm"] .bg-verm .fio{background:rgba(16,16,20,.3)!important}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .fio,
:root[data-palette="branco"] .bg-preto2 .fio{background:rgba(16,16,20,.14)!important}
:root[data-palette="branco"] .bg-branco .fio{background:rgba(255,255,255,.12)!important}

/* ══ CHROME e elementos focais nas paletas (rail/header/rodapé/contadores/clientes/pontos) ══ */
/* RAIL sobre fundo vermelho → detalhe escuro (o cinza/branco sumia); a deteção do tom é por
   luminância no kit.js (v1.0), por isso funciona em qualquer paleta. */
#rail.verm .tick i{background:#101014}
#rail.verm .tick span{color:#101014;text-shadow:0 1px 2px rgba(255,255,255,.35)}
#rail.verm .tick.ativo i{background:#fff}
/* HEADER: no TOPO (transparente) o menu segue o tom da 1.ª secção; ao SCROLL o header fica
   preto (.solido) → o nav claro do default serve. Só se muda o estado "não sólido". */
:root[data-palette="verm"] #topo:not(.solido) nav a,
:root[data-palette="branco"] #topo:not(.solido) nav a{color:#101014}
:root[data-palette="verm"] #topo:not(.solido) nav a:hover,
:root[data-palette="branco"] #topo:not(.solido) nav a:hover{color:#000}
:root[data-palette="verm"] #topo:not(.solido) #idi-atual,
:root[data-palette="branco"] #topo:not(.solido) #idi-atual{color:#101014;border-color:rgba(16,16,20,.4)}
/* RODAPÉ está sobre o fundo dominante da paleta → texto escuro em vermelho/creme */
:root[data-palette="verm"] footer,:root[data-palette="branco"] footer{border-top-color:rgba(16,16,20,.14)}
:root[data-palette="verm"] footer,:root[data-palette="verm"] footer a,:root[data-palette="verm"] footer .corpo,
:root[data-palette="branco"] footer,:root[data-palette="branco"] footer a,:root[data-palette="branco"] footer .corpo{color:#101014}
:root[data-palette="verm"] footer .redes a,:root[data-palette="branco"] footer .redes a{color:#101014}
/* as MORADAS vivem em footer p (regra própria footer p{color:var(--cinza)} vencia o herdado) */
:root[data-palette="verm"] footer p,:root[data-palette="branco"] footer p{color:#101014}
:root[data-palette="verm"] footer a:hover,:root[data-palette="branco"] footer a:hover{color:var(--verm-esc)}
/* CONTADORES (.num-giga "26 anos") na secção que virou CLARA (paleta branco, bg-preto2→branco) → escuro */
:root[data-palette="branco"] .bg-preto2 .anos-num .num-giga,
:root[data-palette="branco"] .bg-preto2 .num-giga{color:#101014}
/* CLIENTES (marquee) na secção que virou PRETA (paleta branco, bg-branco→preto) → claro */
:root[data-palette="branco"] #clientes,:root[data-palette="branco"] #clientes .mfaixa,
:root[data-palette="branco"] #clientes .marca-item{color:rgba(255,255,255,.92)}
/* pontos .pt do chrome (nav/rodapé/logo) em fundo vermelho → escuro */
:root[data-palette="verm"] #topo .pt,:root[data-palette="verm"] footer .pt,:root[data-palette="verm"] .logo .pt{color:#101014}

/* ───────── Header por paleta (decisão da sessão de design) ─────────
   PRETO: intacto (logo/nav brancos). VERMELHO: barra preta ao scroll (já é rgba preto)
   + logo/nav brancos no topo sobre o vermelho (lêem bem). BRANCO/CREME: header CLARO,
   logo + nav ESCUROS (o logo é texto → só troca a cor; símbolo vermelho lê no creme). */
:root[data-palette="branco"] #topo.solido{background:rgba(244,242,238,.9);box-shadow:0 1px 0 rgba(16,16,20,.08)}
:root[data-palette="branco"] #topo .logo{color:#101014}
:root[data-palette="branco"] #topo nav a{color:var(--cinza-2)}
:root[data-palette="branco"] #topo nav a:hover,:root[data-palette="branco"] #topo nav a[aria-current]{color:#101014}
:root[data-palette="branco"] #topo #idi-atual{color:var(--cinza-2)}
:root[data-palette="branco"] #topo #burger span{background:#101014}

/* ───────── Seletor flutuante (injetado pelo kit.js) ───────── */
#lk-paleta{position:fixed;left:1.2rem;bottom:1.2rem;z-index:70;display:flex;align-items:center;gap:.6rem;
  background:rgba(11,11,13,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);
  border-radius:9999px;padding:.5rem .7rem;font-family:var(--fm);box-shadow:0 10px 30px rgba(0,0,0,.28)}
:root[data-palette="branco"] #lk-paleta{background:rgba(255,255,255,.86);border-color:rgba(16,16,20,.12)}
/* texto SEMPRE visível — empurra os pontos (nada de max-width/hover, que cortava a frase) */
#lk-paleta .lk-pal-txt{font-size:.72rem;letter-spacing:.01em;font-style:italic;color:var(--cinza);
  white-space:nowrap;flex:0 0 auto;margin-right:.35rem}
:root[data-palette="branco"] #lk-paleta .lk-pal-txt{color:var(--cinza-2)}
#lk-paleta .lk-sw{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;
  outline:none;transition:transform .2s var(--ease),border-color .2s;position:relative}
#lk-paleta .lk-sw:hover{transform:scale(1.12)}
#lk-paleta .lk-sw[aria-checked="true"]{border-color:var(--verm)}
#lk-paleta .lk-sw:focus-visible{box-shadow:0 0 0 3px rgba(251,52,87,.5)}
#lk-paleta .lk-sw[data-p="preto"]{background:#0B0B0D;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
#lk-paleta .lk-sw[data-p="verm"]{background:var(--verm)}
#lk-paleta .lk-sw[data-p="branco"]{background:#F4F2EE;box-shadow:inset 0 0 0 1px rgba(16,16,20,.2)}
/* Chamar a atenção (v2): bolinhas acendem em cascata + HALO no seletor (anel que
   expande e desvanece — sem tocar nas cores do site; o pisca de paleta foi retirado) */
@keyframes lk-acende{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(251,52,87,0)}45%{transform:scale(1.42);box-shadow:0 0 0 5px rgba(251,52,87,.32)}}
#lk-paleta .lk-sw.acende{animation:lk-acende .5s var(--ease)}
/* auréola — cor por fundo (contrasta em preto/vermelho/creme). RGB em var p/ controlar o alfa. */
#lk-paleta{--lk-halo:251,52,87}                                   /* vermelho — sobre fundo preto */
:root[data-palette="verm"] #lk-paleta{--lk-halo:255,255,255}     /* branco — sobre fundo vermelho */
:root[data-palette="branco"] #lk-paleta{--lk-halo:205,20,72}     /* vermelho-escuro — sobre fundo creme */
#lk-paleta::after{content:"";position:absolute;inset:0;border-radius:9999px;pointer-events:none;opacity:0}
#lk-paleta.halo::after{animation:lk-halo 1.05s var(--ease) 3}
@keyframes lk-halo{0%{opacity:.92;box-shadow:0 0 0 0 rgba(var(--lk-halo),.75)}100%{opacity:0;box-shadow:0 0 0 26px rgba(var(--lk-halo),0)}}
/* sacudir (receita do CTA "Como Ajudar" do Lazarus): rajada scale+rotate no fim de cada ciclo de 5s */
@keyframes lk-sacode{0%,82%,100%{transform:scale(1) rotate(0)}85%{transform:scale(1.10) rotate(-4deg)}89%{transform:scale(1.12) rotate(4deg)}93%{transform:scale(1.08) rotate(-3deg)}97%{transform:scale(1.04) rotate(1deg)}}
#lk-paleta{animation:lk-sacode 5s ease-in-out infinite;transform-origin:center;will-change:transform}
#lk-paleta:hover,#lk-paleta:focus-within{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#lk-paleta{animation:none}#lk-paleta.halo::after,#lk-paleta .lk-sw.acende{animation:none}}
@media(max-width:768px){#lk-paleta{left:.8rem;bottom:.8rem;padding:.45rem .55rem}
  #lk-paleta .lk-pal-txt{display:none}}
/* ═════════ PALETAS: correções da auditoria profunda (12 agentes, 07-13) ═════════ */

/* ── Ilustração ORBITAL "tudo à volta da sua marca" (#areas360: núcleo+glow, anéis do ── */
/* ── ÓRBITA 360° "tudo à volta da sua marca" — paleta VERMELHO (#areas360 fica vermelho vivo) ──
   O núcleo escuro mantém-se (âncora); os acentos vermelho-por-marca trocam para BRANCO (regra 2)
   e o traço decorativo sobre o texto passa a ESCURO (regra 1). */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-nucleo{box-shadow:0 0 80px rgba(255,255,255,.30),inset 0 0 40px rgba(0,0,0,.55)}
/* glow verm→branco */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-nucleo::after{border-color:rgba(255,255,255,.70)}
/* anel a pulsar verm→branco */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-nucleo .pt{color:var(--verm)}
/* o override .pt→#101014 da paleta apagava o ponto no disco ESCURO */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-sobre{border-color:rgba(16,16,20,.35)}
/* anel sobre o texto: detalhe escuro em fundo vermelho */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .sat-pill:hover{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22),0 10px 34px rgba(16,16,20,.35)}
/* ── ÓRBITA 360° — paleta BRANCO/CREME (#areas360 fica creme) ── */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-nucleo{box-shadow:0 0 80px rgba(201,42,70,.26),inset 0 0 40px rgba(0,0,0,.55)}
/* glow continua vermelho (regra 2), verm-esc lê no creme */ :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-nucleo::after{border-color:rgba(201,42,70,.60)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-nucleo b{color:#fff}
/* BUG: herdava o #101014 da secção sobre o disco ESCURO (1.1 — invisível) */ :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-nucleo .pt{color:var(--verm)}
/* o override .pt→verm-esc lia 3.19 no disco; vivo lê 4.7-5.3 */ :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .orb-sobre{border-color:rgba(201,42,70,.25)}
/* ── GRELHA DAS SEIS ÁREAS (mesma secção #areas360): os .a-cartao ficam SEMPRE escuros
   (--preto-2) — o conteúdo volta às cores do default, que já leem no cartão escuro. ── */
/* paleta branco: .a-tit herdava o #101014 da secção → invisível no cartão escuro */ :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao .a-tit{color:#fff}
/* paleta verm: a lista da linha 374 pintava .a-frase de #101014 → invisível no cartão escuro */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao .a-frase{color:var(--cinza)}
/* ambas: as linhas 444-447 forçavam o contorno vazado de .a-num a escuro (!important) sobre o cartão escuro → volta ao vermelho da marca (o fundo do cartão nunca muda — regra 2 não obriga a trocar) e o hover (véu vermelho) volta ao branco do default */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao .a-num, :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao .a-num{-webkit-text-stroke-color:var(--verm)!important}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao:hover .a-num, :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao:hover .a-num{-webkit-text-stroke-color:#fff!important}

/* ── Ilustração WIREFRAME da secção "porquê" (#estrategia, home) + legenda "primeiro  ── */
/* WIREFRAME (#estrategia, home — .bg-branco fica PRETO nesta paleta): a ilustração foi
   desenhada para fundo claro (traço escuro .42, f2 quase-preto, f3 azul-escuro) e sumia
   sobre #0B0B0D (1.01 / 1.11 / 1.53). Traço → branco .34 (3.04, ≥3.0 não-texto e paridade
   com o peso visual do default 2.74); f1 vermelho MANTÉM (regra: só troca em fundo
   vermelho; 4.67 com fill-opacity .92); f2 → creme da marca (14.2); f3 (azul fora da
   paleta) → cinza da marca (6.46). */
:root[data-palette="branco"] .bg-branco .wireframe :is(rect,line,circle):not(.fill){stroke:rgba(255,255,255,.34)}
:root[data-palette="branco"] .bg-branco .wireframe .fill.f2{fill:#F4F2EE}
:root[data-palette="branco"] .bg-branco .wireframe .fill.f3{fill:var(--cinza)}
/* legenda do wireframe — #6b6b74 lia 3.73 sobre o preto (<4.5 p/ texto .72rem) → cinza da marca (7.05) */
:root[data-palette="branco"] .bg-branco .wire-cap{color:var(--cinza)}
/* pontos finais com cor INLINE #101014 (títulos/frases em .bg-branco) — sobre o preto desta
   paleta sumiam (1.04); o título fica branco (regra da linha 424), o ponto acompanha.
   !important porque estilo inline vence a folha. Mesmo padrão do [style*="--verm"] da paleta verm. */
:root[data-palette="branco"] .bg-branco [style*="#101014"]{color:#fff!important}

/* ── Grelha "Seis áreas, uma casa" (6 cartões .a-cartao na secção #areas360 da home)  ── */
/* ══ GRELHA "SEIS ÁREAS, UMA CASA" (home #areas360) — cartões .a-cartao ══
   Os cartões têm fundo PRÓPRIO escuro (--preto-2 #121216) que NÃO muda com a paleta
   (tom-locked): o texto lá dentro segue o tom do CARTÃO, nunca o da secção. */
/* (a) texto claro dentro dos cartões (na paleta branco o .a-tit herdava #101014 da secção) */ :root[data-palette="verm"] .a-cartao, :root[data-palette="branco"] .a-cartao{color:#fff}
/* ANTES (linha 374):
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.orb-dica,.ouvir-leg,.mundo-leg,.eq-fn,.eq-nome,.wire-cap,.legenda,.a-frase,.passo p,.tmeta span,.drucker cite,.svc-lista li i,.eq-fn){color:#101014}
   DEPOIS (sem .a-frase — ela nunca assenta no fundo vermelho da secção, vive nos cartões escuros): */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.orb-dica,.ouvir-leg,.mundo-leg,.eq-fn,.eq-nome,.wire-cap,.legenda,.passo p,.tmeta span,.drucker cite,.svc-lista li i,.eq-fn){color:#101014}
/* (c) paleta VERMELHO: hover/ativo era vermelho-sobre-vermelho (véu var(--verm) #FB3457
   sobre secção #FB3457 = indistinguível) → cartão ativo BRANCO com texto escuro */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao{transition:color .35s var(--ease)}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao::before{background:#fff}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao:hover{color:#101014}
/* .a-tit herda */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao:hover .a-frase{color:#50505a}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-seta{color:#101014}
/* (d) números vazados .a-num DENTRO dos cartões: as regras !important lá em cima (443-448)
   assumiam o fundo da SECÇÃO — no cartão escuro o contorno escuro desaparecia (1.0:1).
   Fundo do cartão nunca é vermelho em repouso → contorno vermelho de marca (regra 2). */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao .a-num, :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao .a-num{-webkit-text-stroke-color:var(--verm)!important}
/* hover na paleta BRANCO: véu VERMELHO (como no default) → contorno branco */ :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao:hover .a-num{-webkit-text-stroke-color:#fff!important}
/* (e) paleta BRANCO, hover (véu vermelho): frase pequena branca .9 lia 3.2 → escuro (regra 3) */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao:hover .a-frase{color:#101014}
/* (f) opcional: .vm sobre creme segue a decisão do eyebrow (verm-esc lê melhor no claro) */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .vm{color:var(--verm-esc)}

/* ── CONTADORES gigantes — "+26" (#anos .num-giga) e faixa de 4 mini-contadores (.fac ── */
/* MINI-CONTADORES da faixa de factos (.factos b "6/2/17/1") na mesma secção que virou CLARA
   (paleta branco, bg-preto2→#fff): o <style> da home fixa .factos b{color:#fff} → branco sobre
   branco = invisível (só o tracinho vermelho ::after aparecia no print). → escuro #101014.
   Legendas: var(--cinza) #9A9AA4 lia 2.8 sobre #fff → cinza escuro #50505a (8.0 AA). */
:root[data-palette="branco"] .bg-preto2 .factos b{color:#101014}
:root[data-palette="branco"] .bg-preto2 .factos>div>span{color:#50505a}

/* ── Marquee de CLIENTES (#clientes) — legibilidade nas 3 paletas do Desafio de Cores ── */
/* CLIENTES (marquee) na secção que virou PRETA (paleta branco, bg-branco→preto).
   Estrutura REAL: .marquee > .mfaixa > .mgrupo > span — não existe ".marca-item"; e os nomes
   têm cor PRÓPRIA no <style> da home (.mgrupo span{color:#101014}), por isso herança não basta. */
:root[data-palette="branco"] #clientes .mgrupo span{color:rgba(255,255,255,.92)}
/* nomes claros: 16.5:1 sobre #0B0B0D */ :root[data-palette="branco"] #clientes .mgrupo span:hover{color:var(--verm)}
/* repõe o hover (o selector com ID vencia o .mgrupo span:hover base): 5.4:1, texto grande */ :root[data-palette="branco"] #clientes .m-nota{color:var(--cinza)}
/* nota "— e muitos mais…" (tinha cor própria --cinza-2): 2.9→7.0:1 */
/* Ponto final do título de #clientes é INLINE (home: <em style="color:#101014">) — em fundo preto
   sumia (1.04:1); inline só perde para !important. Branco = convenção .pt-b em fundo escuro. */
:root[data-palette="branco"] #clientes .vm em[style]{color:#fff!important}

/* ── Ilustração RADAR/MUNDO (globo de pontos, secção #mundo) — cores do canvas por pa ── */
/* legenda do globo (#mundo): o <b> vermelho-por-marca segue a matriz — texto PEQUENO
   sobre vermelho → escuro (regra 3); sobre creme → verm-esc (4.8 ≥ 4.5) */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .mundo-leg b{color:#101014}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .mundo-leg b{color:var(--verm-esc)}

/* ── TEMA A+B — Tracinhos do slider do hero (.hdot) por paleta + peso dos títulos do  ── */
/* HERO (home): tracinho ATIVO do slider de frases — era var(--verm) e sumia no fundo
   vermelho da paleta VERMELHO. Escuro #101014 sobre #FB3457 lê 5.2:1 (regra 3 da sessão
   de design: elemento vermelho-por-marca troca para escuro quando o fundo é vermelho).
   Os INATIVOS já seguem o tom via --linha-2 (branco .40 no vermelho) — não mexer. */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .hdot.ativo{background:#101014}
/* HERO: indicador "Continue. Fica melhor." — cinza #9A9AA4 lia 1.3:1 sobre o vermelho
   e 2.5:1 sobre o creme → escuro por tom (mesma convenção das outras legendas). */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .deixa{color:#101014}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .deixa{color:#50505a}
/* pulso do fio do indicador — var(--verm) sumia no fundo vermelho → branco */
/* rabisco (palavra corrigida) em fundo creme: #FB3457 lia 3.3 → verm-esc lê 4.8 */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .rabisco{color:var(--verm-esc)}
/* PESO dos títulos do HERO nas paletas alternativas (pedido 07-13): o CSS declara 800,
   mas a Stolzl só tem 300/400/500/700 carregadas → o browser já renderiza 700 (Bold).
   Um degrau abaixo disponível = 500 (Medium); a família não tem SemiBold entre os dois.
   Só o hero, só nas paletas verm/branco — o default preto fica intacto (Bold). */
:root[data-palette="verm"] :is(.hslide h1,.hslide .hh,.hero-pg .h-giga,.hero-pg .h-grande), :root[data-palette="branco"] :is(.hslide h1,.hslide .hh,.hero-pg .h-giga,.hero-pg .h-grande){font-weight:500; letter-spacing:-.02em; /* opcional: o -.035em foi afinado para o Bold; no Medium respira melhor */}

/* ── RODAPÉ e textos fixos (paletas do Desafio de Cores) ── */
/* rótulos das cidades (Braga/Porto) — a cor vem daqui, não de style inline (fix 07-13) */
footer strong{color:#fff}
/* default (paleta preto): branco sobre preto, como estava */ /* …e no bloco DESAFIO DE CORES (junto aos overrides de rodapé, linha ~477): */ /* rótulos das cidades sobre o fundo dominante da paleta → escuro */ :root[data-palette="verm"] footer strong, :root[data-palette="branco"] footer strong{color:#101014}
/* logótipo do RODAPÉ na paleta creme → escuro (o .logo{color:var(--branco)} vencia o herdado) */
:root[data-palette="branco"] footer .logo{color:#101014}
/* pontos do rodapé sobre creme: #FB3457 lê só 3.3 → verm-esc lê 4.8 (mesma decisão do eyebrow) */
:root[data-palette="branco"] footer .pt{color:var(--verm-esc)}
/* tooltip do Rafael segue a paleta (regra 3: texto pequeno sobre vermelho vivo → escuro) */
:root[data-palette="verm"] .rafael:hover::after, :root[data-palette="verm"] .rafael.mostra::after{background:#101014;color:#fff}
/* caixa escura sobre fundo vermelho */ :root[data-palette="branco"] .rafael:hover::after, :root[data-palette="branco"] .rafael.mostra::after{color:#101014}
/* caixa fica vermelha; texto pequeno → escuro */
/* borda da foto do Rafael segue o detalhe do tom (regra 1) */
:root[data-palette="verm"] .rafael-img{border-color:rgba(16,16,20,.55)}
:root[data-palette="branco"] .rafael-img{border-color:rgba(16,16,20,.25)}
/* hover dos links do rodapé por paleta (o hover base perdia em especificidade e ficava inerte) */
:root[data-palette="verm"] footer a:hover, :root[data-palette="verm"] footer .redes a:hover{color:#101014;text-decoration:underline}
/* feedback não-cromático; branco pequeno daria só 3.66 */ :root[data-palette="branco"] footer a:hover, :root[data-palette="branco"] footer .redes a:hover{color:var(--verm-esc)}
/* orelha da assinatura sobre o rodapé vermelho → escuro (regra 2; o texto/logo brancos já servem) */
:root[data-palette="verm"] #lkcom-selo{background:#101014}

/* ── TEMA A — bug do header #topo "escondido em janelas grandes" + TEMA B — variante  ── */
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--preto);color:var(--branco);font-family:var(--f); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
/* overflow-x:CLIP (não hidden): hidden forçava overflow-y:auto no body → o body virava
   um 2.º contentor de scroll (além da janela) e o header fixo pintava em posições erradas
   de forma intermitente ("a barra às vezes esconde-se em janelas grandes"). clip recorta
   na horizontal SEM criar scroller → um único scroll, header estável. */
/* ── Símbolo do logótipo por paleta (regra 2: o vermelho-de-marca só troca em fundo VERMELHO) ──
   Na paleta verm o tile #E84855 fundia-se com o hero #FB3457 (rácio 1.04). Tile BRANCO +
   desenho VERMELHO no header transparente e no rodapé (ambos sobre o dominante vermelho);
   com .solido (barra escura) volta o tile vermelho da marca. */
/* ── Chrome do header na paleta VERMELHO, estado transparente (topo da página) ── */
/* CTA: pílula var(--verm) fundia-se com o hero (1.00) → pílula branca, texto verm-esc (5.38 AA) */ :root[data-palette="verm"] #topo:not(.solido) .cta-mini{background:#fff;color:var(--verm-esc)}
:root[data-palette="verm"] #topo:not(.solido) .cta-mini:hover{background:#101014;color:#fff}
/* ponto de hover do nav: var(--verm) sobre vermelho (1.00) → escuro (5.18) */ :root[data-palette="verm"] #topo:not(.solido) nav a:hover::after{color:#101014}
/* burger (janelas ≤1080px): traço escuro em fundo vermelho (regra 1) — 3.66 → 5.18 */ :root[data-palette="verm"] #topo:not(.solido) #burger span{background:#101014}
/* na barra sólida (escura) a regra geral do topo-em-vermelho punha o ponto do logo a #101014 → invisível no escuro (1.14). Repõe o vermelho da marca (4.55 sobre ≈#36121A). */ :root[data-palette="verm"] #topo.solido .pt{color:var(--verm)}

/* ── CADÊNCIA de fundos — secções adjacentes com a mesma cor efetiva nas paletas do " ── */
/* ══ CADÊNCIA (paleta VERM): o nível dominante ficou vermelho e colava com o vermelho FIXO
   do #ia da home (#ia{background:var(--verm)} tem ID e vence os overrides .bg-verm — regra 4).
   SÓ nesta paleta, #ia passa a ESCURO (#121216, o mesmo tom dos .bg-verm desta paleta).
   Especificidade (1,2,0)+ vence os #ia{...} do <style> da home (1,0,x) sem !important. ══ */
:root[data-palette="verm"] #ia{background:var(--preto-2);color:#fff}
:root[data-palette="verm"] #ia .eyebrow{color:var(--verm)}
:root[data-palette="verm"] #ia .eyebrow::after{background:var(--verm)}
:root[data-palette="verm"] #ia .ia-mono{color:var(--cinza)}
/* frase «máquina» → secundário claro */ :root[data-palette="verm"] #ia .ia-quente{color:#fff}
/* título herói continua branco */ :root[data-palette="verm"] #ia .ia-risco path{stroke:var(--verm)}
/* o traço volta ao vermelho-marca (regra 2) */ :root[data-palette="verm"] #ia .corpo{color:var(--cinza)}
:root[data-palette="verm"] #ia .corpo strong{color:#fff}
:root[data-palette="verm"] #ia :is(.carimbo,.carimbo-tinta){border-color:var(--verm);color:var(--verm)}
/* .pt do título → vermelho e .fantasma → branco .05 já vêm das regras .bg-verm desta paleta */
/* ══ EFETIVO ≠ TEÓRICO: #ouvir (home) tem foto full-bleed + véu rgba(11,11,13,.82) →
   o fundo REAL é escuro em todas as paletas; as regras do nível dominante pintavam o
   conteúdo para vermelho/creme. Fixa-se o tom escuro por ID (também conserta o rail,
   que lê o backgroundColor computado da secção). ══ */
:root[data-palette="verm"] #ouvir, :root[data-palette="branco"] #ouvir{background:var(--preto)}
/* paleta VERM: a legenda tinha levado #101014 (1.06 sobre a foto) → cinza do default */ :root[data-palette="verm"] #ouvir .ouvir-leg{color:var(--cinza)}
/* regra 2: fundo NÃO é vermelho → a citação .vm volta ao vermelho-marca; !important necessário para bater o `.vm{color:#fff!important}
` genérico da paleta (kit.css 385) */ :root[data-palette="verm"] #ouvir .vm{color:var(--verm)!important}
/* paleta BRANCO: aspas/título herdavam #101014 (1.06) e a legenda #50505a (2.25) → tom escuro */ :root[data-palette="branco"] #ouvir{color:#fff; --linha:rgba(255,255,255,.10);--linha-2:rgba(255,255,255,.20);--traco:rgba(255,255,255,.30)}
:root[data-palette="branco"] #ouvir .ouvir-leg{color:var(--cinza)}
:root[data-palette="branco"] #ouvir .pt-b{color:#fff}
/* ponto final volta ao branco do default */
/* paleta VERM: .bg-verm ficou ESCURO mas as palavras .pr (#101014, desenhadas para fundo
   vermelho — home #desafio «já sabe o caminho») sumiam → branco */
/* ══ CADÊNCIA (paleta VERM, o-que-fazemos): …websites(creme) → performance(#0B0B0D) →
   proximo-passo(#121216) → footer(vermelho): dois escuros quase iguais (1.05) colados no
   fecho. #proximo-passo passa a CREME — devolve o «pop» ao CTA final. ══ */
:root[data-palette="verm"] #proximo-passo{background:#F4F2EE;color:#101014; --linha:rgba(16,16,20,.12);--linha-2:rgba(16,16,20,.20);--traco:rgba(16,16,20,.28)}
:root[data-palette="verm"] #proximo-passo .eyebrow{color:var(--verm-esc)}
:root[data-palette="verm"] #proximo-passo .eyebrow::after{background:var(--verm-esc)}
:root[data-palette="verm"] #proximo-passo .corpo{color:#50505a}
:root[data-palette="verm"] #proximo-passo .corpo strong{color:#101014}
:root[data-palette="verm"] #proximo-passo .pt{color:var(--verm-esc)}
:root[data-palette="verm"] #proximo-passo .fantasma{-webkit-text-stroke-color:rgba(16,16,20,.06)}
/* span inline color:var(--preto) do título: 15.7 sobre creme — fica; .btn mantém vermelho/branco */
/* paleta BRANCO: .bg-branco ficou PRETO mas os pontos finais inline #101014 dos títulos
   (home #estrategia ×2, #clientes) sumiam → branco */

/* ── EQUIPA — faixa com filas de scroll independentes + cores nas 3 paletas ── */
/* dica «← arrasta →» da equipa: cinza lia 2.8 sobre o branco → segue o tom (mesma família do .eq-fn) */
:root[data-palette="branco"] .bg-preto2 .eq-dica, :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .eq-dica{color:#50505a}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .eq-dica, :root[data-palette="branco"] .bg-verm .eq-dica{color:#101014}
/* scrollbar da faixa da equipa na secção que virou CLARA (paleta branco): track escuro-suave */
:root[data-palette="branco"] .bg-preto2 .eq-scroll{scrollbar-color:var(--verm) rgba(16,16,20,.08)}
:root[data-palette="branco"] .bg-preto2 .eq-scroll::-webkit-scrollbar-track{background:rgba(16,16,20,.08)}
/* tooltip «biscoitos» (fundo vermelho fixo): texto pequeno escuro nas paletas do desafio (regra 3) */
:root[data-palette="verm"] .tt-biscoito::before, :root[data-palette="branco"] .tt-biscoito::before{color:#101014}
/* quem-somos: funções da equipa (.tcard small) na secção .bg-branco que virou PRETA (paleta branco) */
:root[data-palette="branco"] .bg-branco .tcard small{color:var(--cinza)}

/* ── VARREDURA — tudo o que os outros temas não cobrem (#ouvir, #ia polaroids/pontos, ── */
/* ── VARREDURA: ARTIGOS (noticia/portefólio-trabalho) — prosa hardcoded clara na secção dominante ── */
/* paleta VERMELHO: dominante = vermelho vivo → corrente ESCURO, títulos ficam brancos */ :root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.art-lead,.art-prose,.art-meta,.art-share-label){color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-prose :is(a,strong,blockquote){color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-prose blockquote{border-left-color:#101014}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-meta .art-cat{color:#101014;font-weight:700}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-share{border-top-color:rgba(16,16,20,.3)}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.art-share a,.art-share button){color:#101014;border-color:rgba(16,16,20,.6)}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.art-share a,.art-share button):hover{background:#101014;border-color:#101014;color:#fff}
/* paleta BRANCO/CREME: espelho escuro dos claros por defeito */ :root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-lead{color:rgba(16,16,20,.92)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-prose{color:rgba(16,16,20,.82)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-prose :is(h2,h3,h4,strong,blockquote){color:#101014}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-prose a{color:var(--verm-esc)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.art-meta,.art-share-label){color:#50505a}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-meta .art-cat{color:var(--verm-esc)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .art-share{border-top-color:rgba(16,16,20,.14)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) :is(.art-share a,.art-share button){color:#101014;border-color:rgba(16,16,20,.28)}
/* ── VARREDURA: formulário de Contactos (.bg-branco vira PRETO na paleta branco) ── */
:root[data-palette="branco"] .bg-branco .caixa input, :root[data-palette="branco"] .bg-branco .caixa textarea{color:#fff;border-bottom-color:rgba(255,255,255,.22)}
:root[data-palette="branco"] .bg-branco .caixa input::placeholder, :root[data-palette="branco"] .bg-branco .caixa textarea::placeholder{color:#8a8a92}
:root[data-palette="branco"] .bg-branco .campo label{color:#fff}
:root[data-palette="branco"] .bg-branco .campo .dica, :root[data-palette="branco"] .bg-branco .campo label .opc{color:var(--cinza)}
:root[data-palette="branco"] .bg-branco .ct-nota{color:var(--cinza)}
:root[data-palette="branco"] .bg-branco .consent{color:var(--cinza)}
:root[data-palette="branco"] .bg-branco .consent a{color:#fff}
:root[data-palette="branco"] .bg-branco .consent a:hover{color:var(--verm)}
/* ── VARREDURA: #OUVIR é foto escura em todas as paletas → texto SEMPRE claro ── */
:root[data-palette="verm"] #ouvir,:root[data-palette="branco"] #ouvir{color:#fff}
:root[data-palette="verm"] #ouvir .ouvir-leg,:root[data-palette="branco"] #ouvir .ouvir-leg{color:var(--cinza)}
:root[data-palette="verm"] #ouvir .ouvir-leg b,:root[data-palette="branco"] #ouvir .ouvir-leg b{color:#fff}
:root[data-palette="verm"] #ouvir .vm{color:var(--verm)!important}
/* anula o #fff!important da linha 385 — o fundo NÃO é vermelho */ :root[data-palette="branco"] #ouvir .pt-b{color:#fff}
/* o ponto verm-esc (linha 410) volta a branco sobre a foto */
/* ── VARREDURA: #IA continua VERMELHO em todas as paletas (ID vence) → reverter as regras invertidas de .bg-verm ── */
:root[data-palette="verm"] #ia .pt{color:#101014}
/* kit linha 51 de volta */ :root[data-palette="verm"] #ia .fantasma{-webkit-text-stroke-color:rgba(255,255,255,.14)}
/* valor de .bg-verm da linha 78 */
/* ── VARREDURA: .pr em .bg-verm invertido (paleta vermelho → fundo #121216) ── */
:root[data-palette="verm"] .bg-verm .pr{color:var(--verm)}
/* ── VARREDURA: pontos inline escuros quando .bg-branco vira PRETO (paleta branco) ── */
:root[data-palette="branco"] .bg-branco em[style*="#101014"]{color:#fff!important}
/* ── VARREDURA: .voltar (pill de regresso) segue o tom da paleta ── */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .voltar{color:#101014;border-color:rgba(16,16,20,.6)}
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .voltar:hover{color:#000;border-color:#101014}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .voltar{color:#50505a;border-color:rgba(16,16,20,.3)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .voltar:hover{color:var(--verm-esc);border-color:var(--verm-esc)}
/* .bg-branco vira PRETO na paleta branco → reverte o esquema claro das páginas (apanha também o .voltar-claro da notícia) */ :root[data-palette="branco"] .bg-branco .voltar{color:var(--cinza);border-color:rgba(255,255,255,.22)}
:root[data-palette="branco"] .bg-branco .voltar:hover{color:var(--verm);border-color:var(--verm)}
/* ── VARREDURA: filtros do portefólio quando .bg-branco vira PRETO (paleta branco) ── */
:root[data-palette="branco"] .bg-branco .filtros button:not([aria-pressed="true"]){color:#fff;border-color:rgba(255,255,255,.25)}
:root[data-palette="branco"] .bg-branco .filtros button:not([aria-pressed="true"]):hover{color:var(--verm);border-color:var(--verm)}
/* ── VARREDURA: cartões .morada continuam escuros quando .bg-preto2 vira BRANCO (paleta branco) ── */
:root[data-palette="branco"] .bg-preto2 .morada{color:#fff}
:root[data-palette="branco"] .bg-preto2 .morada .pt{color:var(--verm)}
:root[data-palette="branco"] .bg-preto2 .horario{color:#50505a}
/* ── VARREDURA: .deixa (indicador de continuação do hero) ── */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .deixa .fio::after{background:#101014}
/* ── VARREDURA: .risco/.rabisco em fundos CLAROS da paleta branco → verm-esc (como o eyebrow) ── */
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .risco::after{background:var(--verm-esc)}
:root[data-palette="branco"] .bg-preto2 .risco::after{background:var(--verm-esc)}
:root[data-palette="branco"] .bg-preto2 .rabisco{color:var(--verm-esc)}
/* ── VARREDURA: separadores de listas (crenças/processo/serviços) seguem o tom (paleta branco) ── */
:root[data-palette="branco"] .bg-branco :is(.crencas li,.svc-lista li){border-bottom-color:rgba(255,255,255,.12)}
:root[data-palette="branco"] .bg-preto2 :is(.passo,.svc-lista li){border-bottom-color:rgba(16,16,20,.14)}
/* ── VARREDURA: molduras/legendas soltas ── */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .video-moldura{border-color:rgba(16,16,20,.55)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .video-moldura{border-color:rgba(16,16,20,.2)}
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .drucker cite{color:var(--verm-esc)}
:root[data-palette="branco"] #clientes .m-nota{color:var(--cinza)}
:root[data-palette="branco"] .bg-preto2 .eq-dica{color:#50505a}

/* ── RECONCILIAÇÃO pós-auditoria visual (probe de pontos, 07-13) ──
   Pontos finais .pt dentro de contextos ESCUROS que os overrides do dominante
   pintavam de escuro (invisível): cartões da grelha, #ia (que na paleta verm é
   ESCURO por cadência — o fix antigo assumia-o vermelho) e a caixa escura do #ouvir. */
:root[data-palette="verm"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao :is(.pt,.pt-b),
:root[data-palette="branco"] .sec:not(.bg-preto2):not(.bg-branco):not(.bg-verm) .a-cartao :is(.pt,.pt-b){color:var(--verm)}
:root[data-palette="verm"] #ia .pt{color:var(--verm)}
/* a legenda do #ouvir vive numa CAIXA escura (não no vermelho do dominante) */
:root[data-palette="verm"] #ouvir .ouvir-leg{color:var(--cinza)}
:root[data-palette="verm"] #ouvir .ouvir-leg b{color:#fff}
:root[data-palette="verm"] #ouvir .ouvir-leg .pt{color:var(--verm)}

/* ── Aviso de cookies (RGPD) — cartão auto-contido, legível em qualquer paleta ── */
#lk-cookies{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:95;
  width:min(680px,calc(100vw - 24px));display:flex;align-items:center;gap:1rem 1.4rem;flex-wrap:wrap;
  justify-content:space-between;padding:1rem 1.25rem;border-radius:16px;
  background:rgba(11,11,13,.94);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.5);backdrop-filter:blur(10px);
  opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease)}
#lk-cookies.mostra{transform:translate(-50%,0);opacity:1}
#lk-cookies .lk-ck-txt{margin:0;color:rgba(255,255,255,.9);font-size:.86rem;line-height:1.5;flex:1 1 300px}
#lk-cookies .lk-ck-txt a{color:var(--verm);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
#lk-cookies .lk-ck-btns{display:flex;gap:.6rem;flex:0 0 auto}
#lk-cookies button{font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;border-radius:99px;
  padding:.6rem 1.2rem;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;min-height:40px}
#lk-cookies .lk-ck-no{background:transparent;color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.25)}
#lk-cookies .lk-ck-no:hover{color:#fff;border-color:#fff}
#lk-cookies .lk-ck-yes{background:var(--verm);color:#fff}
#lk-cookies .lk-ck-yes:hover{background:#fff;color:var(--preto)}
@media(max-width:520px){#lk-cookies{bottom:0;left:0;transform:translateY(140%);width:100%;border-radius:16px 16px 0 0}
  #lk-cookies.mostra{transform:translateY(0)}#lk-cookies .lk-ck-btns{width:100%}#lk-cookies button{flex:1}}
@media(prefers-reduced-motion:reduce){#lk-cookies{transition:opacity .3s}}

/* Acessibilidade: respeitar prefers-reduced-motion no scroll suave global (o smooth em
   html fazia "viajar" a página em âncoras mesmo para quem pediu menos movimento). */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}