/* ==========================================================================
   CotaFácil · Painel da marca v2
   Porte do painel da Black Rock com os MESMOS nomes de classe.
   Cores: só as de assets/tokens.css (--cf-*). Única cor extra é a faixa cinza
   #ccd4d9, lida do manual (extraido-diretrizes.md, itens 16 e "Faixa cinza").
   Regra de contraste da marca: sobre quente, texto AZUL; sobre azul, texto BRANCO.
   O verde fica só em borda, ponto e ícone (3.5:1 não serve para texto).
   ========================================================================== */
:root{
  --cf-faixa:#ccd4d9;
  --cf-linha:var(--cf-azul-600);
  --cf-linha-forte:var(--cf-azul-500);
  --cf-texto:var(--cf-azul-100);
  --cf-mudo:var(--cf-n400);
  --raio:.6rem; --lado:264px;
  --f-display:var(--cf-ff-titulo); --f-corpo:var(--cf-ff-texto);

  /* Compatibilidade: fragmentos e helpers herdados da Black Rock usam --br-* em
     estilo inline. Cada um aponta para um token oficial, nenhuma cor nova. */
  --br-preto:var(--cf-azul-900); --br-grafite:var(--cf-azul-800); --br-carvao:var(--cf-azul-600);
  --br-linha:var(--cf-azul-600); --br-creme:var(--cf-branco); --br-creme-2:var(--cf-azul-100); --br-creme2:var(--cf-azul-100);
  --br-ouro:var(--cf-laranja); --br-ouro-claro:var(--cf-amarelo); --br-ouroClaro:var(--cf-amarelo);
  --br-texto:var(--cf-azul-100); --br-mudo:var(--cf-n400); --br-ok:var(--cf-azul-100); --br-sucesso:var(--cf-azul-100);
  --br-alerta:var(--cf-amarelo); --br-erro:var(--cf-amarelo); --br-info:var(--cf-azul-100);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--cf-azul-900);color:var(--cf-texto);font-family:var(--f-corpo);font-size:16.5px;line-height:1.6;display:flex;min-height:100vh;-webkit-font-smoothing:antialiased}
/* textura de curvas (grafismo institucional) como máscara: o SVG usa currentColor,
   que não funciona em background-image, então ele vira máscara de uma cor sutil */
