/* Fondo ambiental: tarde, tribunales y biblioteca, bajo una capa de lectura. */
.hero {
  background: #d7d9d5;
  --reading-left: max(56px, calc((100% - 1280px) / 2));
  --reading-width: min(780px, 74vw);
}
.hero h1 { max-width: var(--reading-width); color: #062f40; }
.hero-photo {
  background-image: url('assets/hero-oficina-tarde.webp');
  background-position: right center;
  transform-origin: 76% 52%;
  filter: saturate(.86) brightness(.91);
}
.hero-photo-next { background-image: none; opacity: 0; }
.hero-photo-court { background-position: 70% center; transform-origin: 75% 45%; filter: saturate(.76) brightness(.88); }
.hero-photo-library { background-position: right center; }
.hero-wash {
  -webkit-mask-image: none;
  mask-image: none;
  background: linear-gradient(90deg,
    rgba(221,224,218,.84) 0%,
    rgba(221,224,218,.84) calc(var(--reading-left) + var(--reading-width) + 12px),
    rgba(221,224,218,.35) calc(var(--reading-left) + var(--reading-width) + 140px),
    rgba(28,40,39,.2) 100%);
}
.hero-description { color: #264551; }
.hero-actions .text-link { color: #062f40; font-weight: 500; }
.hero-bottom > a { background: #edf0eb; }
.hero-light {
  position: absolute;
  inset: -12%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(ellipse at 76% 38%, rgba(255,221,177,.16), transparent 36%);
  mix-blend-mode: screen;
  opacity: .2;
}
.hero-motion-toggle {
  position: absolute;
  top: 104px;
  right: max(24px, calc((100% - 1360px) / 2));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(239,242,237,.94);
  border: 1px solid rgba(7,81,106,.14);
  border-radius: 999px;
  color: #315966;
}
.hero-motion-toggle svg { width: 20px; height: 20px; fill: currentColor; }
.hero-motion-toggle .hero-motion-play { display: none; }
.hero-motion-toggle[aria-pressed="true"] .hero-motion-pause { display: none; }
.hero-motion-toggle[aria-pressed="true"] .hero-motion-play { display: block; }
.hero-motion-toggle[hidden] { display: none; }
.hero-motion-toggle:hover { background: rgba(239,242,237,.9); }
@media (max-width: 1100px) { .hero { --reading-left: 36px; } }
@media (max-width: 600px) {
  .hero h1 { max-width: 100%; }
  .hero-photo { background-position: 77% center; }
  .hero-photo-court { background-position: 74% center; }
  .hero-wash { background: linear-gradient(to bottom, rgba(221,224,218,.7), rgba(221,224,218,.84) 18%, rgba(221,224,218,.84) 76%, rgba(221,224,218,.4) 92%, rgba(28,40,39,.2)); }
  .hero-motion-toggle { top: 90px; right: 20px; }
}