/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — FASE N Apple-real
   Cambios estructurales identificados en crítica brutal:
   1. Hero typography MASSIVE (140-160px Apple Pro hero)
   2. Ambient glows VISIBLES (4x más opaque)
   3. Brand color real: deep operatic burgundy + gold leaf
   4. Newsletter con sheet music atmospheric subtle bg
   5. Compositional weight balance — fotos dominan, tipografía soporta
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── 0. HERO VIDEO background ──────────── */
.hero-bg-video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Hide the rotating photos when video plays (video has its own poster fallback) */
.hero-bg img{
  z-index: 1 !important;
  opacity: 0 !important;  /* fallback only — JS could re-enable on video failure */
}

/* Stronger overlay for video readability */
.hero-overlay{
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.4) 65%,
    rgba(0,0,0,0.85) 100%) !important;
  z-index: 3 !important;
}
.hero-vignette{
  background: radial-gradient(ellipse 80% 70% at 30% 70%,
    transparent 0%,
    rgba(0,0,0,0.6) 100%) !important;
  z-index: 3 !important;
}

/* Hero content z above video */
.hero-content{
  z-index: 5 !important;
}

/* Respect reduced motion — pause video, show poster */
@media (prefers-reduced-motion: reduce){
  .hero-bg-video{
    animation-play-state: paused !important;
  }
}

/* Mobile: video might be too heavy on data — fallback to photos */
@media (max-width: 768px){
  .hero-bg-video{
    display: none !important;
  }
  .hero-bg img{
    opacity: 1 !important;
    z-index: 1 !important;
  }
}

