/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — "Una década en cifras"
   Cinemática Apple real: jerarquía + narrativa + escala + asimetría
   - Hero stat dominante con contexto editorial
   - 3 stats secundarios con micro-historia (no solo número + label)
   - Counter animation premium con IntersectionObserver
   ═══════════════════════════════════════════════════════════════════════════ */

.opm-numbers{
  background:var(--opm-d-deep, #000);
  position:relative;
  padding:clamp(120px, 18vh, 200px) 0;
  overflow:hidden;
}

/* Ambient: glow sutil dorado detrás del hero number (Apple environment-style) */
.opm-numbers::before{
  content:"";
  position:absolute;
  top:18%;
  left:-5%;
  width:65%;
  height:60%;
  background:radial-gradient(ellipse 70% 60% at 30% 50%,
    rgba(189,176,157,0.06) 0%,
    rgba(189,176,157,0.03) 30%,
    transparent 60%);
  pointer-events:none;
  filter:blur(40px);
}

.opm-numbers-inner{
  position:relative;
  max-width:1280px;
  margin:0 auto;
  padding:0 clamp(24px, 6vw, 80px);
  z-index:1;
}

.opm-numbers-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(189,176,157,0.78);
  margin:0 0 clamp(80px, 12vh, 140px);
}
.opm-numbers-eyebrow::before{
  content:"";
  width:48px;
  height:1px;
  background:rgba(189,176,157,0.55);
}

/* ──────────── HERO STAT (asimétrico, escala Apple Watch landing) ──────────── */
.opm-numbers-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 0.95fr);
  gap:clamp(40px, 8vw, 120px);
  align-items:end;
  margin-bottom:clamp(80px, 12vh, 140px);
}

.opm-numbers-hero-stat{
  position:relative;
  display:flex;
  align-items:flex-start;
  line-height:1;
}

.opm-numbers-hero-num{
  font-family:'Bodoni Moda', Georgia, serif;
  font-weight:500;
  font-style:normal; /* NOT italic — Apple usa upright para números display */
  font-size:clamp(8rem, 17vw, 17rem);
  line-height:0.84;
  letter-spacing:-0.055em;
  color:#F2EDE2;
  display:block;
  /* Optical kern to align baseline visually */
  margin-bottom:-0.04em;
}

.opm-numbers-hero-suffix{
  font-family:'Bodoni Moda', Georgia, serif;
  font-weight:400;
  font-style:italic;
  font-size:clamp(2rem, 4.2vw, 4.2rem);
  line-height:1;
  letter-spacing:-0.015em;
  color:rgba(189,176,157,0.92);
  margin-left:0.18em;
  margin-top:0.42em; /* sit it visually near top of number */
  align-self:flex-start;
}

.opm-numbers-hero-context{
  padding-bottom:clamp(20px, 4vh, 48px);
}

.opm-numbers-hero-headline{
  font-family:'Bodoni Moda', Georgia, serif;
  font-weight:500;
  font-size:clamp(1.6rem, 2.4vw, 2.3rem);
  line-height:1.18;
  letter-spacing:-0.018em;
  color:#F2EDE2;
  margin:0 0 24px;
}
.opm-numbers-hero-headline em{
  font-style:italic;
  color:#BDB09D;
}

.opm-numbers-hero-lede{
  font-family:'Inter', sans-serif;
  font-size:15.5px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:-0.005em;
  color:rgba(255,255,255,0.62);
  max-width:480px;
  margin:0;
}

/* ──────────── DIVIDER hairline ──────────── */
.opm-numbers-divider{
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(189,176,157,0.18) 12%,
    rgba(189,176,157,0.28) 50%,
    rgba(189,176,157,0.18) 88%,
    transparent 100%);
  margin:0 0 clamp(80px, 10vh, 120px);
}

/* ──────────── 3 SUPPORTING STATS con contexto narrativo ──────────── */
.opm-numbers-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(48px, 6vw, 96px);
  align-items:start;
}

