/* SERMAGIC EXPERIENCE · Producción · Todos los selectores están encapsulados con smx- */
#smx-experience-module {
  --smx-orange: #ff8700;
  --smx-red: #f21d31;
  --smx-white: #f6f5f2;
  --smx-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --smx-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --smx-eye-x: 58%;
  --smx-eye-y: 45%;
  --smx-eye-start: 1.12;
  --smx-eye-creep: 1.17;
  --smx-eye-rush: 1.29;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: -14px auto 0;
  padding: 0 clamp(12px, 2vw, 24px) 34px;
  overflow: visible;
  isolation: isolate;
  color: var(--smx-white);
  background: #fff;
  font-family: var(--smx-sans);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: left;
}

#smx-experience-module,
#smx-experience-module * { box-sizing: border-box; }

#smx-experience-module .smx-rule {
  position: relative;
  z-index: 10;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

#smx-experience-module .smx-rule span {
  width: min(25vw, 245px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--smx-red));
}

#smx-experience-module .smx-rule span:last-child { transform: scaleX(-1); }

#smx-experience-module .smx-rule b {
  display: inline-block;
  margin: 0;
  padding: 10px 25px;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(110deg, #ff9a05, #ff6d00);
  box-shadow: 0 7px 24px rgba(255,112,0,.45);
  font-family: var(--smx-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
}

#smx-experience-module .smx-ad {
  position: relative;
  min-height: 500px;
  display: grid;
  grid-template-columns: 47% 53%;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--smx-white);
  border: 1px solid rgba(255,255,255,.08);
  background: #030303;
  box-shadow: 0 26px 70px rgba(5,5,10,.18);
}

#smx-experience-module .smx-ad::before {
  content: "";
  position: absolute;
  z-index: 7;
  left: -15%;
  top: -52px;
  width: 130%;
  height: 70px;
  border-radius: 0 0 50% 50%;
  background: #fff;
  box-shadow: 0 2px 0 rgba(255,135,0,.9), 0 8px 22px rgba(0,0,0,.16);
  pointer-events: none;
}

#smx-experience-module .smx-ad::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 80px #000;
}

#smx-experience-module .smx-ad-noise {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .045;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 21%, #fff 0 1px, transparent 1.2px),
    radial-gradient(circle at 71% 34%, #fff 0 .7px, transparent 1px),
    radial-gradient(circle at 44% 78%, #fff 0 .8px, transparent 1.1px),
    radial-gradient(circle at 88% 64%, #fff 0 .7px, transparent 1px);
  background-size: 37px 41px, 53px 47px, 43px 61px, 71px 67px;
}

#smx-experience-module .smx-copy {
  position: relative;
  z-index: 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 52px clamp(28px,4.5vw,72px);
  background: linear-gradient(90deg,#020202 0%,#030303 75%,transparent 100%);
}

#smx-experience-module .smx-brand { margin: 0 0 clamp(28px,4vh,44px); }

#smx-experience-module .smx-brand div {
  position: relative;
  margin: 0;
  font-size: clamp(28px,3.3vw,46px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
}

#smx-experience-module .smx-brand strong { color: var(--smx-red); font: inherit; }
#smx-experience-module .smx-brand b { color: #f5f5f5; font: inherit; }

#smx-experience-module .smx-brand i {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -7px 0 0 5px;
  background: var(--smx-red);
  transform: rotate(45deg);
  box-shadow: 0 0 13px rgba(242,29,49,.8);
}

#smx-experience-module .smx-brand > span {
  display: block;
  margin-top: 11px;
  color: var(--smx-white);
  font-family: var(--smx-mono);
  font-size: clamp(11px,1.4vw,18px);
  line-height: 1.2;
  letter-spacing: .48em;
}

#smx-experience-module .smx-copy h2 {
  margin: 0;
  color: #fff;
  font-family: var(--smx-mono);
  font-size: clamp(28px,4.15vw,57px);
  font-style: normal;
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.075em;
  text-align: left;
  text-transform: none;
}

#smx-experience-module .smx-copy h2 span { display: block; color: #fff; font: inherit; }
#smx-experience-module .smx-copy h2 strong { display: block; color: var(--smx-red); font: inherit; font-weight: 800; }