/* ──────────── 1. HERO MASSIVE Apple Pro ──────────── */
.hero-title{
  font-size: clamp(4rem, 11vw, 9.5rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 500 !important;
  margin: 0 0 32px !important;
  max-width: none !important;
}

.hero-eyebrow{
  display: none !important; /* Apple sin eyebrow en hero */
}

.hero-lede{
  font-size: clamp(17px, 1.6vw, 22px) !important;
  line-height: 1.45 !important;
  margin-bottom: 44px !important;
  max-width: 560px !important;
}

.hero-cta-row{
  gap: 14px !important;
}

.btn-primary,
.hero-cta-row .btn-primary{
  padding: 16px 32px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.btn-secondary,
.hero-cta-row .btn-secondary{
  padding: 16px 32px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

/* ──────────── 2. AMBIENT GLOWS VISIBLES (4x) ──────────── */
.mod-section::before,
.opm-numbers::before,
.opm-newsletter::before,
.mod-quote::before,
.mod-final-cta::before,
.mod-portrait::before,
.estudia::before, #contacto::before{
  background: radial-gradient(ellipse 60% 60% at 35% 35%,
    rgba(189, 176, 157, 0.18) 0%,
    rgba(189, 176, 157, 0.09) 25%,
    rgba(189, 176, 157, 0.04) 50%,
    transparent 75%) !important;
  filter: blur(60px) !important;
  width: 80% !important;
  height: 100% !important;
  top: -20% !important;
}

.mod-section::after,
.opm-numbers::after,
.mod-quote::after,
.mod-portrait::after,
.mod-final-cta::after{
  background: radial-gradient(ellipse 55% 50% at 65% 60%,
    rgba(178, 28, 28, 0.10) 0%,   /* operatic burgundy hint */
    rgba(189, 176, 157, 0.06) 30%,
    transparent 65%) !important;
  filter: blur(80px) !important;
  width: 70% !important;
  height: 80% !important;
}

/* Numbers section gets extra theatrical accent */
.opm-numbers::after{
  background: radial-gradient(ellipse 55% 50% at 70% 70%,
    rgba(204, 156, 75, 0.14) 0%,  /* gold leaf */
    rgba(178, 28, 28, 0.08) 35%,  /* burgundy fade */
    transparent 70%) !important;
}

/* ──────────── 3. BRAND COLOR real (deep operatic burgundy + gold leaf) ──────────── */
:root{
  --opm-burgundy: #B21C1C;
  --opm-gold-leaf: #CC9C4B;
  --opm-bone: #F2EDE2;
}

/* Gold accent en em — subtle bone (no mostaza chillón) */
.mod-h2 em,
.hero-title em,
.opm-numbers-hero-headline em,
.opm-numbers-hero-suffix,
.opm-photostrip-caption p em,
.section-title em{
  color: #BDB09D !important;
}

/* CTAs primary Apple cream/white pill (no gold mostaza) */
.btn-primary,
.mod-btn--gold,
.opm-newsletter-submit,
.opm-numbers-link{
  background: #F2EDE2 !important;
  color: #1d1d1f !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  border: none !important;
}
.btn-primary:hover,
.mod-btn--gold:hover,
.opm-newsletter-submit:hover{
  background: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px -8px rgba(255,255,255,0.2) !important;
}

/* Numbers link inline Apple style (no pill) */
.opm-numbers-link{
  background: transparent !important;
  color: #BDB09D !important;
  padding: 8px 0 !important;
  font-weight: 500 !important;
}
.opm-numbers-link:hover{
  background: transparent !important;
  color: #F2EDE2 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Stat numbers — keep solid bone, NO gradient sheen */
.opm-numbers-hero-num,
.opm-numbers-card-num{
  background: none !important;
  color: #F2EDE2 !important;
  -webkit-text-fill-color: #F2EDE2 !important;
}

/* ──────────── 4. NEWSLETTER con sheet music atmospheric ──────────── */
.opm-newsletter{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.92) 50%, rgba(0,0,0,0.96) 100%),
    url('/img/stock-sheetmusic-atmospheric.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* ──────────── 5. NUMBERS section — typography más grande ──────────── */
.opm-numbers-hero-num{
  font-size: clamp(10rem, 22vw, 22rem) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.06em !important;
}

.opm-numbers-eyebrow{
  display: none !important; /* Apple sin eyebrow */
}

/* ──────────── 6. SECTION HEADS sin eyebrows ──────────── */
.mod-section-head .mod-eyebrow,
.mod-section .mod-eyebrow,
.opm-newsletter-eyebrow{
  display: none !important;
}

.mod-h2,
.section-title{
  font-size: clamp(2.8rem, 6vw, 5.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}

/* ──────────── 7. PHOTO MOMENT typography ESCALATED ──────────── */
.mod-photomoment h2,
.mod-photomoment-quote,
.mod-photomoment-text{
  font-size: clamp(3rem, 6.5vw, 5.6rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.028em !important;
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 500 !important;
}

.mod-photomoment-caption{
  font-size: 12.5px !important;
  letter-spacing: 0.26em !important;
}

/* ──────────── 8. SCROLL indicator más Apple ──────────── */
.scroll-indicator{
  font-size: 9px !important;
  letter-spacing: 0.5em !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.42) !important;
}
.scroll-indicator::after{
  content: "" !important;
  display: block !important;
  width: 1px !important;
  height: 36px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%) !important;
  margin: 8px auto 0 !important;
  animation: scrollHint 1.6s ease-out infinite !important;
}
@keyframes scrollHint{
  0%{ opacity: 0; transform: scaleY(0); transform-origin: top; }
  30%{ opacity: 1; transform: scaleY(1); }
  100%{ opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* ──────────── 9. PRODUCCIONES cards más cinematicas ──────────── */
.mod-cards-3 .mod-card{
  border-radius: 14px !important;
  border: 1px solid rgba(204, 156, 75, 0.08) !important;
  position: relative !important;
  isolation: isolate !important;
}
.mod-cards-3 .mod-card::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 14px !important;
}
.mod-cards-3 .mod-card .mod-card-body{
  position: relative !important;
  z-index: 2 !important;
}
.mod-cards-3 .mod-card:hover{
  border-color: rgba(204, 156, 75, 0.32) !important;
  transform: translateY(-6px) !important;
}

/* ──────────── 10. WORDMARK más Apple ──────────── */
.apple-nav .an-name{
  font-size: 18px !important;
  letter-spacing: -0.012em !important;
  font-variation-settings: "opsz" 36, "SOFT" 30, "wght" 500 !important;
}

/* ──────────── 11. FINAL CTA más cinematic ──────────── */
.mod-final-cta .mod-h2{
  font-size: clamp(3rem, 7vw, 5.8rem) !important;
  letter-spacing: -0.032em !important;
}

.mod-final-cta::before{
  background: radial-gradient(ellipse 70% 50% at 50% 50%,
    rgba(204, 156, 75, 0.16) 0%,
    rgba(178, 28, 28, 0.08) 40%,
    transparent 75%) !important;
  filter: blur(80px) !important;
}

/* ──────────── 12. NEWSLETTER hero ──────────── */
.opm-newsletter-h2{
  font-size: clamp(2.8rem, 6vw, 4.8rem) !important;
}

/* ──────────── 13. QUOTE — más fuerza visual ──────────── */
.mod-quote{
  padding: clamp(96px, 14vh, 160px) 0 !important;
  position: relative !important;
}
.mod-quote-inner{
  max-width: 1080px !important;
}
.mod-quote p,
.mod-quote-text{
  font-size: clamp(2rem, 4.6vw, 3.8rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400 !important;
  font-style: italic !important;
}
.mod-quote-cite{
  margin-top: 32px !important;
  font-size: 14px !important;
}

/* Mobile: scale down massive sizes */
@media (max-width: 768px){
  .hero-title{
    font-size: clamp(3rem, 13vw, 4.8rem) !important;
  }
  .mod-h2,
  .section-title{
    font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
  }
  .opm-numbers-hero-num{
    font-size: clamp(7rem, 32vw, 11rem) !important;
  }
  .mod-photomoment h2,
  .mod-photomoment-quote{
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
  }
  .mod-quote p{
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  }
  .opm-newsletter-h2,
  .mod-final-cta .mod-h2{
    font-size: clamp(2.2rem, 9vw, 3.2rem) !important;
  }
}