body::before{content:"";position:fixed;inset:0;background:var(--cf-azul-500);opacity:.22;-webkit-mask:url(grafismo-curvas.svg) center/cover no-repeat;mask:url(grafismo-curvas.svg) center/cover no-repeat;pointer-events:none;z-index:0}
a{color:var(--cf-amarelo)}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--cf-amarelo);outline-offset:2px}
aside{width:var(--lado);background:var(--cf-azul-800);border-right:1px solid var(--cf-linha);padding:26px 16px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;gap:6px;z-index:5;overflow-y:auto}
aside .marca{display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--cf-linha);margin-bottom:12px}
aside .marca img{width:150px;height:auto}
aside .marca small{color:var(--cf-mudo);letter-spacing:.2em;text-transform:uppercase;font-size:11px;font-weight:600}
nav{display:flex;flex-direction:column;gap:2px;flex:1}
nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--raio);color:var(--cf-texto);text-decoration:none;font-weight:500;font-size:15px;border:1px solid transparent;border-left-width:3px;transition:.2s}
nav a:hover{background:var(--cf-azul-600);color:var(--cf-branco)}
nav a.on{background:var(--cf-azul-900);border-color:var(--cf-linha);border-left-color:var(--cf-laranja);color:var(--cf-branco);font-weight:600}
nav a i{font-style:normal;width:22px;text-align:center;color:var(--cf-laranja)}
nav .esp{flex:1;min-height:12px}
aside .rodape{margin-top:14px;font-size:12px;color:var(--cf-mudo);text-align:center;line-height:1.5}
aside .rodape b{color:var(--cf-texto);font-weight:600}
main{--padx:clamp(20px,5vw,72px);margin-left:var(--lado);flex:1;min-width:0;padding:44px var(--padx) 64px;max-width:1240px;position:relative;z-index:1}
section.pg{display:none}section.pg.on{display:block}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,5vw,52px);color:var(--cf-branco);line-height:1.08;letter-spacing:-.01em;margin-bottom:8px}
.sub{color:var(--cf-mudo);margin-bottom:40px}
/* faixa cinza do manual, logo abaixo do cabeçalho do conteúdo */
section.pg>.sub::after{content:"";display:block;height:6px;margin-top:20px;background:var(--cf-faixa);border-radius:3px}
h2{font-family:var(--f-display);font-weight:700;font-size:28px;color:var(--cf-branco);line-height:1.2;margin:56px 0 6px}
h2 + p.leg{color:var(--cf-mudo);margin-bottom:20px}
.leg{color:var(--cf-mudo)}
.ornamento{height:1px;margin:6px 0 24px;background:linear-gradient(90deg,var(--cf-laranja),transparent)}
.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.card{background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);padding:20px}
.logo-box{display:flex;align-items:center;justify-content:center;border-radius:var(--cf-r-md);border:1px solid var(--cf-linha);padding:28px;min-height:230px}
.logo-box img{max-width:100%;max-height:200px}
.cor{border-radius:var(--cf-r-md);overflow:hidden;border:1px solid var(--cf-linha);background:var(--cf-azul-800)}
.cor .amostra{height:96px}
.cor .info{padding:12px 14px}
.cor b{display:block;color:var(--cf-branco);font-weight:600}
.cor code{color:var(--cf-amarelo);font-size:14px}
.cor span{display:block;color:var(--cf-mudo);font-size:13px;margin-top:2px}
.tipo-exemplo{font-size:15px;color:var(--cf-mudo);margin-bottom:6px}
.d1{font-family:var(--f-display);font-weight:700;font-size:64px;line-height:1.05;color:var(--cf-branco)}
.d2{font-family:var(--f-display);font-weight:600;font-size:40px;line-height:1.1;color:var(--cf-branco)}
.corpo-ex{font-size:19px}
.chip{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-laranja);border:1px solid var(--cf-laranja);border-radius:var(--cf-r-full);padding:3px 10px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:600;letter-spacing:.02em;font-size:15px;padding:12px 24px;border-radius:var(--cf-r-full);border:1px solid var(--cf-laranja);cursor:pointer;transition:.2s;text-decoration:none}
.btn.p{background:var(--cf-laranja);color:var(--cf-azul);border-color:var(--cf-laranja)}.btn.p:hover{background:var(--cf-laranja-claro);border-color:var(--cf-laranja-claro)}
.btn.s{background:transparent;color:var(--cf-branco)}.btn.s:hover{background:var(--cf-azul-600)}
.btn.o{background:var(--cf-amarelo);color:var(--cf-azul);border-color:var(--cf-amarelo)}
.linha{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.preco{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px dashed var(--cf-linha)}
.preco b{color:var(--cf-branco);font-weight:500}.preco em{font-style:normal;color:var(--cf-mudo);font-size:13px;display:block}
.preco .v{font-family:var(--f-display);font-weight:700;font-size:24px;color:var(--cf-amarelo);white-space:nowrap}
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.fotos figure{background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-sm);overflow:hidden}
.fotos img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.fotos figcaption{font-size:12px;color:var(--cf-mudo);padding:7px 10px;word-break:break-all}
.fotos.horiz img{aspect-ratio:16/10;object-fit:contain;background:var(--cf-azul-900)}
.info-lin{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;padding:14px 0;border-bottom:1px solid var(--cf-linha)}
.info-lin dt{color:var(--cf-mudo);letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding-top:3px}
.info-lin dd{margin:0;color:var(--cf-branco)}
.pend{background:var(--cf-azul-800);border:1px solid var(--cf-amarelo);border-radius:var(--cf-r-md);padding:16px 20px}
.pend li{margin:6px 0 6px 18px;color:var(--cf-texto)}
.stat{text-align:center}.stat b{display:block;font-family:var(--f-display);font-size:38px;color:var(--cf-branco);font-weight:700}.stat span{color:var(--cf-mudo);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.pasta{display:flex;gap:10px;align-items:center;margin:8px 0;color:var(--cf-branco)}
.pasta small{color:var(--cf-mudo)}
.tag-ok{color:var(--cf-texto)}.tag-ok::before{content:"● ";color:var(--cf-verde)}.tag-av{color:var(--cf-amarelo)}
.menu-mob{display:none}

/* ===== design system: estrutura ===== */
.ds-wrap{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:40px;align-items:start}
.toc{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;font-size:14px;padding-right:6px}
.toc input,.busca{width:100%;background:var(--cf-azul-800);border:1px solid var(--cf-linha-forte);border-radius:var(--raio);padding:9px 12px;color:var(--cf-branco);font:inherit;margin-bottom:12px}
.toc input::placeholder{color:var(--cf-mudo)}
.toc input:focus{outline:2px solid var(--cf-laranja);outline-offset:1px}
.toc h4{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cf-laranja);margin:16px 0 4px}
.toc a{display:block;padding:4px 8px;border-left:2px solid var(--cf-linha);color:var(--cf-mudo);text-decoration:none}
.toc a:hover,.toc a.on{color:var(--cf-branco);border-left-color:var(--cf-laranja)}
.toc a.off{display:none}
.bloco-t{font-family:var(--f-display);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cf-laranja);margin:72px 0 -36px;display:flex;align-items:center;gap:14px}
.bloco-t::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--cf-laranja),transparent)}
.bloco-t:first-child{margin-top:0}
h2 .n{font-family:var(--f-corpo);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--cf-azul);background:var(--cf-laranja);border-radius:var(--cf-r-full);padding:3px 10px;margin-right:12px;vertical-align:middle}
h3{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-texto);margin:26px 0 10px}
.g5{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.g6{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.rotulo{font-size:12.5px;color:var(--cf-mudo);letter-spacing:.03em;margin-top:8px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--cf-amarelo)}
pre.cod{background:var(--cf-azul-900);border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);padding:16px;overflow:auto;font-size:13px;line-height:1.5;color:var(--cf-texto);font-family:ui-monospace,Menlo,monospace;max-height:340px}
.certo,.errado{border-radius:var(--cf-r-md);padding:16px;padding-top:34px;border:1px solid var(--cf-linha);position:relative}
.certo::before,.errado::before{position:absolute;top:10px;right:12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:var(--cf-r-full)}
.certo{border-color:var(--cf-verde)}.certo::before{content:"✓ Certo";background:var(--cf-ok-bg);color:var(--cf-azul)}
.errado{border-color:var(--cf-err)}.errado::before{content:"✕ Evite";background:var(--cf-err-bg);color:var(--cf-err)}
.tabela{width:100%;border-collapse:collapse;font-size:15px}
.tabela th{font-weight:600;text-align:left;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cf-laranja);padding:10px 12px;border-bottom:1px solid var(--cf-laranja)}
.tabela td{padding:11px 12px;border-bottom:1px solid var(--cf-linha);color:var(--cf-texto);vertical-align:top}
.tabela tr:hover td{background:var(--cf-azul-800)}
.scroll-x{overflow-x:auto}
.escala{display:flex;border-radius:var(--cf-r-sm);overflow:hidden;border:1px solid var(--cf-linha)}
.escala div{flex:1;min-width:0;height:64px;padding:6px;font-size:10px;display:flex;align-items:flex-end;font-family:ui-monospace,monospace}
.ic{width:28px;height:28px;stroke:var(--cf-branco);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-card{background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);padding:16px 8px 10px;text-align:center;font-size:12px;color:var(--cf-mudo);transition:.2s}
.ic-card:hover{border-color:var(--cf-laranja);color:var(--cf-branco)}
.ic-card .ic{display:block;margin:0 auto 8px}
.mock{border-radius:var(--cf-r-md);overflow:hidden;border:1px solid var(--cf-linha);background:var(--cf-azul-050);display:flex;align-items:center;justify-content:center;padding:24px}
.mock svg,.mock img{max-width:100%;height:auto;display:block}
.foto-tr{position:relative;border-radius:var(--cf-r-md);overflow:hidden;border:1px solid var(--cf-linha);aspect-ratio:4/3}
.foto-tr img{width:100%;height:100%;object-fit:cover;display:block}
.foto-tr span{position:absolute;left:10px;bottom:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cf-branco);background:rgba(0,40,48,.82);padding:3px 9px;border-radius:var(--cf-r-full)}
.ov-ouro::after,.ov-preto::after,.ov-duo::after,.ov-azul::after,.ov-laranja::after{content:"";position:absolute;inset:0}
.ov-preto::after,.ov-azul::after{background:linear-gradient(180deg,transparent 30%,rgba(0,40,48,.92))}
.ov-ouro::after,.ov-laranja::after{background:linear-gradient(180deg,rgba(240,130,38,0),rgba(240,130,38,.55));mix-blend-mode:multiply}
.ov-duo img{filter:grayscale(1) contrast(1.1)}
.ov-duo::after{background:var(--cf-azul);mix-blend-mode:screen}
.ov-duo span,.ov-preto span,.ov-ouro span,.ov-azul span,.ov-laranja span{z-index:2}
.bg-curvas{background:var(--cf-azul) ;position:relative;overflow:hidden}
.bg-curvas::before{content:"";position:absolute;inset:0;background:var(--cf-azul-500);opacity:.35;-webkit-mask:url(grafismo-curvas.svg) center/cover no-repeat;mask:url(grafismo-curvas.svg) center/cover no-repeat}
.bg-reticula{background-color:var(--cf-azul-900);background-image:linear-gradient(var(--cf-linha) 1px,transparent 1px),linear-gradient(90deg,var(--cf-linha) 1px,transparent 1px);background-size:28px 28px}
.bg-quente{background:var(--cf-degrade-quente)}
.bg-frio{background:var(--cf-degrade-frio)}
.sombra-1{box-shadow:var(--cf-sombra)}.sombra-2{box-shadow:var(--cf-sombra-lg)}.sombra-3{box-shadow:0 18px 40px rgba(0,0,0,.45)}.sombra-ouro,.sombra-laranja{box-shadow:0 0 0 1px var(--cf-laranja),0 8px 28px rgba(240,130,38,.22)}
.amostra-el{background:var(--cf-azul-600);border:1px solid var(--cf-linha-forte);border-radius:var(--cf-r-md);height:96px;display:flex;align-items:center;justify-content:center;color:var(--cf-branco);font-size:13px}
.barra{height:14px;background:var(--cf-laranja);border-radius:3px}
.campo{display:flex;flex-direction:column;gap:6px;font-size:14px}
.campo label{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--cf-mudo);font-weight:600}
.campo input,.campo select,.campo textarea{background:var(--cf-azul-800);border:1px solid var(--cf-linha-forte);color:var(--cf-branco);border-radius:var(--raio);padding:12px 14px;font:inherit;transition:.2s}
.campo input::placeholder{color:var(--cf-mudo)}
.campo input:hover{border-color:var(--cf-laranja)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--cf-laranja);outline-offset:2px;border-color:var(--cf-laranja)}
.campo.erro input{border-color:var(--cf-err)}.campo.erro small{color:var(--cf-amarelo)}
.campo.ok input{border-color:var(--cf-verde)}.campo.ok small{color:var(--cf-texto)}
.campo input:disabled{opacity:.45;cursor:not-allowed}
.campo small{color:var(--cf-mudo)}
.chk{display:flex;gap:10px;align-items:center;cursor:pointer}
.chk input{accent-color:var(--cf-laranja);width:18px;height:18px}
.sw{position:relative;width:46px;height:26px;background:var(--cf-azul-500);border-radius:var(--cf-r-full);display:inline-block;transition:.2s;cursor:pointer}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--cf-branco);transition:.2s}
.sw.on{background:var(--cf-laranja)}.sw.on::after{left:23px;background:var(--cf-azul)}
.btn.g{background:transparent;border-color:transparent;color:var(--cf-amarelo)}.btn.g:hover{color:var(--cf-branco)}
.btn.sm{padding:8px 16px;font-size:13px}.btn.lg{padding:16px 34px;font-size:17px}
.btn.perigo{background:var(--cf-err-bg);border-color:var(--cf-err);color:var(--cf-err)}
.btn:focus-visible{outline:2px solid var(--cf-amarelo);outline-offset:3px}
.btn.fixo-hover{background:var(--cf-laranja-claro);border-color:var(--cf-laranja-claro);color:var(--cf-azul)}
.btn.fixo-foco{outline:2px solid var(--cf-amarelo);outline-offset:3px}
.btn.off{opacity:.4;cursor:not-allowed;pointer-events:none}
.spin{width:16px;height:16px;border:2px solid var(--cf-azul);border-top-color:transparent;border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
/* badges em pílula clara: o texto fica legível (AA) em qualquer fundo */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:var(--cf-r-full);border:1px solid var(--cf-linha-forte);color:var(--cf-texto)}
.badge.ouro,.badge.laranja{background:var(--cf-laranja);color:var(--cf-azul);border-color:var(--cf-laranja)}
.badge.ok{background:var(--cf-ok-bg);color:var(--cf-azul);border-color:var(--cf-verde)}
.badge.ok::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cf-verde)}
.badge.av{background:var(--cf-amarelo);color:var(--cf-azul);border-color:var(--cf-amarelo)}
.badge.er{background:var(--cf-err-bg);color:var(--cf-err);border-color:var(--cf-err)}
.pt{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.cartao-serv{background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);overflow:hidden;transition:.25s}
.cartao-serv:hover{border-color:var(--cf-laranja);transform:translateY(-3px)}
.cartao-serv .corpo{padding:18px}
.cartao-serv h4{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--cf-branco);margin-bottom:4px}
.cartao-serv .rod{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--cf-laranja)}
.estrelas{color:var(--cf-amarelo);letter-spacing:2px}
.header-demo{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);padding:12px 20px;flex-wrap:wrap}
.header-demo nav{display:flex;flex-direction:row;gap:6px;flex-wrap:wrap;flex:none}.header-demo nav a{padding:8px 12px;font-size:14px}
.modal-demo{background:var(--cf-azul-800);border:1px solid var(--cf-laranja);border-radius:var(--cf-r-lg);padding:26px;max-width:420px;box-shadow:var(--cf-sombra-lg)}
.toast{display:flex;align-items:center;gap:12px;background:var(--cf-azul-600);color:var(--cf-branco);border:1px solid var(--cf-linha-forte);border-left:4px solid var(--cf-verde);border-radius:var(--cf-r-sm);padding:12px 16px;max-width:380px}
.toast.er{border-left-color:var(--cf-err)}.toast.av{border-left-color:var(--cf-amarelo)}
.tip{position:relative;display:inline-block;background:var(--cf-branco);color:var(--cf-azul);font-size:13px;font-weight:600;padding:6px 12px;border-radius:6px}
.tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--cf-branco);transform:translateX(-50%) rotate(45deg)}
.vazio{border:1px dashed var(--cf-linha-forte);border-radius:var(--cf-r-md);padding:34px;text-align:center;color:var(--cf-mudo)}
.skel{background:linear-gradient(90deg,var(--cf-azul-800) 25%,var(--cf-azul-600) 50%,var(--cf-azul-800) 75%);background-size:200% 100%;animation:brilho 1.4s infinite;border-radius:6px;height:16px}
@keyframes brilho{to{background-position:-200% 0}}
.mov-demo{height:64px;width:64px;border-radius:var(--cf-r-md);background:var(--cf-laranja);animation:pulsa 2.4s var(--ease,ease-in-out) infinite}
@keyframes pulsa{0%,100%{transform:translateX(0)}50%{transform:translateX(160px)}}
.passos{counter-reset:p;list-style:none;padding:0}
.passos li{counter-increment:p;display:flex;gap:14px;margin:10px 0}
.passos li::before{content:counter(p);flex:none;width:28px;height:28px;border-radius:50%;background:var(--cf-laranja);color:var(--cf-azul);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.post-mock{aspect-ratio:1;border-radius:6px;overflow:hidden;position:relative;background:var(--cf-azul);border:1px solid var(--cf-linha)}
.post-mock.st{aspect-ratio:9/16}
.post-mock img.f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-mock .tx{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:7%;background:linear-gradient(180deg,transparent 40%,rgba(0,40,48,.92))}
.post-mock .tx b{font-family:var(--f-display);font-weight:700;color:var(--cf-branco);font-size:clamp(18px,2.6vw,28px);line-height:1.1}
.post-mock .tx small{color:var(--cf-amarelo);letter-spacing:.16em;text-transform:uppercase;font-size:10px;margin-top:6px}
.post-mock .lg{position:absolute;top:6%;right:6%;width:22%}
/* simulação do WhatsApp: cores do próprio app, não da marca */
.zap{background:#0b141a;border-radius:12px;padding:16px;max-width:340px;font-size:15px}
.zap .m{background:#1f2c34;color:#e9edef;border-radius:8px 8px 8px 0;padding:9px 12px;margin:6px 0;max-width:90%}
.zap .m.eu{background:#005c4b;margin-left:auto;border-radius:8px 8px 0 8px}
.zap time{display:block;font-size:11px;opacity:.7;text-align:right;margin-top:2px}
.sinal{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--cf-r-sm);background:var(--cf-azul-800);border:1px solid var(--cf-linha);margin:6px 0;font-size:15px}
.nota-bloco{border-left:3px solid var(--cf-laranja);padding:6px 0 6px 16px;color:var(--cf-texto);margin:14px 0}
@media(max-width:1100px){.ds-wrap{grid-template-columns:1fr}.toc{display:none}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== brand book ===== */
.rec{background:var(--cf-azul-800);border:1px solid var(--cf-linha-forte);border-left:4px solid var(--cf-amarelo);border-radius:var(--cf-r-md);padding:20px 22px;margin:18px 0;position:relative}
.rec[data-status=aprovado]{border-color:var(--cf-verde);border-left-color:var(--cf-verde)}.rec[data-status=trocado]{border-color:var(--cf-err);border-left-color:var(--cf-err)}
.rec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rec-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cf-laranja);font-weight:700}
.rec .rec-r{font-size:18px;color:var(--cf-branco);line-height:1.45}
.rec .porque{color:var(--cf-texto);margin-top:10px;font-size:15.5px}
.rec details{margin-top:10px;color:var(--cf-texto)}.rec summary{cursor:pointer;color:var(--cf-amarelo);font-weight:600}
.rec details ul{margin:8px 0 0 20px}
.rec-a{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.rec-a input{flex:1;min-width:200px;background:var(--cf-azul-900);border:1px solid var(--cf-linha-forte);color:var(--cf-branco);border-radius:var(--raio);padding:9px 12px;font:inherit}
.rec-a input::placeholder{color:var(--cf-mudo)}
.rec-a input:focus{outline:2px solid var(--cf-laranja);outline-offset:1px}
.fato{border-left:3px solid var(--cf-verde);padding:4px 0 4px 14px;margin:14px 0;color:var(--cf-texto)}
.fato::before{content:"● FATO VERIFICADO";display:block;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--cf-branco);margin-bottom:2px}
.lacuna{border-left:3px solid var(--cf-amarelo);padding:4px 0 4px 14px;margin:14px 0;color:var(--cf-texto)}
.lacuna::before{content:"A CONFIRMAR";display:block;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--cf-amarelo);margin-bottom:2px}
.fonte{font-size:12px;color:var(--cf-mudo);margin-top:6px}
.fonte a{color:var(--cf-mudo)}
.quad{position:relative;aspect-ratio:1;max-width:420px;margin:auto;border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);background:var(--cf-azul-800)}
.quad::before,.quad::after{content:"";position:absolute;background:var(--cf-linha)}
.quad::before{left:50%;top:0;bottom:0;width:1px}.quad::after{top:50%;left:0;right:0;height:1px}
.quad .ax{position:absolute;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-mudo)}
.quad .pt-m{position:absolute;transform:translate(-50%,-50%);padding:6px 11px;border-radius:var(--cf-r-full);font-size:12px;font-weight:700;white-space:nowrap;border:1px solid var(--cf-linha-forte);background:var(--cf-azul-600);color:var(--cf-branco)}
.quad .pt-m.br,.quad .pt-m.cf{background:var(--cf-laranja);color:var(--cf-azul);border-color:var(--cf-laranja)}
.jornada{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;counter-reset:j}
.jornada>div{counter-increment:j;padding:16px;border:1px solid var(--cf-linha);margin-left:-1px;background:var(--cf-azul-800);position:relative}
.jornada>div::before{content:counter(j);position:absolute;top:-12px;left:12px;width:24px;height:24px;border-radius:50%;background:var(--cf-laranja);color:var(--cf-azul);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:13px}
.jornada b{display:block;color:var(--cf-branco);margin:6px 0 4px}.jornada p{font-size:14px;color:var(--cf-texto)}
.persona{display:grid;grid-template-columns:90px 1fr;gap:16px}
.persona .av{width:90px;height:90px;border-radius:50%;background:var(--cf-azul-600);border:2px solid var(--cf-laranja);display:flex;align-items:center;justify-content:center}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal>div{background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-sm);padding:8px;font-size:12px;min-height:92px;color:var(--cf-texto)}
.cal>div b{display:block;color:var(--cf-laranja);font-size:11px;letter-spacing:.1em;margin-bottom:4px}
.cal>div.cab{min-height:0;text-align:center;font-weight:700;letter-spacing:.12em;color:var(--cf-laranja);background:none;border:0}
@media(max-width:700px){.cal{grid-template-columns:repeat(2,1fr)}.cal>div.cab{display:none}.persona{grid-template-columns:1fr}}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.kpi .card b.v{display:block;font-family:var(--f-display);font-weight:700;font-size:32px;color:var(--cf-branco)}
.guia{border:2px solid var(--cf-laranja);border-radius:var(--cf-r-lg);padding:26px;background:var(--cf-azul-800)}
.barra-prog{height:10px;border-radius:var(--cf-r-full);background:var(--cf-azul-600);overflow:hidden}.barra-prog i{display:block;height:100%;background:var(--cf-laranja)}