#smx-experience-module .smx-copy p {
  margin: clamp(22px,3vh,34px) 0;
  color: var(--smx-white);
  font-family: var(--smx-mono);
  font-size: clamp(15px,1.7vw,21px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: .04em;
  text-align: left;
}

#smx-experience-module .smx-discover {
  position: relative;
  min-width: min(100%,330px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 17px 24px;
  overflow: hidden;
  appearance: none;
  color: #fff;
  border: 1px solid var(--smx-red);
  border-radius: 0;
  background: rgba(0,0,0,.68);
  box-shadow: 0 0 18px rgba(242,29,49,.48), inset 0 0 15px rgba(242,29,49,.1);
  cursor: pointer;
  font-family: var(--smx-mono);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .28em;
  text-align: left;
  text-transform: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease, box-shadow .25s ease;
}

#smx-experience-module .smx-discover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--smx-red);
  transform: translateX(-102%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

#smx-experience-module .smx-discover:hover::before,
#smx-experience-module .smx-discover:focus-visible::before { transform: translateX(0); }

#smx-experience-module .smx-discover:hover,
#smx-experience-module .smx-discover:focus-visible { box-shadow: 0 0 28px rgba(242,29,49,.72); outline: 0; }

#smx-experience-module .smx-discover:disabled { cursor: default; }
#smx-experience-module .smx-discover span,
#smx-experience-module .smx-discover b { position: relative; z-index: 1; margin: 0; font: inherit; }

#smx-experience-module .smx-discover b {
  color: var(--smx-red);
  font-size: 28px;
  line-height: 0;
  transition: color .25s ease, transform .25s ease;
}

#smx-experience-module .smx-discover:hover b,
#smx-experience-module .smx-discover:focus-visible b { color: #fff; transform: translateX(4px); }

#smx-experience-module .smx-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #02080b;
}

#smx-experience-module .smx-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  margin: 0;
  object-fit: cover;
  object-position: var(--smx-eye-x) var(--smx-eye-y);
  transform: scale(var(--smx-eye-start));
  transform-origin: var(--smx-eye-x) var(--smx-eye-y);
}

#smx-experience-module .smx-visual-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#030303 0%,transparent 32%),linear-gradient(0deg,rgba(0,0,0,.35),transparent 40%);
}

#smx-experience-module .smx-portal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  visibility: hidden;
  overflow: hidden;
  color: #fff;
  background: rgba(0,0,0,0);
  pointer-events: none;
  font-family: var(--smx-mono);
  transition: background .7s ease;
}

#smx-experience-module .smx-portal.smx-is-active { visibility: visible; background: #000; pointer-events: auto; }

#smx-experience-module .smx-portal-media {
  position: fixed;
  overflow: hidden;
  background: #000;
  will-change: left,top,width,height,transform;
  transition: left 1.75s cubic-bezier(.18,.68,.26,1),top 1.75s cubic-bezier(.18,.68,.26,1),width 1.75s cubic-bezier(.18,.68,.26,1),height 1.75s cubic-bezier(.18,.68,.26,1);
}

#smx-experience-module .smx-portal-media video {
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  margin: 0;
  object-fit: cover;
  object-position: var(--smx-eye-x) var(--smx-eye-y);
  transform: scale(var(--smx-eye-start));
  transform-origin: var(--smx-eye-x) var(--smx-eye-y);
  will-change: transform,filter;
  filter: brightness(.98) contrast(1.03) saturate(.96);
  transition: transform 3.05s cubic-bezier(.15,.72,.22,1),filter .8s ease;
}

#smx-experience-module .smx-portal.smx-is-framed .smx-portal-media { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important; }
#smx-experience-module .smx-portal.smx-is-creeping .smx-portal-media video { transform: scale(var(--smx-eye-creep)); filter: brightness(.84) contrast(1.08) saturate(.9); }
#smx-experience-module .smx-portal.smx-is-rushing .smx-portal-media video { transform: scale(var(--smx-eye-rush)); transition: transform 1.85s cubic-bezier(.55,.02,1,.35),filter .5s ease; filter: brightness(.72) contrast(1.16) saturate(.86); }

