/* ==========================================================================
   VERSAO D — BENTO
   Blocos grandes de cor chapada, cantos bem arredondados, tipografia
   pesada e pouca borda. E a versao mais "aplicativo" das seis: cada
   cartao e uma caixa colorida inteira, e a grade tem pecas de tamanhos
   diferentes, como um bento.
   Movimento: os blocos entram crescendo, em cascata.
   ========================================================================== */
#site-d{
  --ink:#16161A; --bg:#F2F2EF; --branco:#FFFFFF;
  --lar:#FF5A36; --azul:#2D6BFF; --verde:#12B886; --amar:#FFC94A;
  --mut:#5B5B63;
  --env:1180px; --padSecD:clamp(56px,8vw,104px); --padLatD:clamp(16px,4vw,32px);
  --r:26px; --rs:16px;
  --disp:'Bricolage Grotesque',system-ui,sans-serif;
  --corpo:'Figtree',system-ui,sans-serif;
  --mono:'Chivo Mono','Space Mono',monospace;
  background:var(--bg); color:var(--ink);
  font-family:var(--corpo); font-size:17px; line-height:1.6;
}
html[data-site="d"] body{background:#F2F2EF}

#site-d a{color:var(--ink); text-decoration:none}
#site-d a:hover{text-decoration:underline}
#site-d a:focus-visible,#site-d summary:focus-visible,#site-d button:focus-visible{
  outline:3px solid var(--azul); outline-offset:3px}
#site-d ::selection{background:var(--amar); color:var(--ink)}

.d-env{max-width:var(--env); margin-inline:auto; padding-inline:var(--padLatD)}

.d-faixa{background:var(--ink); color:var(--bg); font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  padding:11px 16px; text-align:center; white-space:nowrap; overflow:hidden}
.d-faixa a{color:var(--amar)}

/* ---- cabecalho: pilula flutuante ---- */
.d-topo{position:sticky; top:0; z-index:60; padding:12px var(--padLatD) 0; background:transparent}
.d-topo__i{max-width:var(--env); margin-inline:auto; background:var(--branco);
  border-radius:var(--r); padding:12px 14px 12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 4px 22px rgba(0,0,0,.07)}
.d-logo{display:flex; flex-direction:column; min-width:0; color:var(--ink)}
.d-logo:hover{text-decoration:none}
.d-logo__n{font-family:var(--disp); font-weight:800; font-size:22px; line-height:1.05; letter-spacing:-.6px}
.d-logo__s{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mut)}
.d-logo__q{display:none}
.d-menu{display:flex; gap:22px; font-size:15px; font-weight:700}

.d-btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:999px; font-family:var(--corpo); font-weight:800;
  font-size:16px; padding:14px 26px; background:var(--ink); color:var(--branco);
  cursor:pointer; transition:transform .16s ease, filter .16s ease}
