/* ==========================================================================
   mdm-overview.css — Portada de /mdm/ en TELEFONO.

   La fotografia vertical (941x1672) es el fondo COMPLETO del hero: el texto
   va encima, sobre la zona de cielo. La maqueta de tres telefonos que habia
   antes como visual cede el sitio.

   Todo vive dentro de @media(max-width:900px) y acotado a esta ruta con
   :has(> main[data-route="mdm"]), asi que el escritorio de /mdm/ y el resto
   de paginas de producto no se enteran.

   Los textos no se tocan: mismo badge, mismo titular, mismo parrafo y los
   mismos dos botones. Cambian su COLOR y su escala, porque ahora van sobre
   una foto y tienen que caber en el cielo que ella deja libre.
   ========================================================================== */

@media (max-width:900px){

  /* Antes: display:block. En movil la banda del CRM estaba apagada
     (mdm-band.css) y este bloque de CTA ocupaba su lugar. Ahora que la
     banda si aparece en telefono, las dos piezas cierran la pagina con el
     mismo mensaje y el mismo destino. Se mantiene el reparto de escritorio:
     manda la banda, el CTA se retira. */
  .mdm-overview__mobile-cta{display:none}

  /* footer-reveal.css (linea 31) da superficie BLANCA al ultimo hijo de
     <main>, y en esta ruta ese hijo es la banda. En escritorio ya se le
     restituia el naranja mas abajo; en movil no hacia falta porque la
     banda estaba oculta, y al encenderla salia en blanco sobre blanco:
     el eyebrow, que es blanco, desaparecia. Mismo remedio.

     Igual que en escritorio: la banda cierra el bloque naranja, asi que solo
     redondea por abajo y la curva grande se ha mudado al borde superior del
     bloque (.section-shell--top). */
  body > main[data-route="mdm"]:has(+ [data-site-footer]) > .mdm-band--crm{
    width:var(--section-width);
    margin-inline:auto;
    border-radius:0 0 34px 34px;
    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%);
  }

  /* ----------------------------------------------------------------------
     LA FOTOGRAFIA, A SANGRE Y COMO FONDO DE TODO EL HERO.

     El archivo lleva el cielo ya prolongado hacia arriba (941x1932): se
     tomo la franja superior de la PROPIA foto, se estiro, se volteo para
     que la fila que empalma sea su y=0 exacta y se oscurecio un 16% hacia
     arriba, que es como se comporta un cielo al subir. Asi el texto va
     sobre cielo de verdad y no sobre un degradado plano de CSS.

     El color de respaldo es la fila 0 real del archivo (#68A6E1), asi que
     mientras la imagen carga no hay salto de color.
     ---------------------------------------------------------------------- */
  body:has(> main[data-route="mdm"]) .product-hero{
    /* Se desplaza la fotografia completa, incluido su cielo y su fundido
       inferior. La altura cede exactamente la misma distancia para que el
       final blanco tambien suba y no aparezca espacio de relleno. */
    --mdm-mobile-image-lift:clamp(28px,7.5vw,42px);
    position:relative;
    width:100vw;
    margin-inline:calc(50% - 50vw);
    /* Aire justo bajo la cabecera: el suficiente para que el titular no se
       pegue al logo, sin robarle sitio a la foto. */
    padding:calc(72px + clamp(16px,3vh,34px)) 0 0;
    overflow:hidden;
    isolation:isolate;
    background-color:#68A6E1;
    background-image:url("/assets/mdm-overview-hero-mobile.png?v=cielo-1932");
    background-image:image-set(
      url("/assets/mdm-overview-hero-mobile.webp?v=cielo-1932") type("image/webp"),
      url("/assets/mdm-overview-hero-mobile.png?v=cielo-1932") type("image/png"));
    background-repeat:no-repeat;
    background-position:center calc(-1 * var(--mdm-mobile-image-lift));
    /* `100% auto` y NO `cover`: la foto se ve entera, sin recortar ni
       deformar. Con `cover` sobre una pantalla estrecha se comia las
       tarjetas laterales y el texto acababa encima del telefono. */
    background-size:100% auto;
    /* La altura del hero es la de la propia imagen (941x1932), asi que no
       sobra ni falta fondo por ningun lado. */
    min-height:calc(100vw * 1932 / 941 - var(--mdm-mobile-image-lift));
    /* Sin esto la rejilla se centra en toda esa altura y el texto cae sobre
       el telefono. */
    display:block;
  }

  /* Dobladillo: la foto acaba en nubes y debajo empieza el blanco de la
     seccion siguiente. Sin esto queda un corte recto de lado a lado. Mismo
     recurso que en la portada y en Android/Apple. */
  body:has(> main[data-route="mdm"]) .product-hero::after{
    content:"";
    position:absolute;
    /* RESET OBLIGATORIO, igual que en escritorio. product-pages.css:7 ya usa
       este pseudo-elemento para un halo naranja circular:
         right:-12%; top:4%; width:42%; height:72%;
         border-radius:50%; filter:blur(35px)
       El `width:42%` gana sobre left/right, asi que el dobladillo medía solo
       el 42% del ancho, redondeado y desenfocado: por eso el corte seguia
       viendose de lado a lado. */
    inset:auto 0 0;
    top:auto;
    right:0;
    left:0;
    width:auto;
    border-radius:0;
    filter:none;
    height:clamp(96px,14vh,170px);
    z-index:0;
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.14) 32%,
      rgba(255,255,255,.44) 57%,
      rgba(255,255,255,.78) 77%,
      rgba(255,255,255,.94) 90%,
      #fff 100%);
  }

  /* product-pages.css centra la rejilla verticalmente; aqui el texto tiene
     que quedar ARRIBA, que es donde la foto deja cielo limpio. */
  body:has(> main[data-route="mdm"]) .site-header > .nav-shell > .brand img{
    filter:brightness(0) invert(1);
  }

  /* El logo ya se invertia a blanco por el cielo, pero la pildora de idioma
     y el boton de menu se quedaban en el crema de body:not(.home-page)
     (styles.css). Sobre el azul la cabecera quedaba a medias. Mismo cristal
     blanco que Android/Apple (mdm-android.css). Se repite el selector con
     .mobile-controls-floating porque esa variante en styles.css tiene mas
     especificidad y volvia a pintar el crema al bajar. */
  body:has(> main[data-route="mdm"]) .mobile-header-language,
  body:has(> main[data-route="mdm"]) .site-header.mobile-controls-floating .mobile-header-language{
    color:#fff;
    border-color:rgba(255,255,255,.64);
    background:rgba(255,255,255,.12);
    box-shadow:none;
  }

  body:has(> main[data-route="mdm"]) .menu-toggle,
  body:has(> main[data-route="mdm"]) .site-header.mobile-controls-floating .menu-toggle{
    color:#fff;
    background:rgba(255,255,255,.15)!important;
    box-shadow:none;
  }

  body:has(> main[data-route="mdm"]) .product-hero-grid{
    position:relative;
    z-index:1;
    display:block;
    align-items:start;
    width:100%;
    padding-inline:0;
    margin:0;
  }

  body:has(> main[data-route="mdm"]) .product-hero-copy{
    padding-inline:22px;
    text-align:center;
  }

  /* La maqueta de telefonos ya no pinta nada aqui: la foto la sustituye.
     En escritorio sigue intacta. */
  body:has(> main[data-route="mdm"]) .product-hero-visual{
    display:none;
  }

  /* ----------------------------------------------------------------------
     EL TEXTO CABE EN EL CIELO

     La foto solo deja cielo limpio en su tercio superior. Con la escala
     original el bloque de texto medía 473px y se metia dentro del telefono,
     asi que aqui se compacta: titular mas corto de linea, menos aire entre
     piezas y botones de ancho controlado. Ni una palabra cambia.
     ---------------------------------------------------------------------- */
  body:has(> main[data-route="mdm"]) .product-hero .product-badge{
    margin-bottom:12px;
    color:#1C2836;
    border-color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }

  /* Medido sobre el cielo de la foto (#68A6E1): el titular da 6.1:1 y el
     parrafo 5.2:1. El blanco NO valia — sobre este azul se queda en 2.58:1. */
  body:has(> main[data-route="mdm"]) .product-hero .product-title{
    margin:0 auto;
    color:#14202E;
    font-size:clamp(36px,9.8vw,43px);
    line-height:.99;
    font-weight:750;
    letter-spacing:-.045em;
  }

  body:has(> main[data-route="mdm"]) .product-hero .product-description{
    max-width:30ch;
    margin:12px auto 0;
    color:#24303F;
    font-size:clamp(14px,3.9vw,16px);
    line-height:1.42;
  }

  body:has(> main[data-route="mdm"]) .product-hero .product-actions{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:20px;
  }

  body:has(> main[data-route="mdm"]) .product-hero .product-actions .button{
    flex:none;
    width:min(240px,72vw);
    height:52px;
    padding:0 9px 0 20px;
    justify-content:space-between;
    border-radius:16px 16px 34px 10px;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
  }

  body:has(> main[data-route="mdm"]) .product-hero .product-actions .button span{
    width:34px;
    height:34px;
    display:grid;
    flex:none;
    place-items:center;
    border-radius:50%;
  }

  body:has(> main[data-route="mdm"]) .product-hero .product-actions .button-primary{
    color:#fff;
    border-color:rgba(255,255,255,.48);
    background:#FB923C;
    box-shadow:0 13px 28px rgba(141,68,17,.24),inset 0 1px 0 rgba(255,255,255,.32);
  }

  body:has(> main[data-route="mdm"]) .product-hero .product-actions .button-primary span{
    color:#fff;
    background:rgba(255,255,255,.22);
  }

  /* El secundario translucido se perdia sobre el cielo. */
  body:has(> main[data-route="mdm"]) .product-hero .product-actions .button:not(.button-primary){
    color:#14202E;
    border-color:rgba(255,255,255,.92);
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 26px rgba(69,91,119,.16),inset 0 1px 0 #fff;
  }

  body:has(> main[data-route="mdm"]) .product-hero .product-actions .button:not(.button-primary) span{
    color:#fff;
    background:#FB923C;
  }
}

