/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — FASE J6 Silos consistency Apple
   Targeted overrides para las 6 páginas internas que heredan estructura distinta
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── SILO HEROS — todos con misma cinemática ──────────── */
.silo-hero,
.omar-hero,
.prods-hero,
.mulata-hero,
.escuela-hero,
.coro-hero,
.apoya-hero,
.prensa-hero{
  min-height: clamp(560px, 88vh, 800px) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  background: #000 !important;
}

/* Silo hero content alignment */
.silo-hero-content,
.omar-hero-content,
.prods-hero-content,
.mulata-hero-content,
.escuela-hero-content,
.coro-hero-content,
.apoya-hero-content,
.prensa-hero-content{
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 80px) clamp(56px, 10vh, 140px) !important;
  text-align: left !important;
}

/* ──────────── HERO EYEBROW (breadcrumb / tagline) — minimal ──────────── */
.silo-hero-eyebrow,
.omar-hero-eyebrow,
.prods-hero-eyebrow,
.mulata-hero-eyebrow,
.escuela-hero-eyebrow,
.coro-hero-eyebrow,
.apoya-hero-eyebrow,
.prensa-hero-eyebrow,
.silo-hero .breadcrumb,
.silo-hero-breadcrumb,
.omar-hero-breadcrumb{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin: 0 0 16px !important;
  font-style: normal !important;
  display: inline-block !important;
}

/* Hide ALL breadcrumb-like multi-line meta and excessive tracking labels in heros */
.silo-hero .meta-row,
.omar-hero .omar-hero-meta,
.silo-hero-meta-tracking,
.silo-hero-secondary-meta,
.silo-hero p.eyebrow + p.eyebrow,
.silo-hero p[class*="meta"][class*="caps"]{
  display: none !important;
}

/* ──────────── HERO TITLE Apple ──────────── */
.silo-hero h1,
.silo-hero .hero-title,
.omar-hero h1, .omar-hero-name,
.prods-hero h1, .prods-hero-title,
.mulata-hero h1, .mulata-hero-title,
.escuela-hero h1, .escuela-hero-title, .esc-hero-title,
.coro-hero h1, .coro-hero-title,
.apoya-hero h1, .apoya-hero-title,
.prensa-hero h1, .prensa-hero-title,
.page-hero h1, .phero h1, .phero-title{
  font-family: var(--font-display, 'Fraunces'), Georgia, serif !important;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(3rem, 7vw, 6.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.032em !important;
  color: #F2EDE2 !important;
  margin: 0 0 22px !important;
  max-width: 14ch !important;
}
.silo-hero h1 em, .omar-hero-name em, .prods-hero-title em,
.mulata-hero-title em, .escuela-hero-title em,
.coro-hero-title em, .apoya-hero-title em, .prensa-hero-title em{
  font-style: normal !important;
  color: #BDB09D !important;
}

/* ──────────── ROLE / SUBTITLE — strip italic ──────────── */
.omar-hero-role,
.omar-role,
.silo-hero-role,
.silo-hero p[class*="role"]{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: -0.005em !important;
  color: rgba(189,176,157,0.95) !important;
  margin: 0 0 24px !important;
}

/* ──────────── HERO LEDE ──────────── */
.silo-hero-lede,
.omar-hero-lede,
.prods-hero-lede,
.escuela-hero-lede,
.coro-hero-lede,
.apoya-hero-lede,
.prensa-hero-lede,
.mulata-hero-lede{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.008em !important;
  color: rgba(255,255,255,0.72) !important;
  margin: 0 0 36px !important;
  max-width: 540px !important;
}

/* ──────────── SIGNATURE FLOURISH — hide in heros ──────────── */
.omar-signature,
.omar-name-signature,
.omar-hero-signature,
.signature-corner,
.hero-signature,
.silo-signature{
  display: none !important;
}

/* ──────────── EYEBROW / META in silo heros — hide breadcrumbs ──────────── */
.omar-hero-meta{
  display: none !important;
}
.omar-hero-eyebrow{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(189,176,157,0.72) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-style: normal !important;
  margin: 0 0 18px !important;
}
.omar-hero-eyebrow::before{
  content: "" !important;
  width: 28px !important;
  height: 1px !important;
  background: rgba(189,176,157,0.5) !important;
}

/* ──────────── HERO BG OVERLAY — Apple gradient ──────────── */
.silo-hero-bg,
.omar-hero-bg,
.prods-hero-bg,
.escuela-hero-bg,
.coro-hero-bg,
.apoya-hero-bg,
.prensa-hero-bg,
.mulata-hero-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.silo-hero-bg img,
.omar-hero-bg img,
.prods-hero-bg img,
.escuela-hero-bg img,
.coro-hero-bg img,
.apoya-hero-bg img,
.prensa-hero-bg img,
.mulata-hero-bg img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.silo-hero::after,
.omar-hero::after,
.prods-hero::after,
.escuela-hero::after,
.coro-hero::after,
.apoya-hero::after,
.prensa-hero::after,
.mulata-hero::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 30%,
    rgba(0,0,0,0.35) 65%,
    rgba(0,0,0,0.92) 100%) !important;
  pointer-events: none !important;
}