.d-btn--a1{background:var(--lar)}
.d-btn--a2{background:var(--azul); color:#fff}
.d-btn--br{background:var(--branco); color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.d-btn--ink{background:var(--ink)}
.d-btn--p{font-size:14.5px; padding:11px 20px}

/* ---- hero: painel colorido de um lado ---- */
.d-hero{padding:clamp(20px,4vw,36px) 0 var(--padSecD)}
.d-pts{display:none}
.d-hero__g{max-width:var(--env); margin-inline:auto; padding-inline:var(--padLatD);
  display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:stretch}
.d-hero__t{background:var(--branco); border-radius:var(--r); padding:clamp(28px,4.5vw,48px)}
.d-rot{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; background:var(--amar); color:var(--ink);
  padding:6px 12px; border-radius:999px; margin-bottom:20px}
.d-h1{font-family:var(--disp); font-weight:800; font-size:clamp(34px,5.6vw,62px);
  line-height:1.02; letter-spacing:-.03em; margin:0 0 20px}
.d-mk{background:var(--amar); border-radius:6px; padding:0 .12em}
.d-mk--1{background:var(--amar)} .d-mk--3{background:var(--verde); color:#fff}
.d-lead{font-size:17.5px; color:var(--mut); margin:0 0 26px; max-width:44ch}
.d-linha{display:flex; flex-wrap:wrap; gap:12px}
.d-dados{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px}
.d-dados > div{background:var(--bg); border-radius:var(--rs); padding:16px 18px}
.d-dado__v{font-family:var(--disp); font-weight:800; font-size:22px; line-height:1.1}
.d-dado__r{font-size:13px; color:var(--mut)}
.d-dado--d{background:var(--verde) !important; color:#fff}
.d-dado--d .d-dado__r{color:rgba(255,255,255,.85)}
.d-hero__f{position:relative; border-radius:var(--r); overflow:hidden; background:var(--azul)}
.d-mold{height:100%; border-radius:var(--r); overflow:hidden}
.d-mold img{display:block; width:100%; height:100%; object-fit:cover}
.d-etq{position:absolute; z-index:2; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; background:var(--branco);
  border-radius:999px; padding:7px 13px}
.d-etq--a{top:16px; left:16px}
.d-etq--b{bottom:16px; right:16px; background:var(--lar); color:#fff}

/* ---- secoes ---- */
.d-sec{padding:var(--padSecD) 0}
.d-sec--br{background:var(--bg)}
.d-sec--bg{background:var(--bg)}
.d-sec--mint{background:var(--bg)}
.d-sec--esc{background:var(--ink); color:var(--bg)}
.d-sec--esc .d-ap{color:#A9A9B4}
.d-sec--esc .d-card{background:#22222A; color:var(--bg)}
.d-sec--esc .d-card__p{color:#A9A9B4}
.d-sec--acc{background:var(--lar); color:#fff}
.d-sec--acc .d-tit{color:#fff}
.d-cab{max-width:var(--env); margin:0 auto clamp(26px,4vw,44px); padding-inline:var(--padLatD);
  display:grid; grid-template-columns:1.4fr .6fr; gap:24px; align-items:end}
.d-tit{font-family:var(--disp); font-weight:800; font-size:clamp(27px,4.2vw,44px);
  line-height:1.06; letter-spacing:-.025em; margin:10px 0 0}
.d-ap{font-size:15.5px; color:var(--mut); margin:0}

/* ---- a grade bento: pecas de tamanhos diferentes ---- */
.d-grade{max-width:var(--env); margin-inline:auto; padding-inline:var(--padLatD);
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.d-card{grid-column:span 2; background:var(--branco); border-radius:var(--r);
  padding:26px 24px 28px; transition:transform .18s ease, box-shadow .18s ease}
.d-card__n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--mut); margin-bottom:12px}
.d-card__h{font-family:var(--disp); font-weight:800; font-size:20px; line-height:1.15; margin:0 0 8px}
.d-card__p{font-size:15.5px; color:var(--mut); margin:0}

.d-dest{grid-column:1/-1; background:var(--azul); color:#fff; border-radius:var(--r);
  padding:clamp(30px,4.5vw,50px); display:grid; gap:18px; position:relative; overflow:hidden}
.d-dest__m{position:absolute; right:-20px; bottom:-20px; width:190px; height:190px; opacity:.14; fill:#fff}
.d-dest__s{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.85}
.d-dest__h{font-family:var(--disp); font-weight:800; font-size:clamp(24px,3.6vw,38px); line-height:1.08; margin:0}

.d-duo{max-width:var(--env); margin-inline:auto; padding-inline:var(--padLatD);
  display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center}
.d-passos{position:relative; padding-left:46px}
.d-passos__l{position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:var(--amar)}
.d-passo{position:relative; padding-bottom:24px}
.d-passo__n{position:absolute; left:-46px; width:32px; height:32px; border-radius:50%;
  background:var(--amar); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:700}
.d-passo__h{font-family:var(--disp); font-weight:800; font-size:19px; margin:0 0 4px}
.d-passo__p{font-size:15.5px; color:var(--mut); margin:0}
.d-selo{display:inline-flex; gap:8px; align-items:center; background:var(--branco);
  border-radius:999px; padding:8px 15px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.d-pat{opacity:.07}

.d-faq details{background:var(--branco); border-radius:var(--rs); padding:18px 22px; margin-bottom:10px}
.d-faq summary{display:flex; gap:14px; align-items:center; cursor:pointer; list-style:none;
  font-family:var(--disp); font-weight:800; font-size:18px}
.d-faq summary::-webkit-details-marker{display:none}
.d-faq__n{font-family:var(--mono); font-size:11px; color:var(--lar); flex:none}
.d-faq__q{flex:1}
.d-faq__m{width:26px; height:26px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:transform .25s ease, background .25s ease}
.d-faq details[open] .d-faq__m{transform:rotate(45deg); background:var(--amar)}
.d-faq p{margin:12px 0 0; color:var(--mut); font-size:16px}

.d-depo{background:var(--branco); border-radius:var(--r); padding:26px; font-size:18px}
.d-depo__a{font-size:14px; color:var(--mut); margin-top:10px}
.d-estrelas{color:var(--amar); letter-spacing:2px}
.d-form{display:grid; gap:12px}

.d-rod{background:var(--ink); color:var(--bg); padding:clamp(48px,7vw,80px) 0 30px}
.d-rod .d-env{display:grid; gap:22px}
.d-rod__l{font-family:var(--disp); font-weight:800; font-size:30px}
.d-rod__c p{color:#A9A9B4; margin:0}
.d-rod__k{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em}
.d-rod a{color:var(--amar)}
.d-rod__f{margin-top:26px; padding-top:18px; border-top:1px solid #2C2C36;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:#7A7A85}

.d-zap{position:fixed; right:18px; bottom:78px; z-index:70; width:56px; height:56px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--verde); color:#fff; box-shadow:0 8px 24px rgba(18,184,134,.4)}
.d-zap:hover{transform:translateY(-2px)}

#site-d .a-brinca{
  --laranja:var(--amar); --fur-escuro:#D99A20; --coral:var(--lar);
  --ameixa:var(--ink); --verde:var(--ink); --sombra-dog:#4A4A55;
  --creme:var(--bg); --tinta:var(--bg); --n5:var(--amar);
  --raio:var(--rs); --raioG:var(--r)}

/* ---- movimento: cresce ao entrar ---- */
#site-d .rv{transform:scale(.94) translateY(18px)}
#site-d .rv.on{transform:none}

@media (max-width:980px){ .d-grade{grid-template-columns:repeat(4,1fr)}
  .d-card,.d-card:nth-child(n){grid-column:span 2} }
@media (max-width:900px){ .d-hero__g,.d-cab,.d-duo{grid-template-columns:1fr} .d-menu{display:none}
  .d-hero__f{min-height:280px} }
@media (max-width:640px){ .d-grade{grid-template-columns:1fr}
  .d-card,.d-card:nth-child(n){grid-column:1/-1} }
@media (max-width:560px){
  .d-topo__i{gap:10px; padding-left:16px}
  .d-logo__n{font-size:18px} .d-logo__s{display:none}
  .d-dados{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  #site-d .rv{transform:none !important}
  .d-btn,.d-card,.d-faq__m{transition:none}
}

/* ==========================================================================
   HERO DO BENTO — A PROPRIA GRADE
   Aqui a hero NAO e texto de um lado e foto do outro: ela e um bento de
   seis pecas de tamanhos diferentes, e o titulo e apenas uma delas. E a
   diferenca estrutural que separa esta versao da Marcante.
   Movimento: as pecas estalam para dentro uma a uma, e o titulo entra
   palavra por palavra em vez de letra por letra.
   ========================================================================== */
.d-hero{padding:clamp(18px,3.5vw,34px) 0 var(--padSecD)}
.d-bento{display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(96px,auto); gap:14px}
.d-peca{border-radius:var(--r); padding:24px 24px 26px; background:var(--branco);
  opacity:0; transform:scale(.9) translateY(16px);
  animation:dEstala .6s cubic-bezier(.2,.9,.3,1.2) forwards}
.d-peca--tit{grid-column:span 4; grid-row:span 2; background:var(--amar);
  display:flex; flex-direction:column; justify-content:center; animation-delay:.05s}
.d-peca--foto{grid-column:span 2; grid-row:span 3; padding:0; overflow:hidden;
  position:relative; background:var(--azul); animation-delay:.15s}
.d-peca--foto img{display:block; width:100%; height:100%; object-fit:cover; min-height:260px}
.d-peca--foto .d-etq{position:absolute; left:14px; bottom:14px; background:var(--branco)}
.d-peca--lead{grid-column:span 4; animation-delay:.25s}
.d-peca--cta{grid-column:span 2; display:flex; flex-direction:column; gap:10px;
  justify-content:center; background:var(--ink); animation-delay:.35s}
.d-peca--cta .d-btn{width:100%}
.d-peca--n1{grid-column:span 2; background:var(--verde); color:#fff; animation-delay:.45s}
.d-peca--n1 .d-dado__r{color:rgba(255,255,255,.88)}
.d-peca--n2{grid-column:span 2; background:var(--lar); color:#fff; animation-delay:.55s}
.d-peca--n2 .d-dado__r{color:rgba(255,255,255,.88)}
@keyframes dEstala{ to{opacity:1; transform:none} }
.d-hero .d-rot{margin-bottom:14px; background:var(--branco)}
.d-hero .d-h1{font-size:clamp(30px,5vw,54px); margin:0}
.d-hero .d-lead{margin:0; font-size:16.5px}
.d-hero .d-dado__v{font-size:19px}

/* a palavra estala junto com a peca */
#site-d .escrevendo-p .wrd{display:inline-block; opacity:0;
  transform:translateY(.4em) scale(.92);
  animation:dPalavra .5s cubic-bezier(.2,.9,.3,1.25) forwards;
  animation-delay:calc(.25s + var(--i) * 65ms)}
@keyframes dPalavra{ to{opacity:1; transform:none} }

@media (max-width:900px){
  .d-bento{grid-template-columns:repeat(4,1fr)}
  .d-peca--tit{grid-column:span 4; grid-row:span 1}
  .d-peca--foto{grid-column:span 4; grid-row:span 1}
  .d-peca--foto img{min-height:230px}
  .d-peca--lead,.d-peca--cta,.d-peca--n1,.d-peca--n2{grid-column:span 4}
}
@media (max-width:560px){ .d-bento{grid-template-columns:1fr; gap:10px}
  .d-peca,.d-peca--tit,.d-peca--foto,.d-peca--lead,.d-peca--cta,.d-peca--n1,.d-peca--n2{grid-column:1/-1} }

/* ==========================================================================
   HERO: A "PRANCHA" BRANCA EM CIMA DA FOTO
   A etiqueta tinha "top" vindo da regra antiga e "bottom" vindo da regra
   nova. Com os dois lados presos, ela esticava da borda de cima ate a de
   baixo e virava uma faixa branca atravessando a foto.
   ========================================================================== */
.d-peca--foto .d-etq{top:auto; right:auto; height:auto}

/* ==========================================================================
   COR DO TEXTO DOS BOTOES — CORRECAO DE PESO DE REGRA
   "#site-d a{color:var(--ink)}" tem especificidade (1,0,1) e vencia
   ".d-btn{color:var(--branco)}", que tem (0,1,0). O botao preto ficava com
   texto preto e sumia por inteiro.
   ========================================================================== */
#site-d a.d-btn{color:var(--branco)}
#site-d a.d-btn--a1,#site-d a.d-btn--br{color:var(--ink)}
#site-d a.d-btn--a2,#site-d a.d-btn--ink{color:var(--branco)}
#site-d a.d-btn:hover,#site-d a.d-btn:focus-visible{text-decoration:none}

/* ==========================================================================
   CARTOES DO BENTO — TAMANHO E COR POR CLASSE, NAO POR POSICAO
   Antes tamanho e cor vinham de :nth-child(). Como uma das grades tem um
   destaque como primeiro filho e a outra nao, a contagem escorregava: o
   cartao colorido caia no lugar errado, as linhas da grade ficavam com
   buraco e, na secao escura, o texto claro herdado da secao acabava em
   cima de um fundo amarelo e sumia.
   Agora cada cartao declara no HTML o tamanho e a cor que tem, e as
   sequencias foram escolhidas para fechar linhas inteiras de 6 colunas:
       6 cartoes -> 4+2 / 2+4 / 3+3
       5 cartoes -> 3+3 / 2+2+2
   Sem prefixo de id de proposito: assim as regras de celular, que sao mais
   especificas, continuam ganhando e derrubando tudo para 1 coluna.
   ========================================================================== */
.d-card--g{grid-column:span 4}
.d-card--m{grid-column:span 3}
.d-card--p{grid-column:span 2}

/* A cor do texto acompanha o FUNDO DO CARTAO, nunca o fundo da secao.
   O contexto ".d-sec--esc" e repetido nas regras de fundo porque a regra
   que pinta o cartao da secao escura e mais especifica: sem repetir, o
   cartao de destaque ficava cinza dentro dela. */
#site-d .d-card--am,#site-d .d-sec--esc .d-card--am{background:var(--amar)}
#site-d .d-card--am,#site-d .d-card--am .d-card__h{color:var(--ink)}
#site-d .d-card--am .d-card__n,#site-d .d-card--am .d-card__p{color:rgba(22,22,26,.74)}
#site-d .d-card--vd,#site-d .d-sec--esc .d-card--vd{background:var(--verde)}
#site-d .d-card--vd,#site-d .d-card--vd .d-card__h{color:#fff}
#site-d .d-card--vd .d-card__n,#site-d .d-card--vd .d-card__p{color:rgba(255,255,255,.92)}

/* ==========================================================================
   O CARTAO PRECISA APARECER
   O fundo da pagina era #F2F2EF e o cartao branco: 1,5% de diferenca, o que
   fazia o cartao parecer colado no fundo. O fundo desce um tom e o cartao
   ganha uma sombra solida fina, que ja e o repouso do gesto de empurrar
   descrito abaixo.
   ========================================================================== */
#site-d{--bg:#E7E7E0; --repouso:rgba(22,22,26,.13); --emp:var(--ink)}
html[data-site="d"] body{background:#E7E7E0}
#site-d .d-sec--esc{background:var(--ink); --repouso:rgba(255,255,255,.16); --emp:#FFFFFF}
#site-d .d-sec--esc .d-card{background:#26262F}
#site-d .d-sec--acc{--repouso:rgba(22,22,26,.2); --emp:var(--ink)}

/* ==========================================================================
   INTERACAO DA VERSAO BENTO — O EMPURRAO DA MARCANTE
   E a mesma gramatica da Marcante, que e a que mais agrada: a peca sobe e
   vai para a esquerda no hover, deixando uma sombra solida atras, e afunda
   no clique. Combina com o Bento porque aqui tudo ja e bloco chapado.
   A cor da sombra e variavel (--emp) porque em secao escura sombra preta
   nao aparece: la ela vira branca.
   ========================================================================== */
.d-card{box-shadow:3px 3px 0 var(--repouso);
  transition:transform .15s ease, box-shadow .15s ease}
.d-card:hover{transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--emp)}
.d-card:active{transform:translate(1px,1px); box-shadow:2px 2px 0 var(--emp)}

.d-btn{box-shadow:3px 3px 0 var(--emp);
  transition:transform .14s ease, box-shadow .14s ease, filter .16s ease}
.d-btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--emp)}
.d-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--emp)}
.d-btn--p{box-shadow:2px 2px 0 var(--emp)}
.d-btn--p:hover{box-shadow:4px 4px 0 var(--emp)}
/* botao preto sobre fundo claro: a sombra preta sumiria nele mesmo */
#site-d .d-btn--ink,#site-d .d-btn--a2{--emp:var(--lar)}
/* dentro do destaque azul e da peca preta da hero, sombra clara */
#site-d .d-dest .d-btn,#site-d .d-peca--cta .d-btn{--emp:rgba(255,255,255,.55)}

.d-etq{transition:transform .14s ease, box-shadow .14s ease}
.d-etq:hover{transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--emp)}

.d-faq details{transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:3px 3px 0 var(--repouso)}
.d-faq details:hover,.d-faq details[open]{transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--emp)}

@media (prefers-reduced-motion: reduce){
  .d-card,.d-btn,.d-etq,.d-faq details{transition:none}
  .d-card:hover,.d-btn:hover,.d-etq:hover,.d-faq details:hover,
  .d-faq details[open]{transform:none}
}

/* ==========================================================================
   TESTE — BOTAO E CARTAO DE PIGMENTO, NA BENTO
   Reproducao do modelo pedido. Ele depende de tres camadas encaixadas:
     - a de fora (.d-btn / .d-card) carrega a sombra em degraus e o
       deslocamento de -4px, que e o que faz a peca parecer levantada;
     - a do meio (__i) carrega a cor e a textura de bolinhas que corre;
     - a de dentro (__t) carrega o texto, com um brilho de 1px em cima.
   A sombra e uma pilha de sombras solidas de meio em meio pixel: e isso
   que cria a impressao de espessura continua em vez de um degrau so. A
   segunda metade da pilha repete tudo com 2px de espalhamento na cor
   clara, formando o contorno branco por fora do preto.
   No hover a peca volta para o lugar (translate 0,0) e a pilha inteira
   some, sobrando so o contorno claro: a peca "assenta" no papel.
   Tudo daqui para baixo pode ser removido inteiro sem tocar no resto.
   ========================================================================== */
#site-d{
  --stone-50:#fafaf9;
  --stone-800:#292524;
  --yellow-400:#facc15;
}
@keyframes dPigmento{
  0%  {background-position:0 0, 4px 4px}
  100%{background-position:8px 0, 12px 4px}
}

/* ---------- a pilha de sombras, usada pelo botao e pelo cartao ---------- */
#site-d .d-btn,
#site-d .d-card{
  padding:1px;
  border:0;
  background:var(--stone-800);
  background-image:none;
  color:var(--stone-800);
  transform:translate(-4px,-4px);
  outline:2px solid transparent;
  outline-offset:5px;
  transition:transform 150ms ease, box-shadow 150ms ease;
  box-shadow:
    0.5px 0.5px 0 0 var(--stone-800),
    1px 1px 0 0 var(--stone-800),
    1.5px 1.5px 0 0 var(--stone-800),
    2px 2px 0 0 var(--stone-800),
    2.5px 2.5px 0 0 var(--stone-800),
    3px 3px 0 0 var(--stone-800),
    0 0 0 2px var(--stone-50),
    0.5px 0.5px 0 2px var(--stone-50),
    1px 1px 0 2px var(--stone-50),
    1.5px 1.5px 0 2px var(--stone-50),
    2px 2px 0 2px var(--stone-50),
    2.5px 2.5px 0 2px var(--stone-50),
    3px 3px 0 2px var(--stone-50),
    3.5px 3.5px 0 2px var(--stone-50),
    4px 4px 0 2px var(--stone-50);
}
#site-d .d-btn:hover,
#site-d .d-card:hover{
  transform:translate(0,0);
  box-shadow:0 0 0 2px var(--stone-50);
}
#site-d .d-btn:active,#site-d .d-btn:focus-visible,
#site-d .d-card:focus-within{outline-color:var(--yellow-400)}
#site-d .d-btn:focus-visible{outline-style:dashed}

/* ---------- a camada do meio: cor + bolinhas correndo ---------- */
#site-d .d-btn__i,
#site-d .d-card__i{
  position:relative;
  display:block;
  pointer-events:none;
  border:2px solid rgba(255,255,255,.3);
  overflow:hidden;
}
#site-d .d-btn__i::before,
#site-d .d-card__i::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  opacity:.5;
  background-image:
    radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%),
    radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
  background-position:0 0, 4px 4px;
  background-size:8px 8px;
  mix-blend-mode:hard-light;
  animation:dPigmento .5s infinite linear;
}

/* ---------- o botao ---------- */
#site-d .d-btn{
  font-size:1rem; font-weight:bold; line-height:1;
  border-radius:9999px; text-align:center; cursor:pointer;
}
#site-d a.d-btn,#site-d button.d-btn,
#site-d a.d-btn--a1,#site-d a.d-btn--a2,
#site-d a.d-btn--br,#site-d a.d-btn--ink{color:var(--stone-800)}
#site-d .d-btn__i{background:var(--yellow-400); border-radius:9999px}
#site-d .d-btn__t{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:.75rem 1.25rem; gap:.25rem;
  filter:drop-shadow(0 -1px 0 rgba(255,255,255,.25));
}
#site-d .d-btn:active .d-btn__t{transform:translateY(2px)}
#site-d .d-btn--p{font-size:.875rem}
#site-d .d-btn--p .d-btn__t{padding:.55rem .95rem}

