/* Sección de control MDM situada inmediatamente después del hero de /mdm/. */
.mdm-mgmt{
  --mdm-mgmt-orange:#fb923c;
  --mdm-mgmt-ink:#2a160b;
  position:relative;
  width:min(1440px,calc(100% - 48px));
  min-height:930px;
  margin:34px auto 72px;
  overflow:hidden;
  border-radius:30px 176px 30px 30px;
  /* El naranja de marca, PLANO. Antes iba un degradado a 115deg de #ff7a12 a
     #f97316: eso hacia que esta seccion —la mas grande de la pagina— se
     leyera de un naranja distinto al de todo el bloque que sigue
     (.mdm-crm, "Una plataforma", el ecosistema, la banda y el pie), que es
     #FB923C plano. Con las secciones ya unidas sin hueco blanco, ese salto de
     color quedaba en mitad de una sola superficie continua.

     Los dos halos radiales se quedan: son luz blanca y crema por encima, no
     otro naranja, y son los que le dan volumen a la seccion. */
  background:
    radial-gradient(circle at 74% 34%,rgba(255,226,143,.32),transparent 29%),
    radial-gradient(circle at 8% 92%,rgba(255,255,255,.11),transparent 24%),
    #fb923c;
  box-shadow:0 24px 64px rgba(112,43,0,.17);
  color:var(--mdm-mgmt-ink);
  isolation:isolate;
}

.mdm-mgmt::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.17;
  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,transparent 42%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 42%,#000 100%);
}

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

.mdm-mgmt__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(440px,44%) minmax(0,56%);
  min-height:930px;
}

.mdm-mgmt__copy{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:64px 30px 48px clamp(38px,5vw,72px);
}

.mdm-mgmt__eyebrow{
  align-self:flex-start;
  padding:9px 15px;
  border:1.5px solid rgba(45,22,6,.78);
  border-radius:5px;
  background:rgba(255,194,111,.31);
  font-size:17px;
  line-height:1;
}

.mdm-mgmt__copy h2{
  max-width:550px;
  margin:23px 0 19px;
  color:var(--mdm-mgmt-ink);
  font-size:clamp(44px,4.1vw,60px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.052em;
}

.mdm-mgmt__intro{
  max-width:520px;
  margin:0 0 22px;
  color:#5a3421;
  font-size:18px;
  line-height:1.5;
}

.mdm-mgmt__features{display:grid;gap:10px;max-width:525px}

.mdm-mgmt__feature{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:13px;
  padding:17px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:10px;
  background:rgba(255,255,255,.96);
  box-shadow:0 7px 20px rgba(107,47,4,.08);
}

.mdm-mgmt__feature-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1.5px solid #f97316;
  border-radius:10px;
  background:#fff;
  color:#f35d0b;
}

.mdm-mgmt__feature-icon svg{width:22px;height:22px}
.mdm-mgmt__feature h3{margin:1px 0 5px;color:#2a160b;font-size:17px;font-weight:720;line-height:1.25}
.mdm-mgmt__feature p{margin:0;color:#694937;font-size:14.5px;line-height:1.43}

.mdm-mgmt__brandline{
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:auto;
  padding-top:30px;
  color:#fff;
}

.mdm-mgmt__brandmark{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:800;letter-spacing:-.04em;white-space:nowrap}
.mdm-mgmt__brandmark img{width:42px;height:42px;object-fit:contain;filter:brightness(0) invert(1)}
.mdm-mgmt__brand-sep{width:1px;height:46px;background:rgba(255,255,255,.62)}
.mdm-mgmt__brandline p{margin:0;font-size:15px;line-height:1.3}

.mdm-mgmt__visual{display:flex;align-items:center;justify-content:center;padding:44px 34px 34px 0}
.mdm-mgmt__visual-frame{
  position:relative;
  width:100%;
  height:848px;
  overflow:hidden;
  border:2px solid rgba(255,241,193,.9);
  border-radius:84px 138px 84px 84px;
  background:#ff7207;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.07),inset 0 0 80px rgba(255,219,123,.22),0 16px 35px rgba(120,46,0,.18);
  isolation:isolate;
}

.mdm-mgmt__visual-frame::before{
  content:"";
  position:absolute;
  inset:15px;
  z-index:2;
  border:1px solid rgba(255,238,182,.48);
  border-radius:72px 126px 72px 72px;
  pointer-events:none;
}

.mdm-mgmt__visual-frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,96,0,.28),transparent 27%,transparent 74%,rgba(255,100,0,.24));
}

