/* ============================================================================
   mdm-stats.css — Banda de estadísticas de MDM Android y MDM Apple
   ----------------------------------------------------------------------------
   Son DOS diseños distintos, no uno responsive:

     .mdmstats-desk    versión de ESCRITORIO  (barra horizontal, 3 columnas)
     .mdmstats-phone   versión de TELÉFONO    (panel apilado, franja superior)

   El corte está en 900px, el mismo que ya usa el hero de las páginas MDM.
   Cada diseño conserva sus propios tamaños, radios, tiempos y curvas; lo único
   que cambió es la paleta: el verde original pasó a NARANJA OSCURO para que la
   pieza se separe del resto de la página sin salirse del color del sistema
   (#FB923C).
   ============================================================================ */

.mdmstats{
  position:relative;
  width:100%;
}

.mdmstats *{
  box-sizing:border-box;
}

/* Conmutador entre los dos diseños. */
@media (max-width:900px){
  .mdmstats-desk{display:none !important}
}

@media (min-width:901px){
  .mdmstats-phone{display:none !important}
}

/* Las animaciones esperan a que la banda entre en pantalla: la página es larga
   y si no, la entrada se gasta muy por encima del pliegue.
   La pausa sólo se aplica si mdm-stats.js llegó a arrancar (data-stats-ready):
   si el script fallara, la banda se ve igual, sólo que sin esperar al scroll. */
.mdmstats[data-stats-ready]:not(.is-in) .mdmstats-desk__shell,
.mdmstats[data-stats-ready]:not(.is-in) .mdmstats-desk__shell::before,
.mdmstats[data-stats-ready]:not(.is-in) .mdmstats-desk__value,
.mdmstats[data-stats-ready]:not(.is-in) .mdmstats-desk__copy,
.mdmstats[data-stats-ready]:not(.is-in) .mdmstats-phone__item,
.mdmstats[data-stats-ready]:not(.is-in) .mdmstats-phone__panel::after{
  animation-play-state:paused;
}


/* ==========================================================================
   ESCRITORIO
   ========================================================================== */

.mdmstats-desk{
  /* Paleta alineada con el hero de cielo.

     El naranja oscuro anterior (#7c3306 → #24120a) se leía como MARRÓN
     justo debajo de una fotografía de nubes naranjas: dos marrones
     distintos pegados, sin relación entre ellos.

     Tampoco funcionó el azul noche: la banda vive ENTRE dos naranjas — las
     nubes de la foto por arriba y la sección #FB923C por abajo — y ahí
     cualquier color saturado se lee como un cuerpo extraño.

     El único que combina con ambos es el neutro. La barra pasa a blanco
     cálido, que enlaza con el degradado blanco en el que muere la foto, y
     el color lo ponen las cifras en naranja de marca. Contraste medido:
     #EA580C sobre blanco da 3.54:1 — cumple para cifras de 56px, que es
     texto grande — y el texto descriptivo #3F4A5A da 9.1:1.

     Solo cambia la paleta. Tamaños, radios, tiempos y curvas de animación
     quedan exactamente como estaban, y .mdmstats-phone (teléfono) tiene sus
     propias variables y no se toca. */
  --yellow:#EA580C;
  --white:#3F4A5A;

  --bar-left:#FFFFFF;
  --bar-mid:#FFFAF5;
  --bar-right:#FFF4E9;

  position:relative;

  width:100%;
  min-height:247px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:
    radial-gradient(
      900px 300px at 31% -5%,
      rgba(251,146,60,.42),
      transparent 64%
    ),

    radial-gradient(
      650px 280px at 87% 28%,
      rgba(146,64,14,.55),
      transparent 66%
    ),

    linear-gradient(
      112deg,
      #b8560c 0%,
      #a1450a 43%,
      #c2691a 70%,
      #7f3406 100%
    );
}


/* --------------------------------------------------
   DECORACIÓN DEL FONDO
-------------------------------------------------- */