/* ---------- o cartao ---------- */
/* Canto arredondado do bento, e nao pilula: pilula em bloco de texto
   comeria as quinas da primeira e da ultima linha. */
#site-d .d-card{border-radius:var(--r); font-weight:400}
#site-d .d-card__i{border-radius:calc(var(--r) - 3px); padding:26px 24px 28px}

/* A cor sai da camada de fora (que agora e o quadro escuro) e passa para
   a camada do meio. A ordem destas quatro regras importa: as de destaque
   vem por ultimo para continuarem valendo dentro da secao escura. */
#site-d .d-card__i{background:var(--branco)}
#site-d .d-sec--esc .d-card__i{background:#26262F}
#site-d .d-card--am .d-card__i{background:var(--yellow-400)}
#site-d .d-card--vd .d-card__i{background:var(--verde)}

/* o quadro escuro vale em qualquer secao, inclusive na escura, onde as
   regras de fundo do cartao eram mais especificas */
#site-d .d-card,#site-d .d-card--am,#site-d .d-card--vd,
#site-d .d-sec--esc .d-card,
#site-d .d-sec--esc .d-card--am,
#site-d .d-sec--esc .d-card--vd{background:var(--stone-800)}

@media (prefers-reduced-motion: reduce){
  #site-d .d-btn,#site-d .d-card{transition:none}
  #site-d .d-btn:hover,#site-d .d-card:hover{transform:translate(-4px,-4px)}
  #site-d .d-btn__i::before,#site-d .d-card__i::before{animation:none}
}

