/* Diseño aportado por el usuario, compartido por Android y Apple.
   Los selectores se aíslan para no afectar los heroes ni otras tarjetas. */
.mdm-how{
      --shalom-orange: #FB923C;
      --shalom-orange-dark: #FB923C;
      --shalom-orange-light: #FB923C;
      --page-bg: #f4f6f9;
      --card-bg: rgba(255,255,255,.96);
      --text: #262321;
      --muted: #69635f;
      --content-width: 846px;
    }

    .mdm-how, .mdm-how *{
      box-sizing: border-box;
    }


    .mdm-how{
      min-height: 100vh;
      min-height: 100svh;
      background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.42), transparent 43%),
        var(--page-bg);
      color: var(--text);
      font-family:var(--font-sans);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    .mdm-how{
      width: 100%;
      min-height: 100vh;
      min-height: 100svh;
      padding: 50px 24px 78px;
      overflow: hidden;
    }

    .mdm-how__header{
      width: min(100%, 760px);
      margin: 0 auto 30px;
      text-align: center;
    }

    .mdm-how__eyebrow{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 27px;
      padding: 5px 11px 4px;
      margin-bottom: 11px;
      border: 1px solid var(--shalom-orange);
      border-radius: 4px;
      background: rgba(255,255,255,.30);
      color: var(--shalom-orange-dark);
      font-size: 11px;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.01em;
    }

    .mdm-how__title{
      margin: 0;
      font-size: clamp(48px, 4.15vw, 66px);
      font-weight: 790;
      line-height: .98;
      letter-spacing: -0.052em;
      background: linear-gradient(
        90deg,
        var(--shalom-orange-light) 0%,
        var(--shalom-orange) 48%,
        var(--shalom-orange-dark) 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .mdm-how__subtitle{
      max-width: 520px;
      margin: 19px auto 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 440;
      line-height: 1.45;
      letter-spacing: -.01em;
    }

    .mdm-how__content{
      width: min(100%, var(--content-width));
      margin: 0 auto;
    }

    .mdm-how__media{
      position: relative;
      width: 100%;
      height: 335px;
      overflow: hidden;
      border-radius: 92px 14px 92px 14px;
      background: #eee8e4;
      isolation: isolate;
    }

    .mdm-how__media img{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    .mdm-how__grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px;
      margin-top: 19px;
    }

    .mdm-how__card{
      min-height: 186px;
      padding: 25px 24px 22px;
      background: var(--card-bg);
      border-radius: 14px 70px 14px 14px;
      box-shadow:
        0 1px 0 rgba(80,40,20,.02),
        0 7px 24px rgba(77,39,19,.025);
    }

    .mdm-how__icon{
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      margin-bottom: 8px;
      color: var(--shalom-orange-dark);
    }

    .mdm-how__icon svg{
      width: 34px;
      height: 34px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mdm-how__card h3{
      margin: 0 0 15px;
      color: var(--shalom-orange-dark);
      font-size: 14px;
      line-height: 1.18;
      font-weight: 760;
      letter-spacing: -.017em;
    }

    .mdm-how__card p{
      margin: 0;
      color: #57514d;
      font-size: 12px;
      line-height: 1.48;
      font-weight: 430;
      letter-spacing: -.008em;
    }

    @media (max-width: 760px){
      .mdm-how{
        padding: 36px 16px 56px;
      }

      .mdm-how__header{
        margin-bottom: 24px;
      }

      .mdm-how__title{
        font-size: clamp(44px, 12vw, 58px);
      }

      .mdm-how__subtitle{
        font-size: 13px;
      }

      .mdm-how__media{
        height: clamp(270px, 58vw, 380px);
        border-radius: 56px 12px 56px 12px;
      }

      .mdm-how__grid{
        grid-template-columns: 1fr;
      }

      .mdm-how__card{
        min-height: 0;
        border-radius: 14px 58px 14px 14px;
      }
    }

/* Composición compartida por Android y Apple: mismo marco, escala, color y
   tarjetas; únicamente cambian el retrato y el contenido de cada plataforma. */
.mdm-how--wide{
  --content-width:1760px;
  padding:clamp(52px,5vw,96px) 0 clamp(56px,6vw,112px);
  min-height:0;
  background:#FB923C;
  color:#3b1b0b;
}
.mdm-how--wide .mdm-how__header{
  width:min(1120px,84%);
  margin-bottom:clamp(40px,4vw,76px);
}
.mdm-how--wide .mdm-how__eyebrow{
  min-height:30px;
  margin-bottom:18px;
  color:#51260f;
  border-color:currentColor;
  background:transparent;
  font-size:13px;
}
.mdm-how--wide .mdm-how__title{
  font-size:clamp(48px,4.4vw,84px);
  line-height:1.04;
  letter-spacing:-.04em;
  color:#3b1b0b;
  background:none;
}
.mdm-how--wide .mdm-how__subtitle{
  max-width:1000px;
  margin-top:clamp(22px,2vw,36px);
  font-size:clamp(16px,1.3vw,24px);
  line-height:1.5;
  color:#51260f;
}
.mdm-how--wide .mdm-how__content{
  width:min(var(--content-width),92%);
}
.mdm-how--wide .mdm-how__media{
  height:auto;
  aspect-ratio:2 / 1;
  overflow:hidden;
  border-radius:0 0 clamp(80px,15vw,290px) 0;
  background:transparent;
}
.mdm-how--wide .mdm-how__backdrop{
  position:absolute;
  inset:12% 0 0;
  overflow:hidden;
  border-radius:clamp(80px,15vw,290px) 18px clamp(80px,15vw,290px) 0;
}
.mdm-how--wide .mdm-how__backdrop img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.mdm-how--wide .mdm-how__person{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:auto;
  max-width:none;
  height:100%;
  object-fit:contain;
}
.mdm-how--wide .mdm-how__grid{
  gap:clamp(18px,1.6vw,32px);
  margin-top:clamp(22px,2vw,38px);
}
.mdm-how--wide .mdm-how__card{
  min-width:0;
  min-height:0;
  padding:clamp(26px,2.6vw,50px);
  border-radius:18px clamp(70px,7vw,130px) 18px 18px;
  box-shadow:none;
}
.mdm-how--wide .mdm-how__icon{
  margin-bottom:18px;
}
.mdm-how--wide .mdm-how__card h3{
  font-size:clamp(19px,1.55vw,28px);
  line-height:1.2;
  margin-bottom:20px;
}
.mdm-how--wide .mdm-how__card p{
  font-size:clamp(15px,1.15vw,21px);
  line-height:1.55;
}
@media(max-width:760px){
  .mdm-how--wide{padding-block:48px 54px}
  .mdm-how--wide .mdm-how__header,
  .mdm-how--wide .mdm-how__content{width:calc(100% - 40px)}
  .mdm-how--wide .mdm-how__header{margin-bottom:32px;text-align:center}
  .mdm-how--wide .mdm-how__eyebrow{margin-bottom:20px;font-size:14px}
  .mdm-how--wide .mdm-how__title{font-size:clamp(36px,9.8vw,44px);line-height:1.04}
  .mdm-how--wide .mdm-how__subtitle{max-width:34ch;margin-top:20px;font-size:17px;line-height:1.5}
  .mdm-how--wide .mdm-how__media{
    aspect-ratio:1.08;
    border-bottom-right-radius:70px;
  }
  .mdm-how--wide .mdm-how__backdrop{border-radius:70px 12px 70px 0}
  .mdm-how--wide .mdm-how__grid{gap:18px;margin-top:22px}
  .mdm-how--wide .mdm-how__card{padding:30px 26px 34px;border-radius:16px 72px 16px 16px}
  .mdm-how--wide .mdm-how__icon{margin-bottom:14px}
  .mdm-how--wide .mdm-how__card h3{margin-bottom:16px;font-size:21px}
  .mdm-how--wide .mdm-how__card p{font-size:16px;line-height:1.5}
}