.mdmstats-desk::before{
  content:"";

  position:absolute;

  width:122px;
  height:146px;

  left:66.7%;
  top:-103px;

  border-radius:46% 54% 51% 49%;

  background:
    linear-gradient(
      120deg,
      #bb7a49,
      #704123
    );

  transform:rotate(7deg);

  opacity:.9;

  filter:blur(.15px);
}


.mdmstats-desk::after{
  content:"";

  position:absolute;

  right:18px;
  top:-35px;

  width:515px;
  height:320px;

  border-radius:38% 0 0 58%;

  background:
    radial-gradient(
      95px 260px at 100% 60%,
      #be7c4b 0 52%,
      transparent 53%
    ),

    linear-gradient(
      180deg,
      #0b0704 0%,
      #15100b 100%
    );

  transform:rotate(-2deg);

  opacity:.92;
}


/* --------------------------------------------------
   BLOQUE PRINCIPAL
-------------------------------------------------- */

.mdmstats-desk__shell{
  position:relative;
  z-index:2;

  width:calc(100% - 176px);

  min-height:168px;

  margin:
    37px
    88px
    42px;

  border-radius:
    30px
    80px
    80px
    30px;

  background:
    linear-gradient(
      90deg,
      var(--bar-left) 0%,
      var(--bar-mid) 49%,
      var(--bar-right) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 10px 28px rgba(0,0,0,.10);

  display:grid;

  /* Reparto ajustado al texto real: "+500,000" ocupa mucho más que un "87%". */
  grid-template-columns:
    1.45fr
    1fr
    1fr;

  align-items:center;

  padding:
    28px
    46px
    28px
    48px;

  overflow:hidden;

  isolation:isolate;

  animation:
    mdmstBarIn
    760ms
    cubic-bezier(.2,.85,.2,1)
    both;
}


/* --------------------------------------------------
   BRILLO QUE RECORRE EL BLOQUE
-------------------------------------------------- */

.mdmstats-desk__shell::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  background:
    linear-gradient(
      105deg,
      transparent 12%,
      rgba(255,255,255,.045) 33%,
      transparent 48%
    );

  transform:translateX(-120%);

  animation:
    mdmstShine
    5.2s
    ease-in-out
    1.3s
    infinite;
}


/* --------------------------------------------------
   CADA ESTADÍSTICA
-------------------------------------------------- */

.mdmstats-desk__item{
  min-width:0;

  display:flex;
  align-items:center;

  gap:28px;

  padding-right:34px;
}


.mdmstats-desk__item:nth-child(2){
  padding-left:10px;
  gap:30px;
}


.mdmstats-desk__item:nth-child(3){
  padding-left:16px;
  padding-right:0;

  gap:28px;
}


/* --------------------------------------------------
   NÚMEROS
-------------------------------------------------- */

.mdmstats-desk__value{
  color:var(--yellow);

  font-size:
    clamp(
      38px,
      3.1vw,
      56px
    );

  line-height:.95;

  font-weight:800;

  letter-spacing:-2.9px;

  white-space:nowrap;

  text-shadow:
    0 0 1px rgba(253,186,116,.14);

  opacity:0;

  transform:
    translateY(14px)
    scale(.97);

  animation:
    mdmstValueIn
    700ms
    cubic-bezier(.16,1,.3,1)
    forwards;

  transition:
    transform .25s ease;
}

/* La cifra 2 es una palabra, no un número: baja un paso para no comerse la
   columna. */
.mdmstats-desk__value--word{
  font-size:
    clamp(
      30px,
      2.4vw,
      44px
    );

  letter-spacing:-1.6px;
}


.mdmstats-desk__item:nth-child(1) .mdmstats-desk__value{
  animation-delay:280ms;
}

.mdmstats-desk__item:nth-child(2) .mdmstats-desk__value{
  animation-delay:420ms;
}

.mdmstats-desk__item:nth-child(3) .mdmstats-desk__value{
  animation-delay:560ms;
}


/* --------------------------------------------------
   TEXTOS
-------------------------------------------------- */

.mdmstats-desk__copy{
  color:var(--white);

  font-size:
    clamp(
      18px,
      1.45vw,
      29px
    );

  line-height:1.28;

  font-weight:400;

  letter-spacing:-.35px;

  /* El ancho de lectura crece con la pantalla en vez de quedarse fijo:
     así no queda hueco muerto a la derecha en monitores anchos. */
  max-width:clamp(200px,17vw,330px);

  opacity:0;

  transform:translateX(14px);

  animation:
    mdmstCopyIn
    640ms
    ease
    forwards;

  transition:
    transform .25s ease;
}


.mdmstats-desk__item:nth-child(1) .mdmstats-desk__copy{
  animation-delay:400ms;
}


.mdmstats-desk__item:nth-child(2) .mdmstats-desk__copy{
  animation-delay:540ms;

  max-width:clamp(150px,11vw,220px);
}


.mdmstats-desk__item:nth-child(3) .mdmstats-desk__copy{
  animation-delay:680ms;

  max-width:clamp(210px,16vw,320px);
}


/* --------------------------------------------------
   HOVER
-------------------------------------------------- */

.mdmstats-desk__item:hover .mdmstats-desk__value{
  transform:
    translateY(-2px)
    scale(1.025);
}

.mdmstats-desk__item:hover .mdmstats-desk__copy{
  transform:translateX(3px);
}


/* --------------------------------------------------
   ANIMACIONES
-------------------------------------------------- */

@keyframes mdmstBarIn{

  from{
    opacity:0;

    transform:
      translateY(18px)
      scale(.985);

    filter:blur(3px);
  }

  to{
    opacity:1;

    transform:none;

    filter:none;
  }

}


@keyframes mdmstValueIn{

  to{
    opacity:1;

    transform:none;
  }

}


@keyframes mdmstCopyIn{

  to{
    opacity:1;

    transform:none;
  }

}


@keyframes mdmstShine{

  0%,
  68%{
    transform:translateX(-120%);
  }

  83%,
  100%{
    transform:translateX(120%);
  }

}


/* --------------------------------------------------
   TABLET (901px – 1100px)
-------------------------------------------------- */

@media (max-width:1100px){

  .mdmstats-desk{
    padding:28px 18px;

    min-height:auto;
  }


  .mdmstats-desk__shell{

    width:100%;

    margin:0;

    min-height:auto;

    border-radius:28px;

    grid-template-columns:1fr;

    padding:
      26px
      28px;

    gap:24px;

  }


  .mdmstats-desk__item,
  .mdmstats-desk__item:nth-child(2),
  .mdmstats-desk__item:nth-child(3){

    padding:0;

    gap:20px;

  }


  .mdmstats-desk__item:not(:last-child){

    padding-bottom:22px;

    border-bottom:
      1px solid
      rgba(255,255,255,.11);

  }


  .mdmstats-desk__value{

    min-width:215px;

    font-size:52px;

  }

  .mdmstats-desk__value--word{

    font-size:44px;

  }


  .mdmstats-desk__copy,
  .mdmstats-desk__item:nth-child(2) .mdmstats-desk__copy,
  .mdmstats-desk__item:nth-child(3) .mdmstats-desk__copy{

    max-width:none;

    font-size:22px;

  }

}


/* --------------------------------------------------
   MÓVIL — reserva del diseño de escritorio.
   No se usa hoy (por debajo de 900px entra .mdmstats-phone),
   pero se conserva por si se mueve el corte.
-------------------------------------------------- */