/* ==========================================================================
   AJUSTES DO PIGMENTO
   Quatro correcoes em cima do bloco acima.

   1. A CAMADA DE DENTRO NAO ESTICAVA.
      O cartao e um item de grade e cresce ate a altura da linha, mas a
      camada colorida so tinha a altura do proprio texto. Sobrava o quadro
      escuro aparecendo por baixo, em faixa, nos cartoes mais curtos da
      linha. Agora o cartao e uma coluna flexivel e a camada de dentro
      ocupa o que sobrar.

   2. AS BOLINHAS PASSAVAM POR CIMA DA ESCRITA.
      No modelo original o texto fica numa camada propria, posicionada,
      que sobe acima do padrao. Nos cartoes o texto era filho comum e nao
      posicionado, entao o padrao pintava por cima dele - por isso os
      titulos da secao escura sumiram e o texto do cartao amarelo ficou
      sujo. Agora tudo que e filho da camada colorida sobe para cima do
      padrao.

   3. O PADRAO SO FICA ONDE ELE FUNCIONA.
      Bolinha branca em cima de cartao branco nao aparece, e em cima de
      cartao escuro vira uma grade pesada que briga com a leitura. O
      pigmento fica nos cartoes de cor cheia - o amarelo e o verde - que e
      onde ele faz o efeito do modelo. Nos demais fica so o quadro e a
      sombra, que e a parte estrutural.

   4. A REBARBA DOS DOIS BOTOES DA HERO.
      Naquela peca os botoes ocupam a largura toda, mas a pilula de dentro
      so tinha a largura do texto: sobrava o contorno claro esticado em
      volta de uma pilula pequena. A camada de dentro passa a acompanhar a
      largura da de fora.
   ========================================================================== */