/* ──────────── CORO HERO floating circle / badge — hide ──────────── */
.coro-hero-poster,
.coro-hero-aside,
.coro-hero-badge,
.coro-hero-circle{
  display: none !important;
}
.coro-hero .secondary-photo,
.coro-hero .floating-card{
  display: none !important;
}

/* ──────────── MULATA HERO — clean composition ──────────── */
.mulata-hero-poster,
.mulata-hero-aside{
  display: none !important;
}

/* ──────────── ESCUELA hero break point ──────────── */
.escuela-hero h1,
.esc-hero-title{
  max-width: 22ch !important;
  letter-spacing: -0.028em !important;
}
.esc-hero-title em,
.esc-hero h1 em{
  font-style: normal !important;
  color: #BDB09D !important;
}

/* ESC hero structure */
.esc-hero{
  min-height: clamp(560px, 88vh, 800px) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  background: #000 !important;
}
.esc-hero-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}
.esc-hero::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.92) 100%) !important;
  pointer-events: none !important;
}
.esc-hero-inner{
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 80px) clamp(56px, 10vh, 140px) !important;
}
.esc-hero-eyebrow{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(189,176,157,0.8) !important;
  margin: 0 0 18px !important;
  font-style: normal !important;
}
.esc-hero-lede{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.72) !important;
  margin: 0 0 32px !important;
  max-width: 540px !important;
}
.esc-hero-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* ──────────── CORO hero img fullbleed + breadcrumb hide ──────────── */
.coro-hero{
  min-height: clamp(560px, 88vh, 800px) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  background: #000 !important;
}
.coro-hero-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}
.coro-hero::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.92) 100%) !important;
  pointer-events: none !important;
}
.coro-hero-inner{
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 6vw, 80px) clamp(56px, 10vh, 140px) !important;
}
.coro-crumbs{
  display: none !important;
}
.coro-hero-eyebrow{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: rgba(189,176,157,0.8) !important;
  margin: 0 0 18px !important;
  font-style: normal !important;
}
.coro-hero-lede{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,0.72) !important;
  margin: 0 0 32px !important;
  max-width: 540px !important;
}

/* ──────────── MULATA phero structure ──────────── */
.page-hero,
.phero{
  position: relative !important;
  background: #000 !important;
}
.phero-poster{
  /* keep poster as part of hero composition (this is legit for a production page) */
  position: relative !important;
  z-index: 2 !important;
}
.phero-title{
  font-family: var(--font-display, 'Fraunces'), Georgia, serif !important;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}
.phero-title em{
  font-style: normal !important;
  color: #BDB09D !important;
}

/* ──────────── HERO CTAs Apple pills ──────────── */
.silo-hero .cta-row,
.silo-hero-cta-row,
.omar-hero-cta,
.escuela-hero-cta,
.coro-hero-cta,
.apoya-hero-cta,
.prensa-hero-cta,
.mulata-hero-cta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 12px !important;
}
.silo-hero .cta-row a,
.silo-hero-cta-row a,
.omar-hero-cta a,
.escuela-hero-cta a,
.coro-hero-cta a,
.apoya-hero-cta a,
.prensa-hero-cta a,
.mulata-hero-cta a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 26px !important;
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  border-radius: 980px !important;
  text-decoration: none !important;
  transition: background .2s, transform .2s, color .2s !important;
}

