/* ============================================================
   DESIGN CHIPAK, do mockup de 13/09/2026
   (.ai/design-chipak/*.png)

   Um arquivo so para todas as paginas do dominio: home, artigos,
   artigo, livros, pagina de vendas e pagina interna. Os geradores
   (.ai/apoio/shell.py e amigos) tambem carregam daqui, para nao
   existirem dois sistemas visuais no mesmo site.
   ============================================================ */

:root{
  /* navy: o fundo escuro do mockup vai de #011934 a #04315F */
  --d-navy-900:#011934;
  --d-navy-800:#02203f;
  --d-navy-700:#04315F;
  --d-navy-600:#0a4177;

  /* ciano de acao */
  --d-cyan:#22BEE8;
  --d-cyan-esc:#0EA3CC;
  --d-cyan-claro:#7FD9F2;

  /* claros */
  --d-branco:#FFFFFF;
  --d-neve:#FAFDFF;      /* secao branca */
  --d-gelo:#EDF7FF;      /* secao azul clara */
  --d-nevoa:#F2F7FC;     /* secao cinza clara */
  --d-linha:#DCE7F2;

  /* texto */
  --d-tinta:#0B2240;
  --d-corpo:#4A6076;
  --d-suave:#7C93A8;
  --d-sobre-escuro:#B9CEDF;

  --d-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --d-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --d-r:10px;
  --d-r-g:16px;
  --d-wrap:1180px;
  --d-sombra:0 1px 2px rgba(11,34,64,.04),0 8px 24px rgba(11,34,64,.06);
  --d-sombra-f:0 2px 6px rgba(11,34,64,.06),0 18px 44px rgba(11,34,64,.10);
}

