/* Prima sezione: proposta 1, Tifoseria. */
#inizio {
  display: grid;
  align-items: center;
  height: auto;
  min-height: max(36rem, calc(100svh - 126px));
  max-height: none;
  max-width: none;
  margin: 0;
  padding: 52px 3.5% 88px;
  background: #260304;
  isolation: isolate;
}
#inizio .hero-photo {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--slide-position, center 42%);
}
#inizio .hero-shade {
  background: linear-gradient(90deg, #1b0303db 0%, #240203a3 31%, #2402031c 65%, transparent 100%),
    linear-gradient(0deg, #160303b3, transparent 34%);
}
#inizio .hero-copy {
  position: relative;
  inset: auto;
  z-index: 1;
  width: 100%;
}
#inizio .hero-label {
  max-width: 42rem;
  padding: 0;
  margin-bottom: 18px;
  background: none;
  color: white;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.5;
}
#inizio h1 {
  max-width: none;
  font-size: clamp(5rem, 9.8vw, 10.5rem);
  letter-spacing: -.035em;
  line-height: .91;
  text-shadow: none;
}
#inizio h1 span { display: inline-block; }
#inizio .hero-copy .button {
  min-height: 54px;
  margin-top: 30px;
  padding: 15px 25px;
  gap: 22px;
  font-size: 1rem;
}
#inizio .hero-bottom {
  inset: auto 3.5% 22px;
  z-index: 1;
  justify-content: space-between;
  gap: 22px;
}
#inizio .hero-caption {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .15em;
}
#inizio .hero-caption::before {
  content: '';
  width: 8px;
  height: 3px;
  flex-shrink: 0;
  background: var(--yellow);
}
#inizio .slider-controls { width: auto; gap: 0; flex-shrink: 0; }
#inizio .slide-index {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#inizio .slide-dots { gap: 8px; margin: 0; }
#inizio .slide-dots button { width: 36px; height: 44px; }
#inizio .slide-dots button::after { height: 4px; background: #fff; }
#inizio .slide-dots button[aria-pressed=true]::after { background: var(--yellow); }
#inizio .slide-dots button:hover::after { background: var(--yellow); }
@media (max-width: 900px) {
  #inizio { min-height: max(36rem, calc(100svh - 109px)); padding: 64px 4% 94px; }
  #inizio h1 { font-size: clamp(4.7rem, 11.5vw, 7.5rem); }
  #inizio .hero-bottom { left: 4%; right: 4%; }
}
@media (max-width: 600px) {
  #inizio { min-height: max(35rem, calc(100svh - 101px)); padding: 66px 23px 98px; }
  #inizio .hero-photo { object-position: 64% center; }
  #inizio .hero-shade {
    background: linear-gradient(90deg, #190303b3, #27030345 85%), linear-gradient(0deg, #160303c9, transparent 48%);
  }
  #inizio .hero-label { font-size: .75rem; letter-spacing: .1em; margin-bottom: 20px; }
  #inizio h1 { font-size: clamp(3.25rem, 16vw, 5.5rem); line-height: .95; }
  #inizio .hero-copy .button { min-height: 50px; padding: 13px 20px; margin-top: 27px; font-size: 1rem; }
  #inizio .hero-bottom { left: 23px; right: 23px; bottom: 20px; gap: 14px; }
  #inizio .hero-caption { font-size: .75rem; letter-spacing: .06em; gap: 8px; max-width: 65%; }
  #inizio .slide-dots { gap: 6px; }
  #inizio .slide-dots button { width: 28px; }
}