/* 1 */
#site-d .d-card{display:flex; flex-direction:column}
#site-d .d-card__i{flex:1 1 auto; display:flex; flex-direction:column}

/* 2 */
#site-d .d-card__i > *{position:relative; z-index:1}
#site-d .d-btn__t{z-index:1}

/* 3 */
#site-d .d-card__i::before{content:none}
#site-d .d-card--am .d-card__i::before,
#site-d .d-card--vd .d-card__i::before{content:""}

/* 4 */
#site-d .d-btn{align-items:stretch}
#site-d .d-btn__i{flex:1 1 auto; min-width:0}

/* ==========================================================================
   O DESTAQUE DA HERO APARECE JUNTO COM A ESCRITA
   O trecho destacado do titulo e um <span> unico com cor de fundo. O fundo
   e do span, e quem entra aos poucos sao as palavras DENTRO dele - entao a
   faixa colorida ja estava desenhada na tela antes de existir texto nela, e
   as palavras iam se encaixando num lugar que ja estava pintado.

   A correcao tira a cor do span e passa para cada palavra. Como cada
   palavra ja entra com seu proprio atraso, a faixa se forma junto com o
   texto, no mesmo ritmo.

   O par padding/margem existe para o desenho nao mexer no texto: o recuo
   pinta um pouco alem de cada palavra e a margem negativa devolve
   exatamente o mesmo tanto, entao a linha quebra igual a antes. E o recuo
   e maior que um espaco, entao as faixas de duas palavras vizinhas se
   encostam e formam uma faixa continua em vez de retangulos soltos.

   Sem JavaScript nada disso acontece: a classe .escrevendo-p so existe
   quando o script rodou, e ai o destaque antigo continua valendo.
   ========================================================================== */