/* ---------- base ---------- */
.d-body{margin:0;background:var(--d-neve);color:var(--d-corpo);
  font-family:var(--d-sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
.d-body *{box-sizing:border-box}
.d-wrap{max-width:var(--d-wrap);margin:0 auto;padding:0 24px}
.d-sec{padding:clamp(62px,7vw,96px) 0}
.d-sec--neve{background:var(--d-neve)}
.d-sec--gelo{background:var(--d-gelo)}
.d-sec--nevoa{background:var(--d-nevoa)}
.d-sec--navy{background:var(--d-navy-900);color:var(--d-sobre-escuro)}

.d-olho{display:block;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--d-cyan-esc);margin-bottom:14px}
.d-sec--navy .d-olho{color:var(--d-cyan)}

.d-h2{font-family:var(--d-serif);font-weight:700;
  font-size:clamp(1.75rem,3.4vw,2.6rem);line-height:1.16;letter-spacing:-.015em;
  color:var(--d-tinta);margin:0 0 18px;text-wrap:balance}
.d-sec--navy .d-h2{color:#fff}
.d-lead{font-size:1.02rem;line-height:1.75;color:var(--d-corpo);margin:0 0 14px;max-width:62ch}
.d-sec--navy .d-lead{color:var(--d-sobre-escuro)}
.d-lead b,.d-lead strong{color:var(--d-tinta);font-weight:600}
.d-sec--navy .d-lead b{color:#fff}

/* ---------- header ---------- */
.d-topo{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--d-linha)}
.d-topo-in{max-width:var(--d-wrap);margin:0 auto;padding:0 24px;height:72px;
  display:flex;align-items:center;gap:28px}
.d-marca{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.d-marca img{display:block;height:42px;width:auto;max-width:none}
@media(max-width:560px){.d-marca img{height:34px}}
.d-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.d-nav a{font-size:.88rem;color:var(--d-corpo);text-decoration:none;
  transition:color .18s ease;white-space:nowrap}
.d-nav a:hover{color:var(--d-navy-700)}
.d-topo .d-btn{flex-shrink:0}
.d-burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.d-burger span{display:block;width:22px;height:2px;margin:4px 0;border-radius:2px;
  background:var(--d-tinta)}
@media(max-width:960px){
  .d-burger{display:block}
  .d-nav{position:absolute;top:72px;left:0;right:0;display:none;flex-direction:column;
    align-items:flex-start;gap:0;margin:0;background:#fff;border-bottom:1px solid var(--d-linha);
    padding:10px 24px 20px}
  .d-nav.aberto{display:flex}
  .d-nav a{padding:11px 0;width:100%}
  .d-topo-in .d-btn{display:none}
}

/* ---------- botoes ---------- */
.d-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;
  font-size:.88rem;font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  cursor:pointer}
.d-btn:hover{transform:translateY(-1px)}
.d-btn--navy{background:var(--d-navy-900);color:#fff}
.d-btn--navy:hover{background:var(--d-navy-700)}
.d-btn--cyan{background:var(--d-cyan);color:#04283f;
  box-shadow:0 6px 20px rgba(34,190,232,.28)}
.d-btn--cyan:hover{background:var(--d-cyan-claro)}
.d-btn--ghost{border-color:rgba(255,255,255,.34);color:#fff}
.d-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.d-btn--linha{border-color:var(--d-linha);color:var(--d-tinta);background:#fff}
.d-btn--linha:hover{border-color:var(--d-navy-700)}
.d-btn--peq{padding:9px 16px;font-size:.8rem}

.d-link{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;
  color:var(--d-cyan-esc);text-decoration:none}
.d-link:hover{color:var(--d-navy-700)}

/* ---------- hero ---------- */
.d-hero{position:relative;background:#01101f;overflow:hidden;
  padding:clamp(58px,6vw,86px) 0 clamp(52px,5vw,72px)}
.d-hero-fundo{position:absolute;inset:0;background:url('/images/fundo-2.webp') center right/cover no-repeat;
  opacity:.52}
.d-hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 64% 44%,rgba(7,48,92,.38) 0%,rgba(1,18,38,.94) 58%,#01101f 100%)}
.d-hero .d-wrap{position:relative;z-index:2}
.d-hero-grade{display:grid;gap:clamp(28px,4vw,48px);align-items:center}
@media(min-width:1000px){.d-hero-grade{grid-template-columns:1.15fr .62fr .46fr}}
.d-hero h1{font-family:var(--d-serif);font-weight:700;color:#fff;margin:0 0 20px;
  font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.d-hero-lead{color:#A9C4DA;font-size:1rem;line-height:1.72;margin:0 0 28px;max-width:46ch}
.d-hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.d-selos{display:flex;flex-wrap:wrap;gap:22px}
.d-selo{display:flex;align-items:center;gap:9px;font-size:.82rem;color:#A9C4DA}
.d-selo i{width:20px;height:20px;border-radius:50%;border:1px solid rgba(127,217,242,.5);
  display:grid;place-items:center;flex-shrink:0}
.d-selo i::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--d-cyan)}

.d-hero-foto{border-radius:var(--d-r-g);overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.16)}
.d-hero-foto img{display:block;width:100%;height:auto}

.d-hero-lado{border-left:1px solid rgba(255,255,255,.14);padding-left:26px}
/* Os pilares sao uma linha so, separados por um disco:
   Estrategia . Processos . Tecnologia . Resultados */
.d-pilares{list-style:none;margin:0 0 22px;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.d-pilares li{display:flex;align-items:center;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;color:#9FC6E0;padding:2px 0}
.d-pilares li + li::before{content:'';flex-shrink:0;width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.6;margin:0 13px}
/* o fecho do Nefarious usa a mesma lista para uma frase quebrada em linhas,
   onde um separador de disco nao faria sentido */
.d-pilares--frase{display:block}
.d-pilares--frase li{display:block;padding:7px 0}
.d-pilares--frase li + li::before{content:none}
.d-hero-cita{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;
  font-style:italic;font-size:.9rem;line-height:1.62;color:#BBD4E6;margin:0 0 16px}
.d-assina{display:block;width:150px;height:auto;opacity:.92}
@media(max-width:999px){.d-hero-lado{border-left:0;border-top:1px solid rgba(255,255,255,.14);
  padding-left:0;padding-top:24px}}

/* ---------- cards ---------- */
.d-grade{display:grid;gap:20px}
.d-g2{grid-template-columns:1fr}
.d-g3{grid-template-columns:1fr}
@media(min-width:760px){.d-g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.d-g3{grid-template-columns:repeat(3,1fr)}}

.d-card{background:#fff;border:1px solid var(--d-linha);border-radius:var(--d-r);
  padding:26px;box-shadow:var(--d-sombra);transition:box-shadow .2s ease,transform .2s ease}
.d-card:hover{box-shadow:var(--d-sombra-f);transform:translateY(-2px)}
.d-card-ico{width:40px;height:40px;border-radius:9px;background:var(--d-gelo);
  display:grid;place-items:center;margin-bottom:16px;color:var(--d-cyan-esc)}
.d-card-ico svg{width:20px;height:20px}
.d-card h3{font-family:var(--d-serif);font-size:1.08rem;font-weight:700;color:var(--d-tinta);
  margin:0 0 10px;line-height:1.3}
.d-card p{margin:0;font-size:.9rem;line-height:1.66;color:var(--d-corpo)}
.d-card .d-link{margin-top:16px}
.d-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-cyan-esc);margin-bottom:10px}

/* destaque ao lado do texto na secao de desafio */
.d-nota{background:#fff;border:1px solid var(--d-linha);border-left:3px solid var(--d-cyan);
  border-radius:var(--d-r);padding:22px;box-shadow:var(--d-sombra)}
.d-nota p{margin:0;font-size:.95rem;line-height:1.6;color:var(--d-tinta);font-weight:500}
.d-dupla{display:grid;gap:28px;align-items:start}
@media(min-width:960px){.d-dupla{grid-template-columns:1.35fr .65fr;gap:44px}}

/* ---------- experiencia: numeros e chips ---------- */
.d-exp{position:relative;overflow:hidden}
.d-exp-fundo{position:absolute;inset:0;background:url('/images/fundo-1.webp') center right/cover no-repeat;
  opacity:.5}
.d-exp::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,var(--d-gelo) 0%,rgba(237,247,255,.94) 42%,rgba(237,247,255,.25) 100%)}
.d-exp .d-wrap{position:relative;z-index:2}
.d-nums{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin:34px 0 26px}
@media(min-width:820px){.d-nums{grid-template-columns:repeat(4,1fr)}}
.d-num{border-left:1px solid var(--d-linha);padding-left:18px}
.d-num:first-child{border-left:0;padding-left:0}
.d-num b{display:block;font-family:var(--d-serif);font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.5rem);color:var(--d-navy-700);line-height:1.05}
.d-num span{display:block;margin-top:6px;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-suave)}
.d-chips{display:flex;flex-wrap:wrap;gap:9px}
.d-chip{padding:7px 15px;border:1px solid var(--d-linha);border-radius:999px;background:#fff;
  font-size:.78rem;color:var(--d-corpo)}

/* ---------- depoimentos ---------- */
.d-dep{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--d-r);padding:26px;display:flex;flex-direction:column}
.d-dep p{font-size:.95rem;line-height:1.7;color:#D5E6F2;margin:0 0 18px;flex:1}
.d-dep b{color:#fff;font-size:.88rem;display:block}
.d-dep span{color:#8FB0C8;font-size:.78rem}

/* ---------- lista de publicacoes ---------- */
.d-lista{border-top:1px solid var(--d-linha);margin-top:26px}
.d-item{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;
  border-bottom:1px solid var(--d-linha);text-decoration:none;
  transition:background .18s ease}
@media(min-width:760px){.d-item{grid-template-columns:130px 1fr auto;align-items:center;gap:20px}}
.d-item:hover{background:var(--d-neve)}
.d-item-data{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--d-cyan-esc)}
.d-item-tit{font-size:.96rem;color:var(--d-tinta);line-height:1.45}
.d-item-seta{color:var(--d-suave);font-size:1rem}
.d-item:hover .d-item-seta{color:var(--d-cyan-esc)}

/* ---------- CTA e rodape ---------- */
.d-cta{position:relative;overflow:hidden;background:var(--d-navy-900);
  padding:clamp(64px,7vw,96px) 0;text-align:center}
.d-cta-fundo{position:absolute;inset:0;background:url('/images/fundo-5.webp') center/cover no-repeat;
  opacity:.55}
.d-cta::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,25,52,.82) 0%,rgba(1,25,52,.9) 100%)}
.d-cta .d-wrap{position:relative;z-index:2}
.d-cta h2{font-family:var(--d-serif);font-weight:700;color:#fff;margin:0 0 16px;
  font-size:clamp(1.8rem,3.8vw,2.8rem);line-height:1.16;text-wrap:balance}
