/* ============================================================
   CAMPANAS.CSS — Datanavis
   ============================================================ */

/* PLATAFORMAS CARDS */
#plataformas { background: var(--bg); }
.plat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.plat-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 20px; padding: 2rem;
  transition: transform .3s, border-color .3s;
}
.plat-card:hover { transform: translateY(-6px); border-color: var(--border); }
.plat-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.plat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.pi-meta { background: linear-gradient(135deg,#1877f222,#1877f244); }
.pi-li   { background: linear-gradient(135deg,#0a66c222,#0a66c244); }
.pi-tt   { background: linear-gradient(135deg,#010101,#333); }
.pi-yt   { background: linear-gradient(135deg,#ff000022,#ff000044); }
.plat-name { font-size: 1rem; font-weight: 700; color: var(--white); }
.plat-sub  { font-size: .75rem; color: var(--muted); }
.plat-desc { font-size: .84rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.2rem; }
.plat-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.plat-tag {
  font-size: .7rem; padding: .25rem .6rem; border-radius: 50px;
  background: rgba(164,190,60,.08); border: 1px solid rgba(164,190,60,.15);
  color: var(--accent);
}

/* FUNNEL VISUAL */
#funnel { background: var(--bg2); }
.funnel-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.funnel-steps { display: flex; flex-direction: column; gap: 1rem; }
.funnel-step {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 14px; padding: 1.5rem;
  display: flex; gap: 1.2rem; align-items: flex-start;
  transition: border-color .3s;
}
.funnel-step:hover { border-color: var(--border); }
.fs-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  font-weight: 900; font-size: .85rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fs-content h4 { font-size: .95rem; font-weight: 700; color: var(--white); margin-bottom: .3rem; }
.fs-content p  { font-size: .82rem; color: var(--muted); line-height: 1.6; }

/* FUNNEL visual */
.funnel-visual { position: relative; }
.fv-stage {
  padding: 1rem 2rem; margin-bottom: .5rem; border-radius: 10px;
  text-align: center; font-size: .85rem; font-weight: 600; color: var(--white);
  transition: transform .3s;
}
.fv-stage:hover { transform: scaleX(1.02); }
.fv-1 { background: rgba(164,190,60,.25); border: 1px solid rgba(164,190,60,.4); clip-path: polygon(0 0,100% 0,95% 100%,5% 100%); }
.fv-2 { background: rgba(164,190,60,.18); border: 1px solid rgba(164,190,60,.3);  clip-path: polygon(5% 0,95% 0,90% 100%,10% 100%); margin: 0 auto; width: 90%; }
.fv-3 { background: rgba(164,190,60,.12); border: 1px solid rgba(164,190,60,.22); clip-path: polygon(10% 0,90% 0,85% 100%,15% 100%); margin: 0 auto; width: 80%; }
.fv-4 { background: rgba(164,190,60,.08); border: 1px solid rgba(164,190,60,.15); clip-path: polygon(15% 0,85% 0,80% 100%,20% 100%); margin: 0 auto; width: 70%; }
.fv-label { font-size: .7rem; color: var(--accent); text-align: center; margin-bottom: 1rem; margin-top: .2rem; opacity: .7; }

/* SERVICIOS campanas */
#servicios { background: var(--bg); }
#faq       { background: var(--bg2); }

@media (max-width: 900px) {
  .funnel-wrap { grid-template-columns: 1fr; }
}