.site-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  position: fixed;
  inset: 0 0 auto;
  height: 72px;
  z-index: 100;
  color: #fffef4;
  background: transparent;
  border-bottom: 1px solid #ffffff40;
}
.site-header .brand { justify-self: start; }
.site-header .nav-contact { justify-self: end; }
.site-header .site-name {
  text-align: center;
  font-size: 18px;
  white-space: nowrap;
}
.site-header.is-scrolled {
  color: #272821;
  background: rgb(255 253 246 / 82%);
  backdrop-filter: blur(12px);
  border-bottom-color: #27282125;
}
.hero-header-space { height: 95px; }
section, .clinic-footer { scroll-margin-top: 72px; }
@media (min-width: 1001px) {
  #narrativa { padding: 24px 3% 16px; }
  #narrativa .story-heading { margin-bottom: 12px; gap: 24px; }
  #narrativa .story-heading h2 { font-size: 36px; line-height: 1; }
  #narrativa .story-grid { gap: 12px; grid-auto-rows: minmax(286px, auto); }
  #narrativa .story-grid > * { min-height: 0; }
  #narrativa .story-text { padding: 24px; gap: 24px; justify-content: flex-start; }
  #narrativa .story-text h3 { font-size: 28px; line-height: 1.12; margin-bottom: 20px; }
  #narrativa .story-text p { font-size: 18px; line-height: 1.5; }
}
@media (max-width: 700px) {
  .site-header { padding-inline: 24px; height: 72px; gap: 8px; }
  .site-header .site-name { font-size: 14px; }
  .site-header .nav-contact { max-width: 100%; gap: 6px; }
  .hero-header-space { height: 88px; }
}
@media print { .site-header { position: static; color: #272821; } .hero-header-space { display: none; } }
#narrativa { scroll-margin-top: 72px; }