.s_oc_hero_split{
  position: relative;
  width: 100%;
  color: #fff;
  background: #131927;
  overflow: hidden;
}

.oc-topbar{
  display: flex;
  padding-left: 6.813rem;
  padding-right: 6.813rem;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

.oc-topbar__l1,
.oc-topbar__l2{
  margin: 0;
  font-family: "Nothing You Could Do" !important;
  font-weight: 400 !important;
  line-height: 46px !important;
  text-align: center !important;
  width: 1222px;
}

.oc-topbar__l1{ font-size: 2.25rem; }
.oc-topbar__l2{ font-size: 2.25rem; }

.oc-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 78vh;
}

.oc-left{
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.oc-left__inner{
    margin-left: 6.813rem;
    max-width: 640px;
    color: #66435D !important;
    margin-right: 6rem;
}

.oc-title{
  margin: 0 0 22px;
  font-family: "Montserrat" !important;
  font-weight: 700 !important;
  font-size: 68px !important;
  line-height: 67px !important;
  color: #66435D !important;
  width: 515px
}

.oc-paragraph{
  margin: 0 0 10px;
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 478px;
  color: #66435D !important;
  font-family: "Montserrat" !important;
}

.oc-left__inner p.oc-paragraph:nth-of-type(1){
  margin-bottom: 26px;
}
.oc-left__inner p.oc-paragraph:nth-of-type(2){
  margin-bottom: 0px;
}
.oc-left__inner p.oc-paragraph:last-of-type{
  margin-bottom: 0;
}

.oc-right{
  position: relative;
  overflow: hidden;
  min-height: 520px;
}

.oc-right__img{
  filter: brightness(0.5);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oc-right__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  pointer-events: none;
}

.oc-right::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  pointer-events: none;
  z-index: 2;
}

.oc-ctas{
  position: absolute;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 5;
}

.oc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  user-select: none;
  transition: all .25s ease;
  line-height: 1;
}

.oc-btn--blob,
.oc-btn--blob:hover,
.oc-btn--blob:focus,
.oc-btn--blob:active {
    text-decoration: none !important;
}

.oc-btn--blob{
  color: #ffffff !important;
  font-size: 1.125rem !important;
  width: 280px;
  height: 72px;
  line-height: 72px;
  background: url('/oc-snippets/static/src/img/home/purple_button.webp')
              no-repeat center center;
  background-size: contain;
  border: none;
  font-weight: 700 !important;
}

.oc-btn--blob:hover,
.oc-btn--blob:focus{
  transform: translateY(-2px);
  filter: brightness(1.06);
  color: #ffffff !important;
}

.oc-btn--outline{
  padding: 14px 26px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #ffffff !important;
  font-size: 1rem;
  backdrop-filter: saturate(120%) blur(1px);
}

.oc-btn--outline:hover{
  background: rgba(255,255,255,.12);
}

.oc-btn--outline:active{
  background: rgba(255,255,255,.18);
}

@media (max-width: 992px){
  .oc-split{
    grid-template-columns: 1fr;
  }

  .oc-ctas{
    left: auto;
    right: auto;
    top: 40%;
    transform: translateY(-50%);
    align-items: center;
  }
}

/* =========================================
   Fixes globales (no cambian el look desktop,
   solo evitan overflow en pantallas más chicas)
   ========================================= */
.oc-topbar__l1,
.oc-topbar__l2{
  width: 100% !important;
  max-width: 1222px;
  line-height: 1.25 !important;
  padding: 0 12px; /* evita que el texto toque bordes */
}

.oc-title{
  width: 100% !important;
  max-width: 515px;
}

/* =========================================
   Tablet + Mobile  (< 991.98px)
   ========================================= */
@media (max-width: 991.98px){

  .oc-topbar{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }

  .oc-topbar__l1,
  .oc-topbar__l2{
    font-size: 1.55rem;       /* baja desde 2.25rem */
    line-height: 1.25 !important;
  }

  .oc-split{
    grid-template-columns: 1fr;
    min-height: auto;         /* importante para que no quede “gigante” */
  }

  .oc-left{
    padding: 4.25rem 1.5rem;  /* reemplaza los márgenes enormes del inner */
    align-items: flex-start;  /* se ve más natural en móvil/tablet */
  }

  .oc-left__inner{
    margin: 0 auto;
    max-width: 720px;
    margin-right: auto;
  }

  .oc-title{
    font-size: 46px !important;
    line-height: 1.05 !important;
    max-width: 26ch;          /* mantiene proporción bonita */
    overflow-wrap: anywhere;  /* por si hay palabras largas */
  }

  .oc-paragraph{
    max-width: 100%;
    font-size: 0.95rem;
  }

  .oc-right{
    min-height: 520px;        /* tu screenshot móvil se ve bien con este alto */
  }

  /* Arreglo del bug actual: tu media query deja left/top en auto y se puede desposicionar */
  .oc-ctas{
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100%;
    padding: 0 1rem;
    align-items: center;
  }

  .oc-btn--blob{
    width: min(15.5rem, 92vw);
    height: 68px;
    font-size: 1.05rem !important;
  }

  .oc-btn--outline{
    width: min(15.5rem, 92vw);
    text-align: center;
  }
}

/* =========================================
   Mobile fino (<= 575.98px)
   ========================================= */
@media (max-width: 575.98px){

  .oc-topbar{
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .oc-topbar__l1,
  .oc-topbar__l2{
    font-size: 1.25rem;
  }

  .oc-left{
    padding: 3.25rem 1rem;
  }

  .oc-title{
    font-size: 36px !important;
    line-height: 1.08 !important;
    max-width: 18ch;
  }

  .oc-right{
    min-height: 460px;
  }

  .oc-btn--blob{
    width: min(340px, 92vw);
    height: 64px;
    font-size: 1rem !important;
  }

  .oc-btn--outline{
    padding: 12px 18px;
    font-size: 0.95rem;
  }
}