.page {
  --arg-sky: #75aadb;
  --arg-sun: #f6b40e;
  background: var(--paper);
}

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
  padding-top: 92px;
  overflow: hidden;
  background: var(--ink);
  color: white;
}

.heroCopy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(62px, 8vw, 122px) clamp(28px, 6.3vw, 96px);
}

.heroTitle {
  max-width: 900px;
  margin: 0;
  font-size: clamp(4rem, 8.4vw, 9.2rem);
  line-height: .78;
  letter-spacing: -.085em;
  text-wrap: balance;
}

.heroTitle span,
.heroTitle em {
  display: block;
}

.heroTitle em {
  color: var(--arg-sky);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.heroLead {
  max-width: 690px;
  margin: 42px 0 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.heroIntro {
  max-width: 660px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 1rem;
  line-height: 1.65;
}

.heroActions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
}

.heroNote {
  margin-top: 25px;
  color: rgba(255,255,255,.58);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.heroPoster {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(34px, 5vw, 70px);
  background: var(--arg-sky);
  color: var(--ink);
}

.heroPoster::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -20%;
  background: repeating-linear-gradient(102deg, transparent 0 44px, rgba(17,17,15,.14) 45px 47px);
  transform: rotate(-5deg);
}

.posterRoute {
  align-self: flex-end;
  border: 2px solid var(--ink);
  border-radius: 99px;
  padding: 9px 13px;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.posterRoute i {
  margin: 0 9px;
  color: var(--coral);
  font-style: normal;
}

.posterCenter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(-3deg);
}

.posterCenter small {
  margin-bottom: 13px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.posterCenter strong {
  margin-left: -.08em;
  font-size: clamp(4.5rem, 8.4vw, 10rem);
  line-height: .7;
  letter-spacing: -.105em;
}

.posterCenter span {
  margin-top: 30px;
  background: var(--arg-sun);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 11px 16px 9px;
  font-size: clamp(1.4rem, 2.4vw, 2.8rem);
  font-weight: 950;
  letter-spacing: .08em;
}

.posterFooter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 22px;
  border-top: 3px solid var(--ink);
}

.posterFooter span {
  border: 1px solid var(--ink);
  border-radius: 99px;
  padding: 7px 10px;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.concept {
  background: var(--paper);
}

.conceptHeading {
  display: grid;
  grid-template-columns: .5fr 1.5fr;
  align-items: start;
  gap: clamp(45px, 8vw, 120px);
}

.conceptHeading h2 {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(3.1rem, 5.8vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.073em;
}

.conceptHeading h2 em {
  color: var(--coral);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.conceptBody {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  align-items: stretch;
  gap: clamp(34px, 6vw, 88px);
  margin-top: clamp(58px, 8vw, 105px);
}

.photoFrame {
  position: relative;
  min-height: 530px;
  margin: 0;
  overflow: hidden;
  background: var(--coral);
}

.photoFrame img {
  object-fit: cover;
  object-position: 50% center;
}

.photoFrame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(17,17,15,.7));
}

.photoFrame figcaption {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  left: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  color: white;
}

.photoFrame figcaption span {
  color: var(--acid);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.photoFrame figcaption strong {
  max-width: 250px;
  font-size: clamp(1.6rem, 2.6vw, 2.8rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-align: right;
}

.conceptCopy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.conceptCopy > p {
  margin: 0;
  color: #45433e;
  font-size: 1rem;
  line-height: 1.72;
}

.conceptCopy > p + p {
  margin-top: 24px;
}

.conceptCopy aside {
  margin-top: 42px;
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 850;
  line-height: 1.22;
  letter-spacing: -.035em;
}

.occasions {
  background: #dedbd3;
}

.sectionHeading {
  display: grid;
  grid-template-columns: .65fr 1.4fr .65fr;
  align-items: end;
  gap: 30px;
  margin-bottom: 58px;
}

.sectionHeading > p:first-child {
  align-self: start;
}

.sectionHeading h2 {
  margin: 0;
  font-size: clamp(3.2rem, 5.8vw, 6.4rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.sectionHeading h2 em {
  color: var(--coral);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.sectionHeading > p:last-child {
  max-width: 210px;
  margin: 0 0 6px auto;
  color: #55524b;
  font-size: .9rem;
  line-height: 1.55;
}

.occasionGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.occasionGrid article {
  min-height: 330px;
  padding: 27px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.occasionGrid article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.occasionGrid article > div span {
  font-size: .7rem;
  font-weight: 900;
}

.occasionGrid article small {
  border: 1px solid var(--ink);
  border-radius: 99px;
  padding: 6px 9px;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.occasionGrid h3 {
  margin: 92px 0 18px;
  font-size: clamp(1.75rem, 2.5vw, 2.8rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.occasionGrid p {
  max-width: 320px;
  margin: 0;
  color: #55524b;
  font-size: .95rem;
  line-height: 1.6;
}

.music {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: white;
}

.musicHeading {
  display: grid;
  grid-template-columns: .55fr 1.45fr .8fr;
  align-items: end;
  gap: clamp(32px, 5vw, 80px);
}

.musicHeading > p:first-child {
  align-self: start;
}

.musicHeading h2 {
  margin: 0;
  font-size: clamp(3.2rem, 6vw, 6.8rem);
  line-height: .88;
  letter-spacing: -.075em;
}

.musicHeading h2 em {
  color: var(--arg-sky);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.musicHeading > p:last-child {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: .95rem;
  line-height: 1.65;
}

.musicGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(60px, 8vw, 110px);
  border-top: 1px solid rgba(255,255,255,.45);
  border-left: 1px solid rgba(255,255,255,.45);
}

.musicGrid article {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border-right: 1px solid rgba(255,255,255,.45);
  border-bottom: 1px solid rgba(255,255,255,.45);
}

.musicGrid article > span {
  color: var(--arg-sky);
  font-size: .7rem;
  font-weight: 900;
}

.musicGrid h3 {
  margin: auto 0 18px;
  font-size: clamp(1.6rem, 2.4vw, 2.7rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.musicGrid p {
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: .92rem;
  line-height: 1.58;
}

.musicRibbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
  margin: 60px -110px -165px;
  padding: 22px 110px;
  border-top: 1px solid var(--ink);
  background: var(--arg-sky);
  color: var(--ink);
  font-size: clamp(1.05rem, 1.8vw, 1.8rem);
  font-weight: 950;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.musicRibbon i {
  color: var(--coral);
  font-size: .55em;
  font-style: normal;
}

.format {
  background: var(--acid);
}

.formatHeading {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: clamp(40px, 8vw, 120px);
}

.formatHeading h2 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(3.1rem, 5.8vw, 6.4rem);
  line-height: .91;
  letter-spacing: -.075em;
}

.formatHeading h2 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.formatGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(62px, 8vw, 100px);
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.formatGrid article {
  min-height: 250px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 26px;
  padding: 30px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.formatGrid article > span {
  font-size: .7rem;
  font-weight: 900;
}

.formatGrid h3 {
  margin: 57px 0 14px;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.formatGrid p {
  max-width: 470px;
  margin: 0;
  font-size: .94rem;
  line-height: 1.58;
}

.formatNote {
  max-width: 660px;
  margin: 33px 0 0 auto;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .musicGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 78px;
  }

  .heroCopy {
    min-height: calc(100svh - 78px);
    padding-top: 70px;
    padding-bottom: 65px;
  }

  .heroTitle {
    font-size: clamp(4rem, 18vw, 7.4rem);
  }

  .heroPoster {
    min-height: 560px;
  }

  .posterCenter strong {
    font-size: clamp(5rem, 20vw, 8.2rem);
  }

  .conceptHeading,
  .sectionHeading,
  .musicHeading,
  .formatHeading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .conceptBody {
    grid-template-columns: 1fr;
  }

  .photoFrame {
    min-height: 480px;
  }

  .sectionHeading > p:last-child {
    margin-left: 0;
  }

  .occasionGrid {
    grid-template-columns: 1fr;
  }

  .occasionGrid article {
    min-height: 280px;
  }

  .occasionGrid h3 {
    margin-top: 72px;
  }

  .formatGrid {
    grid-template-columns: 1fr;
  }

  .musicRibbon {
    margin-right: -7vw;
    margin-bottom: -11vw;
    margin-left: -7vw;
    padding-right: 7vw;
    padding-left: 7vw;
  }
}

@media (max-width: 560px) {
  .heroActions {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .heroTitle {
    font-size: clamp(3.6rem, 18vw, 5.5rem);
    line-height: .82;
  }

  .heroPoster {
    min-height: 440px;
    padding: 28px 22px;
  }

  .posterCenter strong {
    font-size: clamp(4rem, 20vw, 6.2rem);
  }

  .posterCenter span {
    box-shadow: 5px 5px 0 var(--ink);
  }

  .conceptHeading h2,
  .sectionHeading h2,
  .musicHeading h2,
  .formatHeading h2 {
    font-size: clamp(3rem, 14.5vw, 4.5rem);
  }

  .photoFrame {
    min-height: 390px;
  }

  .photoFrame figcaption {
    align-items: flex-start;
    flex-direction: column;
  }

  .photoFrame figcaption strong {
    text-align: left;
  }

  .musicGrid {
    grid-template-columns: 1fr;
  }

  .musicGrid article {
    min-height: 260px;
  }

  .formatGrid article {
    grid-template-columns: 42px 1fr;
    min-height: 220px;
    padding: 24px;
  }

  .formatGrid h3 {
    margin-top: 36px;
  }
}


/* Ajuste para la imagen estática; Next.js lo aplicaba en línea. */
.photoFrame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }