:root{
  --panel: #0f1726;
  --line: #25314a;
  --text: #e6eefc;
  --muted: #a6b2cf;
  --brand-dark: #184a9c;
}

/* Titulares */
#contacto-page h1{ margin: 1.4rem 0 .8rem 0; }
.section h1 { margin-top: 1.8rem; }

/* Grids reutilizando look de tus cards */
.cards-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top: 1rem;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.5rem;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow:0 12px 20px rgba(0,0,0,.35);
}
.card h2{
  margin-top:0;
  font-size:1.25rem;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:.5rem;
}
/* Íconos automáticos */
.cards-3 .card:nth-child(1) h2::before{ content:"👥"; }
.cards-3 .card:nth-child(2) h2::before{ content:"🎯"; }
.cards-3 .card:nth-child(3) h2::before{ content:"⚙️"; }

/* Pasos numerados bonitos */
.steps{
  margin:.6rem 0 0 0;
  padding:0;
  list-style:none;
  counter-reset: step;
}
.steps li{
  counter-increment: step;
  margin-bottom:.9rem;
  padding-left:2.2rem;
  position:relative;
}
.steps li::before{
  content: counter(step);
  position:absolute;
  left:0; top:0;
  width:1.6rem; height:1.6rem;
  border-radius:50%;
  background:var(--brand-dark);
  color:#fff;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ====== Comunidad ====== */
.community-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:linear-gradient(180deg, #123a7c, #0f326a);
  border:1px solid rgba(160,190,255,.25);
  color:#fff;
  border-radius:16px;
  padding:1rem 1.4rem;
}
.community-banner .banner-row{ display:flex; gap:.35rem; align-items:baseline; }
.community-banner .muted{ opacity:.85; }
.banner-actions{ display:flex; gap:.6rem; }
.btn{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid #264b8e;
  background:#2959b1;
  color:#fff; text-decoration:none; font-weight:600;
}
.btn.ghost{ background:transparent; }
.btn.pill{ border-radius:999px; }

/* Tarjetas de Comunidad */
.community-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:1.2rem;
}
.community-grid .card p{ margin-bottom:.8rem; }

/* Equipo (si lo agregas después) */
.team-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.4rem; margin-top:.8rem;
}
.member-card{
  margin:0; padding:1rem .9rem .2rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
}
.member-avatar{
  height:160px; border-radius:12px;
  background:#202a44; border:1px dashed #39507c;
}
.member-caption{
  margin: .6rem 0 0;
  padding:.5rem .6rem 0.7rem;
  text-align:center;
  border-top:1px solid rgba(154, 170, 210, .25);
  color:var(--text);
}

/* Mapa */
.map-placeholder{
  margin-top:.6rem;
  height:160px;
  border-radius:12px;
  background:#1a243a;
  border:1px dashed #39507c;
  display:flex; align-items:center; justify-content:center;
  color:#cfe0ff;
}

/* Responsive */
@media (max-width:1000px){
  .cards-3, .community-grid, .team-grid{
    grid-template-columns:1fr;
  }
  .community-banner{ flex-direction:column; align-items:flex-start; }
}