/* Seguridad Física — Capacidades: the circular selector (security-refresh.css, unchanged) on the left and, instead of the
   repeated list, an information panel on the right (docs/render-seguridad-capacidades.cjs). Moderate dark glass, cyan /
   blue accents, generous spacing. The six cards share one grid cell: the panel keeps the tallest card's height, so the
   section never jumps; switching fades the old card out, then the new one in with a 6px rise (no overlap). */
.security-capacities .security-explorer{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,3.6vw,56px)}

.capacity-panel{position:relative;display:grid;padding:clamp(24px,2.4vw,32px);border:1px solid rgba(255,255,255,.1);border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 50%),rgba(6,14,32,.6);
  -webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,1,14,.4)}

.capacity-card{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);grid-template-areas:"copy media" "label label" "apps apps";column-gap:clamp(20px,2.4vw,32px);align-items:start;
  visibility:hidden;opacity:0;translate:0 6px;transition:opacity .14s ease,translate 0s linear .14s,visibility 0s linear .14s}
.capacity-card.is-active{visibility:visible;opacity:1;translate:0 0;transition:opacity .26s ease .14s,translate .32s cubic-bezier(.22,.61,.36,1) .14s,visibility 0s linear .14s}

.capacity-card-copy{grid-area:copy;padding-top:4px}
.capacity-card-index{margin:0;color:#6f84a3;font-size:.85rem;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.capacity-card-index span{color:#00b0d1}
.capacity-card h3{margin:14px 0 0;font-size:clamp(1.55rem,2.1vw,2rem);font-weight:400;line-height:1.2;letter-spacing:-.035em;color:#f5f5fc}
.capacity-card-text{margin:16px 0 0;color:#b3bfd2;font-size:.9rem;line-height:1.8}
.capacity-card-media{grid-area:media;margin:0;overflow:hidden;aspect-ratio:4/3;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#061021}
.capacity-card-media img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}

.capacity-card-label{grid-area:label;margin:clamp(22px,2.4vw,28px) 0 0;padding-top:clamp(20px,2.2vw,24px);border-top:1px solid rgba(255,255,255,.08);color:#00b0d1;font-size:.64rem;font-weight:500;letter-spacing:.16em;line-height:1.5}
.capacity-card-apps{grid-area:apps;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 0;padding:0;list-style:none}
.capacity-card-apps li{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025);color:#dbe3f0;font-size:.8rem;line-height:1.45}
.capacity-app-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;color:#00b0d1;background:rgba(0,149,229,.1);box-shadow:inset 0 0 0 1px rgba(0,176,209,.26)}
.capacity-app-icon svg{width:17px;height:17px}

@media (prefers-reduced-motion:reduce){
  .capacity-card,.capacity-card.is-active{translate:none;transition:none}
}

/* Narrow desktop: a slimmer image and the applications with the icon above the text, so the panel stays about as tall
   as the circle. */
@media (max-width:1180px) and (min-width:1001px){
  .capacity-card{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
  .capacity-card-text{font-size:.85rem;line-height:1.7}
  .capacity-card-apps li{flex-direction:column;align-items:flex-start;gap:10px;padding:12px}
}
/* Tablet and mobile: circle above, panel below at full width. */
@media (max-width:1000px){
  .security-capacities .security-explorer{display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .capacity-panel{width:100%;max-width:760px;margin-inline:auto}
}
@media (max-width:640px){
  .capacity-panel{padding:20px 18px;border-radius:18px}
  .capacity-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "copy" "label" "apps"}
  .capacity-card-media{aspect-ratio:16/9;margin-bottom:20px}
  .capacity-card h3{margin-top:10px;font-size:1.5rem}
  .capacity-card-text{font-size:.88rem}
  .capacity-card-apps{grid-template-columns:minmax(0,1fr);gap:8px}
  .capacity-card-apps li{padding:10px 12px}
}