/* ──────────── SECTION HEADS in silos ──────────── */
.silo-section h2,
.omar-section h2,
.prods-section h2,
.escuela-section h2,
.coro-section h2,
.apoya-section h2,
.prensa-section h2,
.mulata-section h2,
.silo h2{
  font-family: var(--font-display, 'Fraunces'), Georgia, serif !important;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.06 !important;
  color: #F2EDE2 !important;
}
.silo-section h2 em,
.omar-section h2 em,
.prods-section h2 em,
.escuela-section h2 em,
.coro-section h2 em,
.apoya-section h2 em,
.prensa-section h2 em,
.mulata-section h2 em{
  font-style: normal !important;
  color: #BDB09D !important;
}

/* ──────────── PROSE in silos ──────────── */
.silo-section p,
.silo-prose p,
.omar-prose p,
.prods-prose p,
.escuela-prose p,
.coro-prose p,
.apoya-prose p,
.prensa-prose p{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.005em !important;
  color: rgba(255,255,255,0.66) !important;
}

/* ──────────── CHIPS / TAGS (composers list etc) ──────────── */
.chip, .tag, .silo-chip,
.composer-chip, .role-chip,
.repertoire-chip{
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 980px !important;
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: rgba(255,255,255,0.85) !important;
  font-style: normal !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* ──────────── STATS in silos ──────────── */
.silo-stats,
.prods-stats,
.silo-numbers{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: clamp(32px, 6vw, 80px) !important;
  max-width: 1180px !important;
  margin: 64px auto 0 !important;
  text-align: left !important;
}
.silo-stat-num,
.prods-stat-num{
  font-family: var(--font-display, 'Fraunces'), Georgia, serif !important;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500 !important;
  font-style: normal !important;
  font-size: clamp(3.5rem, 7vw, 6rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;
  color: #F2EDE2 !important;
}
.silo-stat-label,
.prods-stat-label{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(189,176,157,0.85) !important;
  margin-top: 12px !important;
  font-style: normal !important;
}

/* ──────────── INFO TABLE (Mulata, Coro) ──────────── */
.info-row, .info-cell, .silo-info-cell,
.mulata-meta-cell, .coro-info-cell{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-style: normal !important;
}
.info-label, .info-cell-label,
.mulata-meta-label, .coro-info-label{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(189,176,157,0.75) !important;
  margin: 0 0 6px !important;
  font-style: normal !important;
}
.info-value, .info-cell-value,
.mulata-meta-value, .coro-info-val{
  font-family: var(--font-body, 'Inter Tight'), sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em !important;
  color: #F2EDE2 !important;
  margin: 0 !important;
  font-style: normal !important;
}
.info-value small, .coro-info-val small{
  display: block !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.55) !important;
  margin-top: 4px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ──────────── PROGRAMA / PROGRAMA cards (Escuela) ──────────── */
.programa-card,
.escuela-program-card,
.modulo-item{
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  padding: 28px 26px !important;
}
.programa-card h3,
.escuela-program-card h3{
  font-family: var(--font-display, 'Fraunces'), Georgia, serif !important;
  font-variation-settings: "opsz" 48, "SOFT" 50, "wght" 500 !important;
  font-style: normal !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.015em !important;
  color: #F2EDE2 !important;
  margin: 0 0 8px !important;
}

/* ──────────── SILO HEADLINE BREAK FIXES ──────────── */
.escuela-hero h1{
  max-width: 18ch !important;
  letter-spacing: -0.028em !important;
}
.escuela-hero h1 br{
  display: none !important;
}

/* ──────────── COMPOSER CHIPS row alignment ──────────── */
.composer-chips-row,
.repertoire-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 32px !important;
}

/* ──────────── MOBILE for silos ──────────── */
@media (max-width: 768px){
  .silo-hero,
  .omar-hero, .prods-hero, .mulata-hero,
  .escuela-hero, .coro-hero, .apoya-hero, .prensa-hero{
    min-height: 540px !important;
  }
  .silo-hero h1,
  .omar-hero-name, .prods-hero-title, .mulata-hero-title,
  .escuela-hero-title, .coro-hero-title, .apoya-hero-title, .prensa-hero-title{
    font-size: clamp(2.4rem, 11vw, 3.4rem) !important;
  }
  .silo-hero-content,
  .omar-hero-content, .prods-hero-content, .mulata-hero-content,
  .escuela-hero-content, .coro-hero-content, .apoya-hero-content, .prensa-hero-content{
    padding-bottom: 40px !important;
  }
  .silo-stats, .prods-stats{
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}