:root {
  --nav-row-height: 88px;
  --section-scroll-offset: 140px;
}
html {scroll-padding-top: var(--section-scroll-offset)}
.site-header {height: auto; border-bottom: 0}
.site-header .nav-shell {height: var(--nav-row-height)}
.section-location {
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid #c8dce6;
  position: relative;
}
.section-location-inner {
  width: min(1376px, calc(100% - 80px));
  min-height: 36px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  line-height: 1.4;
}
.section-location-caption {color: #637c8a; flex-shrink: 0}
.section-location a {color: var(--ink); font-weight: 600; min-width: 0}
.section-location a:hover {color: var(--blue); text-decoration: underline; text-underline-offset: 3px}
.section-location-index {
  color: #597687;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  white-space: nowrap;
  margin-left: auto;
}
.section-location-track {position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; pointer-events: none}
.section-location-track > span {
  display: block;
  width: 100%;
  height: 100%;
  background: #168fbd;
  transform: scaleX(0);
  transform-origin: left;
}
.site-header nav > a[aria-current="location"]:not(.button) {
  color: #77daf7;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 9px;
}
.site-header nav > .button[aria-current="location"] {border-color: #c2efff; background: #087bb3}

/* The same small chapter mark appears at each transition and in the header. */
main > section[data-section-title]:not(.hero) {border-top: 1px solid #c7dbe5}
main > section[data-section-tone="white"] {background: #fff}
main > section[data-section-tone="blue"] {background: #eaf3f7}
.section-number {
  display: inline-block;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid currentColor;
}
#preguntas-frecuentes {padding-top: 90px}
@media (max-width: 1150px) {
  .section-location-inner {width: calc(100% - 60px)}
}
@media (max-width: 900px) {
  :root {--nav-row-height: 76px; --section-scroll-offset: 128px}
  .site-header nav {
    top: var(--nav-row-height);
    z-index: 2;
    max-height: calc(100dvh - var(--nav-row-height));
    overflow-y: auto;
  }
}
@media (max-width: 700px) {
  :root {--nav-row-height: 72px; --section-scroll-offset: 124px}
  .section-location-inner {width: calc(100% - 40px); gap: 10px; font-size: 12px}
  .section-location-index {font-size: 12px}
  .section-number {font-size: 12px; padding-right: 9px; margin-right: 9px}
  #preguntas-frecuentes {padding-top: 66px}
}

/* Keep the expanded navigation readable before switching to a compact menu. */
@media (min-width: 1440px) {
  .site-header .nav-shell {gap: 24px}
  .site-header .brand {flex-shrink: 0}
  .site-header .brand img {width: 156px}
  .site-header nav {gap: clamp(12px, 1.2vw, 20px); font-size: 14px}
  .site-header nav > a {white-space: nowrap}
  .site-header nav > .button {padding: 12px 16px; font-size: 14px; gap: 12px}
}
@media (max-width: 1439px) {
  .site-header .menu-toggle {display: block}
  .site-header nav {
    display: none;
    position: absolute;
    top: var(--nav-row-height);
    left: 0;
    right: 0;
    z-index: 2;
    max-height: calc(100dvh - var(--nav-row-height));
    overflow-y: auto;
    background: var(--deep);
    padding: 18px 30px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid #55778a;
  }
  .site-header nav.is-open {display: flex}
  .site-header nav > a:not(.button) {padding: 12px 0; font-size: 15px}
  .site-header nav > .button {margin-top: 12px; font-size: 16px; padding: 14px 20px}
}
.solar-copy .solar-specialization-intro {color: #e0eef5; margin-bottom: 0}
.solar-copy .solar-specialization-intro + p {margin-top: 16px}