/* ============================================================
   /gestion-electoral/ — gestion-electoral.css
   Escaparate de capturas reales del sistema (no maqueta). Usa el
   sistema compartido (tokens.css/base.css) para header/footer/
   tipografía — este archivo solo cubre el layout de las 7 fichas
   de función con captura + descripción.
============================================================ */

.ge-showcase{ display:flex; flex-direction:column; gap:64px; }

.ge-feature{ display:grid; gap:24px; align-items:center; }
.ge-feature-text{ order:1; }
.ge-feature-img{ order:2; }
@media (min-width:860px){
  .ge-feature{ grid-template-columns:1fr 1fr; gap:44px; }
  .ge-feature.ge-rev .ge-feature-text{ order:2; }
  .ge-feature.ge-rev .ge-feature-img{ order:1; }
}

.ge-feature-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--purple-soft); color:var(--purple-deep);
  font-weight:700; font-size:.85rem; margin-bottom:14px;
}
.ge-feature-title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.2rem,2.6vw,1.5rem); color:var(--purple-deep); margin-bottom:10px; }
.ge-feature-body{ font-size:.98rem; line-height:1.7; color:var(--text-2); }

.ge-feature-img{
  border-radius:var(--r); overflow:hidden; border:1px solid var(--border);
  box-shadow:var(--shadow-md); background:#0F0B16;
}
.ge-feature-img img{ width:100%; display:block; }

.ge-note{
  margin-top:20px; font-size:.85rem; color:var(--text-3); font-style:italic;
}

/* ── Acceso por rol (4 tarjetas, mismo patrón visual que el login real) ── */
.ge-roles{ display:grid; gap:14px; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .ge-roles{ grid-template-columns:repeat(4,1fr); } }
.ge-role{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:20px 16px; text-align:center;
}
.ge-role-title{ font-weight:700; color:var(--purple-deep); margin-bottom:4px; }
.ge-role-desc{ font-size:.82rem; color:var(--text-3); }