/* =========================================================================
   MENSORA — Hero cinematográfico scroll-driven (portada).
   Todo namespaced bajo .mhero-cine / .mhc-* para NO tocar el resto del sitio.
   El "pin" lo maneja GSAP ScrollTrigger (no usamos position:sticky porque el
   body tiene overflow-x:hidden y lo rompería).
   ========================================================================= */

.mhero-cine{ position:relative; height:600vh; background:#0B0C0E; }
.mhero-cine__stage{
  position:relative; height:100vh; width:100%;
  overflow:hidden; background:#0B0C0E;
}

/* Los 6 fotogramas apilados */
.mhc-frame{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  opacity:0; transform:scale(1.05);
  will-change:opacity, transform; backface-visibility:hidden;
}
.mhc-frame.is-first{ opacity:1; }

/* Degradados para legibilidad + cine */
.mhc-scrim{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.mhc-scrim--v{ background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.mhc-scrim--t{ background:linear-gradient(180deg, rgba(0,0,0,.5), transparent 20%); }

/* ---- Intro (escena 1) ---- */
.mhc-intro{
  position:absolute; z-index:20; left:0; right:0; top:19%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 24px; will-change:opacity, transform;
}
.mhc-eyebrow{
  font-family:"Montserrat",system-ui,sans-serif; letter-spacing:.38em;
  text-transform:uppercase; font-size:12px; color:#F0C55E; margin:0 0 16px;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.mhc-title{
  font-family:"Playfair Display",Georgia,serif; font-weight:800; line-height:1.04;
  font-size:clamp(34px,6vw,86px); color:#fff; margin:0;
  text-shadow:0 6px 40px rgba(0,0,0,.7);
}
.mhc-title span{ color:#F0C55E; }
.mhc-sub{
  margin:20px auto 0; max-width:48ch;
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:500;
  font-size:clamp(17px,2.1vw,23px); color:rgba(255,255,255,.9);
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}

/* ---- Indicador de scroll ---- */
.mhc-hint{
  position:absolute; z-index:20; bottom:30px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:"Montserrat",system-ui,sans-serif; letter-spacing:.26em;
  text-transform:uppercase; font-size:10.5px; color:rgba(255,255,255,.82);
  will-change:opacity;
}
.mhc-mouse{ width:23px; height:36px; border:1.5px solid rgba(255,255,255,.6); border-radius:13px; position:relative; }
.mhc-mouse::after{
  content:""; position:absolute; top:6px; left:50%; width:3px; height:7px;
  background:#F0C55E; border-radius:2px; transform:translateX(-50%);
  animation:mhcWheel 1.6s ease-in-out infinite;
}
@keyframes mhcWheel{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* ---- Final (escena 6) con CTAs reales ---- */
.mhc-final{
  position:absolute; z-index:20; left:0; right:0; bottom:11%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 24px; opacity:0; will-change:opacity, transform;
}
.mhc-ftitle{
  font-family:"Playfair Display",Georgia,serif; font-weight:800; line-height:1.06;
  font-size:clamp(28px,4.4vw,58px); color:#fff; margin:0; max-width:18ch;
  text-shadow:0 6px 40px rgba(0,0,0,.8);
}
.mhc-ftitle span{ color:#F0C55E; }
.mhc-ctas{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.mhc-btn{
  font-family:"Montserrat",system-ui,sans-serif; font-weight:700; font-size:14px;
  letter-spacing:.04em; padding:15px 30px; border-radius:100px; transition:.3s ease;
  border:1px solid transparent; text-decoration:none; display:inline-block;
}
.mhc-btn--gold{ background:linear-gradient(135deg,#F0C55E,#C89B3C); color:#0B0C0E; box-shadow:0 10px 34px rgba(200,155,60,.4); }
.mhc-btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 44px rgba(200,155,60,.55); }
.mhc-btn--ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.mhc-btn--ghost:hover{ border-color:#F0C55E; color:#F0C55E; }
.mhc-note{ margin-top:16px; font-family:"Inter",system-ui,sans-serif; font-size:12.5px; color:rgba(255,255,255,.65); }

/* ---- Móvil: usa las imágenes VERTICALES (m01..m06) a pantalla completa (cover).
        Como ya vienen en formato celular, se ven enteras sin recorte feo.
        CTAs apilados que no chocan con el chat. ---- */
@media (max-width:640px){
  .mhc-frame{ object-fit:cover; object-position:center center; }
  .mhc-intro{ top:8%; }
  .mhc-final{ bottom:9%; }
  .mhc-ctas{ flex-direction:column; width:100%; max-width:320px; }
  .mhc-btn{ width:100%; text-align:center; }
}

/* ---- Fallback ESTÁTICO: sin JS/GSAP, con reduce-motion, o si el motor no arranca.
        Mostramos la 1ª escena (sin cartel de producto) + intro + CTAs, sin scroll. ---- */
.mhero-cine.no-js, .mhero-cine.is-static{ height:100vh; }
.mhero-cine.no-js .mhc-frame.is-first,
.mhero-cine.is-static .mhc-frame.is-first{ opacity:1; transform:scale(1); }
.mhero-cine.no-js .mhc-intro,
.mhero-cine.is-static .mhc-intro{ opacity:1; transform:none; }
.mhero-cine.no-js .mhc-final,
.mhero-cine.is-static .mhc-final{ opacity:1; transform:none; pointer-events:auto; }
.mhero-cine.no-js .mhc-hint,
.mhero-cine.is-static .mhc-hint{ display:none; }