.opm-numbers-card{
  position:relative;
}

.opm-numbers-card-num{
  font-family:'Bodoni Moda', Georgia, serif;
  font-weight:500;
  font-style:normal;
  font-size:clamp(4.5rem, 8.5vw, 7.5rem);
  line-height:0.88;
  letter-spacing:-0.045em;
  color:#F2EDE2;
  margin-bottom:28px;
  display:block;
}

.opm-numbers-card-title{
  font-family:'Inter', sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:rgba(189,176,157,0.92);
  margin:0 0 18px;
}

.opm-numbers-card-body{
  font-family:'Inter', sans-serif;
  font-size:14.5px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:-0.003em;
  color:rgba(255,255,255,0.62);
  max-width:280px;
  margin:0;
}

/* ──────────── CTA closing (Apple "Learn more →" style) ──────────── */
.opm-numbers-cta{
  margin-top:clamp(80px, 10vh, 120px);
  padding-top:clamp(40px, 6vh, 64px);
  border-top:1px solid rgba(255,255,255,0.06);
  text-align:left;
}

.opm-numbers-link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:'Inter', sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:-0.005em;
  color:#BDB09D;
  text-decoration:none;
  padding:8px 0;
  transition:color .25s, gap .25s cubic-bezier(.4,0,.2,1);
}
.opm-numbers-link:hover{
  color:#F2EDE2;
  gap:18px;
}
.opm-numbers-link-arrow{
  display:inline-block;
  font-size:18px;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.opm-numbers-link:hover .opm-numbers-link-arrow{
  transform:translateX(4px);
}

/* ──────────── ANIMATION: reveal stagger ──────────── */
.opm-numbers-hero-num,
.opm-numbers-hero-suffix,
.opm-numbers-hero-context > *,
.opm-numbers-card{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.opm-numbers.is-revealed .opm-numbers-hero-num{ opacity:1; transform:translateY(0); transition-delay:0ms; }
.opm-numbers.is-revealed .opm-numbers-hero-suffix{ opacity:1; transform:translateY(0); transition-delay:280ms; }
.opm-numbers.is-revealed .opm-numbers-hero-headline{ opacity:1; transform:translateY(0); transition-delay:160ms; }
.opm-numbers.is-revealed .opm-numbers-hero-lede{ opacity:1; transform:translateY(0); transition-delay:320ms; }
.opm-numbers.is-revealed .opm-numbers-card:nth-child(1){ opacity:1; transform:translateY(0); transition-delay:480ms; }
.opm-numbers.is-revealed .opm-numbers-card:nth-child(2){ opacity:1; transform:translateY(0); transition-delay:600ms; }
.opm-numbers.is-revealed .opm-numbers-card:nth-child(3){ opacity:1; transform:translateY(0); transition-delay:720ms; }

/* ──────────── RESPONSIVE ──────────── */
@media (max-width: 960px){
  .opm-numbers-hero{
    grid-template-columns:1fr;
    gap:48px;
    align-items:start;
  }
  .opm-numbers-hero-context{ padding-bottom:0; }
  .opm-numbers-grid{
    grid-template-columns:1fr;
    gap:64px;
  }
  .opm-numbers-card-body{ max-width:none; }
}

@media (max-width: 600px){
  .opm-numbers{ padding:96px 0; }
  .opm-numbers-eyebrow{ margin-bottom:64px; }
  .opm-numbers-hero-num{ font-size:clamp(6rem, 28vw, 10rem); }
  .opm-numbers-hero-suffix{ font-size:clamp(1.6rem, 7vw, 2.4rem); margin-top:0.32em; }
  .opm-numbers-card-num{ font-size:clamp(4rem, 18vw, 5.5rem); }
}

@media (prefers-reduced-motion: reduce){
  .opm-numbers-hero-num,
  .opm-numbers-hero-suffix,
  .opm-numbers-hero-context > *,
  .opm-numbers-card{
    opacity:1 !important;
    transform:none !important;
  }
}