@media (min-width:901px){
  /* La banda CRM ocupa el lugar del CTA anterior solamente en computadora. */
  .mdm-overview__mobile-cta{display:none}

  /* footer-reveal.css da una superficie blanca al último hijo de <main>.
     En esta ruta ese hijo es precisamente la banda, así que se restituye su
     naranja.

     La banda es el ÚLTIMO tramo del bloque naranja que abre "Una plataforma.
     Más control.": comparte su ancho (--section-width) y solo redondea por
     abajo. La curva grande que traía arriba a la derecha abría una cuña
     blanca en mitad de una superficie naranja continua; esa firma vive ahora
     en el borde superior del bloque (.section-shell--top). El radio inferior
     se queda en 34px, que es con el que footer-reveal.css cierra <main>.

     margin-inline:auto hace falta explícitamente: footer-reveal.css pone
     margin:0 al último hijo con más peso que la clase .section-shell. */
  body > main[data-route="mdm"]:has(+ [data-site-footer]) > .mdm-band--crm{
    width:var(--section-width);
    margin-inline:auto;
    border-radius:0 0 34px 34px;
    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%);
  }
}

/* ========================================================================== 
   VISUALES DE GESTIÓN MDM — sustituyen las antiguas cuadrículas de tarjetas.
   Ambos PNG conservan su transparencia y se integran directamente sobre el
   fondo claro de la página, sin marcos que dupliquen los paneles del arte.
   ========================================================================== */
