/* ═══════════════════════════════════════════════════════════════════════════
   FASE Q — Fixes específicos
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── 1. PRODUCCIONES 3-UP GRID — force 3 columns ──────────── */
.mod-cards-3{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 1180px !important;
  width: 100% !important;
  margin: clamp(40px, 6vh, 56px) auto 0 !important;
  padding: 0 clamp(24px, 5vw, 64px) !important;
  box-sizing: border-box !important;
}
.mod-cards-3 > *{
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 960px){
  .mod-cards-3{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px){
  .mod-cards-3{
    grid-template-columns: 1fr !important;
  }
}

/* ──────────── 2. PHOTO MOMENT — wider text, no awkward breaks ──────────── */
.mod-photomoment-quote,
.mod-photomoment h2,
.mod-photomoment-text > h2{
  max-width: 940px !important;
  white-space: normal !important;
  word-spacing: normal !important;
  hyphens: none !important;
}

/* Force <br> tags to respect their breaks */
.mod-photomoment-quote br,
.mod-photomoment h2 br{
  display: block !important;
  content: "" !important;
}

/* ──────────── 3. SECTION FADES — Apple-elegant transitions ──────────── */
/* Gradient hint at top + bottom of each major section */
.mod-section,
.opm-numbers,
.opm-newsletter,
.mod-quote,
.mod-portrait,
.mod-final-cta,
.estudia, #contacto,
.mod-photomoment{
  position: relative !important;
}

/* Top fade — subtle warm hint */
.mod-section::before,
.opm-numbers::before,
.opm-newsletter::before,
.mod-quote::before,
.mod-portrait::before,
.mod-final-cta::before,
.estudia::before, #contacto::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(189,176,157,0.18) 30%,
    rgba(189,176,157,0.24) 50%,
    rgba(189,176,157,0.18) 70%,
    transparent 100%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  display: block !important;
  width: auto !important;
  filter: none !important;
}

/* Bottom inner glow — subtle */
.mod-section::after,
.opm-numbers::after,
.mod-quote::after,
.mod-portrait::after,
.mod-final-cta::after,
.opm-newsletter::after{
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60% !important;
  height: 60% !important;
  background: radial-gradient(ellipse 60% 60% at 50% 100%,
    rgba(189,176,157,0.06) 0%,
    rgba(189,176,157,0.025) 35%,
    transparent 70%) !important;
  filter: blur(40px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
  top: auto !important;
  right: auto !important;
}

/* Ensure inner content is above ambient */
.mod-section > *,
.opm-numbers > *,
.opm-newsletter > *,
.mod-quote > *,
.mod-portrait > *,
.mod-final-cta > *,
.estudia > *, #contacto > *{
  position: relative !important;
  z-index: 2 !important;
}

/* ──────────── 4. CONTACTO + ESTUDIA — proper centered alignment ──────────── */
#contacto, .estudia{
  background: #000 !important;
  background-image: none !important;
}

#contacto .section-inner,
.estudia .section-inner{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 5vw, 64px) !important;
  text-align: center !important;
  position: relative !important;
  z-index: 5 !important;
}

#contacto .section-title,
.estudia .section-title{
  text-align: center !important;
  max-width: 880px !important;
  margin: 0 auto 18px !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.026em !important;
}

#contacto .section-lede,
.estudia .section-lede{
  text-align: center !important;
  max-width: 580px !important;
  margin: 0 auto clamp(40px, 6vh, 56px) !important;
}

/* Force no BR weirdness in section titles */
#contacto .section-title br,
.estudia .section-title br{
  display: none !important;
}