/* ===== lançamento ===== */
.bloq::before{content:"O QUE BLOQUEIA"!important}
.lc{background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);padding:18px 22px;margin:6px 0 4px;transition:.2s}
.lc[data-feito="1"]{opacity:.7;border-color:var(--cf-verde)}
.lc-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.lc-res{color:var(--cf-texto);font-size:16.5px}
.lc .passos{margin-top:12px}.lc .passos li{font-size:15px;color:var(--cf-texto)}
.lc-filtros{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.lc-filtros button{background:var(--cf-azul-900);border:1px solid var(--cf-linha-forte);color:var(--cf-texto);border-radius:var(--cf-r-full);padding:7px 16px;font:inherit;font-weight:600;cursor:pointer}
.lc-filtros button.on{background:var(--cf-laranja);color:var(--cf-azul);border-color:var(--cf-laranja)}
.lc-oculto{display:none!important}

/* ===== estados de carregamento (v2) ===== */
.em-construcao{border:1px dashed var(--cf-linha-forte);border-radius:var(--cf-r-md);padding:22px 24px;margin:18px 0;color:var(--cf-texto);background:var(--cf-azul-800)}
.em-construcao b{display:block;font-family:var(--f-display);font-size:18px;color:var(--cf-branco);margin-bottom:4px}
.em-construcao::before{content:"EM CONSTRUÇÃO";display:inline-block;font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--cf-azul);background:var(--cf-amarelo);border-radius:var(--cf-r-full);padding:2px 10px;margin-bottom:10px}