.d-cta p{color:#A9C4DA;max-width:56ch;margin:0 auto 28px;font-size:.98rem;line-height:1.7}
.d-cta-acoes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.d-rodape{background:var(--d-navy-900);border-top:1px solid rgba(255,255,255,.1);
  padding:26px 0;color:#7FA0BA;font-size:.8rem}
.d-rodape-in{max-width:var(--d-wrap);margin:0 auto;padding:0 24px;display:flex;
  flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.d-rodape .d-marca img{height:38px}
.d-rodape-links{display:flex;flex-wrap:wrap;gap:18px}
.d-rodape a{color:#9FBDD3;text-decoration:none}
.d-rodape a:hover{color:#fff}

@media(prefers-reduced-motion:reduce){
  .d-btn:hover,.d-card:hover{transform:none}
}

/* ============================================================
   SECOES: /artigos/, /livros/, /atendemos/ e a pagina de artigo
   Mesmos tokens do topo do arquivo. O que muda aqui vale para
   todas as paginas geradas, porque todas passam pelo shell.py.
   ============================================================ */

/* trilha discreta abaixo do menu */
.d-trilha{background:#fff;border-bottom:1px solid var(--d-linha);font-size:.78rem;color:var(--d-suave)}
.d-trilha .d-wrap{padding-top:11px;padding-bottom:11px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.d-trilha a{color:var(--d-corpo);text-decoration:none}
.d-trilha a:hover{color:var(--d-cyan-esc)}
.d-trilha b{color:var(--d-tinta);font-weight:600}

/* cabecalho de secao: a faixa escura com montanha */
.d-cab{position:relative;overflow:hidden;background:#01101f;
  padding:clamp(52px,6vw,78px) 0 clamp(46px,5vw,66px)}
.d-cab-fundo{position:absolute;inset:0;background:url('/images/fundo-3.webp') center/cover no-repeat;
  opacity:.5}
.d-cab::after{content:'';position:absolute;inset:0;
  background:linear-gradient(96deg,#01101f 0%,rgba(1,20,40,.92) 46%,rgba(1,22,44,.55) 100%)}
.d-cab .d-wrap{position:relative;z-index:2}
.d-cab-grade{display:grid;gap:clamp(26px,4vw,46px);align-items:start}
@media(min-width:1000px){.d-cab-grade{grid-template-columns:1.4fr .5fr}}
.d-cab h1{font-family:var(--d-serif);font-weight:700;color:#fff;margin:0 0 16px;
  font-size:clamp(1.95rem,4.2vw,3rem);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.d-cab p{color:#A9C4DA;font-size:1rem;line-height:1.72;margin:0;max-width:52ch}
.d-cab-lado{border-left:1px solid rgba(255,255,255,.14);padding-left:24px}
@media(max-width:999px){.d-cab-lado{border-left:0;border-top:1px solid rgba(255,255,255,.14);
  padding-left:0;padding-top:22px}}
.d-cab-lado .d-pilares{margin-bottom:20px}
.d-cab-lado p{font-size:.86rem;color:#9FC6E0;border-top:1px solid rgba(255,255,255,.14);
  padding-top:18px;margin:0 0 14px}

/* busca do hero de artigos */
.d-busca{display:flex;align-items:center;gap:10px;margin-top:26px;max-width:420px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:10px 16px}
.d-busca svg{width:17px;height:17px;color:#8FB6D2;flex-shrink:0}
.d-busca input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font-family:inherit;font-size:.9rem}
.d-busca input::placeholder{color:#7FA0BA}

/* filtros em chip */
.d-filtros{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:30px}
.d-filtro{padding:8px 17px;border:1px solid var(--d-linha);border-radius:999px;background:#fff;
  font-size:.82rem;color:var(--d-corpo);text-decoration:none;cursor:pointer;
  transition:all .18s ease}
.d-filtro:hover{border-color:var(--d-cyan)}
.d-filtro.ativo{background:var(--d-cyan);border-color:var(--d-cyan);color:#04283f;font-weight:600}

/* layout de listagem com coluna lateral */
.d-listagem{display:grid;gap:32px;align-items:start}
/* min-width:auto e' o padrao de item de grid: sem isto a coluna nao encolhe
   abaixo do conteudo, e o .d-artigo (max-width:740px) estourava a tela de
   378px, criando rolagem horizontal no mobile */
.d-listagem > *{min-width:0}
@media(min-width:1040px){.d-listagem{grid-template-columns:1fr 306px;gap:40px}}

/* card de artigo com capa */
.d-posts{display:grid;gap:22px;min-width:0}
@media(min-width:680px){.d-posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.d-posts{grid-template-columns:repeat(3,1fr)}}
/* display:flex de autor vence o [hidden] do navegador, que e' regra de
   user-agent: o filtro marcava o card como oculto e ele continuava na tela */
.d-post[hidden]{display:none !important}
.d-post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--d-linha);
  border-radius:var(--d-r);overflow:hidden;text-decoration:none;box-shadow:var(--d-sombra);
  transition:box-shadow .2s ease,transform .2s ease}
.d-post:hover{box-shadow:var(--d-sombra-f);transform:translateY(-2px)}
.d-post-capa{aspect-ratio:16/9;background:var(--d-gelo);overflow:hidden}
.d-post-capa img{display:block;width:100%;height:100%;object-fit:cover}
.d-post-corpo{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.d-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:11px}
.d-cat{padding:3px 9px;border-radius:5px;background:var(--d-gelo);color:var(--d-cyan-esc);
  font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.d-data{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--d-suave);
  margin-left:auto}
.d-post h3{font-family:var(--d-serif);font-size:1.06rem;font-weight:700;color:var(--d-tinta);
  line-height:1.32;margin:0 0 9px}
.d-post p{margin:0 0 14px;font-size:.87rem;line-height:1.62;color:var(--d-corpo);flex:1}
.d-post .d-link{margin-top:auto}

/* coluna lateral */
.d-lado{display:flex;flex-direction:column;gap:22px;min-width:0}
.d-bloco{background:#fff;border:1px solid var(--d-linha);border-radius:var(--d-r);padding:22px;
  box-shadow:var(--d-sombra)}
.d-bloco h4{font-family:var(--d-serif);font-size:1.02rem;font-weight:700;color:var(--d-tinta);
  margin:0 0 10px}
.d-bloco p{margin:0 0 14px;font-size:.85rem;line-height:1.6;color:var(--d-corpo)}
.d-lado-tit{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--d-tinta);margin:0 0 12px}
.d-rank{list-style:none;margin:0;padding:0;counter-reset:r}
.d-rank li{counter-increment:r;display:grid;grid-template-columns:26px 1fr;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--d-linha)}
.d-rank li:last-child{border-bottom:0;padding-bottom:0}
.d-rank li::before{content:counter(r);font-family:var(--d-serif);font-weight:700;
  color:var(--d-cyan-esc);font-size:1.02rem;line-height:1.35}
.d-rank a{font-size:.86rem;line-height:1.45;color:var(--d-tinta);text-decoration:none}
.d-rank a:hover{color:var(--d-cyan-esc)}
.d-cita{background:#fff;border:1px solid var(--d-linha);border-radius:var(--d-r);padding:22px}
.d-cita span{display:block;font-family:var(--d-serif);font-size:1.8rem;color:var(--d-cyan);
  line-height:.7;margin-bottom:8px}
.d-cita p{font-family:var(--d-serif);font-size:1rem;line-height:1.5;color:var(--d-tinta);margin:0 0 14px}
.d-cita img{display:block;width:130px;height:auto}

/* paginacao */
.d-pag{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:36px}
.d-pag a,.d-pag span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 11px;
  border:1px solid var(--d-linha);border-radius:8px;background:#fff;font-size:.86rem;
  color:var(--d-corpo);text-decoration:none}
.d-pag a:hover{border-color:var(--d-cyan)}
.d-pag .atual{background:var(--d-cyan);border-color:var(--d-cyan);color:#04283f;font-weight:600}

/* corpo de artigo */
.d-artigo{max-width:740px;width:100%;margin:0 auto;padding:clamp(44px,5vw,64px) 24px}
.d-artigo p,.d-artigo li{font-size:1.06rem;line-height:1.85;color:var(--d-corpo)}
.d-artigo h2{font-family:var(--d-serif);font-size:clamp(1.4rem,2.6vw,1.85rem);font-weight:700;
  color:var(--d-tinta);line-height:1.25;margin:2.4em 0 .7em}
.d-artigo h3{font-family:var(--d-serif);font-size:1.2rem;font-weight:700;color:var(--d-tinta);
  margin:1.9em 0 .6em}
.d-artigo a{color:var(--d-cyan-esc)}
.d-artigo strong{color:var(--d-tinta);font-weight:600}
.d-artigo blockquote{margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--d-cyan);
  font-family:var(--d-serif);font-size:1.12rem;line-height:1.6;color:var(--d-tinta)}
.d-artigo img{max-width:100%;height:auto;border-radius:var(--d-r)}
.d-assina-fim{margin-top:44px;padding-top:26px;border-top:1px solid var(--d-linha)}
.d-assina-fim img{width:160px;height:auto}
.d-assina-fim small{display:block;margin-top:8px;color:var(--d-suave);font-size:.8rem}

/* autor no cabecalho do artigo */
.d-autor-linha{display:flex;align-items:center;gap:12px;margin-top:24px}
.d-autor-linha img{width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.22)}
.d-autor-linha span{font-size:.82rem;line-height:1.5;color:#A9C4DA}
.d-autor-linha b{color:#fff;font-weight:600}

/* card do autor no fim do artigo */
.d-autor-card{display:grid;gap:20px;align-items:start;background:#fff;
  border:1px solid var(--d-linha);border-radius:var(--d-r);padding:26px;box-shadow:var(--d-sombra)}
@media(min-width:640px){.d-autor-card{grid-template-columns:88px 1fr}}
.d-autor-card img{width:88px;height:88px;border-radius:50%;object-fit:cover}
.d-autor-card h3{font-family:var(--d-serif);font-size:1.15rem;font-weight:700;
  color:var(--d-tinta);margin:0 0 8px}
.d-autor-card p{margin:0 0 12px;font-size:.92rem;line-height:1.65;color:var(--d-corpo)}

/* compartilhar */
.d-share{display:flex;flex-wrap:wrap;gap:8px}
.d-share a,.d-share button{display:inline-flex;align-items:center;padding:8px 13px;
  border:1px solid var(--d-linha);border-radius:8px;background:#fff;font-family:inherit;
  font-size:.78rem;color:var(--d-corpo);text-decoration:none;cursor:pointer;
  transition:border-color .18s ease,color .18s ease}
.d-share a:hover,.d-share button:hover{border-color:var(--d-cyan);color:var(--d-cyan-esc)}

/* o indice usa <ol>, entao o contador nativo ja numera */
ol.d-rank{counter-reset:none}
ol.d-rank li{counter-increment:none}
ol.d-rank li::before{content:counter(list-item)}

/* cabecalho do catalogo de livros: titulo grande e fundo de por do sol */
.d-cab-fundo--por-do-sol{background-image:url('/images/fundo-5.webp');opacity:.62}
.d-cab--livros::after{background:linear-gradient(96deg,#01101f 0%,rgba(1,20,40,.86) 38%,rgba(1,22,44,.34) 100%)}
.d-titulao{font-family:var(--d-serif);font-weight:700;color:#fff;
  font-size:clamp(3rem,8vw,5.6rem);line-height:.98;letter-spacing:-.03em;margin:0 0 12px}
.d-cab-sub{font-family:var(--d-serif);font-size:clamp(1.05rem,2.2vw,1.45rem);
  color:#fff;margin:0 0 14px}
.d-cab--livros .d-cab-lado{display:flex;flex-direction:column;justify-content:flex-end}

/* pagina de livro: o hero ganha a montanha do sistema, como no mockup.
   O gradiente de livros.css continua por baixo, garantindo o fundo se a
   imagem nao carregar. */
.livro-hero{position:relative;overflow:hidden}
.livro-hero::before{content:'';position:absolute;inset:0;
  background:url('/images/fundo-3.webp') center right/cover no-repeat;opacity:.42}
.livro-hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(96deg,#01101f 0%,rgba(1,20,40,.9) 44%,rgba(1,22,44,.42) 100%)}
.livro-hero > *{position:relative;z-index:2}

/* ---------- correcoes do corpo de artigo ----------
   .d-artigo definia tamanho e entrelinha mas nao margem, entao os paragrafos
   encostavam uns nos outros. O artigos.css antigo dava essa margem via .art-corpo,
   seletor que deixou de existir quando o corpo virou .d-artigo. */
.d-artigo p{margin:0 0 1.35em}
.d-artigo ul,.d-artigo ol{margin:0 0 1.45em;padding-left:1.35em}
.d-artigo li{margin-bottom:.5em}
.d-artigo li:last-child{margin-bottom:0}
.d-artigo h2:first-child,.d-artigo h3:first-child{margin-top:0}

/* bloco de codigo: sem estilo ele herdava a fonte do corpo, estourava a
   largura e colava no paragrafo seguinte */
.d-artigo pre{margin:1.7em 0;padding:18px 20px;overflow-x:auto;
  background:#0d1f33;border-radius:var(--d-r);border:1px solid rgba(255,255,255,.08)}
.d-artigo pre code{display:block;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,
  Menlo,Consolas,monospace;font-size:.84rem;line-height:1.68;color:#C9DDEC;
  background:none;padding:0;white-space:pre}
.d-artigo :not(pre) > code{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--d-gelo);color:var(--d-navy-700);
  padding:2px 6px;border-radius:5px}

/* glossario e referencias: sao aparato, nao leitura corrida.
   Ficavam no mesmo corpo de 1.06rem do texto e competiam com ele. */
.d-artigo .art-glossario,.d-artigo .art-refs{margin-top:2.8em;padding-top:1.6em;
  border-top:1px solid var(--d-linha)}
.d-artigo .art-glossario h2,.d-artigo .art-refs h2{font-size:1.25rem;margin:0 0 1em}
.d-artigo .art-glossario dt{font-weight:700;color:var(--d-tinta);font-size:.94rem;
  margin-top:1.1em}
.d-artigo .art-glossario dd{margin:.3em 0 0;font-size:.9rem;line-height:1.62;
  color:var(--d-corpo)}
.d-artigo .art-refs-lista{font-size:.9rem;line-height:1.6;color:var(--d-suave);
  padding-left:1.25em}
/* o tamanho tem de ser aplicado no proprio <li>: '.d-artigo li' seleciona o
   item diretamente e vence a regra posta no <ol>, que so seria herdada */
.d-artigo .art-refs-lista li{font-size:.9rem;line-height:1.6;margin-bottom:.75em}
.d-artigo .art-refs-lista cite{font-style:italic;color:var(--d-corpo)}
.d-artigo .art-refs-lista a{color:var(--d-cyan-esc)}
.d-artigo .art-ref-volta{color:var(--d-suave);text-decoration:none;margin-right:.3em}
.d-artigo .art-ref-acesso{color:var(--d-suave);font-size:.92em}
.d-artigo .art-cit{font-size:.7em;line-height:0;vertical-align:super}

/* ============================================================
   PAGINA DE VENDAS DE LIVRO
   Mesmo sistema, com um acento dourado reservado a compra: e' o
   unico lugar do site onde existe botao de checkout, e ele nao
   pode se confundir com um link de leitura.
   ============================================================ */
:root{--d-ouro:#C2963F;--d-ouro-claro:#DDB868}
.d-btn--ouro{background:var(--d-ouro);color:#1a1204;
  box-shadow:0 6px 20px rgba(194,150,63,.3)}
.d-btn--ouro:hover{background:var(--d-ouro-claro)}

.d-vendas-hero .d-cab-fundo{background-image:url('/images/fundo-4.webp');opacity:.55}
.d-vendas-hero::after{background:linear-gradient(98deg,#01101f 0%,rgba(1,18,36,.9) 40%,rgba(1,20,40,.4) 100%)}
.d-vendas-grade{display:grid;gap:clamp(28px,4vw,50px);align-items:center}
@media(min-width:1000px){.d-vendas-grade{grid-template-columns:1.12fr .52fr .4fr}}
.d-capa{display:block;width:100%;max-width:290px;height:auto;margin:0 auto;
  border-radius:6px;box-shadow:0 26px 60px rgba(0,0,0,.55)}
.d-vendas-hero .d-olho{color:var(--d-ouro-claro)}
.d-titulo-livro{font-family:var(--d-serif);font-weight:900;color:#fff;
  font-size:clamp(2.6rem,6.5vw,4.4rem);line-height:1;letter-spacing:-.03em;margin:0 0 10px}
.d-subtitulo-livro{font-family:var(--d-serif);font-size:clamp(1.05rem,2.3vw,1.5rem);
  color:#DDB868;margin:0 0 18px}

/* faixa de dados */
.d-faixa{background:#fff;border-bottom:1px solid var(--d-linha)}
.d-faixa-in{max-width:var(--d-wrap);margin:0 auto;padding:22px 24px;display:grid;
  grid-template-columns:repeat(2,1fr);gap:20px}
@media(min-width:860px){.d-faixa-in{grid-template-columns:repeat(4,1fr)}}
.d-faixa b{display:block;font-size:.94rem;color:var(--d-tinta);font-weight:700}
.d-faixa span{display:block;font-size:.8rem;color:var(--d-suave);margin-top:2px}

/* capitulos */
.d-caps{display:grid;gap:12px;margin-top:28px}
@media(min-width:860px){.d-caps{grid-template-columns:repeat(2,1fr);gap:12px 22px}}
.d-cap{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;
  background:#fff;border:1px solid var(--d-linha);border-radius:var(--d-r);padding:16px 18px}
.d-cap i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--d-navy-900);color:#fff;font-family:var(--d-serif);font-size:.82rem;
  font-style:normal;font-weight:700}
.d-cap b{display:block;font-family:var(--d-serif);font-size:1rem;color:var(--d-tinta);
  line-height:1.3;margin-bottom:4px}
.d-cap span{display:block;font-size:.85rem;line-height:1.55;color:var(--d-corpo)}

/* planos de compra */
.d-planos{display:grid;gap:20px;margin-top:32px;align-items:start}
@media(min-width:900px){.d-planos{grid-template-columns:repeat(3,1fr)}}
.d-plano{position:relative;background:#fff;border:1px solid var(--d-linha);
  border-radius:var(--d-r);padding:26px 24px;display:flex;flex-direction:column}
.d-plano--destaque{border-color:var(--d-ouro);box-shadow:0 14px 40px rgba(194,150,63,.16)}
.d-plano-selo{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--d-ouro);color:#1a1204;font-size:.64rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 13px;border-radius:999px;
  white-space:nowrap}
.d-plano h3{font-family:var(--d-serif);font-size:1.12rem;font-weight:700;color:var(--d-tinta);
  margin:0 0 3px}
.d-plano-sub{font-size:.78rem;color:var(--d-suave);margin:0 0 14px}
.d-preco-de{font-size:.82rem;color:var(--d-suave);text-decoration:line-through}
.d-preco{display:block;font-family:var(--d-serif);font-size:2.1rem;font-weight:700;
  color:var(--d-tinta);line-height:1.1;margin:2px 0 3px}
.d-parcela{display:block;font-size:.78rem;color:var(--d-suave);margin-bottom:16px}
.d-plano ul{list-style:none;margin:0 0 20px;padding:0;flex:1}
.d-plano li{position:relative;padding-left:22px;font-size:.86rem;line-height:1.5;
  color:var(--d-corpo);margin-bottom:9px}
.d-plano li::before{content:'';position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2px solid var(--d-ouro);border-bottom:2px solid var(--d-ouro);
  transform:rotate(-45deg)}
.d-garantias{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:26px;
  font-size:.82rem;color:var(--d-suave)}

/* FAQ */
.d-faq{margin-top:28px;border-top:1px solid var(--d-linha)}
.d-faq details{border-bottom:1px solid var(--d-linha)}
.d-faq summary{cursor:pointer;padding:17px 0;font-size:.96rem;color:var(--d-tinta);
  font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.d-faq summary::-webkit-details-marker{display:none}
.d-faq summary::after{content:'+';color:var(--d-cyan-esc);font-size:1.2rem;line-height:1}
.d-faq details[open] summary::after{content:'–'}
.d-faq p{margin:0 0 18px;font-size:.92rem;line-height:1.7;color:var(--d-corpo);max-width:66ch}

/* citacao em faixa larga */
.d-faixa-cita{position:relative;overflow:hidden;background:#01101f;
  padding:clamp(46px,5vw,68px) 0;text-align:center}
.d-faixa-cita .d-cab-fundo{background-image:url('/images/fundo-3.webp');opacity:.4}
.d-faixa-cita::after{content:'';position:absolute;inset:0;background:rgba(1,16,31,.66)}
.d-faixa-cita .d-wrap{position:relative;z-index:2}
.d-faixa-cita p{font-family:var(--d-serif);font-style:italic;color:#fff;
  font-size:clamp(1.15rem,2.6vw,1.7rem);line-height:1.45;margin:0 auto;max-width:26ch}
.d-faixa-cita small{display:block;margin-top:14px;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:#8FB6D2}

/* cartoes de "continue lendo": vinham do CSS antigo com 3 colunas fixas,
   o que estoura em tela estreita */
.art-rel-grade{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:680px){.art-rel-grade{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.art-rel-grade{grid-template-columns:repeat(3,1fr)}}
.d-body .art-rel{background:#fff;border:1px solid var(--d-linha);border-radius:var(--d-r);
  padding:22px;text-decoration:none;box-shadow:var(--d-sombra);display:block;
  transition:box-shadow .2s ease,transform .2s ease}
.d-body .art-rel:hover{box-shadow:var(--d-sombra-f);transform:translateY(-2px)}
.d-body .art-rel-cat{display:block;font-size:.64rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-cyan-esc);margin-bottom:10px}
.d-body .art-rel-titulo{font-family:var(--d-serif);font-size:1.02rem;font-weight:700;
  color:var(--d-tinta);line-height:1.32;margin:0 0 8px}
.d-body .art-rel-resumo{margin:0;font-size:.87rem;line-height:1.6;color:var(--d-corpo)}

/* ---------- chips do catalogo ----------
   A contagem vinha grudada no rotulo ("Anderson Chipak163") porque o
   .cat-conta nao existia no design novo e herdava tudo do chip. */
.d-filtro .cat-conta{margin-left:7px;font-size:.74rem;color:var(--d-suave);
  font-variant-numeric:tabular-nums}
.d-filtro.ativo .cat-conta{color:rgba(4,40,63,.62)}

/* chip + atalho para a pagina da faceta, unidos numa borda so */
.d-chip-par{display:inline-flex;align-items:stretch;border:1px solid var(--d-linha);
  border-radius:999px;background:#fff;overflow:hidden;transition:border-color .18s ease}
.d-chip-par:hover{border-color:var(--d-cyan)}
.d-chip-par .d-filtro{border:0;border-radius:0;background:none;padding-right:11px}
.d-chip-par:has(.d-filtro.ativo){border-color:var(--d-cyan);background:var(--d-cyan)}
.d-chip-par:has(.d-filtro.ativo) .d-filtro{background:none}
.d-chip-ir{display:grid;place-items:center;padding:0 11px 0 8px;color:var(--d-suave);
  border-left:1px solid var(--d-linha);text-decoration:none;transition:color .18s ease}
.d-chip-ir:hover{color:var(--d-cyan-esc)}
.d-chip-ir svg{width:13px;height:13px;display:block}
.d-chip-par:has(.d-filtro.ativo) .d-chip-ir{color:#04283f;border-left-color:rgba(4,40,63,.25)}

/* atalhos para os indices, no alto dos filtros */
.d-atalhos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.d-atalho{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--d-linha);border-radius:999px;background:#fff;
  font-size:.82rem;font-weight:600;color:var(--d-tinta);text-decoration:none;
  transition:border-color .18s ease,color .18s ease}
.d-atalho:hover{border-color:var(--d-cyan);color:var(--d-cyan-esc)}
.d-atalho svg{width:14px;height:14px}