/* ---- Bento ---- */
#site-d .escrevendo-p .d-mk{background:none; padding:0}
#site-d .escrevendo-p .d-mk .wrd{
  background:var(--amar);
  border-radius:6px;
  padding:.05em .16em;
  margin:0 -.16em;
}
#site-d .escrevendo-p .d-mk--3 .wrd{background:var(--verde)}

/* ==========================================================================
   TEXTO DOS CARTOES DA BENTO — SEMPRE ESCURO
   Duas coisas se somavam.

   A primeira: o bloco do pigmento definiu "color" no proprio cartao, e
   essa regra tem prefixo de id. Ela passou a ganhar da regra da secao
   escura, que era quem pintava o texto de claro la dentro. Resultado: na
   secao "A consulta" o cartao continuou escuro mas o texto virou escuro
   tambem, e nao dava para ler nada.

   A segunda: o cartao verde tinha texto branco por decisao antiga, o que
   deixava a secao com dois tratamentos diferentes lado a lado.

   A saida e a mesma para os dois casos: o texto do cartao e sempre
   escuro, e por isso o cartao tem que ser sempre claro - inclusive na
   secao escura, onde ele passa a ser branco. O quadro escuro com o
   contorno claro em volta continua sendo o que separa o cartao do fundo
   preto da secao, entao o desenho nao se perde.
   ========================================================================== */