@media (max-width:560px){

  .mdmstats-desk{

    padding:
      18px
      12px;

  }


  .mdmstats-desk__shell{

    padding:
      22px
      20px;

    gap:20px;

    border-radius:24px;

  }


  .mdmstats-desk__item,
  .mdmstats-desk__item:nth-child(2),
  .mdmstats-desk__item:nth-child(3){

    display:grid;

    grid-template-columns:
      minmax(0,auto)
      1fr;

    gap:16px;

  }


  .mdmstats-desk__value{

    min-width:0;

    font-size:42px;

    letter-spacing:-2px;

  }


  .mdmstats-desk__copy,
  .mdmstats-desk__item:nth-child(2) .mdmstats-desk__copy,
  .mdmstats-desk__item:nth-child(3) .mdmstats-desk__copy{

    font-size:17px;

    line-height:1.34;

  }

}


/* ==========================================================================
   TELÉFONO
   ========================================================================== */

.mdmstats-phone{
  /* Naranja oscuro en lugar del verde; la línea inferior toma el naranja
     del sistema. */
  --panel:#2b1206;
  --metric:#fcee4f;
  --text:#ffffff;
  --line:#FB923C;

  position:relative;

  display:block;

  width:min(100%,774px);
  min-height:620px;

  margin-inline:auto;

  overflow:hidden;

  background:var(--panel);

  isolation:isolate;
}


/* --------------------------------------------------
   ZONA SUPERIOR
-------------------------------------------------- */

.mdmstats-phone__top{
  position:relative;

  height:96px;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 23% -5%,
      rgba(251,146,60,.8),
      transparent 58%
    ),
    radial-gradient(
      circle at 40% 58%,
      rgba(217,119,6,.72),
      transparent 49%
    ),
    linear-gradient(
      115deg,
      #e0761f 0%,
      #b8500c 47%,
      #4a1c03 100%
    );
}

/* Luz suave del fondo */

.mdmstats-phone__top::before{
  content:"";

  position:absolute;
  inset:-30px -20px -40px -30px;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255,255,255,.15),
      transparent 17%
    ),
    radial-gradient(
      circle at 30% 70%,
      rgba(255,255,255,.08),
      transparent 19%
    );

  filter:blur(16px);

  animation:
    mdmstAmbient
    8s
    ease-in-out
    infinite
    alternate;
}

/* Forma negra de la parte superior */

.mdmstats-phone__top::after{
  content:"";

  position:absolute;

  right:-7px;
  top:-49px;

  width:395px;
  height:145px;

  border-radius:
    0 0 65% 52% /
    0 0 62% 45%;

  background:
    radial-gradient(
      circle at 35% 25%,
      #282820 0%,
      #171711 44%,
      #0c0c08 72%,
      #090907 100%
    );

  box-shadow:
    -32px 26px 36px rgba(0,0,0,.08);

  transform:rotate(-1deg);

  animation:
    mdmstShapeFloat
    6s
    ease-in-out
    infinite
    alternate;
}


/* --------------------------------------------------
   SECCIÓN DE ESTADÍSTICAS
-------------------------------------------------- */

