/* MADRE SELVA · HERO luxe (02/11/2026) — ES / PT-BR / EN.
   Las tarjetas BASE/PRO/PREMIUM están horneadas en la imagen aprobada: esta capa recorta cada tarjeta
   (imagen + textos localizados) en un bloque propio para poder elevarla e iluminarla sin tocar el arte. */
@property --mhl-a{syntax:"<angle>";inherits:false;initial-value:0deg}
#ms-hero-static{--mhl-gold:#d4b074;--mhl-gold-hi:#f3d99b;--mhl-gold-max:#fff1c9}

/* Legibilidad y respiro de los textos internos */
#ms-hero-static .mhsx .mhsx-sub{color:#fff9ec;font-weight:400;font-size:.9cqw;line-height:1.5;letter-spacing:.14em;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 .8em rgba(0,0,0,.5)}
#ms-hero-static .mhsx .mhsx-ver{color:#fff3d2;text-shadow:0 1px 2px rgba(0,0,0,.8)}

/* El brillo lo da la capa nueva: el hit queda solo como zona clicable */
#ms-hero-static .mhs-crop .mhs-hit--card,#ms-hero-static .mhs-crop .mhs-hit--card:hover{background:none;box-shadow:none}

/* Escenario: replica la posición de la imagen en cada encuadre */
#ms-hero-static .mhl-stage{position:absolute;left:0;top:0;width:100%;aspect-ratio:1671/941;container-type:inline-size;pointer-events:none;z-index:2}
#ms-hero-static .mhl-slot{position:absolute;left:calc(var(--l)*1%);top:calc(var(--t)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border-radius:1.25cqw;z-index:1;transition:transform .75s cubic-bezier(.22,1,.36,1);will-change:transform}
#ms-hero-static .mhl-slot--base{--l:52.01;--t:22.74;--w:13.47;--h:54.52}
#ms-hero-static .mhl-slot--pro{--l:66.43;--t:22.74;--w:13.7;--h:54.52}
#ms-hero-static .mhl-slot--premium{--l:81.03;--t:22.74;--w:13.35;--h:54.52}
#ms-hero-static .mhl-shot{position:absolute;inset:0;overflow:hidden;border-radius:inherit;transition:filter .75s ease}
#ms-hero-static .mhl-full{position:absolute;left:calc(var(--l)/var(--w)*-100%);top:calc(var(--t)/var(--h)*-100%);width:calc(100/var(--w)*100%);aspect-ratio:1671/941;z-index:0}
#ms-hero-static .mhl-full>img{display:block;width:100%;height:auto;max-width:none;margin:0}
#ms-hero-static .mhl-full .mhsx{margin:0!important;width:100%!important}

/* Borde en pan de oro + resplandor */
#ms-hero-static .mhl-ring{position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .6s ease,box-shadow .75s ease}
#ms-hero-static .mhl-ring::before,#ms-hero-static .mhl-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:max(1.5px,.11cqw);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#ms-hero-static .mhl-ring::before{background:linear-gradient(155deg,var(--mhl-gold-max) 0%,var(--mhl-gold) 32%,var(--mhl-gold-hi) 58%,#a9833f 80%,var(--mhl-gold-max) 100%)}
#ms-hero-static .mhl-ring::after{opacity:0;background:conic-gradient(from var(--mhl-a),transparent 0 72%,var(--mhl-gold-hi) 86%,#fffaf0 92%,var(--mhl-gold-hi) 96%,transparent 100%)}

/* Rayo de luz que cruza la tarjeta al recibir el turno */
#ms-hero-static .mhl-sweep{position:absolute;z-index:1;top:-10%;bottom:-10%;left:-70%;width:55%;opacity:0;background:linear-gradient(100deg,transparent 0,rgba(255,226,160,.08) 25%,rgba(255,241,201,.3) 50%,rgba(255,226,160,.08) 75%,transparent 100%);transform:skewX(-14deg);mix-blend-mode:screen}

/* Tarjeta activa (turno automático, hover o foco). Trato equitativo: ninguna tarjeta brilla en reposo. */
#ms-hero-static .mhl-slot.is-active{z-index:3;transform:translateY(-.38cqw) scale(1.03)}
#ms-hero-static .mhl-slot.is-active .mhl-shot{filter:brightness(1.07) saturate(1.08)}
#ms-hero-static .mhl-slot.is-active .mhl-ring{opacity:1;box-shadow:0 0 1.5cqw rgba(255,231,170,.62),0 0 4.4cqw rgba(212,176,116,.36),0 1.5cqw 2.8cqw rgba(0,0,0,.55)}
#ms-hero-static .mhl-slot.is-active .mhl-ring::after{opacity:1;animation:mhl-orbit 2.8s linear both}
#ms-hero-static .mhl-slot.is-active .mhl-sweep{animation:mhl-sweep 1.25s cubic-bezier(.3,.1,.3,1) both}
@keyframes mhl-orbit{to{--mhl-a:360deg}}
@keyframes mhl-sweep{0%{opacity:0;left:-70%}18%{opacity:1}82%{opacity:1}100%{opacity:0;left:125%}}

/* Encuadres: mismos desplazamientos que la imagen y .mhsx */
@media (max-width:1023.98px){#ms-hero-static .mhs-desk .mhl-stage{margin-top:-5.386%}}
@media (max-width:699.98px){
  #ms-hero-static .mhs-mob-b .mhl-stage{width:230.17%;margin-left:-118.46%;margin-top:-28.24%}
  #ms-hero-static .mhl-slot.is-active{transform:translateY(-.14cqw) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){
  #ms-hero-static .mhl-slot,#ms-hero-static .mhl-slot.is-active{transform:none;transition:none}
  #ms-hero-static .mhl-slot.is-active .mhl-ring::after,#ms-hero-static .mhl-slot.is-active .mhl-sweep{animation:none}
}