/* ====== Defaults via CSS vars ====== */
.smg-hero-wrap{
  --smg-accent:#FAE501;
  --smg-leftbg:#0E2358;
  --smg-sidebarbg:#0B1A42;
  --smg-minh:560px;
  --smg-leftw:420px;
  --smg-sidebarw:92px;
  --smg-text:#ffffff; 
}

/* ====== Layout base ====== */
.smg-hero{
  position: relative;
  width: 100%;
  overflow: hidden;
}
 

.smg-hero__main{
  display: grid;
  grid-template-columns: var(--smg-leftw) 1fr;
  min-height: var(--smg-minh);
  background: var(--smg-leftbg);
}

/* Sidebar izquierda */
.smg-hero__sidebar{
  position:absolute;
  left:0; top:0; bottom:0;
  width: var(--smg-sidebarw);
  background: var(--smg-sidebarbg);
  z-index: 5;
  display:flex;
  align-items:flex-start;
  padding-top: 18px;
}

.smg-hero__sidebar-inner{
  display:flex;
  flex-direction:column;
  gap: 18px;
  width:100%;
  align-items:center;
}

.smg-sidebtn{
  width: calc(var(--smg-sidebarw) - 20px);
  max-width: 92px;
  border: 0;
  background: transparent;
  color: var(--smg-text);
  cursor: pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  padding: 10px 6px;
  opacity: .92;
}
.smg-sidebtn:hover{ opacity: 1; transform: translateY(-1px); transition: .15s; }

.smg-sidebtn__ico{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08);
  font-size: 18px;
}

.smg-sidebtn__txt{
  font-size: 12px;
  line-height: 1.1;
  text-align:center;
  opacity: .95;
}

/* Left panel */
.smg-hero__left{
  color: var(--smg-text);
  position: relative;
  margin-left: var(--smg-sidebarw);
  padding: 86px 48px 48px;
}

.smg-hero__badge{
  display:inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: var(--smg-text);
}

.smg-hero__title{
  font-size: 64px;
  line-height: 1.02;
  margin: 0 0 18px;
  font-weight: 900;
  color: var(--smg-text);
}

.smg-hero__desc{
  max-width: 360px;
  opacity: .9;
  font-size: 16px;
  line-height: 1.45;
  margin: 0 0 24px;
  color: var(--smg-text);
}

.smg-hero__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 22px;
  border-radius: 10px;
  background: var(--smg-accent);
  color: var(--smg-leftbg);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .3px;
}
.smg-hero__cta:hover{ transform: translateY(-1px); transition: .15s; }

/* Arrows */
.smg-hero__nav{
  position:absolute;
  right: 28px;
  bottom: 28px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.smg-arrow{
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--smg-text);
  cursor:pointer;
  font-size: 18px;
}
.smg-arrow:hover{ background: rgba(255,255,255,.12); }

