/*
 * Dra. Lidiane Sena — Blog Hero 1.2.16
 * Correção isolada para /blog/.
 * Não altera Home, Hero mobile da Home, artigos, site.css, tema cadastrado ou banco.
 */

/* Hero do Blog com a mesma linguagem cromática da identidade principal. */
.blog-hero{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(to bottom,transparent 0 calc(100% - 3rem),#fff 100%),
    radial-gradient(circle at 18% 14%,color-mix(in srgb,var(--accent) 13%,transparent) 0%,transparent 28%),
    linear-gradient(135deg,
      color-mix(in srgb,var(--brand-main) 92%,var(--brand-dark)) 0%,
      var(--brand-main) 48%,
      color-mix(in srgb,var(--brand-main) 82%,var(--brand-soft)) 100%)!important;
  padding-bottom:124px!important;
  color:#fff!important;
}

/* Curvas finas, abstratas e discretas, seguindo a proposta visual da Home. */
.blog-hero::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  width:min(1050px,82vw)!important;
  height:min(680px,58vw)!important;
  right:-18vw!important;
  top:-29vw!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:.72!important;
  transform:rotate(-9deg)!important;
  background:
    radial-gradient(ellipse at center,
      transparent 0 53.2%,
      color-mix(in srgb,var(--accent) 28%,transparent) 53.35% 53.55%,
      transparent 53.7% 62.2%,
      color-mix(in srgb,#fff 17%,transparent) 62.35% 62.52%,
      transparent 62.7% 72.1%,
      color-mix(in srgb,var(--accent) 18%,transparent) 72.22% 72.38%,
      transparent 72.55% 100%)!important;
}

.blog-hero::after{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  width:min(820px,72vw)!important;
  height:min(520px,46vw)!important;
  left:-27vw!important;
  bottom:-30vw!important;
  border-radius:50%!important;
  pointer-events:none!important;
  opacity:.52!important;
  filter:none!important;
  transform:rotate(12deg)!important;
  background:
    radial-gradient(ellipse at center,
      transparent 0 58%,
      color-mix(in srgb,#fff 13%,transparent) 58.15% 58.35%,
      transparent 58.55% 69%,
      color-mix(in srgb,var(--accent) 18%,transparent) 69.15% 69.35%,
      transparent 69.55% 100%)!important;
}

.blog-hero .shell{
  position:relative!important;
  z-index:2!important;
}
.blog-hero .eyebrow{
  color:color-mix(in srgb,#fff 78%,var(--accent))!important;
}
.blog-hero h1{
  color:#fff!important;
  text-shadow:0 1px 0 rgba(0,0,0,.05)!important;
}
.blog-hero .lead{
  color:rgba(255,255,255,.84)!important;
}

/* O header é transparente no topo; no Blog ele precisa permanecer legível sobre o novo Hero. */
.site-header:not(.is-scrolled) .brand-copy strong,
.site-header:not(.is-scrolled) .brand-copy small,
.site-header:not(.is-scrolled) .desktop-nav a{
  color:#fff!important;
}
.site-header:not(.is-scrolled) .desktop-nav a::after{
  background:color-mix(in srgb,#fff 74%,var(--accent))!important;
}
.site-header:not(.is-scrolled) .menu-toggle span{
  background:#fff!important;
}
.site-header:not(.is-scrolled) .desktop-cta{
  box-shadow:0 10px 30px rgba(0,0,0,.08)!important;
}

@media (max-width:800px){
  .blog-hero{
    padding-top:128px!important;
    padding-bottom:110px!important;
  }
  .blog-hero::before{
    width:620px!important;
    height:440px!important;
    right:-330px!important;
    top:-190px!important;
    opacity:.68!important;
  }
  .blog-hero::after{
    width:520px!important;
    height:360px!important;
    left:-330px!important;
    bottom:-235px!important;
    opacity:.42!important;
  }
}

@media (max-width:560px){
  .blog-hero{
    padding-top:108px!important;
    padding-bottom:102px!important;
  }
  .blog-hero h1{
    font-size:clamp(2.5rem,12vw,3.65rem)!important;
    max-width:10ch!important;
  }
  .blog-hero .lead{
    font-size:.98rem!important;
    line-height:1.62!important;
    max-width:34ch!important;
  }
}