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

/* tono cálido (campo/cítrico) para el hero */
.ma-hero{
  background:
    radial-gradient(110% 120% at 92% -10%, rgba(140,198,63,.18), transparent 55%),
    radial-gradient(95% 110% at -8% 115%, rgba(28,157,215,.12), transparent 55%),
    linear-gradient(135deg, #f3f9ea 0%, #eef7ee 52%, #ecf6f3 100%);
}

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

/* ============================================================
   POR QUÉ — tarjetas dolor → solución
   ============================================================ */
.ma-pain{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,22px);
}
.ma-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;
}
.ma-pain__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent }
.ma-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;
}
.ma-pain__card:hover .ma-pain__ic{ transform:translateY(-2px) scale(1.05) rotate(-4deg); background:var(--grad-soft); color:var(--green-d) }
.ma-pain__ic svg{ width:26px; height:26px }
.ma-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;
}
.ma-pain__problem{ font-family:var(--ff-head); font-weight:700; font-size:18.5px; color:var(--ink); letter-spacing:-.01em; line-height:1.28 }
.ma-pain__solve{
  display:flex; gap:11px; align-items:flex-start; margin-top:auto; padding-top:18px;
}
.ma-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);
}
.ma-pain__solve-ic svg{ width:15px; height:15px }
.ma-pain__solve p{ font-size:14px; color:var(--ink-2); line-height:1.55 }
.ma-pain__solve p b{ color:var(--ink); font-weight:600 }

/* ============================================================
   CASOS DE ÉXITO — prueba social
   ============================================================ */
.ma-cases{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,30px);
}
.ma-case{
  display:grid; grid-template-rows:auto 1fr; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.ma-case:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.ma-case__media{
  position:relative;
  background:var(--bg-soft);
  display:block; padding:0;
}

.ma-case__shot{
  position:static; width:100%; height:auto;
  object-fit:cover; object-position:top center; display:block;
}
.ma-case__tag{
  position:absolute; bottom:14px; right:14px; z-index:1; background:rgba(255,255,255,.94); color:var(--ink);
  font-family:var(--ff-head); font-weight:600; font-size:12px; padding:6px 12px; border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm);
}
.ma-case__body{ padding:clamp(24px,2.6vw,32px); display:flex; flex-direction:column }
.ma-case__metric{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:14px }
.ma-case__metric b{
  font-family:var(--ff-head); font-weight:700; font-size:clamp(38px,4.4vw,52px); line-height:.9; letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.ma-case__metric span{ font-family:var(--ff-head); font-weight:600; font-size:14.5px; color:var(--ink-3); line-height:1.3 }
.ma-case__quote{ position:relative; font-size:16px; color:var(--ink-2); line-height:1.65; flex:1 }
.ma-case__quote::before{
  content:"“"; position:absolute; top:-18px; left:-6px; font-family:var(--ff-head); font-weight:700;
  font-size:72px; line-height:1; color:var(--green); opacity:.16; pointer-events:none;
}
.ma-case__who{ display:flex; align-items:center; gap:13px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line) }
.ma-case__av{
  width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--grad-soft); color:var(--green-d); font-family:var(--ff-head); font-weight:700; font-size:17px;
}
.ma-case__av--logo{
  background:#fff; border:1px solid var(--line); object-fit:contain; padding:3px;
}
.ma-case__who b{ font-family:var(--ff-head); font-size:15.5px; color:var(--ink); display:block; line-height:1.2 }
.ma-case__who small{ color:var(--ink-3); font-size:13px }
.ma-case__who small a{ color:var(--blue-d); font-weight:600 }
.ma-case__who small a:hover{ color:var(--green-d) }
.ma-case__stars{ color:#FFB020; letter-spacing:2px; font-size:14px; margin-bottom:12px }

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