.mdmstats-phone__panel{
  position:relative;

  /* El alto original estaba calculado para 4 cifras; aquí son 3. */
  min-height:524px;

  padding:
    59px
    24px
    73px;

  background:var(--panel);

  border-bottom:
    9px solid var(--line);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


/* --------------------------------------------------
   CADA ESTADÍSTICA
-------------------------------------------------- */

.mdmstats-phone__item{
  width:100%;

  text-align:center;

  opacity:0;

  transform:
    translateY(26px);

  filter:
    blur(5px);

  animation:
    mdmstReveal
    .72s
    cubic-bezier(.2,.8,.2,1)
    forwards;
}

.mdmstats-phone__item:nth-child(1){
  animation-delay:.08s;
}

.mdmstats-phone__item:nth-child(2){
  animation-delay:.24s;
}

.mdmstats-phone__item:nth-child(3){
  animation-delay:.40s;
}

.mdmstats-phone__item + .mdmstats-phone__item{
  margin-top:35px;
}


/* --------------------------------------------------
   NÚMEROS AMARILLOS
-------------------------------------------------- */

.mdmstats-phone__metric{
  display:inline-block;

  color:var(--metric);

  font-weight:700;

  font-size:
    clamp(43px,6.2vw,49px);

  line-height:1.02;

  letter-spacing:-2.5px;

  transform-origin:center;

  text-shadow:
    0 0 0
    rgba(252,238,79,0);

  transition:
    transform .28s ease,
    text-shadow .28s ease;
}


/* --------------------------------------------------
   DESCRIPCIÓN
-------------------------------------------------- */

.mdmstats-phone__label{
  margin:24px auto 0;

  color:var(--text);

  font-weight:400;

  font-size:
    clamp(28px,4.3vw,34px);

  line-height:1.08;

  letter-spacing:-.85px;

  /* Los textos de Shalom Trust son más largos que los de la referencia:
     se permite el salto de línea y se limita el ancho de lectura. */
  max-width:19ch;

  white-space:normal;

  text-wrap:balance;
}


/* --------------------------------------------------
   HOVER
-------------------------------------------------- */

.mdmstats-phone__item:hover .mdmstats-phone__metric{
  transform:
    translateY(-2px)
    scale(1.035);

  text-shadow:
    0 0 24px
    rgba(252,238,79,.16);
}


/* --------------------------------------------------
   BRILLO LÍNEA INFERIOR
-------------------------------------------------- */

.mdmstats-phone__panel::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:9px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0),
      rgba(255,255,255,.38),
      rgba(255,255,255,0)
    );

  transform:
    translateX(-120%);

  animation:
    mdmstLineSweep
    4.4s
    ease-in-out
    1.4s
    infinite;

  pointer-events:none;
}


/* --------------------------------------------------
   ANIMACIONES
-------------------------------------------------- */

@keyframes mdmstReveal{
  to{
    opacity:1;

    transform:
      translateY(0);

    filter:
      blur(0);
  }
}

@keyframes mdmstAmbient{

  from{
    transform:
      translate3d(-1%,-2%,0)
      scale(1.03);
  }

  to{
    transform:
      translate3d(2%,2%,0)
      scale(1.08);
  }

}

@keyframes mdmstShapeFloat{

  from{
    transform:
      translateY(0)
      rotate(-1deg);
  }

  to{
    transform:
      translateY(5px)
      rotate(.4deg);
  }

}

@keyframes mdmstLineSweep{

  0%,
  54%{
    transform:
      translateX(-120%);

    opacity:0;
  }

  60%{
    opacity:.5;
  }

  82%{
    transform:
      translateX(120%);

    opacity:0;
  }

  100%{
    transform:
      translateX(120%);

    opacity:0;
  }

}


/* --------------------------------------------------
   MÓVIL ESTRECHO
-------------------------------------------------- */

@media (max-width:600px){

  .mdmstats-phone{
    width:100%;
    min-height:auto;
  }

  .mdmstats-phone__top{
    height:74px;
  }

  .mdmstats-phone__top::after{
    right:-48px;

    width:330px;
    height:120px;
  }

  .mdmstats-phone__panel{
    min-height:496px;

    padding:
      54px
      16px
      64px;
  }

  .mdmstats-phone__item + .mdmstats-phone__item{
    margin-top:36px;
  }

  .mdmstats-phone__metric{
    font-size:
      clamp(42px,13vw,49px);
  }

  .mdmstats-phone__label{
    margin-top:19px;

    font-size:
      clamp(23px,7vw,32px);

    max-width:17ch;
  }

}


/* ==========================================================================
   ACCESIBILIDAD — vale para los dos diseños
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

  .mdmstats *,
  .mdmstats *::before,
  .mdmstats *::after{
    animation:none !important;
    transition:none !important;
  }

  .mdmstats-desk__value,
  .mdmstats-desk__copy,
  .mdmstats-phone__item{
    opacity:1;
    transform:none;
    filter:none;
  }

}

/* ========================================================================== 
   Integración de resultados con el héroe de MDM Android.
   ========================================================================== */
