/* ============================================================
   Publinovo — Landing "Marketing Médico · Páginas Web para Salud"
   Hereda tokens y componentes de styles.css y diseno-paginas-web.css.
   Solo añade lo específico de esta landing:
     · mm-pain   → tarjetas dolor → solución
     · mm-cases  → casos de éxito / prueba social
   ============================================================ */

/* tono levemente clínico para el hero (variación de azul) */
.mm-hero{
  background:
    radial-gradient(110% 120% at 92% -10%, rgba(28,157,215,.14), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(140,198,63,.14), transparent 55%),
    linear-gradient(135deg, #eef6fb 0%, #eef7f4 52%, #f3f9ee 100%);
}

/* chips de respaldo debajo de la imagen del hero */
.mm-hero .dpw-hero__media{ flex-direction:column; align-items:center }
.mm-hero .dpw-float--1{ top:-4% }
.mm-hero__chips{ margin-top:22px; justify-content:center; flex-wrap:nowrap }
.mm-hero__chips .dpw-chip{ white-space:nowrap }
@media (max-width:560px){ .mm-hero__chips{ flex-wrap:wrap } }

/* ============================================================
   POR QUÉ — tarjetas dolor → solución
   ============================================================ */
.mm-pain{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px);
}
.mm-pain__card{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,2.4vw,30px);
  display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.mm-pain__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent }
.mm-pain__ic{
  width:52px; height:52px; flex:none; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--bg-soft-2); color:var(--ink-2);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .35s, color .35s;
}
.mm-pain__card:hover .mm-pain__ic{ transform:translateY(-2px) scale(1.05) rotate(-4deg); background:var(--grad-soft); color:var(--blue-d) }
.mm-pain__ic svg{ width:26px; height:26px }
.mm-pain__label{
  font-family:var(--ff-head); font-weight:600; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:20px 0 8px;
}
.mm-pain__problem{ font-family:var(--ff-head); font-weight:700; font-size:18.5px; color:var(--ink); letter-spacing:-.01em; line-height:1.28 }
.mm-pain__solve{
  display:flex; gap:11px; align-items:flex-start; margin-top:auto; padding-top:18px;
}
.mm-pain__solve-ic{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad); color:#fff; box-shadow:var(--shadow-brand);
}
.mm-pain__solve-ic svg{ width:15px; height:15px }
.mm-pain__solve p{ font-size:14px; color:var(--ink-2); line-height:1.55 }
.mm-pain__solve p b{ color:var(--ink); font-weight:600 }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .mm-pain{ grid-template-columns:repeat(2,1fr) }
  .mm-cases{ grid-template-columns:1fr; max-width:560px; margin-inline:auto }
}
@media (max-width:620px){
  .mm-pain{ grid-template-columns:1fr; max-width:440px; margin-inline:auto }

}