/* Franja del sistema en /mdm/. Va justo despues de .mdm-mgmt: rectangulo
   plano con el naranja del sistema (--orange: #FB923C), una sola frase a la
   izquierda y la fotografia del PNG recortado a la derecha. */
.mdm-crm{
  --mdm-crm-bg:#fb923c;
  --mdm-crm-ink:#2a160b;
  position:relative;
  width:min(1440px,calc(100% - 48px));
  margin:0 auto 72px;
  overflow:hidden;
  border-radius:24px;
  background:var(--mdm-crm-bg);
  box-shadow:0 22px 58px rgba(112,43,0,.16);
  isolation:isolate;
}

/* Misma trama de puntos que la seccion de arriba, para que las dos franjas
   naranjas se lean como parte del mismo bloque. */
.mdm-crm::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.15;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.9) .8px,transparent .8px);
  background-size:19px 19px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 46%);
  mask-image:linear-gradient(90deg,#000 0,transparent 46%);
}

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

/* La seccion de arriba y esta franja se leen como un solo bloque naranja:
   sin hueco entre las dos y sin esquinas en la junta. El ajuste vive aqui,
   con :has(), para no tocar mdm-management-hero.css. */
.mdm-mgmt:has(+ .mdm-crm){
  margin-bottom:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* SIN HUECO BLANCO hacia abajo. La franja entrega directamente su borde
   inferior a "Una plataforma. Mas control.", que sigue con el mismo naranja:
   .mdm-mgmt + .mdm-crm + .mdm-overview-section + .eco + .mdm-band forman UNA
   sola superficie continua, del mismo color y sin cortes. Por eso aqui se van
   tanto el margen inferior como las esquinas de abajo: ya no rematan nada.
   El bloque entero sigue redondeando solo por sus dos extremos reales, el
   borde superior de .mdm-mgmt y el inferior de la banda. */
.mdm-crm:has(+ .mdm-overview-section){
  margin-bottom:0;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

.mdm-mgmt + .mdm-crm{
  margin-top:0;
  border-top-left-radius:0;
  border-top-right-radius:0;
  /* El mismo naranja plano que .mdm-mgmt arriba y que todo el bloque de
     abajo. Antes iba un degradado a 90deg (#fa8a30 -> #f97316) que copiaba el
     borde inferior del degradado de .mdm-mgmt; ahora que arriba tambien es
     plano no hace falta nada: las tres superficies son el mismo color. */
  background:var(--mdm-crm-bg);
}

.mdm-crm__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,39%) minmax(0,61%);
  align-items:center;
  gap:12px;
}

.mdm-crm__copy{
  padding:56px 8px 56px clamp(34px,4.4vw,66px);
  min-width:0;
}

/* La unica frase de la franja. */
.mdm-crm__phrase{
  margin:0;
  max-width:15ch;
  color:var(--mdm-crm-ink);
  font-size:clamp(34px,3.05vw,46px);
  font-weight:800;
  line-height:1.09;
  letter-spacing:-.048em;
  text-wrap:balance;
}

.mdm-crm__visual{
  min-width:0;
  padding:26px 0 0;
  align-self:end;
}

.mdm-crm__visual img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1506/1024;
  object-fit:contain;
  object-position:right bottom;
  filter:drop-shadow(0 24px 40px rgba(112,43,0,.22));
}

@media(max-width:1100px){
  .mdm-crm{width:calc(100% - 28px)}
  .mdm-crm__grid{grid-template-columns:minmax(0,38%) minmax(0,62%)}
  .mdm-crm__copy{padding:44px 6px 44px 30px}
}

@media(max-width:900px){
  .mdm-crm{width:100%;margin:0 0 62px;border-radius:0}
  .mdm-crm__grid{grid-template-columns:1fr;gap:0}
  .mdm-crm::before{-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 58%);mask-image:linear-gradient(180deg,#000 0,transparent 58%)}
  .mdm-crm__copy{padding:44px 24px 4px}
  .mdm-crm__phrase{max-width:20ch;font-size:clamp(32px,6.6vw,44px)}
  .mdm-crm__visual{padding:14px 0 0}
  .mdm-crm__visual img{object-position:center bottom}
}

@media(max-width:620px){
  .mdm-crm__copy{padding:36px 18px 2px}
  .mdm-crm__phrase{font-size:clamp(29px,8.4vw,38px);letter-spacing:-.042em}
}