/* ---- na secao escura o cartao clareia; os de destaque mantem a cor ---- */
#site-d .d-sec--esc .d-card__i{background:var(--branco)}
#site-d .d-card--am .d-card__i{background:var(--yellow-400)}
#site-d .d-card--vd .d-card__i{background:var(--verde)}

/* ---- e o texto e escuro em todos eles ---- */
#site-d .d-card,
#site-d .d-card .d-card__h{color:var(--ink)}
#site-d .d-card .d-card__n,
#site-d .d-card .d-card__p{color:var(--mut)}

/* Nos cartoes de cor cheia o cinza de apoio some: ali o texto secundario
   e o proprio preto rebaixado, que continua bem acima do minimo de
   leitura (preto sobre o verde da 8,2:1 e sobre o amarelo da 12,6:1). */
#site-d .d-card--vd .d-card__n,
#site-d .d-card--vd .d-card__p{color:rgba(0,0,0,.74)}
#site-d .d-card--am .d-card__n,
#site-d .d-card--am .d-card__p{color:rgba(22,22,26,.74)}

/* ==========================================================================
   PIGMENTO TAMBEM NOS CARTOES CLAROS
   O padrao do modelo e feito de bolinhas BRANCAS. Em cima do amarelo e do
   verde elas clareiam a cor e o desenho aparece; em cima de um cartao
   branco nao ha o que clarear, e por isso o pigmento tinha sido desligado
   nesses cartoes.

   A cor escolhida para eles e a propria tinta do quadro do cartao, a
   mesma que desenha a moldura escura, so que bem diluida. E uma escolha
   de familia e nao uma cor nova: o cartao claro fica com a textura no
   mesmo tom que ja o contorna, entao o padrao pertence a peca em vez de
   competir com ela.

   A diluicao foi calibrada para ficar entre dois erros. Muito fraca e o
   padrao some no branco, que era o problema. Muito forte e ele vira um
   fundo cinza atras do texto e rouba a leitura do titulo. Em 10% e 13% a
   bolinha fica com o tom do papel da propria pagina - da para ver que ha
   textura, sem que ela dispute com o que esta escrito.

   Nao ha mais cartao escuro na versao, entao o padrao volta a valer para
   todos; muda so quem clareia e quem escurece.
   ========================================================================== */

