/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — FASE P FINAL system normalization
   Una sola fuente de verdad para typography + alineaciones,
   ganadora del cascade contra los 16 layers anteriores.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --t-letter-display-xl: -0.030em;
  --t-letter-display-lg: -0.026em;
  --t-letter-display-md: -0.020em;
  --t-letter-display-sm: -0.014em;
  --t-letter-body:       -0.011em;
  --t-letter-caps:       0.22em;
  --t-letter-caps-tight: 0.16em;
  --c-bone:    #F2EDE2;
  --c-gold:    #BDB09D;
  --c-text-72: rgba(255,255,255,0.72);
  --c-text-58: rgba(255,255,255,0.58);
  --c-text-44: rgba(255,255,255,0.44);
  --c-bg-04:   rgba(255,255,255,0.04);
  --c-bg-08:   rgba(255,255,255,0.08);
  --c-bg-12:   rgba(255,255,255,0.12);
}

/* ──────────── DISPLAY hierarchy normalized ──────────── */

/* XL — hero h1, numbers hero stat (clamp 4-9.5rem) */
.hero-title,
.opm-numbers-hero-num{
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 0.92 !important;
  letter-spacing: var(--t-letter-display-xl) !important;
  color: var(--c-bone) !important;
}

/* LG — section h2 (clamp 2.6-5rem) */
.mod-h2,
.section-title,
.mod-photomoment-quote,
.mod-photomoment h2,
.mod-final-cta .mod-h2,
.opm-newsletter-h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 5vw, 4.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: var(--t-letter-display-lg) !important;
  color: var(--c-bone) !important;
  margin: 0 0 18px !important;
}

/* MD — quote, portrait name, large card titles */
.mod-quote p,
.mod-quote-text,
.mod-portrait-name,
.opm-numbers-hero-headline{
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: "opsz" 96, "SOFT" 50, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: var(--t-letter-display-md) !important;
  color: var(--c-bone) !important;
}
.mod-quote p,
.mod-quote-text{
  font-style: italic !important;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 400 !important;
  font-size: clamp(1.8rem, 4vw, 3.2rem) !important;
}
.mod-portrait-name{ font-size: clamp(2rem, 4vw, 3rem) !important; }

/* SM — small card titles, list h3 */
.mod-card-title,
.mod-card-2-body h3,
.mod-collab-name,
.opm-numbers-card-title{
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: "opsz" 48, "SOFT" 40, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 1.4rem !important;
  line-height: 1.18 !important;
  letter-spacing: var(--t-letter-display-sm) !important;
  color: var(--c-bone) !important;
  margin: 0 0 8px !important;
}

/* Italic em em accents — unify color */
.hero-title em,
.mod-h2 em,
.section-title em,
.mod-photomoment-quote em,
.mod-photomoment h2 em,
.opm-newsletter-h2 em,
.mod-final-cta .mod-h2 em,
.opm-numbers-hero-headline em,
.mod-quote p em,
.mod-card-title em,
.mod-portrait-name em{
  font-style: normal !important;
  color: var(--c-gold) !important;
  font-variation-settings: inherit !important;
}

/* ──────────── BODY hierarchy normalized ──────────── */

.hero-lede,
.mod-lede,
.opm-newsletter-lede,
.section-lede,
.opm-numbers-hero-lede,
.opm-numbers-card-body,
.mod-photomoment-caption,
.mod-portrait-bio,
.mod-portrait p,
.mod-prose p,
.mod-collab-desc,
.mod-card-2-body p,
.mod-card-meta,
.mod-card-body p{
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: var(--t-letter-body) !important;
}

.hero-lede{
  font-size: clamp(16px, 1.5vw, 19px) !important;
  line-height: 1.5 !important;
  color: var(--c-text-72) !important;
  max-width: 540px !important;
  margin: 0 0 36px !important;
}

.mod-lede,
.opm-newsletter-lede,
.section-lede,
.opm-numbers-hero-lede{
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.55 !important;
  color: var(--c-text-72) !important;
}

.opm-numbers-card-body,
.mod-collab-desc,
.mod-card-2-body p,
.mod-card-body p,
.mod-portrait-bio,
.mod-portrait p{
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--c-text-72) !important;
}

.mod-prose p{
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--c-text-72) !important;
  margin: 0 0 14px !important;
}
.mod-prose p:last-child{ margin-bottom: 0 !important; }
.mod-prose p strong{ color: var(--c-bone) !important; font-weight: 500 !important; }
.mod-prose p em{ font-style: italic !important; color: var(--c-gold) !important; }

/* Card meta (year etc) */
.mod-card-meta,
.mod-card-year,
.mod-collab-meta,
.opm-photostrip-caption span,
.mod-photomoment-caption,
.opm-numbers-card-title{
  font-family: 'Inter Tight', sans-serif !important;
  font-style: normal !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-letter-caps) !important;
  text-transform: uppercase !important;
  color: var(--c-gold) !important;
}

/* ──────────── UNIVERSAL pill CTA ──────────── */
.mod-btn,
.btn-primary,
.btn-secondary,
.opm-newsletter-submit,
.an-btn{
  font-family: 'Inter Tight', sans-serif !important;
  font-style: normal !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  padding: 14px 26px !important;
  border-radius: 980px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, transform .2s ease !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}

