@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Allura-Regular.ttf') format('truetype');
}

/* Portada adaptable: foto y título en una pantalla; cuenta regresiva debajo. */
.cover {
  --info-height: 200px;
  width: min(100%, 1800px);
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  background: var(--black);
}
.cover-photo {
  position: absolute;
  inset: 0 0 auto;
  height: 100svh;
  z-index: -1;
  overflow: hidden;
}
.cover-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
  transform: scale(1.14);
  transform-origin: 50% 100%;
}
.cover-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(11,10,12,.2) 65%, rgba(11,10,12,.84) 84%, var(--black) 100%);
}
.cover-title {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 22px 24px;
  color: var(--white);
}
.cover-name {
  font-family: 'Allura', cursive;
  font-size: clamp(82px, min(27vw, 15svh), 140px);
  font-weight: 400;
  line-height: .95;
  white-space: nowrap;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.cover-age {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .3em;
  padding-left: .3em;
  margin-top: 12px;
}
.cover .band {
  height: auto;
  min-height: var(--info-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0 64px;
}
.cover + #fiesta { margin-top: 0; }
.cover .countdown .lbl { color: rgba(247,242,236,.75); }
.cover .band .wrap {
  width: 100%;
}
.cover .band .fecha {
  font-size: 12px;
  letter-spacing: .17em;
  margin-bottom: 10px;
}
.cover .band .tagline {
  margin-bottom: 20px;
}
.cover .faltan {
  margin-bottom: 12px;
}
.cover .countdown {
  gap: clamp(18px, 6vw, 32px);
}
.cover .countdown .num {
  font-size: clamp(30px, 9vw, 40px);
}
footer .sig {
  font-family: 'Allura', cursive;
  font-size: 52px;
}

@media (max-width: 359px) {
  .cover .band .fecha { font-size: 10px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .cover-photo img { transform: none; }
  .cover-title { padding-bottom: 28px; }
  .cover-name { font-size: min(140px, 15svh); }
}
@media (min-width: 900px) {
  .cover {
    --info-height: 180px;
    width: 100%;
  }
  .cover-photo {
    height: 100svh;
  }
  .cover-photo img { object-position: 50% 45%; transform: none; }
  .cover-photo::after {
    background: linear-gradient(180deg, transparent 50%, rgba(11,10,12,.16) 64%, rgba(11,10,12,.8) 84%, var(--black) 100%);
  }
  .cover-title {
    height: 100svh;
    padding: 0 30px 24px;
  }
  .cover-name { font-size: clamp(88px, 14svh, 140px); }
  .cover-age { font-size: 25px; letter-spacing: .3em; margin-top: 12px; }
  .cover .band {
    padding: 28px 0 64px;
  }
  .cover .band .fecha { font-size: 12px; letter-spacing: .19em; }
  .cover .band .tagline { margin-bottom: 16px; font-size: 20px; }
  .cover .faltan { margin-bottom: 10px; }
  .cover .countdown { gap: 30px; }
  .cover .countdown .num { font-size: 40px; }
}