@media(min-width:901px){
  .mdm-android-page .mdmstats{
    z-index:6;
    width:min(1760px,calc(100% - clamp(56px,8vw,150px)));
    margin:-205px auto 0;
    padding-bottom:38px;
  }

  .mdm-android-page .mdmstats-desk{
    min-height:180px;
    overflow:visible;
    background:transparent;
  }

  .mdm-android-page .mdmstats-desk::before,
  .mdm-android-page .mdmstats-desk::after{
    display:none;
    content:none;
  }

  .mdm-android-page .mdmstats-desk__shell{
    width:100%;
    min-height:172px;
    margin:0;
    padding:32px clamp(34px,3.2vw,64px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:30px 86px 86px 30px;
    background:linear-gradient(105deg,rgba(25,29,35,.96),rgba(15,18,23,.94));
    box-shadow:0 28px 70px rgba(51,27,11,.22),inset 0 1px 0 rgba(255,255,255,.08);
    grid-template-columns:1.45fr 1fr 1fr;
    gap:0;
  }

  .mdm-android-page .mdmstats-desk__item,
  .mdm-android-page .mdmstats-desk__item:nth-child(2),
  .mdm-android-page .mdmstats-desk__item:nth-child(3){
    display:flex;
    padding-top:0;
    padding-bottom:0;
    border-bottom:0;
  }

  .mdm-android-page .mdmstats-desk__value,
  .mdm-android-page .mdmstats-desk__value--word{
    min-width:0;
    color:#FB923C;
    text-shadow:none;
  }
}

@media(min-width:901px) and (max-width:1150px){
  .mdm-android-page .mdmstats-desk__shell{
    padding-inline:28px;
  }

  .mdm-android-page .mdmstats-desk__item,
  .mdm-android-page .mdmstats-desk__item:nth-child(2),
  .mdm-android-page .mdmstats-desk__item:nth-child(3){
    display:grid;
    justify-items:center;
    gap:10px;
    padding-left:0;
    padding-right:14px;
    text-align:center;
  }

  .mdm-android-page .mdmstats-desk__item:nth-child(3){
    padding-right:0;
  }

  .mdm-android-page .mdmstats-desk__value,
  .mdm-android-page .mdmstats-desk__value--word{
    font-size:clamp(28px,3.5vw,40px);
    letter-spacing:-1.5px;
  }

  .mdm-android-page .mdmstats-desk__copy,
  .mdm-android-page .mdmstats-desk__item:nth-child(2) .mdmstats-desk__copy,
  .mdm-android-page .mdmstats-desk__item:nth-child(3) .mdmstats-desk__copy{
    max-width:21ch;
    font-size:clamp(15px,1.75vw,19px);
    line-height:1.22;
  }
}

@media(max-width:900px){
  .mdm-android-page .mdmstats{
    width:100%;
    margin:0;
    background:#161a20;
  }

  .mdm-android-page .mdmstats-phone{
    width:100%;
    min-height:auto;
    margin:0;
    background:#161a20;
  }

  .mdm-android-page .mdmstats-phone__top{
    display:none;
  }

  .mdm-android-page .mdmstats-phone__panel{
    min-height:auto;
    padding:clamp(54px,8vh,82px) 22px clamp(66px,10vh,96px);
    border-bottom:10px solid #FB923C;
    background:#161a20;
  }

  .mdm-android-page .mdmstats-phone__item + .mdmstats-phone__item{
    margin-top:44px;
  }

  .mdm-android-page .mdmstats-phone__metric{
    color:#FB923C;
    font-size:clamp(44px,13vw,62px);
    line-height:1;
    font-weight:800;
    text-shadow:none;
  }

  .mdm-android-page .mdmstats-phone__label{
    max-width:19ch;
    margin-top:18px;
    color:#fff;
    font-size:clamp(23px,6.8vw,34px);
    line-height:1.14;
  }
}

/* Banda móvil compartida por Android y Apple. Empieza exactamente después del
   héroe y conserva las cifras existentes en una escala mucho más compacta. */
@media(max-width:900px){
  .mdm-detail-page .mdmstats{
    position:relative;
    z-index:1;
    width:100%;
    margin:0;
    background:#151a20;
  }

  .mdm-detail-page .mdmstats-phone{
    width:100%;
    min-height:auto;
    margin:0;
    overflow:hidden;
    background:#151a20;
  }

  .mdm-detail-page .mdmstats-phone__top{
    display:none;
  }

  .mdm-detail-page .mdmstats-phone__panel{
    min-height:auto;
    padding:36px 20px 40px;
    border-bottom:7px solid #FB923C;
    background:#151a20;
    justify-content:flex-start;
  }

  .mdm-detail-page .mdmstats-phone__item + .mdmstats-phone__item{
    margin-top:23px;
  }

  .mdm-detail-page .mdmstats-phone__metric{
    color:#FB923C;
    font-size:clamp(32px,8.8vw,36px);
    line-height:1;
    font-weight:780;
    letter-spacing:-.045em;
    text-shadow:none;
  }

  .mdm-detail-page .mdmstats-phone__label{
    max-width:24ch;
    margin:8px auto 0;
    color:#fff;
    font-size:clamp(16px,4.3vw,18px);
    line-height:1.24;
    letter-spacing:-.02em;
  }
}

/* Estadísticas de escritorio: la banda se apoya en el borde inferior del hero
   sin invadir el CTA. Solo una parte queda sobre la fotografía y el resto
   enlaza visualmente con la siguiente sección. */
@media(min-width:901px){
  .mdm-detail-page .mdmstats{
    position:relative;
    z-index:6;
    width:min(1760px,calc(100% - clamp(56px,8vw,150px)));
    margin:-112px auto 0;
    padding:0 0 34px;
    background:transparent;
  }

  .mdm-detail-page .mdmstats-desk{
    display:flex;
    min-height:150px;
    padding:0;
    overflow:visible;
    background:transparent;
  }

  .mdm-detail-page .mdmstats-desk::before,
  .mdm-detail-page .mdmstats-desk::after{
    display:none;
    content:none;
  }

  .mdm-detail-page .mdmstats-desk__shell{
    width:100%;
    min-height:150px;
    margin:0;
    padding:24px clamp(30px,3vw,54px);
    border:1px solid rgba(251,146,60,.20);
    border-radius:25px 76px 76px 25px;
    /* Blanco cálido: continúa el degradado en el que muere la foto del hero
       y deja que el color lo pongan las cifras. Ni el marrón original ni el
       azul noche combinaban entre dos naranjas. */
    background:linear-gradient(102deg,#fff 0%,#fffaf5 58%,#fff4e9 100%);
    box-shadow:0 16px 40px rgba(120,72,30,.13),0 2px 6px rgba(120,72,30,.05);
    grid-template-columns:1.42fr 1fr 1.08fr;
    gap:clamp(18px,2vw,42px);
  }

  .mdm-detail-page .mdmstats-desk__shell::before{
    display:none;
    content:none;
  }

  .mdm-detail-page .mdmstats-desk__item,
  .mdm-detail-page .mdmstats-desk__item:nth-child(2),
  .mdm-detail-page .mdmstats-desk__item:nth-child(3){
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    align-content:center;
    gap:clamp(15px,1.65vw,27px);
    min-width:0;
    padding:0;
    border:0;
    text-align:left;
  }

  .mdm-detail-page .mdmstats-desk__value,
  .mdm-detail-page .mdmstats-desk__value--word,
  .mdm-detail-page .mdmstats-desk__item:nth-child(1) .mdmstats-desk__value,
  .mdm-detail-page .mdmstats-desk__item:nth-child(2) .mdmstats-desk__value,
  .mdm-detail-page .mdmstats-desk__item:nth-child(3) .mdmstats-desk__value{
    min-width:0;
    /* Naranja de marca intenso. Sobre el blanco da 3.54:1, que es el umbral
       de WCAG para texto grande (estas cifras van a 56px). El #FB923C plano
       se quedaba en 2.31:1 y no llegaba. */
    color:#EA580C;
    font-size:clamp(36px,3.05vw,56px);
    line-height:.95;
    font-weight:800;
    letter-spacing:-.045em;
    text-shadow:none;
    white-space:nowrap;
  }

  .mdm-detail-page .mdmstats-desk__value--word{
    font-size:clamp(32px,2.6vw,48px);
  }

  .mdm-detail-page .mdmstats-desk__copy,
  .mdm-detail-page .mdmstats-desk__item:nth-child(1) .mdmstats-desk__copy,
  .mdm-detail-page .mdmstats-desk__item:nth-child(2) .mdmstats-desk__copy,
  .mdm-detail-page .mdmstats-desk__item:nth-child(3) .mdmstats-desk__copy{
    max-width:24ch;
    margin:0;
    /* Sobre la barra clara el blanco desaparece: pasa a gris oscuro (9.1:1). */
    color:#3F4A5A;
    font-size:clamp(15px,1.23vw,22px);
    line-height:1.22;
    font-weight:450;
    letter-spacing:-.018em;
    text-align:left;
  }
}

@media(min-width:901px) and (max-width:1150px){
  .mdm-detail-page .mdmstats{
    width:calc(100% - 48px);
    margin-top:-92px;
    padding-bottom:24px;
  }

  .mdm-detail-page .mdmstats-desk,
  .mdm-detail-page .mdmstats-desk__shell{
    min-height:130px;
  }

  .mdm-detail-page .mdmstats-desk__shell{
    padding:20px 24px;
    border-radius:22px 60px 60px 22px;
    grid-template-columns:1.34fr .9fr 1fr;
    gap:16px;
  }

  .mdm-detail-page .mdmstats-desk__item,
  .mdm-detail-page .mdmstats-desk__item:nth-child(2),
  .mdm-detail-page .mdmstats-desk__item:nth-child(3){
    grid-template-columns:auto minmax(0,1fr);
    gap:12px;
    padding:0;
    border:0;
  }

  .mdm-detail-page .mdmstats-desk__value,
  .mdm-detail-page .mdmstats-desk__value--word,
  .mdm-detail-page .mdmstats-desk__item:nth-child(1) .mdmstats-desk__value,
  .mdm-detail-page .mdmstats-desk__item:nth-child(2) .mdmstats-desk__value,
  .mdm-detail-page .mdmstats-desk__item:nth-child(3) .mdmstats-desk__value{
    font-size:clamp(28px,3.5vw,40px);
  }

  .mdm-detail-page .mdmstats-desk__copy,
  .mdm-detail-page .mdmstats-desk__item:nth-child(1) .mdmstats-desk__copy,
  .mdm-detail-page .mdmstats-desk__item:nth-child(2) .mdmstats-desk__copy,
  .mdm-detail-page .mdmstats-desk__item:nth-child(3) .mdmstats-desk__copy{
    font-size:clamp(13px,1.55vw,17px);
  }
}

/* Apple y Android comparten exactamente la misma posición de la banda. */
@media(min-width:901px){
  .mdm-apple-page .mdmstats{
    margin-top:-112px;
    padding-bottom:34px;
  }
}

@media(min-width:901px) and (max-width:1150px){
  .mdm-apple-page .mdmstats{
    margin-top:-92px;
    padding-bottom:24px;
  }
}