/* Distribuidora Khan — seccion de 3 pilares + CTA (reemplaza el hero de texto original). */

.pillars{background:var(--paper);padding:3.4rem 0}
.pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.6rem}
.pillar{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.6rem;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;
}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pillar-ico{
  width:64px;height:64px;margin:0 auto 1.1rem;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 38% 32%,#22406A 0%,#16304F 55%,#0E2038 100%);
  box-shadow:0 4px 12px rgba(12,26,48,.28),inset 0 1px 2px rgba(255,255,255,.12);
  position:relative;
}
.pillar-ico::after{
  content:"";position:absolute;inset:-1.5px;border-radius:50%;padding:1.5px;
  background:var(--grad-gold);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.pillar-ico svg{width:30px;height:30px}
.pillar h3{font-family:"Archivo";font-weight:700;font-size:1.1rem;color:var(--ink);margin-bottom:.5rem}
.pillar p{color:var(--muted);font-size:.9rem;line-height:1.5}

.pillars-cta{text-align:center;margin-top:2.4rem}
.pillars-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:"Archivo";font-weight:700;font-size:.98rem;
  color:var(--navy-900);background:var(--grad-gold);
  padding:.85rem 1.9rem;border-radius:999px;
  box-shadow:0 8px 20px rgba(198,152,47,.35);
  transition:transform .18s,box-shadow .18s;
}
.pillars-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(198,152,47,.45)}