.mod-btn--gold,
.btn-primary,
.opm-newsletter-submit{
  background: var(--c-bone) !important;
  color: #1d1d1f !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.mod-btn--gold:hover,
.btn-primary:hover,
.opm-newsletter-submit:hover{
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}

.mod-btn--ghost,
.btn-secondary{
  background: transparent !important;
  color: var(--c-bone) !important;
  border: 1px solid var(--c-bg-12) !important;
}
.mod-btn--ghost:hover,
.btn-secondary:hover{
  background: var(--c-bg-04) !important;
  border-color: var(--c-bg-12) !important;
}

/* Inline link Apple style */
.mod-card-link,
.opm-numbers-link{
  background: transparent !important;
  color: var(--c-gold) !important;
  padding: 4px 0 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  border-radius: 0 !important;
  border: none !important;
}
.mod-card-link:hover,
.opm-numbers-link:hover{
  background: transparent !important;
  color: var(--c-bone) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ──────────── SECTION padding consistent ──────────── */
.mod-section,
.opm-numbers,
.opm-newsletter,
.mod-quote,
.mod-final-cta,
.mod-portrait,
.estudia, #contacto{
  padding-top: clamp(72px, 10vh, 110px) !important;
  padding-bottom: clamp(72px, 10vh, 110px) !important;
}

/* Section head margin consistent */
.mod-section-head,
.opm-newsletter-inner,
.mod-final-cta .mod-inner{
  margin-bottom: clamp(32px, 5vh, 56px) !important;
}

/* Section inner max-width consistent */
.mod-inner,
.opm-numbers-inner,
.opm-newsletter-inner,
.mod-quote-inner,
.mod-portrait-inner,
.mod-final-cta .mod-inner{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 0 clamp(24px, 5vw, 64px) !important;
}

/* ──────────── INTRO PHOTO centered + proper proportions ──────────── */
.mod-intro-split .mod-intro-img{
  max-width: 980px !important;
  width: 100% !important;
  margin: clamp(40px, 6vh, 64px) auto 0 !important;
  aspect-ratio: 16/9 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 60px -16px rgba(0,0,0,0.6) !important;
}
.mod-intro-split .mod-intro-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ──────────── PHOTO MOMENT alignment ──────────── */
.mod-photomoment{
  align-items: flex-end !important;
}
.mod-photomoment .mod-inner,
.mod-photomoment-text{
  text-align: left !important;
  padding-top: 0 !important;
  padding-bottom: clamp(56px, 8vh, 96px) !important;
}
.mod-photomoment-quote,
.mod-photomoment h2,
.mod-photomoment-text > h2{
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  line-height: 1.06 !important;
  letter-spacing: var(--t-letter-display-lg) !important;
  text-align: left !important;
  margin: 0 0 10px !important;
  max-width: 720px !important;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6) !important;
}
.mod-photomoment-caption{
  display: inline-block !important;
  text-align: left !important;
  margin: 0 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.7) !important;
}

/* ──────────── EYEBROWS — caps tracking unified ──────────── */
.mod-eyebrow,
.opm-numbers-eyebrow,
.opm-newsletter-eyebrow,
.hero-eyebrow,
.section-eyebrow{
  font-family: 'Inter Tight', sans-serif !important;
  font-style: normal !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-letter-caps) !important;
  text-transform: uppercase !important;
  color: rgba(189,176,157,0.78) !important;
}
.mod-eyebrow::before,
.mod-eyebrow::after,
.section-eyebrow::before,
.section-eyebrow::after,
.opm-numbers-eyebrow::before,
.opm-newsletter-eyebrow::before{
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(189,176,157,0.4);
  display: inline-block;
}

/* ──────────── NAV — consistent rhythm ──────────── */
.apple-nav .an-name{
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: "opsz" 36, "SOFT" 30, "wght" 500 !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  letter-spacing: var(--t-letter-display-sm) !important;
  text-transform: none !important;
  color: rgba(255,255,255,0.95) !important;
}
.apple-nav .an-menu a,
.apple-nav .an-menu button{
  font-family: 'Inter Tight', sans-serif !important;
  font-style: normal !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: var(--t-letter-body) !important;
}

/* ──────────── FOOTER — consistent ──────────── */
.footer-name{
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: "opsz" 36, "SOFT" 30, "wght" 500 !important;
  font-style: normal !important;
  font-size: 17px !important;
  letter-spacing: var(--t-letter-display-sm) !important;
}

/* ──────────── KILL ambient glows (they were invisible anyway) ──────────── */
.mod-section::before,
.mod-section::after,
.opm-numbers::before,
.opm-numbers::after,
.opm-newsletter::before,
.mod-quote::before,
.mod-quote::after,
.mod-final-cta::before,
.mod-final-cta::after,
.mod-portrait::before,
.mod-portrait::after,
.estudia::before, #contacto::before{
  display: none !important;
}

/* ──────────── MOBILE override for normalization ──────────── */
@media (max-width: 768px){
  .hero-title{
    font-size: clamp(2.8rem, 11vw, 4.4rem) !important;
  }
  .mod-h2,
  .section-title,
  .opm-newsletter-h2,
  .mod-final-cta .mod-h2{
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
  }
  .mod-quote p{
    font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
  }
  .opm-numbers-hero-num{
    font-size: clamp(7rem, 32vw, 11rem) !important;
  }
  .mod-photomoment-quote,
  .mod-photomoment h2{
    font-size: clamp(1.9rem, 8vw, 2.8rem) !important;
  }
  .mod-section,
  .opm-numbers,
  .opm-newsletter,
  .mod-quote,
  .mod-final-cta,
  .mod-portrait,
  .estudia, #contacto{
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}