/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — Apple-pure system overrides
   Filosofía Apple real (Watch Ultra / iPhone Pro):
   - Pure dark background, sin variantes tonales
   - Centrado dominante (no asimetrías editoriales)
   - Upright display type (italic solo como acento muy puntual)
   - Eyebrow MUY reducido o ausente
   - Generous vertical breathing (clamp 120–200px)
   - Pill CTA system unificado
   - Headlines 4-7 palabras
   - Prose 1-2 oraciones por sección
   - Photography respira; texto no compite
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── PURE DARK ── eliminar variantes tonales editoriales ──────────── */
.mod-section,
.mod-section--d-deep,
.mod-section--d-base,
.mod-section--d-warm,
.mod-section--d-midnight,
.mod-section--d-cool,
.mod-section--d-apple,
.mod-section--bone,
.mod-stats{
  background: #000 !important;
}

/* Permitir ONE high-contrast switch: secciones marcadas como light */
.mod-section--apple-light{
  background: #fbfbfd !important; /* Apple #fbfbfd */
  color: #1d1d1f !important;
}
.mod-section--apple-light .mod-h2,
.mod-section--apple-light .mod-eyebrow,
.mod-section--apple-light .mod-lede,
.mod-section--apple-light p{
  color: #1d1d1f !important;
}
.mod-section--apple-light .mod-h2 em{ color: #6e6e73 !important; }

/* ──────────── DROP EDITORIAL ITALIC ── upright dominant ──────────── */
.mod-h2 em,
.hero-title em{
  font-style: normal !important;
  color: #BDB09D !important;
}

/* Permitir italic explícito por opt-in */
.mod-h2 em.is-italic,
.hero-title em.is-italic{
  font-style: italic !important;
}

/* ──────────── EYEBROW SURGERY ── reducir presencia editorial ──────────── */
.mod-eyebrow{
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  color: rgba(189, 176, 157, 0.7) !important;
  margin-bottom: 28px !important;
}
.mod-eyebrow::before,
.mod-eyebrow::after{
  background: rgba(189, 176, 157, 0.45) !important;
  width: 28px !important;
}

/* Hide eyebrow class option */
.mod-eyebrow--hidden,
.mod-section--no-eyebrow .mod-eyebrow{
  display: none !important;
}

/* ──────────── CENTERED DOMINANT ── Apple iPhone product page pattern ──────────── */
.mod-section .mod-inner{
  text-align: center;
}
.mod-section .mod-inner > *{
  margin-left: auto;
  margin-right: auto;
}
.mod-section .mod-eyebrow{
  display: inline-flex;
}
.mod-section .mod-prose,
.mod-section .mod-lede{
  max-width: 640px;
  text-align: center;
}
.mod-section .mod-prose p,
.mod-section .mod-lede{
  text-align: center;
}
.mod-section .mod-cta-row{
  justify-content: center;
}

/* Permitir secciones LEFT-aligned por opt-in */
.mod-section--align-left .mod-inner,
.mod-section--align-left .mod-inner > *,
.mod-section--align-left .mod-prose,
.mod-section--align-left .mod-prose p,
.mod-section--align-left .mod-lede{
  text-align: left !important;
  margin-left: 0 !important;
}
.mod-section--align-left .mod-cta-row{ justify-content: flex-start !important; }

/* ──────────── HEADLINE SCALE Apple ──────────── */
.mod-h2{
  font-family: 'Bodoni Moda', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
  color: #F2EDE2 !important;
  max-width: 920px !important;
  margin-bottom: 28px !important;
}

/* ──────────── LEDE Apple ── breath + restraint ──────────── */
.mod-lede{
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.008em !important;
  color: rgba(255, 255, 255, 0.66) !important;
  max-width: 580px !important;
  margin: 0 auto 40px !important;
}

/* ──────────── SECTION BREATHING ── generous Apple verticals ──────────── */
.mod-section{
  padding-top: clamp(120px, 16vh, 180px) !important;
  padding-bottom: clamp(120px, 16vh, 180px) !important;
}
.mod-section + .mod-section{
  padding-top: clamp(80px, 12vh, 140px) !important;
}

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

.mod-btn--gold,
.btn-primary{
  background: #F2EDE2 !important;
  color: #1d1d1f !important;
}
.mod-btn--gold:hover,
.btn-primary:hover{
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}

.mod-btn--ghost,
.btn-secondary{
  background: transparent !important;
  color: #F2EDE2 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.mod-btn--ghost:hover,
.btn-secondary:hover{
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.mod-btn--arrow::after{
  content: "→";
  font-size: 16px;
  transition: transform .2s ease;
}
.mod-btn--arrow:hover::after{
  transform: translateX(3px);
}

/* ──────────── PROSE Apple-ified ──────────── */
.mod-prose p{
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.66) !important;
  margin-bottom: 18px !important;
}
.mod-prose p strong{
  color: #F2EDE2 !important;
  font-weight: 500 !important;
}
.mod-prose p em{
  font-style: italic !important;
  color: #BDB09D !important;
}

/* ──────────── INTRO-SPLIT → centered single col (Apple does not asymmetric) ──────────── */
.mod-intro-split{
  display: block !important;
  text-align: center !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}
.mod-intro-split .mod-intro-text{
  margin-bottom: 64px !important;
}
.mod-intro-split .mod-intro-img{
  max-width: 720px !important;
  margin: 0 auto !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.mod-intro-split .mod-intro-img img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* ──────────── CARDS GRID Apple-style ──────────── */
.mod-cards-3{
  gap: 32px !important;
}
.mod-card{
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s !important;
}
.mod-card:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.mod-card-body{
  padding: 28px 26px 32px !important;
  text-align: left !important;
}
.mod-card-title{
  font-family: 'Bodoni Moda', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.015em !important;
  color: #F2EDE2 !important;
}
.mod-card-meta{
  color: rgba(189, 176, 157, 0.78) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.22em !important;
}

/* ──────────── HERO Apple-ified ──────────── */
.hero{
  min-height: 100vh !important;
  position: relative !important;
}
.hero-content{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: clamp(48px, 10vh, 140px) !important;
  padding: 0 clamp(24px, 6vw, 80px) !important;
  display: flex !important;
  justify-content: flex-start !important;
  z-index: 5 !important;
}
.hero-content > div:first-child{
  max-width: 760px !important;
  text-align: left !important;
}
.hero-eyebrow{
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 0 18px !important;
  display: inline-block !important;
}
.hero-title{
  font-family: 'Bodoni Moda', Georgia, serif !important;
  font-weight: 500 !important;
  font-style: normal !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 26px !important;
  max-width: 12ch !important;
}
.hero-title em{
  font-style: normal !important;
  color: #BDB09D !important;
}
.hero-lede{
  font-family: 'Inter', 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: 520px !important;
}
.hero-cta-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Hero glass card → hide entirely (La Mulata concluyó; cleaner Apple hero) */
.hero .glass-card{
  display: none !important;
}

/* Scroll indicator → más sutil */
.scroll-indicator{
  bottom: 24px !important;
  font-size: 10px !important;
  letter-spacing: 0.4em !important;
  color: rgba(255, 255, 255, 0.32) !important;
}

/* ──────────── HISTORIA section ── center it too ──────────── */
.mod-historia{
  display: block !important;
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}
.mod-historia-img{
  margin-top: 56px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* ──────────── TIMELINE — keep editorial flavor (one allowed asymmetric) ──────────── */
.mod-timeline-item:hover .mod-timeline-year{
  color: #BDB09D !important;
}

/* ──────────── PULL QUOTE Apple-pure ──────────── */
.mod-quote{
  text-align: center !important;
}
.mod-quote-mark{ display: none !important; }
.mod-quote p{
  font-family: 'Bodoni Moda', Georgia, serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: clamp(1.8rem, 3.6vw, 3rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
  color: #F2EDE2 !important;
  max-width: 880px !important;
  margin: 0 auto 28px !important;
}
.mod-quote-cite{
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(189, 176, 157, 0.85) !important;
}

/* ──────────── FINAL CTA Apple-ified ──────────── */
.mod-final-cta{
  text-align: center !important;
}
.mod-final-cta .mod-cta-row{
  justify-content: center !important;
}

/* ──────────── COLLAB section center ──────────── */
.mod-collab,
.mod-collab-grid{
  text-align: center !important;
  justify-content: center !important;
}

/* ──────────── MOBILE adjustments ──────────── */
@media (max-width: 768px){
  .hero-content{ bottom: 56px !important; }
  .hero-title{ max-width: none !important; font-size: clamp(2.6rem, 9vw, 4.2rem) !important; }
  .mod-section{ padding-top: 88px !important; padding-bottom: 88px !important; }
  .mod-h2{ font-size: clamp(2rem, 7vw, 3rem) !important; }
}