/* Guía de la demo: usa la base de estilos del portal (/styles.css) */

.guia { max-width: 920px; margin: 0 auto; padding: 24px 20px 80px; display: grid; gap: 22px; }

.guia-intro { padding: 36px 0 8px; }
.guia-intro h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 6px 0 10px; }
.guia-intro .bajada { color: var(--texto-suave); font-size: 1.08rem; max-width: 680px; }

.datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.datos div { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; }
.datos strong { display: block; font-size: 1.6rem; color: var(--celeste); }
.datos span { color: var(--texto-suave); font-size: .88rem; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px 26px; }
.tarjeta h2 { font-size: 1.35rem; margin-bottom: 8px; }
.tarjeta p { color: var(--texto-suave); margin: 8px 0; }
.tarjeta a:not(.boton) { color: var(--celeste); }
.nota { font-size: .9rem; opacity: .85; }

.roles { display: grid; gap: 8px; margin: 14px 0; }
.rol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--borde); }
.rol-nombre { min-width: 140px; font-weight: 600; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; background: rgba(92,200,255,.12);
  color: var(--celeste); padding: 2px 7px; border-radius: 6px; font-size: .9rem; }

.pasos { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 14px; }
.pasos li { display: flex; gap: 14px; align-items: flex-start; }
.paso-num { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(135deg, var(--celeste), var(--violeta)); color: #061024; }
.pasos h3 { margin: 4px 0 2px; font-size: 1.02rem; }
.pasos small { color: var(--texto-suave); font-weight: 400; margin-left: 6px; }
.pasos p { margin: 2px 0; }

.actas { display: grid; gap: 10px; margin-top: 14px; }
.acta { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px;
  border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--borde); }
.acta-mesa { color: var(--texto-suave); }
.acta-mesa strong { color: var(--texto); font-size: 1.25rem; }
.acta-lugar { display: grid; }
.acta-lugar span { color: var(--texto-suave); font-size: .88rem; }

@media (max-width: 640px) {
  .datos { grid-template-columns: 1fr; }
  .acta { grid-template-columns: 1fr; }
  .barra-links a:not(.boton) { display: none; }
}