/* Alternative anniversary composition, selected with ?hero=aniversario. */
:root[data-hero="aniversario"] .hero-image {
  background-image: url('assets/hero-anniversary-gold-v3.png');
  background-position: center center;
}
:root[data-hero="aniversario"] .hero-shade {
  background: linear-gradient(90deg, #03040565, transparent 55%), linear-gradient(0deg, #03040570, transparent 28%);
}
:root[data-hero="aniversario"] .hero h1 em { color: #dfb777; }
:root[data-hero="aniversario"] .anniversary-mark { display: none; }

@media (max-width: 1100px) and (min-width: 1001px) {
  :root[data-hero="aniversario"] .hero h1 { font-size: 90px; }
  :root[data-hero="aniversario"] .hero-copy { max-width: 460px; }
}
@media (max-width: 1000px) {
  :root[data-hero="aniversario"] .hero,
  :root[data-hero="aniversario"] .hero-inner { min-height: 0; }
  :root[data-hero="aniversario"] .hero { background: #030405; }
  :root[data-hero="aniversario"] .hero-image {
    bottom: auto;
    height: 320px;
    background-size: auto 100%;
    background-position: right center;
    opacity: 1;
    transform: none;
    animation: none;
  }
  :root[data-hero="aniversario"] .hero-shade {
    bottom: auto;
    height: 322px;
    background: linear-gradient(0deg, #030405, transparent 23%);
  }
  :root[data-hero="aniversario"] .hero-inner {
    padding-top: 330px;
    padding-bottom: 65px;
    align-items: flex-start;
  }
  :root[data-hero="aniversario"] .hero h1 { font-size: 84px; }
  :root[data-hero="aniversario"] .hero-copy { max-width: none; }
  :root[data-hero="aniversario"] .hero .eyebrow { margin-bottom: 18px; }
  :root[data-hero="aniversario"] .hero-lead { margin-top: 19px; }
  :root[data-hero="aniversario"] .hero-actions { margin-top: 22px; }
}
@media (max-width: 560px) {
  :root[data-hero="aniversario"] .hero-image {
    inset: 0;
    height: auto;
    background-image: url('assets/hero-anniversary-mobile-v4.png');
    background-size: 100% auto;
    background-position: center top;
  }
  :root[data-hero="aniversario"] .hero-shade {
    inset: 0;
    height: auto;
    background: linear-gradient(0deg, #03040555, transparent 30%);
  }
  /* Leaves room for the scroll cue below the CTA. */
  :root[data-hero="aniversario"] .hero-inner { padding-top: 90vw; padding-bottom: 74px; }
  :root[data-hero="aniversario"] .hero h1 { font-size: clamp(66px, 18.5vw, 76px); }
  :root[data-hero="aniversario"] .hero .eyebrow { margin-bottom: 15px; }
  :root[data-hero="aniversario"] .hero-lead { margin-top: 17px; }
  :root[data-hero="aniversario"] .hero-actions { margin-top: 21px; }
}
@media (max-width: 360px) {
  :root[data-hero="aniversario"] .hero-inner { padding-bottom: 70px; }
  :root[data-hero="aniversario"] .hero h1 { font-size: 62px; }
  :root[data-hero="aniversario"] .hero .eyebrow { margin-bottom: 13px; }
  :root[data-hero="aniversario"] .hero-lead { margin-top: 13px; }
  :root[data-hero="aniversario"] .hero-actions { margin-top: 17px; }
  :root[data-hero="aniversario"] .hero-actions .button { min-height: 44px; }
}