#smx-experience-module .smx-portal-vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at var(--smx-eye-x) var(--smx-eye-y),transparent 0 20%,rgba(0,0,0,.12) 55%,rgba(0,0,0,.68) 100%); transition: opacity 1.2s ease; }
#smx-experience-module .smx-portal.smx-is-framed .smx-portal-vignette { opacity: 1; }
#smx-experience-module .smx-portal-scanlines { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: soft-light; background: repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.04) 4px); transition: opacity .6s ease; }
#smx-experience-module .smx-portal.smx-is-typing .smx-portal-scanlines { opacity: .5; }

#smx-experience-module .smx-system-message {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(88vw,820px);
  padding: 0 16px;
  color: #fff;
  opacity: 0;
  text-align: center;
  font-family: var(--smx-mono);
  transform: translate(-50%,-42%);
  transition: opacity .5s ease,transform .7s ease;
}

#smx-experience-module .smx-portal.smx-is-typing .smx-system-message { opacity: 1; transform: translate(-50%,-50%); }
#smx-experience-module .smx-system-prefix { display: block; margin-bottom: 14px; color: rgba(255,255,255,.55); font-size: clamp(9px,1.4vw,13px); line-height: 1.2; letter-spacing: .36em; }
#smx-experience-module .smx-system-message div { display: inline-flex; align-items: center; min-height: 1.3em; text-shadow: 0 0 12px #000,0 0 28px #000; font-size: clamp(23px,4.4vw,62px); font-weight: 650; line-height: 1.2; letter-spacing: .035em; }
#smx-experience-module .smx-system-typed { color: #fff; }
#smx-experience-module .smx-system-message i { width: .08em; height: 1.05em; margin-left: .16em; background: var(--smx-red); box-shadow: 0 0 11px rgba(242,29,49,.85); animation: smx-cursor .78s steps(1) infinite; }
#smx-experience-module .smx-portal.smx-is-paused .smx-system-message i { animation: none; opacity: 0; }
#smx-experience-module .smx-portal.smx-is-rushing .smx-system-message { opacity: 0; transform: translate(-50%,-60%) scale(.97); transition-duration: .18s; }

#smx-experience-module .smx-portal-blackout { position: absolute; inset: 0; opacity: 0; background: #000; pointer-events: none; transition: opacity .24s linear; }
#smx-experience-module .smx-portal.smx-is-black .smx-portal-blackout { opacity: 1; }

#smx-experience-module .smx-final-lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(84vw,760px);
  display: grid;
  justify-items: center;
  color: #f2f0eb;
  opacity: 0;
  font-family: var(--smx-mono);
  text-align: center;
  transform: translate(-50%,-43%);
  pointer-events: none;
}

#smx-experience-module .smx-final-lockup::before,
#smx-experience-module .smx-final-lockup::after { content: ""; position: absolute; top: 50%; width: 0; height: 1px; opacity: .38; background: linear-gradient(90deg,transparent,var(--smx-red)); }
#smx-experience-module .smx-final-lockup::before { right: calc(100% + 28px); }
#smx-experience-module .smx-final-lockup::after { left: calc(100% + 28px); transform: scaleX(-1); }
#smx-experience-module .smx-final-lockup span { opacity: 0; color: #f2f0eb; font-size: clamp(13px,1.9vw,22px); font-weight: 500; line-height: 1.2; letter-spacing: .39em; clip-path: inset(0 100% 0 0); }
#smx-experience-module .smx-final-lockup strong { position: relative; margin-top: clamp(16px,2.2vw,25px); color: #f0444e; opacity: 0; font-size: clamp(32px,6.1vw,70px); font-weight: 720; line-height: .9; letter-spacing: .145em; clip-path: inset(0 100% 0 0); text-shadow: 0 0 24px rgba(240,68,78,.12); }
#smx-experience-module .smx-final-lockup i { position: absolute; inset: -20% auto -28%; width: 1px; opacity: 0; background: linear-gradient(transparent,rgba(255,255,255,.85),var(--smx-red),transparent); box-shadow: 0 0 16px rgba(242,29,49,.8); }
#smx-experience-module .smx-portal.smx-is-title .smx-final-lockup { opacity: 1; transform: translate(-50%,-50%); transition: opacity .18s linear,transform .8s cubic-bezier(.2,.75,.2,1); }
#smx-experience-module .smx-portal.smx-is-title .smx-final-lockup span { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .18s linear .12s,clip-path .7s steps(8,end) .12s; }
#smx-experience-module .smx-portal.smx-is-title .smx-final-lockup strong { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .12s linear .48s,clip-path .85s steps(10,end) .48s; }
#smx-experience-module .smx-portal.smx-is-title .smx-final-lockup i { opacity: 1; animation: smx-title-scan 1.08s cubic-bezier(.5,0,.3,1) .18s both; }
#smx-experience-module .smx-portal.smx-is-title .smx-final-lockup::before,
#smx-experience-module .smx-portal.smx-is-title .smx-final-lockup::after { width: min(10vw,120px); transition: width .7s ease 1s; }