/* ===== mobile ===== */
.ds-wrap>div{min-width:0}
.toc-mob{display:none}
@media(max-width:1100px){
  .ds-wrap{grid-template-columns:minmax(0,1fr)}
  .toc-mob{display:block;width:auto;background:var(--cf-azul-900);border:0;border-bottom:2px solid var(--cf-laranja);color:var(--cf-branco);border-radius:0;padding:14px var(--padx);font:inherit;font-weight:600;margin:0 calc(-1*var(--padx)) 22px;position:sticky;top:0;z-index:20;box-shadow:0 12px 22px -16px rgba(0,0,0,.7)}
}
@media(max-width:820px){
  body{font-size:16px;display:block}
  main{margin-left:0}
  h1{font-size:clamp(30px,9vw,42px)}
  h2{font-size:23px;margin-top:44px;line-height:1.2}
  h2 .n{font-size:11px;padding:2px 8px;margin-right:8px;display:inline-block;vertical-align:middle}
  h3{font-size:14px}
  .sub{margin-bottom:26px;font-size:15px}
  .bloco-t{margin:52px 0 -28px;font-size:12px}
  .card{padding:16px}
  .rec{padding:16px}.rec .rec-r{font-size:17px}
  .rec-a{flex-direction:row}.rec-a input{flex:1 1 100%;order:3;min-width:0}
  .rec-a .btn{flex:1;justify-content:center}
  .btn{padding:12px 20px;min-height:46px}
  .btn.sm{padding:10px 16px;min-height:44px}
  .btn.lg{padding:15px 24px}
  .linha{gap:10px}
  .d1{font-size:44px}.d2{font-size:28px}
  .corpo-ex{font-size:17px}
  .stat b{font-size:30px}
  .grade{gap:12px}
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo-box{min-height:170px;padding:18px}
  .logo-box img{max-height:150px}
  .info-lin{grid-template-columns:1fr;gap:2px}
  .info-lin dt{padding-top:0}
  .preco .v{font-size:21px}
  .tabela{font-size:14px}
  .tabela th,.tabela td{padding:9px 8px}
  .card>.tabela,.rec .tabela{display:block;overflow-x:auto;white-space:normal}
  .jornada{grid-template-columns:1fr}
  .jornada>div{margin:0 0 -1px;padding:20px 16px 14px}
  .jornada>div::before{left:14px}
  .persona{grid-template-columns:64px 1fr}.persona .av{width:64px;height:64px}
  .lc{padding:14px 16px}
  .lc-filtros button{min-height:44px;padding:0 16px}
  .lc-res{font-size:15.5px}
  .passos li{gap:10px}
  .header-demo{padding:10px 12px}
  .modal-demo{padding:18px}
  .fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-mock .tx b{font-size:20px}
  .mov-demo{animation-name:pulsa-m}
  @keyframes pulsa-m{0%,100%{transform:translateX(0)}50%{transform:translateX(min(160px,60vw))}}
  .zap{max-width:100%}
  .guia{padding:16px}
  .guia>div:first-child{grid-template-columns:90px 1fr!important;gap:14px!important}
  .guia img{width:90px!important}
  .quad{max-width:100%}
  .quad .pt-m{font-size:11px;padding:5px 9px}
  .escala div{font-size:9px;padding:3px}
  pre.cod{font-size:12px}
  .rec summary{min-height:44px;display:flex;align-items:center}
}
@media(max-width:420px){
  .g6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4,.g5{grid-template-columns:minmax(0,1fr)}
  .escala{flex-wrap:wrap}.escala div{flex:1 1 20%;height:50px}
  .cal{grid-template-columns:1fr 1fr}
}