/* volta a valer em todos os cartoes */
#site-d .d-card__i::before{content:""}

/* cartao claro: bolinha de tinta diluida, sem mistura de camada */
#site-d .d-card__i::before{
  opacity:1;
  mix-blend-mode:normal;
  background-image:
    radial-gradient(rgb(41 37 36 / 10%) 20%, transparent 20%),
    radial-gradient(rgb(41 37 36 / 13%) 20%, transparent 20%);
}

/* cartao de cor cheia: segue o modelo, bolinha branca clareando a cor */
#site-d .d-card--am .d-card__i::before,
#site-d .d-card--vd .d-card__i::before{
  opacity:.5;
  mix-blend-mode:hard-light;
  background-image:
    radial-gradient(rgb(255 255 255 / 80%) 20%, transparent 20%),
    radial-gradient(rgb(255 255 255 / 100%) 20%, transparent 20%);
}

/* ==========================================================================
   TEMA DA MARCA - BENTO
   O padrao continua sendo o que esta em #site-d. Este bloco troca so as
   cores, e ganha por causa do seletor de atributo.
   ========================================================================== */
#site-d[data-tema="marca"]{
  --ink:#3A2320; --bg:#F2E2E2; --branco:#FFFFFF;
  --lar:#8A5548; --azul:#A8828C; --verde:#B4B49C; --amar:#EFD9C0;
  --mut:#6B4F4A;
  --stone-800:#3A2320; --stone-50:#FDF9F8; --yellow-400:#F0D8DC;
  --repouso:rgba(58,35,32,.14); --emp:#3A2320}
html[data-site="d"] #site-d[data-tema="marca"]{background:#F2E2E2}