/* Blog (Comunicore, 15/10/2026). Só o que o CSS do site não cobre: o resto é o
   desenho de artigo que já estava em site.css (.post-layout, .post-sidebar,
   .post-related-card). Cores do site: #302858 (roxo), #d85860 (rosa), #5a5a5a. */

/* A capa do Instagram é arte em pé (4:5), com o título escrito nela: recortar
   para a faixa do cartão (11rem) apagaria o texto. O cartão do blog mostra a
   arte inteira. */
.blog-lista .post-related-card__media{height:auto;aspect-ratio:4/5;background:#f2f2f2}

.blog-capa{margin:0 0 2rem;border-radius:1rem;overflow:hidden;border:1px solid #e8e8e8;max-width:28rem}
.blog-capa__img{display:block;width:100%;height:auto}

.blog-texto{max-width:42rem;color:#4b4b4b;font-size:1.0625rem;line-height:1.75}
.blog-texto p{margin:0 0 1.15rem}
.blog-texto ul{margin:0 0 1.15rem;padding-left:1.25rem;list-style:disc}
.blog-texto li{margin:0 0 .4rem}
.blog-texto a{color:#d85860;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.blog-texto strong{color:#302858}

.blog-video{max-width:42rem;margin:0 0 1.5rem;font-weight:600}
.blog-video a{color:#d85860;text-decoration:underline;text-underline-offset:2px}
.blog-video i{color:#d85860;margin-right:.35rem}

/* Slides do carrossel: passam de lado com o dedo no celular, viram grade no
   computador; o clique abre a imagem grande. */
.blog-galeria{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 0 2rem;padding-bottom:.5rem;max-width:42rem}
.blog-galeria__item{flex:0 0 78%;scroll-snap-align:start;border-radius:.75rem;overflow:hidden;border:1px solid #e8e8e8;background:#f2f2f2}
.blog-galeria__img{display:block;width:100%;height:auto}
@media (min-width:768px){
  .blog-galeria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
  .blog-galeria__item{flex:none}
}

.blog-cta{max-width:42rem;margin:0 0 2rem;padding:1.5rem;border-radius:1rem;background:#faf3f4;border:1px solid #f1d6d9}
.blog-cta p{margin:0 0 1rem;color:#302858;font-weight:600;line-height:1.5}

.blog-assinatura{max-width:42rem;margin:0;padding-top:1rem;border-top:1px solid #e8e8e8;font-size:.875rem;color:#5a5a5a}

.page-hero--light .page-hero__eyebrow a{color:inherit}
.post-breadcrumb{max-width:72rem;margin-left:auto;margin-right:auto}

/* Banner das páginas do blog (15/10/2026): a foto do Dr. Cícero no consultório.
   No celular, como os outros banners do site (foto cobrindo, texto centralizado).
   No computador, o médico fica à direita e o texto à esquerda: a foto começa
   em 32% da largura e se dissolve no roxo do site, senão o rosto
   dele ficaria atrás do título. */
.page-hero--blog{background-color:#302858}
.page-hero--image .page-hero__eyebrow a{color:inherit}
@media (min-width:1024px){
  .page-hero--blog .page-hero__bg{width:100%;max-width:none;height:auto;inset:auto;left:32%;top:50%;transform:translateY(-34%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%);mask-image:linear-gradient(to right,transparent 0,#000 30%)}
  .page-hero--blog .page-hero__inner{margin-left:0;text-align:left;max-width:40rem}
}

/* Visualizador das artes do carrossel (15/10/2026, js/blog.js). A capa do post
   é a 1ª arte do carrossel, então ela também abre o visualizador. */
.blog-capa__link{display:block;cursor:zoom-in}
.blog-galeria__item{cursor:zoom-in}
.visor-aberto,.visor-aberto body{overflow:hidden}
.visor{position:fixed;inset:0;z-index:9999;background:rgba(24,20,48,.94);display:flex;align-items:center;justify-content:center}
.visor[hidden]{display:none}
.visor__palco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:4.5rem 1rem 4rem}
.visor__foto{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:.75rem;box-shadow:0 1.5rem 3rem rgba(0,0,0,.45);background:#f2f2f2;user-select:none;-webkit-user-drag:none}
.visor__fechar,.visor__seta{position:absolute;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:1.25rem;cursor:pointer;transition:background .15s}
.visor__fechar:hover,.visor__seta:hover{background:#d85860}
.visor__fechar:focus-visible,.visor__seta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.visor__fechar{top:1rem;right:1rem}
.visor__seta{top:50%;transform:translateY(-50%)}
.visor__seta[hidden]{display:none}
.visor__seta--anterior{left:1rem}
.visor__seta--proxima{right:1rem}
.visor__contador{position:absolute;left:0;right:0;pointer-events:none;bottom:1.25rem;margin:0;text-align:center;color:#fff;font-size:.9375rem;font-weight:600;letter-spacing:.04em}
.visor__contador[hidden]{display:none}
/* No celular as setas vão pra baixo, ao lado do contador: no meio da tela elas
   cobririam a arte, que ocupa a largura toda. */
@media (max-width:767px){
  .visor__palco{padding:4rem .75rem 5.5rem}
  .visor__seta{top:auto;bottom:.75rem;transform:none}
  .visor__seta--anterior{left:1rem}
  .visor__seta--proxima{right:1rem}
  .visor__contador{bottom:1.6rem}
}
@media (min-width:1024px){
  .visor__palco{padding:4.5rem 6rem 4rem}
  .visor__seta--anterior{left:1.5rem}
  .visor__seta--proxima{right:1.5rem}
}