/* ===== mobile: barra de abas embaixo (rolável, 10 itens) ===== */
.sh{display:none}.logo-mob{display:none}
@media(max-width:820px){
  aside{position:fixed;top:auto;bottom:0;left:0;right:0;inset:auto 0 0 0;width:100%;flex-direction:row;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));border-right:0;border-top:2px solid var(--cf-laranja);box-shadow:0 -8px 22px rgba(0,20,26,.6);overflow:visible;gap:0;z-index:20}
  aside .marca,aside .rodape,nav .esp{display:none}
  nav{flex-direction:row;width:100%;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:1 0 64px;min-width:64px;flex-direction:column;justify-content:center;gap:2px;padding:6px 4px;min-height:54px;font-size:11.5px;text-align:center;border-radius:8px;border-width:1px;border-left-width:1px}
  nav a.on{border-color:var(--cf-laranja);border-left-color:var(--cf-laranja)}
  nav a i{font-size:18px;line-height:1;width:auto}
  .lg{display:none}.sh{display:inline}
  main{--padx:16px;padding:18px var(--padx) calc(96px + env(safe-area-inset-bottom,0px))}
  .logo-mob{display:flex;justify-content:center;padding:6px 0 18px}.logo-mob img{width:150px;height:auto}
  .toc-mob{top:0}
}

