:root{
  --blue:#0509ff;
  --blue-dark:#12366f;
  --blue-bright:#0509ff;
  --green:#6a9d42;
  --red:#fb0008;
  --button:#fb0008;
  --ink:#17345f;
  --text:#5f6e81;
  --white:#fff;
  --light:#f4f6f8;
  --card-radius:28px;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  font-family:"Poppins",Arial,sans-serif;
  color:var(--ink);
  background:#eef2f5;
}
.migration-page{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:26px;
  background:
    linear-gradient(rgba(242,246,247,.88),rgba(242,246,247,.88)),
    radial-gradient(circle at 12% 10%,rgba(106,157,66,.14),transparent 22%),
    radial-gradient(circle at 90% 90%,rgba(23,76,151,.13),transparent 28%);
}
.migration-card{
  width:min(1180px,100%);
  min-height:min(720px,calc(100svh - 52px));
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);
  background:var(--white);
  border-radius:var(--card-radius);
  box-shadow:0 24px 60px rgba(16,47,93,.14);
}
.content-panel{
  position:relative;
  padding:clamp(42px,7vw,88px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.content-panel::before{
  content:"";
  position:absolute;
  left:0;top:0;
  width:8px;height:100%;
  background:var(--blue);
}
.brand{display:block;margin-bottom:clamp(48px,7vh,78px)}
.brand img{display:block;width:245px;height:auto}
.brand-fallback{display:none;font-size:28px;letter-spacing:.02em;color:var(--blue);font-weight:500}
.brand-fallback b{font-weight:800}
h1{
  margin:0;
  color:var(--blue-dark);
  font-size:clamp(42px,5vw,70px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:800;
}
h1 span{color:var(--blue)}
.intro{
  max-width:500px;
  margin:25px 0 30px;
  color:var(--text);
  font-size:16px;
  line-height:1.75;
}
.cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:54px;
  padding:0 23px;
  border-radius:999px;
  background:var(--button);
  color:#fff;
  text-decoration:none;
  font-size:15px;
  font-weight:700;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
  box-shadow:0 13px 24px rgba(251,0,8,.22);
}
.cta:hover{transform:translateY(-2px);background:#d90007;box-shadow:0 17px 30px rgba(251,0,8,.28)}
.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.microcopy{font-size:11px;color:#8793a2;margin:17px 0 0}
.image-panel{
  position:relative;
  min-height:540px;
  overflow:hidden;
  background:
    url("https://morenogroup.com.ar/wp-content/uploads/hero-section.webp")
    center/cover no-repeat,
    #315c44;
}
.image-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,48,97,.13) 20%,rgba(12,48,97,.64) 100%),
    linear-gradient(120deg,rgba(23,76,151,.12),transparent 55%);
}
/* Tablet y móvil: la imagen pasa a ser un hero horizontal arriba.
   Así no queda como un bloque suelto debajo del contenido. */
@media(max-width:800px){
  .migration-page{
    display:block;
    min-height:100svh;
    padding:0;
  }

  .migration-card{
    width:100%;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    border-radius:0;
  }

  .image-panel{
    order:-1;
    width:100%;
    min-height:clamp(230px,36svh,360px);
    background-position:center center;
  }

  .image-overlay{
    background:
      linear-gradient(180deg,rgba(5,9,255,.06) 12%,rgba(5,9,255,.24) 100%),
      linear-gradient(90deg,rgba(5,9,255,.10),transparent 70%);
  }

  .content-panel{
    flex:1;
    justify-content:flex-start;
    padding:42px 30px 46px;
  }

  .content-panel::before{
    top:0;
    left:0;
    width:100%;
    height:6px;
  }

  .brand{margin-bottom:38px}

  h1{font-size:clamp(40px,10vw,58px)}
}

@media(max-width:420px){
  .image-panel{
    min-height:220px;
    background-position:center center;
  }

  .content-panel{padding:34px 22px 38px}
  .brand{margin-bottom:32px}
  .brand img{width:205px}
  .intro{font-size:15px;margin:20px 0 26px}
  .cta{width:100%;justify-content:center}
}


/* Ajuste final para móviles: se mantiene la tarjeta con bordes redondeados
   y la imagen superior ocupa menos alto. */
@media (max-width: 800px) {
  .migration-page{
    display:grid;
    place-items:center;
    padding:16px;
  }

  .migration-card{
    width:min(100%, 560px);
    min-height:calc(100svh - 32px);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 42px rgba(16,47,93,.14);
  }

  .image-panel{
    min-height:clamp(150px, 24svh, 220px);
    max-height:220px;
    background-position:center center;
  }

  .content-panel{
    padding:34px 26px 36px;
  }
}

@media (max-width: 420px) {
  .migration-page{
    padding:12px;
  }

  .migration-card{
    min-height:calc(100svh - 24px);
    border-radius:20px;
  }

  .image-panel{
    min-height:150px;
    max-height:185px;
  }

  .content-panel{
    padding:30px 22px 32px;
  }

  .brand{
    margin-bottom:28px;
  }

  .brand img{
    width:195px;
  }
}