/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — FASE V · LIFE layer
   Motion + luz + color. Lo que convierte estructura correcta en sitio vivo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── 1. COLOR DE VUELTA — las fotos respiran ──────────── */

/* Cards de producciones: quitar el gradiente oscuro innecesario sobre la foto
   (el texto va DEBAJO de la imagen, no encima — ese overlay solo mataba color) */
.mod-cards-3 .mod-card::before{
  display: none !important;
}

/* Quitar el desaturado que les puse — color teatral real (rojos, verdes, blancos) */
.mod-card-img img,
.mod-card-2-img img,
.mod-historia-img img{
  filter: none !important;
}

/* Hover: la foto brilla (el efecto aprobado en el nav, ahora en el body) */
.mod-card-img img,
.mod-card-2-img img{
  transition: filter .45s cubic-bezier(.16,1,.3,1) !important;
}
.mod-card:hover .mod-card-img img,
.mod-card-2:hover .mod-card-2-img img{
  filter: brightness(1.08) saturate(1.05) !important;
}

/* ──────────── 2. PHOTO MOMENTS — luz y color real ────────────
   Antes: gradiente 85-95% negro encima de TODO. Ahora: oscuro solo
   donde vive el texto (radial izquierda-abajo), el resto respira */
.mod-photomoment::before{
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.50) 0%,
      rgba(0,0,0,0.12) 22%,
      rgba(0,0,0,0.05) 45%,
      rgba(0,0,0,0.25) 70%,
      rgba(0,0,0,0.78) 100%) !important;
}
.mod-photomoment::after{
  background:
    radial-gradient(ellipse 62% 58% at 16% 82%,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.42) 38%,
      rgba(0,0,0,0.12) 62%,
      transparent 80%) !important;
}

/* La imagen del photo moment ligeramente sobredimensionada para el parallax
   (specificity 0,2,0 para ganar a inset:0 de capas anteriores) */
.mod-photomoment{
  overflow: hidden !important;
}
.mod-photomoment .mod-photomoment-img,
section.mod-photomoment > .mod-photomoment-img{
  height: 116% !important;
  top: -8% !important;
  bottom: auto !important;
  will-change: transform;
}

/* ──────────── 3. LUZ AMBIENTAL VISIBLE — momentos de calidez ──────────── */
.opm-numbers{
  position: relative !important;
}
.opm-numbers .opm-life-glow{
  position: absolute;
  top: -10%;
  left: -8%;
  width: 70%;
  height: 90%;
  background: radial-gradient(ellipse 55% 55% at 38% 42%,
    rgba(205, 178, 132, 0.13) 0%,
    rgba(189, 176, 157, 0.06) 38%,
    transparent 68%);
  filter: blur(52px);
  pointer-events: none;
  z-index: 0;
}
.mod-final-cta .opm-life-glow{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse 60% 55% at 50% 45%,
    rgba(205, 178, 132, 0.12) 0%,
    rgba(178, 80, 40, 0.05) 42%,
    transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.opm-newsletter .opm-life-glow{
  position: absolute;
  bottom: -15%;
  right: -5%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse 55% 55% at 60% 55%,
    rgba(189, 176, 157, 0.10) 0%,
    transparent 65%);
  filter: blur(56px);
  pointer-events: none;
  z-index: 0;
}

/* ──────────── 4. FILM GRAIN — textura de material (mata el negro plano) ──────────── */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ──────────── 5. REVEAL CURVES premium (sin tocar el sistema de clases) ──────────── */
.opm-reveal{
  transform: translateY(30px) scale(0.992);
  transition-duration: 1s !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}
.opm-reveal.is-visible{
  transform: translateY(0) scale(1);
}

/* ──────────── 6. NAV LINKS — underline grow (micro-vida) ──────────── */
.apple-nav .an-menu > a,
.apple-nav .an-menu > .an-has-flyout > button{
  position: relative !important;
}
.apple-nav .an-menu > a::after,
.apple-nav .an-menu > .an-has-flyout > button::after{
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 1px;
  background: rgba(255,255,255,0.7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.apple-nav .an-menu > a:hover::after,
.apple-nav .an-menu > .an-has-flyout > button:hover::after,
.apple-nav .an-menu > a.active::after{
  transform: scaleX(1);
}

/* ──────────── 7. HERO CONTENT — preparado para exit-on-scroll (JS) ──────────── */
.hero-content{
  will-change: transform, opacity;
}

/* Parallax targets — GPU */
.mod-historia-img img,
.mod-intro-split .mod-intro-img img{
  will-change: transform;
  transform: scale(1.12);
}

/* ──────────── 8. REDUCED MOTION — apagar toda la capa de vida ──────────── */
@media (prefers-reduced-motion: reduce){
  body::after{ display: none; }
  .mod-photomoment-img{ height: 100% !important; top: 0 !important; }
  .mod-historia-img img,
  .mod-intro-split .mod-intro-img img{ transform: none; }
  .opm-reveal{ transform: none; transition: none !important; }
}