/* ==========================================================================
   Página de SEM y Paid Media — solo la maqueta del hero.
   Reutiliza los marcos .web-browser y .web-phone de web-service.css: dentro
   del navegador, un panel de campañas; dentro del móvil, un anuncio.
   ========================================================================== */

.ads-panel{padding:16px 18px 14px;display:flex;flex-direction:column;gap:13px}

/* ---------- Indicadores ---------- */
.ads-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ads-kpi{
  border:1px solid rgba(27,24,21,.14);border-radius:5px;
  padding:7px 8px;background:#fff;
}
.ads-kpi__l{display:block;font-size:6.5px;letter-spacing:.06em;text-transform:uppercase;color:#8c8279}
.ads-kpi__v{display:block;font-size:14px;font-weight:500;letter-spacing:-.04em;margin-top:3px;color:#1b1815}
.ads-kpi--win{border-color:rgba(227,101,57,.5);background:rgba(227,101,57,.09)}
.ads-kpi--win .ads-kpi__v{color:#c9502d}

/* ---------- Gráfico ---------- */
.ads-chart{
  display:flex;align-items:flex-end;gap:6px;height:62px;
  border-bottom:1px solid rgba(27,24,21,.13);padding-bottom:1px;
}
.ads-chart i{
  flex:1;border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#e36539,rgba(227,101,57,.35));
}
.ads-chart i:nth-child(-n+3){background:linear-gradient(180deg,rgba(27,24,21,.22),rgba(27,24,21,.08))}

/* ---------- Filas por canal ---------- */
.ads-rows{display:flex;flex-direction:column;gap:6px}
.ads-row{display:flex;align-items:center;gap:8px;font-size:7.5px;color:#6f675f}
.ads-row>span:nth-child(2){flex:1}
.ads-row__ch{
  flex:0 0 auto;width:13px;height:13px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:7px;font-weight:600;color:#fff;
}
.ads-row__ch--g{background:#1b1815}
.ads-row__ch--m{background:#e36539}
.ads-row__n{font-weight:600;color:#1b1815;font-size:9px}

/* ---------- Móvil: el anuncio ---------- */
.ads-ad__badge{
  display:inline-block;font-size:6.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:#6f675f;
  border:1px solid rgba(27,24,21,.2);border-radius:3px;padding:2px 5px;
}
.ads-ad{
  margin-top:12px;border:1px solid rgba(27,24,21,.15);border-radius:6px;
  padding:9px;background:#fff;display:flex;flex-direction:column;gap:5px;
}
.ads-ad__title{font-size:11px;font-weight:500;letter-spacing:-.03em;color:#2f4bb4}
.ads-ad__url{font-size:6.5px;color:#8c8279}
.ads-ad__line{display:block;height:4px;border-radius:2px;background:rgba(27,24,21,.12)}
.ads-ad__line--short{width:62%}
.ads-ad__cta{
  align-self:flex-start;margin-top:3px;font-size:7px;color:#fff;
  background:var(--ink);border-radius:3px;padding:4px 7px;
}

@media (max-width:560px){
  .ads-panel{padding:13px 14px 11px;gap:10px}
  .ads-kpis{gap:6px}
  .ads-kpi__v{font-size:12px}
  .ads-chart{height:50px}
}