.mdm-overview-visual{
  position:relative;
  width:100%;
  margin:0;
  isolation:isolate;
}

.mdm-overview-visual img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  margin-inline:auto;
  filter:drop-shadow(0 24px 32px rgba(54,67,84,.13));
}

.mdm-overview-visual--ecosystem{
  width:108%;
  margin-left:-4%;
}

.mdm-overview-visual--control{
  width:102%;
  margin-left:-1%;
}

@media(max-width:900px){
  body:has(> main[data-route="mdm"]) .mdm-overview-section{
    padding-block:62px;
  }

  body:has(> main[data-route="mdm"]) .mdm-overview-section .product-heading{
    margin-bottom:30px;
  }

  body:has(> main[data-route="mdm"]) .mdm-overview-visual{
    width:calc(100vw - 12px);
    margin-left:calc(50% - 50vw + 6px);
  }

  body:has(> main[data-route="mdm"]) .mdm-overview-visual img{
    filter:drop-shadow(0 14px 20px rgba(54,67,84,.11));
  }
}

/* ==========================================================================
   ESCRITORIO — la fotografia apaisada (1672x941) sustituye a la maqueta.

   Mismo patron que ya usan MDM Android y MDM Apple: foto a sangre de fondo,
   texto a la izquierda sobre el cielo que la foto deja libre, niebla de
   lectura, dobladillo inferior y menu en blanco. Asi las tres paginas de
   MDM leen igual.

   Los textos no se tocan: mismo badge, mismo titular, mismo parrafo y los
   mismos dos botones.
   ========================================================================== */