.mdm-mgmt__photo,.mdm-mgmt__photo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mdm-mgmt__photo img{z-index:0;object-fit:cover;object-position:center 64%;filter:saturate(1.02) contrast(1.015)}

/* AQUI HABIA una excepcion que apagaba el reveal pegajoso del footer en
   /mdm/ (position:relative; bottom:auto). Era la unica ruta del sitio sin
   esa animacion de cierre.

   El motivo original —que el footer asomara antes de tiempo por detras de
   esta composicion alta— ya no puede darse: <main> pinta un color opaco con
   z-index:2 y el footer va detras con z-index:1 (footer-reveal.css), y el
   caso del footer mas alto que el viewport lo cubre el body::before que ese
   mismo archivo instala. Se retira la excepcion para que /mdm/ cierre igual
   que la portada, Android, Apple, Planes y Contacto. */

@media(max-width:1100px){
  .mdm-mgmt{width:calc(100% - 28px);border-radius:24px 120px 24px 24px}
  .mdm-mgmt__grid{grid-template-columns:minmax(390px,46%) minmax(0,54%)}
  .mdm-mgmt__copy{padding-left:34px;padding-right:22px}
  .mdm-mgmt__copy h2{font-size:45px}
  .mdm-mgmt__visual{padding-right:22px}
}

@media(max-width:900px){
  .mdm-mgmt{width:100%;min-height:0;margin:0 0 62px;border-radius:0 100px 28px 28px}
  .mdm-mgmt__grid{grid-template-columns:1fr;min-height:0}
  .mdm-mgmt__copy{padding:48px 28px 34px}
  .mdm-mgmt__copy h2{font-size:clamp(43px,8vw,58px)}
  .mdm-mgmt__features{max-width:none}
  .mdm-mgmt__intro{max-width:640px}
  .mdm-mgmt__brandline{margin-top:28px}
  .mdm-mgmt__visual{padding:8px 20px 24px}
  .mdm-mgmt__visual-frame{width:min(720px,100%);height:min(830px,112vw);min-height:700px}
}

@media(max-width:620px){
  .mdm-mgmt{border-radius:0 68px 22px 22px}
  .mdm-mgmt__copy{padding:36px 18px 28px}
  .mdm-mgmt__eyebrow{font-size:15px}
  .mdm-mgmt__copy h2{font-size:clamp(38px,11vw,48px);letter-spacing:-.045em}
  .mdm-mgmt__intro{font-size:16px}
  .mdm-mgmt__feature{grid-template-columns:44px 1fr;padding:15px 14px}
  .mdm-mgmt__feature p{font-size:13.5px}
  .mdm-mgmt__brandline{flex-wrap:wrap;gap:12px}
  .mdm-mgmt__brand-sep{display:none}
  .mdm-mgmt__brandline p{flex-basis:100%;padding-left:51px}
  .mdm-mgmt__visual{padding:6px 10px 16px}
  /* Era 690px fijos (630 por debajo de 390). En un telefono de 750px de alto
     util eso es el 84% de la pantalla: la mascota ocupaba practicamente un
     scroll entero. Ahora el alto sale del ANCHO del telefono, que es lo que
     manda en la proporcion de la tarjeta, con tope arriba y abajo. A 389px de
     ancho pasa de 630px a ~467px; a 620px se queda en 600. La foto va con
     object-fit:cover, asi que solo cambia el encuadre, no la imagen. */
  .mdm-mgmt__visual-frame{height:clamp(420px,120vw,600px);min-height:0;border-radius:52px 78px 52px 52px}
  .mdm-mgmt__visual-frame::before{inset:10px;border-radius:44px 69px 44px 44px}
  .mdm-mgmt__photo img{object-position:center 62%}
}

@media(max-width:390px){
  .mdm-mgmt__copy h2{font-size:37px}
  /* Sin alto propio: el clamp de arriba ya escala con el ancho del telefono. */
}