/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — FASE W · CRAFT layer
   Bringhurst (micro-tipografía) · Samara (romper la retícula con intención)
   Albers (interacción del color) · Tondreau (variación de layout)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── BRINGHURST · The Elements of Typographic Style ──────────── */

/* Kerning + ligaduras activas en todo el sitio (cap. 2: "letterfit") */
html{
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
body{
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Headlines balanceados — sin viudas tipográficas (line breaks parejos) */
.hero-title,
.mod-h2,
.section-title,
.opm-newsletter-h2,
.mod-photomoment-quote,
.opm-numbers-hero-headline,
.mod-portrait-name{
  text-wrap: balance;
}

/* Prosa con saltos de línea optimizados (evita huérfanas) */
.mod-prose p,
.mod-lede,
.hero-lede,
.opm-newsletter-lede,
.section-lede{
  text-wrap: pretty;
}

/* Cifras elzevirianas (old-style) en texto corrido y metas —
   las cifras de caja alta (lining) solo en cifras display (Bringhurst 2.3.1) */
.mod-card-meta,
.mod-timeline-meta,
.mod-timeline-content p,
.mod-photomoment-caption,
.mod-collab-desc,
.footer-sub{
  font-variant-numeric: oldstyle-nums;
}
.opm-numbers-hero-num,
.opm-numbers-card-num,
.mod-timeline-year{
  font-variant-numeric: lining-nums;
}

/* Puntuación colgante en la cita (Safari progressive enhancement) */
.mod-quote p{
  hanging-punctuation: first last;
}

/* Alineación óptica de margen: la primera letra del hero y el «10»
   cuelgan ligeramente para alinear ópticamente (Bringhurst 2.3.4) */
.hero-title{
  text-indent: -0.04em;
}
.opm-numbers-hero-num{
  margin-left: -0.05em !important;
}

/* ──────────── SAMARA · Making and Breaking the Grid ────────────
   Tres rupturas intencionales — tensión sin perder orden */
@media (min-width: 980px){

  /* Ruptura 1: la foto de historia ROMPE el padding vertical de su sección
     (sale del row — clásico editorial) */
  .mod-section:has(.mod-historia){
    overflow: visible !important;
  }
  .mod-historia-img{
    margin-top: -72px !important;
    margin-bottom: -36px !important;
    box-shadow: 0 32px 80px -24px rgba(0,0,0,0.8) !important;
  }

  /* Ruptura 2: card central de producciones elevada — baseline shift
     (Samara: la variación de baseline crea ritmo; Tondreau princ. 47) */
  .mod-cards-3 > .mod-card:nth-child(2){
    transform: translateY(-20px) !important;
  }
  .mod-cards-3 > .mod-card:nth-child(2):hover{
    transform: translateY(-26px) !important;
  }
}

/* ──────────── ALBERS · Interaction of Color ────────────
   El mismo oro vibra distinto según el fondo: tints warm/cool
   alternados (2-3%) en los darks — el color deja de ser plano */
.mod-section--d-warm{
  background: linear-gradient(180deg, #0b0a07 0%, #060503 55%, #0b0a07 100%) !important;
}
.mod-section--d-midnight,
.mod-section--d-cool{
  background: linear-gradient(180deg, #08090c 0%, #040507 55%, #08090c 100%) !important;
}
.mod-section--d-apple{
  background: linear-gradient(180deg, #0a0a0b 0%, #050506 55%, #0a0a0b 100%) !important;
}

/* El oro sobre warm se percibe más cálido; sobre cool, más luminoso.
   Compensación Albers: ligeramente más saturado en secciones cool */
.mod-section--d-cool .mod-h2 em,
.mod-section--d-midnight .mod-h2 em{
  color: #C9BBA4 !important;
}

/* ──────────── TONDREAU · Layout Essentials ────────────
   Princ. 23: variar la entrada de los elementos en stagger real */
.opm-reveal-stagger > *:nth-child(1){ transition-delay: 0ms; }
.opm-reveal-stagger > *:nth-child(2){ transition-delay: 90ms; }
.opm-reveal-stagger > *:nth-child(3){ transition-delay: 180ms; }
.opm-reveal-stagger > *:nth-child(4){ transition-delay: 270ms; }

/* ──────────── REDUCED MOTION ──────────── */
@media (prefers-reduced-motion: reduce){
  .mod-cards-3 > .mod-card:nth-child(2){
    transform: none !important;
  }
  .opm-reveal-stagger > *{
    transition-delay: 0ms !important;
  }
}