/* Pecas do blog "Diario" compartilhadas pela pagina /blog e pelo atalho da home: moldura fina com a foto ate o meio do filete, botao e abas na placa rosa, dia em caligrafia, destaque e entrada. Classes e variaveis com prefixo d- para nao colidir com o CSS da home. */
.d-feed,.d-abas,.d-btn,.d-mais,.d-topo{--d-vinho:#4a0f1f;--d-vinho-2:#7a1f3d;--d-tinta:#3b1424;--d-mudo:#7a5262;--d-fio:rgba(176,122,38,.5);--d-titulo:"Almendra Display",Georgia,serif;--d-rotulo:"Trajan Pro 3",Cinzel,Georgia,serif;--d-serif:"Cormorant Garamond",Georgia,serif;--d-script:"Pinyon Script","Snell Roundhand",cursive;--d-ease:cubic-bezier(.22,.68,.16,1)}
.d-feed,.d-feed *,.d-abas,.d-abas *{box-sizing:border-box}
.d-feed a{color:inherit;text-decoration:none}
.d-feed img{display:block;max-width:100%}
.d-cat{font:600 9.9px/1.5 var(--d-rotulo);letter-spacing:.22em;text-transform:uppercase;color:var(--d-vinho-2)}
.d-meta{font:italic 500 14.4px/1.4 var(--d-serif);color:var(--d-mudo);letter-spacing:0}
.d-vazio{text-align:center;font-style:italic;padding:27px;color:var(--d-mudo);list-style:none}
.d-q{position:relative;display:block;width:100%;aspect-ratio:1600/942}
.d-q .d-f{position:absolute;inset:6.1% 3.53% 11.41% 3.53%;overflow:hidden;background:#e8d2c4}
.d-q .d-f img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 50%);transition:transform 1s var(--d-ease)}
.d-q .d-m{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
a:hover .d-q .d-f img{transform:scale(1.04)}
.d-btn{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:0 32.4px;border-style:solid;border-width:12.6px 23.4px;border-image:url(../box-cdb8-sim.webp) 60 110 fill / 12.6px 23.4px stretch;font:600 9.5px/1 var(--d-rotulo);letter-spacing:.18em;text-transform:uppercase;color:var(--d-vinho);filter:drop-shadow(0 2.7px 4.5px rgba(74,15,31,.25));transition:transform .3s var(--d-ease)}
.d-btn:hover{transform:translateY(-1.8px)}
.d-abas{display:flex;flex-wrap:wrap;gap:5.4px 3.6px;align-items:center;justify-content:center;margin:0 0 50.4px}
.d-abas a,.d-abas span{display:inline-block;border:0;background:none;cursor:pointer;padding:10.8px 12.6px;font:600 9px/1 var(--d-rotulo);letter-spacing:.16em;text-transform:uppercase;color:var(--d-vinho-2);white-space:nowrap;border-style:solid;border-width:10.8px 19.8px;border-color:transparent;transition:color .3s}
.d-abas a:hover{color:var(--d-vinho)}
.d-abas a,.d-abas span{position:relative;font-size:10px}
.d-abas a:not([aria-pressed="true"])::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:linear-gradient(90deg,transparent,#c8902e,transparent);transform:scaleX(0);transition:transform .3s}
.d-abas a:not([aria-pressed="true"]):hover::after,.d-abas a:focus-visible::after{transform:scaleX(1)}
.d-abas [aria-pressed="true"]{color:var(--d-vinho);border-image:url(../box-cdb8-sim.webp) 60 110 fill / 10.8px 19.8px stretch;filter:drop-shadow(0 2.7px 4.5px rgba(74,15,31,.22))}
.d-feed{list-style:none;margin:0 auto;padding:0;max-width:684px;display:grid;gap:64.8px}
.d-feed>li{margin:0}
.d-dia{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12.6px;margin-bottom:19.8px}
.d-dia time{font:400 27px/1 var(--d-script);color:var(--d-vinho-2)}
.d-dia i{height:1px;background:var(--d-fio)}
.d-dia img{width:9px;height:9px}
.d-feed .d-q{filter:drop-shadow(0 10.8px 14.4px rgba(74,15,31,.2))}
.d-cabeca{display:grid;gap:9px;margin-bottom:16.2px}
.d-cabeca h2,.d-entrada h2{margin:0;letter-spacing:0;text-transform:none;text-shadow:none;font:500 clamp(23.4px,3vw,32.4px)/1.15 var(--d-serif);color:var(--d-vinho);text-wrap:balance;-webkit-text-stroke:.6px var(--d-vinho);paint-order:stroke fill}
.d-cabeca h2::first-letter,.d-entrada h2::first-letter{font-family:var(--d-titulo);font-weight:400;font-size:1.3em;line-height:.8;-webkit-text-stroke:.9px var(--d-vinho)}
.d-cabeca p,.d-entrada p{margin:0;font:italic 500 16.2px/1.45 var(--d-serif);color:#5e3a4a;letter-spacing:0;text-transform:none}
.d-rodape{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7.2px 25.2px;align-items:end;padding:3.6px 5.4px 0}
.d-rodape .d-legenda{margin:0;font:500 14.4px/1.45 var(--d-serif);color:var(--d-mudo);grid-column:1;letter-spacing:0}
.d-rodape .d-meta{grid-column:1}
.d-rodape .d-btn{grid-column:2;grid-row:1/3;align-self:end}
.d-corpo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:23.4px;align-items:center}
.d-entrada{display:grid;gap:9px;justify-items:start}
.d-entrada h2{font-size:clamp(21.6px,2.6vw,27px);-webkit-text-stroke-width:.5px}
.d-entrada p{font-size:15.3px}
.d-cabeca,.d-entrada,.d-rodape{text-align:left}
.d-entrada .d-btn{justify-self:end}
.d-paginas{justify-content:flex-end;margin:50.4px 0 0}
.d-paginas .d-pag-desligado{opacity:.35;cursor:default}
.d-paginas .d-pag-sep{width:7.2px;height:7.2px;background:url(../pt-ouro.webp) center/contain no-repeat;margin:0 1.8px}
.aviso{text-align:center;font-style:italic;color:var(--d-mudo)}
@keyframes surgir{from{opacity:0;transform:translateY(7.2px)}to{opacity:1;transform:none}}
.d-feed.d-surge{animation:surgir .32s var(--d-ease) both}
/* "Ver tudo" na home: nao repete a placa rosa do "Ler o post" logo acima; e o mesmo fio de ouro com ponto da linha de data, com o rotulo em Trajan no meio */
.d-mais{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14.4px;max-width:684px;margin:50.4px auto 0}
.d-mais::before,.d-mais::after{content:"";height:1px;background:var(--d-fio)}
.d-ver{display:inline-flex;align-items:center;gap:10.8px;padding:7.2px 3.6px;font:600 9.9px/1 var(--d-rotulo);letter-spacing:.24em;text-transform:uppercase;color:var(--d-vinho-2);text-decoration:none;transition:color .3s}
.d-ver{position:relative}.d-ver::after{content:"";position:absolute;inset:-3px 0}.d-ver img{width:9px;height:9px}
.d-ver:hover{color:var(--d-vinho)}
.d-mais.d-mais-placa{display:flex;justify-content:flex-end}
.d-mais.d-mais-placa::before,.d-mais.d-mais-placa::after{content:none}
.d-mais-fio{max-width:540px;margin-top:43.2px}
.d-mais-fio .d-ver{gap:12.6px;padding:3.6px 0;font:400 22.5px/1 var(--d-titulo);letter-spacing:.01em;text-transform:none;color:var(--d-vinho)}
.d-ver-seta{display:inline-grid;place-items:center;width:30.6px;height:30.6px;border-radius:50%;color:#b07a26;box-shadow:inset 0 0 0 1px var(--d-fio);transition:transform .3s var(--d-ease),background .3s,color .3s}
.d-mais-fio .d-ver:hover .d-ver-seta{transform:translateX(3.6px);background:rgba(176,122,38,.12);color:var(--d-vinho)}
.d-mais-fio .d-ver:focus-visible{outline:2px solid #b07a26;outline-offset:4px}
.d-mais .d-ver.d-btn{gap:0;padding:0 32.4px;font-size:9.5px;letter-spacing:.18em;color:var(--d-vinho)}
@media (max-width:600px){
  .d-abas{flex-wrap:wrap;justify-content:center;scrollbar-width:none;margin-inline:calc(-1*max(14.4px,env(safe-area-inset-left,0px))) calc(-1*max(14.4px,env(safe-area-inset-right,0px)));padding-inline:max(14.4px,env(safe-area-inset-left,0px)) max(14.4px,env(safe-area-inset-right,0px));scroll-snap-type:x proximity}
  .d-abas::-webkit-scrollbar{display:none}
  .d-abas a,.d-abas span{scroll-snap-align:start;flex:none}
  .d-paginas{justify-content:center;flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0}
  .d-feed{gap:50.4px}
  .d-dia time{font-size:23.4px}
  .d-cabeca p,.d-entrada p{font-size:15.3px}
.d-cabeca,.d-entrada,.d-rodape{text-align:left}
  .d-rodape{grid-template-columns:1fr}.d-rodape .d-btn{grid-column:1;grid-row:auto;justify-self:end}
  .d-corpo{grid-template-columns:1fr;gap:14.4px}
}
@media (prefers-reduced-motion:reduce){.d-feed.d-surge{animation:none}.d-q .d-f img,.d-btn{transition:none}}

/* Céu do site no topo fundindo no bege (vertical) e o título em ouro: a página /blog e a seção da home usam o mesmo bloco. Na home, o ::before da faixa já tem a máscara da fusão com a faixa de cima, então só o fundo muda. */
.d-ceu{--d-ceu:calc(.367*max(100vw,1040px));--d-bege:#f6e9d7}
.d-ceu::before,.sec.fx.d-ceu::before{background:linear-gradient(180deg,rgba(246,233,215,0) calc(var(--d-ceu)*.28),rgba(246,233,215,.06) calc(var(--d-ceu)*.38),rgba(246,233,215,.18) calc(var(--d-ceu)*.48),rgba(246,233,215,.36) calc(var(--d-ceu)*.58),rgba(246,233,215,.58) calc(var(--d-ceu)*.68),rgba(246,233,215,.78) calc(var(--d-ceu)*.78),rgba(246,233,215,.92) calc(var(--d-ceu)*.88),var(--d-bege) calc(var(--d-ceu)*.97)),url(../fundos/ceu-fusao-h.webp) center top/max(100%,1040px) auto no-repeat var(--d-bege)}
.d-topo{display:grid;justify-items:center;text-align:center;gap:9px;margin:0 0 25.2px}
.d-topo h1,.d-topo h2{margin:0 0 -.12em;padding:0 .08em .22em;font:400 clamp(64.8px,9.5vw,106.2px)/1 var(--d-titulo);letter-spacing:0;text-transform:none;-webkit-text-stroke:0;text-shadow:none;background:linear-gradient(180deg,#fff8e6 0%,#f7dc8f 45%,#e2b65a 70%,#fff1c2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #9a6a1e) drop-shadow(0 5.4px 12.6px rgba(74,15,31,.4))}
.d-topo p{margin:0;font:italic 500 clamp(17.1px,2vw,20.7px)/1.35 var(--d-serif);letter-spacing:0;text-transform:none;color:#fff6ee;text-shadow:0 1px 2px rgba(74,15,31,.85),0 0 16px rgba(74,15,31,.6),0 0 4px rgba(74,15,31,.5);white-space:nowrap}
/* na home o subtitulo cai na parte ja clara do ceu: vinho em vez de branco */
.sec .d-topo p{color:var(--d-vinho);text-shadow:0 1px 0 rgba(255,246,238,.5)}
@media (max-width:600px){.d-topo p{white-space:normal;text-wrap:balance}}