@media (min-width:901px){

  /* QUIEN SUBE ES <main>, no el hero.

     .product-page lleva `overflow:clip` (product-pages.css:1), que recorta
     cualquier margen negativo del hero: por mas que se le pusiera
     margin-top, el cielo nunca podia salir por encima de main. Subiendo el
     propio main no hay nada que recortar, y de paso su z-index:2 lo deja
     por delante del footer sticky (z-index:1) y empatado con la franja
     blanca de body::before (z-index:2), a la que gana por orden de arbol.

     Sin padding compensatorio: el hueco de la cabecera lo reserva el
     padding-top del hero, asi el cielo empieza en y=0. */
  body:has(> main[data-route="mdm"]){
    margin-top:0;
  }

  main[data-route="mdm"].product-page{
    margin-top:-92px;
  }

  body:has(> main[data-route="mdm"]) .product-hero{
    position:relative;
    width:100vw;
    margin-inline:calc(50% - 50vw);
    /* El hueco del navbar lo reserva el padding; quien sube es <main> (ver
       la regla de abajo), no el hero. */
    padding-top:calc(92px + clamp(20px,3vh,46px));
    padding-bottom:clamp(24px,4vh,54px);
    /* Alto = la foto entera en su proporcion exacta MAS la franja de la
       cabecera: asi no se recorta nada del encuadre. */
    min-height:calc(100vw * 941 / 1672 + 92px);
    overflow:hidden;
    isolation:isolate;
    display:flex;
    align-items:center;
    /* Fila 0 REAL del archivo, muestreada cada 10% del ancho: rellena el
       hueco superior que deja la foto anclada abajo, sin banda de color
       inventada. */
    background-color:#366B98;
    background-image:linear-gradient(90deg,
      #507EA6 0%, #527CA4 10%, #4D7CA7 20%, #42739F 30%, #3D719E 40%,
      #366B98 50%, #2E6492 60%, #296495 70%, #235C8E 80%, #1C578A 90%,
      #155483 100%);
  }

  /* La fotografia. Va en un pseudo-elemento y no en el background del hero
     porque este ya lleva el degradado de relleno. */
  body:has(> main[data-route="mdm"]) .product-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    /* La pantalla del cliente es dpr:2 — a 1990 CSS px el hero pinta 3980
       fisicos, asi que el archivo de 1672 se estiraba x2.38 y el texto de
       los paneles se deshacia. Con image-set el navegador toma el @2x. */
    background-image:url("/assets/mdm-overview-hero-banner.webp?v=hq-2");
    background-image:image-set(
      url("/assets/mdm-overview-hero-banner.webp?v=hq-2") 1x,
      url("/assets/mdm-overview-hero-banner@2x.webp?v=hq-2") 2x);
    background-image:-webkit-image-set(
      url("/assets/mdm-overview-hero-banner.webp?v=hq-2") 1x,
      url("/assets/mdm-overview-hero-banner@2x.webp?v=hq-2") 2x);
    background-repeat:no-repeat;
    /* Anclada abajo. El hero mide 156px mas que la foto (cabecera + barra
       "MDM") y ese sobrante queda ARRIBA, que es justo donde va el navbar:
       ahi el relleno es la fila 0 real del archivo, asi que empalma sin
       costura. Probado al reves y no sirve: el encuadre sube, el titular se
       come el panel y el sobrante azul asoma abajo sin fundir. */
    background-position:center bottom;
    background-size:100% auto;
  }

  /* Niebla de lectura, igual que en Android y Apple: se ACLARA la izquierda
     en vez de oscurecer la foto. Encaja con el motivo de nubes y sube la
     zona de texto muy por encima de 4.5:1. Enmascarada por arriba para no
     invadir la franja del navbar, donde el logo va en blanco. */
  body:has(> main[data-route="mdm"]) .product-hero::after{
    content:"";
    position:absolute;
    /* RESET OBLIGATORIO. product-pages.css:7 ya usa este pseudo-elemento
       para un halo naranja circular:
         right:-12%; top:4%; width:42%; height:72%;
         border-radius:50%; filter:blur(35px)
       Sin anular esas cinco propiedades, la niebla y el dobladillo heredan
       la geometria del halo y acaban dentro de un circulo desenfocado
       pegado a la derecha, no cubriendo el hero. */
    inset:0;
    right:0;
    top:0;
    width:auto;
    height:auto;
    border-radius:0;
    filter:none;
    z-index:0;
    pointer-events:none;
    background:
      /* Dobladillo: la foto acaba en nubes contra el blanco de la seccion
         siguiente y sin esto queda un corte recto de lado a lado. */
      linear-gradient(to bottom,
        rgba(255,255,255,0) 74%,
        rgba(255,255,255,.14) 80%,
        rgba(255,255,255,.44) 88%,
        rgba(255,255,255,.78) 94%,
        rgba(255,255,255,.94) 97%,
        #fff 100%),
      /* Niebla de lectura sobre la mitad izquierda. */
      linear-gradient(100deg,
        rgba(255,255,255,.88) 0%,
        rgba(255,255,255,.76) 20%,
        rgba(255,254,252,.48) 38%,
        rgba(255,254,252,.17) 52%,
        rgba(255,255,255,0) 64%),
      radial-gradient(150% 96% at 2% 56%,
        rgba(255,255,255,.26), rgba(255,255,255,0) 70%);
    /* La niebla no debe invadir la franja del navbar: el logo va en blanco
       y sobre blanco desaparece. */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 150px,#000 250px);
    mask-image:linear-gradient(to bottom,transparent 0,transparent 150px,#000 250px);
  }

  body:has(> main[data-route="mdm"]) .product-hero-grid{
    position:relative;
    z-index:1;
    width:min(1360px,calc(100% - 96px));
    margin-inline:auto;
  }

  /* La maqueta de telefonos cede el sitio a la foto. */
  body:has(> main[data-route="mdm"]) .product-hero-visual{
    display:none;
  }

  /* El copy ya vive en su columna de la rejilla, asi que aqui NO va el
     max-width del 44% que usan Android y Apple (alli el texto es hijo
     directo del hero, a ancho completo). Con el se quedaba en 246px y el
     titular se partia en cuatro lineas. */
  body:has(> main[data-route="mdm"]) .product-hero-copy{
    max-width:none;
  }

  /* El acento del titular: #FB923C sobre la nube da 1.5:1. Este naranja
     quemado, el de la marca en version profunda, da 4.9:1. */
  body:has(> main[data-route="mdm"]) .product-hero .product-title .accent{
    color:#C2410C;
  }

  /* El menu, como en la portada, en planes y en Android/Apple: ahora vuela
     sobre el cielo y el gris original cae a ~3:1. Solo cambia el color. */
  body:has(> main[data-route="mdm"]) .site-header > .nav-shell > .brand img{
    filter:brightness(0) invert(1);
  }

  body:has(> main[data-route="mdm"]) .desktop-nav,
  body:has(> main[data-route="mdm"]) .desktop-nav > a,
  body:has(> main[data-route="mdm"]) .desktop-nav .solutions-trigger,
  body:has(> main[data-route="mdm"]) .desktop-nav .nav-menu-trigger{
    color:rgba(255,255,255,.95);
  }

  body:has(> main[data-route="mdm"]) .desktop-nav :is(a,.solutions-trigger,.nav-menu-trigger):hover,
  body:has(> main[data-route="mdm"]) .desktop-nav .active{
    color:#fff;
  }

  body:has(> main[data-route="mdm"]) .desktop-nav > :is(a,button)::after,
  body:has(> main[data-route="mdm"]) .desktop-nav > .nav-menu > .nav-menu-trigger::after{
    background:#fff;
  }
}

/* El badge "GESTIÓN DE DISPOSITIVOS" se retira del hero de /mdm/ en ambos
   tamanos. El resto de paginas de producto conservan el suyo. */
body:has(> main[data-route="mdm"]) .product-hero .product-badge{
  display:none;
}