/* Right image */
.smg-hero__right{ position: relative; background: #EAF2FF; }
.smg-hero__media{ position:relative; width:100%; height:100%; overflow:hidden; }
.smg-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
.smg-hero__vid{ position:absolute; inset:0; width:100%; height:100%; object-fit: var(--smg-vid-fit, cover); object-position: var(--smg-vid-pos, 50% 50%); transform: scale(var(--smg-vid-scale, 1)); transform-origin: center; display:none; }
.smg-hero__img--empty{ width:100%; height:100%; }

/* Responsive */
@media (max-width: 980px){
  /*
    Force the media block (image) to stack BELOW the text on tablets/mobile.
    Elementor responsive controls may inject grid-template-columns inline;
    this !important ensures the intended vertical layout at <=980px.
  */
  .smg-hero__main{ grid-template-columns: 1fr !important; }
  .smg-hero__right{ min-height: 340px; }
  .smg-hero__title{ font-size: 44px; }
}
@media (max-width: 520px){
  .smg-hero__nav{ right: 14px; bottom: 14px; }
  .smg-hero__title{ font-size: 36px; }
  .smg-hero__desc{ max-width: 100%; }
}

/* Mobile option: hide the left sidebar (Elementor control) */
@media (max-width: 767px){
  .smg-hero-wrap[data-sidebar-mobile="hide"] .smg-hero__sidebar{
    display: none !important;
  }
  .smg-hero-wrap[data-sidebar-mobile="hide"] .smg-hero__left{
    margin-left: 0 !important;
  }
}


/* ====== Effect variants (read from data-smg-hero config in JS => data-effect attr) ====== */
.smg-hero{ --smg-dir: 1; } /* 1 = next, -1 = prev */

.smg-hero[data-effect="fade"].is-exit .smg-hero__left,
.smg-hero[data-effect="fade"].is-exit .smg-hero__img,
.smg-hero[data-effect="fade"].is-exit .smg-hero__vid{
  opacity: 0;
  transform: translateY(10px);
  transition: .22s ease;
}
.smg-hero[data-effect="fade"].is-enter .smg-hero__left,
.smg-hero[data-effect="fade"].is-enter .smg-hero__img,
.smg-hero[data-effect="fade"].is-enter .smg-hero__vid{
  opacity: 1;
  transform: translateY(0);
  transition: .28s ease;
}

/* Slide */
.smg-hero[data-effect="slide"].is-exit .smg-hero__left{
  opacity: 0;
  transform: translateX(calc(-14px * var(--smg-dir)));
  transition: .20s ease;
}
.smg-hero[data-effect="slide"].is-exit .smg-hero__img,
.smg-hero[data-effect="slide"].is-exit .smg-hero__vid{
  opacity: 0;
  transform: translateX(calc(-24px * var(--smg-dir)));
  transition: .22s ease;
}
.smg-hero[data-effect="slide"].is-enter .smg-hero__left,
.smg-hero[data-effect="slide"].is-enter .smg-hero__img,
.smg-hero[data-effect="slide"].is-enter .smg-hero__vid{
  opacity: 1;
  transform: translateX(0);
  transition: .28s ease;
}

/* Zoom */
.smg-hero[data-effect="zoom"].is-exit .smg-hero__left{
  opacity: 0;
  transform: translateY(8px);
  transition: .20s ease;
}
.smg-hero[data-effect="zoom"].is-exit .smg-hero__img,
.smg-hero[data-effect="zoom"].is-exit .smg-hero__vid{
  opacity: 0;
  transform: scale(1.04);
  transition: .22s ease;
}
.smg-hero[data-effect="zoom"].is-enter .smg-hero__left{
  opacity: 1;
  transform: translateY(0);
  transition: .26s ease;
}
.smg-hero[data-effect="zoom"].is-enter .smg-hero__img,
.smg-hero[data-effect="zoom"].is-enter .smg-hero__vid{
  opacity: 1;
  transform: scale(1);
  transition: .30s ease;
}

/* Sidebar icon image */
.smg-sidebtn__ico img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display:block;
}
a.smg-sidebtn--link{ text-decoration:none; }

/* Elementor ICONS can output <i> or <svg>. Normalize size. */
.smg-sidebtn__ico i{ font-size: 20px; line-height: 1; }
.smg-sidebtn__ico svg{ width:22px; height:22px; display:block; }

/* ====== Dots ====== */
.smg-hero-wrap{
  --smg-arrow-size: 44px;
  --smg-arrow-bg: rgba(255,255,255,.12);
  --smg-arrow-bg-hover: rgba(255,255,255,.18);
  --smg-arrow-color: #fff;
  --smg-arrow-radius: 10px;

  --smg-dot-size: 10px;
  --smg-dot-gap: 10px;
  --smg-dot-color: rgba(255,255,255,.45);
  --smg-dot-active: #fff;
}

.smg-arrows .smg-arrow{
  width: var(--smg-arrow-size);
  height: var(--smg-arrow-size);
  background: var(--smg-arrow-bg);
  color: var(--smg-arrow-color);
  border-radius: var(--smg-arrow-radius);
  transition: .2s ease;
}
.smg-arrows .smg-arrow:hover{
  background: var(--smg-arrow-bg-hover);
}

.smg-dots{
  position:absolute;
  left:50%;
  bottom: 22px;
  transform: translateX(-50%);
  display:flex;
  gap: var(--smg-dot-gap);
  z-index: 5;
  pointer-events:auto;
}
.smg-dot{
  width: var(--smg-dot-size);
  height: var(--smg-dot-size);
  border-radius: 999px;
  background: var(--smg-dot-color);
  border: none;
  padding:0;
  cursor:pointer;
  transition: .2s ease;
}
.smg-dot.is-active{
  background: var(--smg-dot-active);
  transform: scale(1.08);
}
.smg-dot:focus{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

/* Override base arrow styles when used in hero nav (Elementor controls set vars on .smg-hero-wrap) */
.smg-hero__nav.smg-arrows .smg-arrow{
  width: var(--smg-arrow-size);
  height: var(--smg-arrow-size);
  background: var(--smg-arrow-bg);
  color: var(--smg-arrow-color);
  border-radius: var(--smg-arrow-radius);
}
.smg-hero__nav.smg-arrows .smg-arrow:hover{
  background: var(--smg-arrow-bg-hover);
}

/* Image baseline */
.smg-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display:block;
}