/* ===== inauguração / destaque (herdado, recolorido) ===== */
.inaug{border:1px solid var(--cf-laranja);border-radius:var(--cf-r-lg);background:var(--cf-degrade-frio);padding:26px;margin:0 0 30px;box-shadow:var(--cf-sombra-lg);position:relative;overflow:hidden}
.inaug>*{position:relative;z-index:1}
.inaug-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.inaug-data{flex:none;text-align:center;border:2px solid var(--cf-laranja);border-radius:var(--cf-r-md);padding:12px 22px;background:var(--cf-azul-900)}
.inaug-data b{display:block;font-family:var(--f-display);font-weight:700;font-size:56px;line-height:.95;color:var(--cf-branco)}
.inaug-data span{display:block;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--cf-laranja);font-weight:700;margin-top:4px}
.inaug h2{margin:6px 0 4px;font-size:30px}
.inaug .selo{display:inline-block;background:var(--cf-amarelo);color:var(--cf-azul);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px;padding:4px 12px;border-radius:var(--cf-r-full)}
.mapa{border:1px solid var(--cf-linha-forte);border-radius:var(--cf-r-md);overflow:hidden;background:var(--cf-azul-900);margin-top:18px}
.mapa iframe{display:block;width:100%;height:340px;border:0}
.mapa-rod{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--cf-azul-800);border-top:1px solid var(--cf-linha)}
.antigo{opacity:.75}
.antigo dd{text-decoration:line-through;text-decoration-color:var(--cf-n400)}
.novo-tag{display:inline-block;background:var(--cf-laranja);color:var(--cf-azul);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--cf-r-full);padding:2px 9px;margin-left:8px;vertical-align:middle}
@media(max-width:820px){.inaug{padding:18px}.inaug-data b{font-size:46px}.inaug h2{font-size:24px}.mapa iframe{height:280px}.inaug-data{width:100%}}