/* ──────────── 5. SECTION-TO-SECTION color subtle gradient ──────────── */
/* Add a very subtle vertical gradient to each section so they're not flat black */
.mod-section{
  background: linear-gradient(180deg, #050505 0%, #000 50%, #050505 100%) !important;
}
.opm-numbers{
  background: linear-gradient(180deg, #000 0%, #050505 30%, #050505 70%, #000 100%) !important;
}
.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;
}
.mod-quote,
.mod-portrait,
.mod-final-cta{
  background: linear-gradient(180deg, #060606 0%, #000 60%, #060606 100%) !important;
}
.estudia, #contacto{
  background: linear-gradient(180deg, #050505 0%, #000 50%, #060606 100%) !important;
}

/* Final CTA keeps homenaje-flores subtle */
.mod-final-cta{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.80) 50%, rgba(0,0,0,0.96) 100%),
    url('/img/2026/la-mulata-museo/grupo-homenaje-flores.jpg') !important;
  background-size: cover !important;
  background-position: center 40% !important;
}

/* ──────────── 6. SECTION DIVIDER — between sections subtle ──────────── */
/* Already done via ::before but make sure visible */
.mod-section + .mod-section,
.opm-numbers + .mod-section,
.mod-section + .opm-numbers,
.mod-photomoment + .mod-section,
.mod-section + .mod-photomoment{
  border-top: none !important;
}

/* ──────────── 7. PHOTO MOMENT — fade at top and bottom ──────────── */
.mod-photomoment::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 80px !important;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.7) 50%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  display: block !important;
}
.mod-photomoment::after{
  /* Override the ::after gradient/dot — keep but make bottom dramatic */
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 40%,
    rgba(0,0,0,0.4) 70%,
    #000 100%) !important;
  filter: none !important;
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* ──────────── 8. HERO — fade bottom into next section ──────────── */
.hero::after{
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 120px !important;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 60%, #000 100%) !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* ──────────── 9. INTRO SECTION photo — better proportion ──────────── */
.mod-intro-split .mod-intro-img{
  margin-top: clamp(40px, 6vh, 64px) !important;
  margin-bottom: 0 !important;
}

/* ──────────── 11. HISTORIA section — asymmetric 2-col (text + photo) ──────────── */
.mod-historia{
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: clamp(48px, 7vw, 96px) !important;
  align-items: center !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: left !important;
  padding: 0 clamp(24px, 5vw, 64px) !important;
}
.mod-historia-text{
  text-align: left !important;
}
.mod-historia-text .mod-section-head{
  text-align: left !important;
  margin-bottom: 28px !important;
}
.mod-historia-text .mod-h2{
  text-align: left !important;
  margin: 0 0 24px !important;
}
.mod-historia-text .mod-prose,
.mod-historia-text .mod-prose p{
  text-align: left !important;
  max-width: none !important;
  margin: 0 0 16px !important;
}
.mod-historia-text .mod-cta-row{
  justify-content: flex-start !important;
  margin-top: 32px !important;
}
.mod-historia-img{
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  aspect-ratio: 3/4 !important;
  max-width: 480px !important;
  justify-self: end !important;
  position: relative !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7) !important;
}
.mod-historia-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.mod-historia-img-caption{
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.85) !important;
  background: rgba(0,0,0,0.5) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  padding: 6px 12px !important;
  border-radius: 980px !important;
}

/* Hide eyebrow inside historia section head */
.mod-historia-text .mod-eyebrow{
  display: none !important;
}

/* Mobile: stack vertical, photo smaller */
@media (max-width: 860px){
  .mod-historia{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .mod-historia-img{
    max-width: 320px !important;
    margin: 0 auto !important;
    justify-self: center !important;
    aspect-ratio: 3/4 !important;
  }
}

/* ──────────── 10. NEWSLETTER + FINAL CTA — center align ──────────── */
.mod-final-cta .mod-inner{
  text-align: center !important;
  max-width: 720px !important;
}
.mod-final-cta .mod-h2{
  margin: 0 auto 14px !important;
  text-align: center !important;
}
.mod-final-cta .mod-lede{
  text-align: center !important;
  max-width: 540px !important;
  margin: 0 auto 32px !important;
}
.mod-final-cta .mod-cta-row{
  justify-content: center !important;
  gap: 12px !important;
}