/* /jdserver/2026/modules/wikimeteo/pages/sobre.css */

.wm-about-hero{
  padding: 18px;
}

.wm-about-lead{
  max-width: 78ch;
  margin-top: 8px;
  line-height: 1.55;
}

.wm-about-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}

.wm-about-kpis{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.wm-about-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.wm-about-box{
  border:1px solid rgba(148,163,184,0.20);
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 14px;
}

.wm-about-footer{
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(148,163,184,0.18);
}

/* Reutilizamos estética “participa” para steps/details */
.wm-steps{
  display:grid;
  gap:10px;
  margin-top: 10px;
}

.wm-step{
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,0.18);
  background: rgba(0,0,0,0.08);
}

.wm-step__n{
  width:26px;
  height:26px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border:1px solid rgba(148,163,184,0.25);
  background: rgba(255,255,255,0.06);
}

.wm-step__t{
  font-weight:700;
  margin-bottom: 2px;
}

.wm-details{
  margin-top:10px;
  border:1px solid rgba(148,163,184,0.20);
  background: rgba(0,0,0,0.06);
  border-radius:14px;
  overflow:hidden;
}

.wm-details__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  font-weight:700;
}

.wm-details__summary::-webkit-details-marker{ display:none; }

.wm-details__chev{
  width:10px;
  height:10px;
  border-right:2px solid rgba(148,163,184,0.8);
  border-bottom:2px solid rgba(148,163,184,0.8);
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

details[open] .wm-details__chev{
  transform: rotate(-135deg);
}

.wm-details__body{
  padding: 0 12px 12px;
}

.wm-example{
  border:1px solid rgba(148,163,184,0.18);
  background: rgba(255,255,255,0.03);
  border-radius:14px;
  padding:12px;
}

.wm-example__t{
  font-weight:700;
  margin-bottom: 8px;
}

.wm-example__pre{
  margin:0;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.18);
  background: rgba(0,0,0,0.18);
  overflow:auto;
  font-size: 12px;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Responsive */
@media (max-width: 900px){
  .wm-about-kpis{ grid-template-columns: 1fr; }
  .wm-about-grid{ grid-template-columns: 1fr; }
  .wm-about-actions .wm-btn{ width:100%; justify-content:center; }
}