@keyframes smx-cursor { 0%,48% { opacity: 1; } 49%,100% { opacity: 0; } }
@keyframes smx-title-scan { 0% { left: 2%; opacity: 0; } 8% { opacity: .9; } 92% { opacity: .75; } 100% { left: 98%; opacity: 0; } }

@media (max-width: 680px) {
  #smx-experience-module { --smx-eye-y: 40%; --smx-eye-start: 1.38; --smx-eye-creep: 1.45; --smx-eye-rush: 1.58; margin-top: -20px; padding: 0; }
  #smx-experience-module .smx-rule b { padding: 9px 20px; font-size: 13px; }
  #smx-experience-module .smx-ad::before { left: -20%; top: -43px; width: 140%; height: 57px; box-shadow: 0 1.5px 0 rgba(255,135,0,.9),0 6px 17px rgba(0,0,0,.14); }
  #smx-experience-module .smx-ad { min-height: 0; aspect-ratio: 1.17/1; grid-template-columns: 51% 49%; }
  #smx-experience-module .smx-copy { padding: 32px 0 22px 19px; justify-content: flex-start; }
  #smx-experience-module .smx-brand { margin: 0 0 25px; }
  #smx-experience-module .smx-brand div { font-size: clamp(20px,6.9vw,28px); }
  #smx-experience-module .smx-brand i { width: 7px; height: 7px; margin-top: -5px; }
  #smx-experience-module .smx-brand > span { margin-top: 8px; font-size: clamp(8px,2.7vw,11px); letter-spacing: .36em; }
  #smx-experience-module .smx-copy h2 { font-size: clamp(21px,6.35vw,27px); line-height: .92; }
  #smx-experience-module .smx-copy p { margin: auto 0 12px; font-size: clamp(10px,3.15vw,13px); line-height: 1.3; }
  #smx-experience-module .smx-discover { min-width: 0; width: calc(100% - 8px); padding: 11px 12px; font-size: clamp(9px,2.75vw,12px); letter-spacing: .24em; }
  #smx-experience-module .smx-discover b { font-size: 20px; }
  #smx-experience-module .smx-visual { margin-left: -10px; }
  #smx-experience-module .smx-visual-shade { background: linear-gradient(90deg,#030303 0%,transparent 42%),linear-gradient(0deg,rgba(0,0,0,.25),transparent 44%); }
  #smx-experience-module .smx-ad::after { box-shadow: inset 0 0 34px #000; }
  #smx-experience-module .smx-system-message { top: 48%; }
  #smx-experience-module .smx-system-message div { font-size: clamp(20px,6.2vw,27px); }
  #smx-experience-module .smx-final-lockup { width: 92vw; }
  #smx-experience-module .smx-final-lockup strong { font-size: clamp(32px,9.5vw,40px); letter-spacing: .14em; }
  #smx-experience-module .smx-final-lockup span { font-size: 13px; letter-spacing: .4em; }
  #smx-experience-module .smx-final-lockup::before,
  #smx-experience-module .smx-final-lockup::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #smx-experience-module .smx-discover,
  #smx-experience-module .smx-discover::before,
  #smx-experience-module .smx-portal,
  #smx-experience-module .smx-portal-media,
  #smx-experience-module .smx-portal-media video,
  #smx-experience-module .smx-system-message { transition-duration: .01ms !important; }
  #smx-experience-module .smx-portal-scanlines { display: none; }
}