/* ===== Link da bio ===== */
.lk-wrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:36px;align-items:start}
.fone{width:100%;max-width:380px;margin:0 auto;border:10px solid var(--cf-n900);border-radius:44px;background:var(--cf-n900);box-shadow:0 0 0 2px var(--cf-linha),0 26px 60px rgba(0,20,26,.6);overflow:hidden;position:relative}
.fone::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:22px;background:var(--cf-n900);border-radius:99px;z-index:2}
.fone iframe{display:block;width:100%;height:720px;border:0;background:var(--cf-branco)}
.qr{background:var(--cf-branco);border-radius:var(--cf-r-md);padding:10px;width:150px;height:150px}
.qr img{width:100%;height:100%;display:block}
.url-box{display:flex;gap:8px;align-items:center;background:var(--cf-azul-900);border:1px solid var(--cf-linha-forte);border-radius:var(--raio);padding:8px 8px 8px 14px;margin:10px 0 0;flex-wrap:wrap}
.url-box code{flex:1;min-width:180px;word-break:break-all}
@media(max-width:1000px){.lk-wrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){.fone{border-width:7px;border-radius:34px}.fone iframe{height:640px}}

/* ===== Landing page e Academy (prévia computador / celular) ===== */
.lp-bar,.ac-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 18px}
.lp-bar .seg,.ac-bar .seg{display:inline-flex;border:1px solid var(--cf-linha-forte);border-radius:var(--cf-r-full);overflow:hidden}
.lp-bar .seg button,.ac-bar .seg button{background:var(--cf-azul-800);color:var(--cf-texto);border:0;padding:0 20px;min-height:44px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.lp-bar .seg button.on,.ac-bar .seg button.on{background:var(--cf-laranja);color:var(--cf-azul)}
.lp-stage,.ac-stage{background:var(--cf-degrade-frio);border:1px solid var(--cf-linha);border-radius:var(--cf-r-lg);padding:20px;overflow:hidden}
.lp-desk,.ac-desk{margin:0 auto;border:1px solid var(--cf-linha-forte);border-radius:var(--cf-r-md);overflow:hidden;background:var(--cf-branco);box-shadow:var(--cf-sombra-lg)}
.lp-desk .cab,.ac-desk .cab{display:flex;gap:6px;align-items:center;padding:9px 12px;background:var(--cf-azul-900);border-bottom:1px solid var(--cf-linha)}
.lp-desk .cab i,.ac-desk .cab i{width:10px;height:10px;border-radius:50%;background:var(--cf-azul-500)}.lp-desk .cab span,.ac-desk .cab span{margin-left:10px;color:var(--cf-mudo);font-size:12px;font-family:ui-monospace,Menlo,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-desk .vp,.ac-desk .vp{position:relative;overflow:hidden}
.lp-desk iframe,.ac-desk iframe{border:0;width:1280px;height:800px;transform-origin:0 0;background:var(--cf-branco);display:block}
.lp-cel,.ac-cel{display:none;margin:0 auto}
.lp-cel .fone,.ac-cel .fone{max-width:390px}.lp-cel .fone iframe,.ac-cel .fone iframe{height:760px}
.lp-stage.cel .lp-desk,.ac-stage.cel .ac-desk{display:none}.lp-stage.cel .lp-cel,.ac-stage.cel .ac-cel{display:block}
@media(max-width:820px){.lp-stage,.ac-stage{padding:12px}}
#lp-stage .fone::before,#link-da-bio .fone::before{display:none}

/* ===== Aplicações ===== */
.ap-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-lg);padding:16px;margin-bottom:6px}
.ap-img{display:block;border-radius:var(--cf-r-md);overflow:hidden;border:1px solid var(--cf-linha);background:var(--cf-azul-050);cursor:zoom-in;position:relative;align-self:start}
.ap-img img{width:100%;height:auto;display:block;transition:transform .5s}
.ap-img:hover img{transform:scale(1.03)}
.ap-img::after{content:"Ampliar";position:absolute;right:10px;bottom:10px;background:rgba(0,40,48,.85);color:var(--cf-branco);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:var(--cf-r-full);opacity:0;transition:.2s}
.ap-img:hover::after{opacity:1}
.ap-d{color:var(--cf-branco);font-size:17px;margin:2px 0 8px}
.ap-txt dl{margin:0}
.lbx{position:fixed;inset:0;background:rgba(0,20,26,.95);z-index:200;display:none;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}
.lbx.on{display:flex}
.lbx img{max-width:100%;max-height:100%;border-radius:var(--cf-r-md);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lbx button{position:absolute;top:14px;right:14px;background:var(--cf-azul-800);color:var(--cf-branco);border:1px solid var(--cf-laranja);border-radius:99px;min-width:46px;min-height:46px;font-size:22px;cursor:pointer}
@media(max-width:900px){.ap-card{grid-template-columns:minmax(0,1fr)}}

/* ===== Motor de peças (novo na v2) ===== */
.mt-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.mt-card{background:var(--cf-azul-800);border:1px solid var(--cf-linha);border-radius:var(--cf-r-md);padding:18px;display:flex;flex-direction:column;gap:10px}
.mt-card h4{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--cf-branco);line-height:1.25}
.mt-prop{display:flex;align-items:center;justify-content:center;background:var(--cf-azul-900);border:1px solid var(--cf-linha);border-radius:var(--cf-r-sm);height:132px;padding:12px}
.mt-prop span{display:flex;align-items:center;justify-content:center;background:var(--cf-degrade-quente);color:var(--cf-azul);font-weight:700;font-size:12px;border-radius:4px;max-width:100%;max-height:100%}
.mt-campos{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.mt-campos li{font-size:12.5px;background:var(--cf-azul-900);border:1px solid var(--cf-linha-forte);border-radius:var(--cf-r-full);padding:3px 10px;color:var(--cf-texto)}
.mt-campos li small{color:var(--cf-mudo)}
.mt-card details summary{cursor:pointer;color:var(--cf-amarelo);font-weight:600;font-size:14px}

/* ===== rodapé do conteúdo ===== */
.rodape-pg{margin-top:72px;padding-top:18px;border-top:1px solid var(--cf-linha);color:var(--cf-mudo);font-size:13px;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.rodape-pg b{color:var(--cf-texto);font-weight:600}