/* Banda MDM aportada por el usuario: mismo diseño para Apple y Android.
   El fondo naranja se construye en CSS y el teléfono es un PNG con
   transparencia, así la pieza escala sin volver a recortar la foto. */
.mdm-band{
  --band-orange:#FB923C;
  --band-ink:#161A13;

  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:clamp(650px,50vw,980px);
  margin-inline:0 auto;
  overflow:hidden;
  border-radius:0 clamp(180px,24vw,480px) 0 0;
  background:
    radial-gradient(720px 560px at 15% 105%, rgba(251,146,60,.26), transparent 72%),
    radial-gradient(680px 620px at 87% 36%, rgba(251,146,60,.16), transparent 72%),
    linear-gradient(105deg,#FB923C 0%,#FB923C 53%,#FB923C 100%);
  color:var(--band-ink);
  isolation:isolate;
}

.mdm-band *{box-sizing:border-box}

/* Halo inferior izquierdo de la referencia. */
.mdm-band::before{
  content:"";
  position:absolute;
  z-index:1;
  left:-405px;
  bottom:-80px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:rgba(251,146,60,.12);
  pointer-events:none;
}

.mdm-band__copy{
  position:relative;
  z-index:5;
  width:46%;
  margin-left:6vw;
  padding:clamp(90px,7vw,140px) 0;
}

.mdm-band__eyebrow{
  display:inline-flex;
  align-items:center;
  height:clamp(38px,3vw,46px);
  padding:0 13px;
  border:1.5px solid rgba(255,255,255,.88);
  border-radius:5px;
  background:rgba(255,255,255,.035);
  color:#fff;
  font-size:clamp(13px,1.1vw,17px);
  font-weight:500;
  letter-spacing:-.013em;
}

.mdm-band__title{
  margin:clamp(20px,2vw,30px) 0 clamp(14px,1.5vw,20px);
  max-width:none;
  color:#181A14;
  font-size:clamp(36px,3.65vw,70px);
  font-weight:760;
  line-height:1.05;
  letter-spacing:-.043em;
}

.mdm-band__desc{
  margin:0;
  max-width:100%;
  color:#22251D;
  font-size:clamp(15px,1.4vw,20px);
  font-weight:440;
  line-height:1.52;
  letter-spacing:-.018em;
}
.mdm-band__desc br{display:none}

.mdm-band__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:227px;
  height:61px;
  margin-top:clamp(28px,3.4vw,48px);
  padding:0 28px;
  border-radius:11px;
  background:#fff;
  color:#FB923C;
  font-size:18px;
  font-weight:560;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(251,146,60,.08);
  transition:transform .25s ease,box-shadow .25s ease;
}
.mdm-band__cta:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(251,146,60,.16);
}

/* Encuadre diagonal compartido: la banda recorta el teléfono por la
   derecha y por abajo, conservando la imagen propia de cada plataforma. */
.mdm-band__device{
  position:absolute;
  z-index:3;
  top:18%;
  left:41%;
  right:auto;
  width:85vw;
  height:auto;
  max-width:none;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
  user-select:none;
  transform-origin:50% 0;
  transform:rotate(-16deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.mdm-band:hover .mdm-band__device{transform:translateY(-4px) rotate(-16deg) scale(1.004)}

/* Gestión MDM: la misma banda de Android en escritorio, sustituyendo el
   teléfono por la computadora del CRM. La imagen ya trae perspectiva, por
   eso se conserva derecha y se recorta únicamente por el marco de la banda. */
.mdm-band--crm .mdm-band__copy{
  width:43%;
}
.mdm-band--crm .mdm-band__desc{
  max-width:36ch;
}
.mdm-band--crm .mdm-band__device--crm{
  top:2%;
  left:49%;
  width:min(47vw,980px);
  transform:none;
}
.mdm-band--crm:hover .mdm-band__device--crm{
  transform:translateY(-4px) scale(1.004);
}

@media(min-width:901px) and (max-width:1200px){
  .mdm-band__copy{width:42%}
}

@media (max-width:900px){
  .mdm-band{
    display:block;
    width:100%;
    min-height:0;
    border-radius:0 clamp(72px,18vw,150px) 0 0;
  }
  /* La banda del CRM estaba en display:none aqui. No era un fallo de la
     pieza: el bloque movil de .mdm-band__device de abajo esta calculado
     para el telefono vertical de Android/Apple (116% de ancho, giro de
     -16deg y margen inferior de -65%), y sobre el monitor del CRM eso lo
     dejaba torcido y fuera de cuadro. En vez de apagar la seccion, el
     monitor recibe su propio tratamiento: derecho, como en escritorio,
     centrado y sangrando lo justo por los dos lados. */
  .mdm-band--crm .mdm-band__device--crm{
    position:relative;
    top:auto;
    left:auto;
    display:block;
    width:112%;
    max-width:none;
    height:auto;
    /* -6% a cada lado: el monitor respira fuera del texto sin que el pie
       quede cortado. Sin margen negativo abajo, que aqui la imagen ya
       termina en el borde de la banda. */
    margin:34px 0 0 -6%;
    transform:none;
  }

  .mdm-band--crm:hover .mdm-band__device--crm{transform:none}

  /* .mdm-band--crm .mdm-band__copy{width:43%} de escritorio son dos clases
     y le gana al width:auto del bloque movil, que solo tiene una: el texto
     se quedaba en una columna de 161px y la banda crecia a 1402px de alto.
     Se repite el selector con la misma especificidad. */
  .mdm-band--crm .mdm-band__copy{
    width:auto;
    margin-left:0;
  }

  .mdm-band--crm .mdm-band__desc{max-width:none}
  .mdm-band__copy{
    width:auto;
    margin-left:0;
    padding:56px 22px 0;
  }
  .mdm-band__title{font-size:clamp(34px,9.5vw,42px);line-height:1.04}
  .mdm-band__desc{font-size:17px;line-height:1.5}
  .mdm-band__cta{min-width:210px;width:auto;max-width:100%;height:52px;margin-top:28px}
  .mdm-band__device{
    position:relative;
    top:auto;
    right:auto;
    left:16%;
    display:block;
    height:auto;
    width:116%;
    max-width:none;
    margin:48px 0 -65%;
    transform:rotate(-16deg);
  }
  .mdm-band:hover .mdm-band__device{transform:rotate(-16deg)}
}

@media (prefers-reduced-motion:reduce){
  .mdm-band__device,
  .mdm-band__cta{transition:none}
  .mdm-band__cta:hover{transform:none}
  .mdm-band:hover .mdm-band__device{transform:rotate(-16deg)}
  .mdm-band--crm:hover .mdm-band__device--crm{transform:none}
}