/* casos-grid.css — Grid de Casos de Éxito con filtros por rubro + lightbox multi-foto */

.cx-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.cx-filter{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--fg-dim);padding:9px 16px;border-radius:999px;cursor:pointer;font-family:inherit;
  font-size:13px;transition:border-color .2s, color .2s, background .2s}
.cx-filter:hover{color:var(--fg);border-color:color-mix(in oklch, var(--cyan), transparent 55%)}
.cx-filter.on{color:var(--cyan);border-color:var(--cyan);background:color-mix(in oklch, var(--cyan), transparent 90%)}

.cx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:40px}
@media (max-width:980px){.cx-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cx-grid{grid-template-columns:1fr}}
.cx-card{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:#0a0a10;padding:0;text-align:left;display:block;width:100%;
  font-family:inherit;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .25s}
.cx-card:hover{transform:translateY(-5px);border-color:color-mix(in oklch, var(--cyan), transparent 45%);
  box-shadow:0 22px 55px color-mix(in oklch, var(--cyan), transparent 82%)}
.cx-card-img{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.cx-card:hover .cx-card-img{transform:scale(1.07)}
.cx-card-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(5,5,7,.1) 0%, rgba(5,5,7,.35) 45%, rgba(5,5,7,.92) 100%)}
.cx-card-body{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2}
.cx-card-rubro{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.cx-card-marca{font-size:24px;letter-spacing:-.02em;font-weight:600;color:#fff;line-height:1.05}
.cx-card-count{display:flex;align-items:center;gap:6px;margin-top:8px;
  font-family:"JetBrains Mono",monospace;font-size:11px;color:rgba(255,255,255,.6)}
.cx-card-cta{position:absolute;top:14px;right:14px;z-index:2;font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#000;background:var(--cyan);
  padding:6px 12px;border-radius:999px;opacity:0;transform:translateY(-4px);
  transition:opacity .25s, transform .25s}
.cx-card:hover .cx-card-cta{opacity:1;transform:translateY(0)}

/* Lightbox */
.cx-lb{position:fixed;inset:0;z-index:200;background:rgba(3,3,6,.9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:grid;place-items:center;padding:24px;animation:cx-fade .25s ease}
.cx-lb[hidden]{display:none}
@keyframes cx-fade{from{opacity:0}to{opacity:1}}
.cx-lb-inner{position:relative;width:min(1100px,96vw);max-height:92vh;
  display:grid;grid-template-columns:1.5fr 1fr;gap:0;background:#0a0a10;
  border:1px solid var(--line);border-radius:20px;overflow:hidden;
  animation:cx-pop .3s cubic-bezier(.16,1,.3,1)}
@keyframes cx-pop{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}}
@media (max-width:860px){.cx-lb-inner{grid-template-columns:1fr;max-height:94vh;overflow-y:auto}}
.cx-lb-close{position:absolute;top:14px;right:14px;z-index:10;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(5,5,7,.6);color:#fff;cursor:pointer;
  font-size:15px;backdrop-filter:blur(8px);transition:background .2s}
.cx-lb-close:hover{background:var(--cyan);color:#000;border-color:var(--cyan)}
.cx-lb-stage{position:relative;min-height:420px;background:#000}
@media (max-width:860px){.cx-lb-stage{min-height:300px;aspect-ratio:4/3}}
.cx-lb-img{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;
  background-position:center;background-color:#000}
.cx-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(5,5,7,.55);color:#fff;
  cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);transition:background .2s}
.cx-lb-arrow:hover{background:var(--cyan);color:#000;border-color:var(--cyan)}
.cx-lb-arrow.left{left:14px}.cx-lb-arrow.right{right:14px}
.cx-lb-counter{position:absolute;bottom:14px;left:14px;z-index:4;font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.08em;color:#fff;padding:6px 12px;border-radius:999px;
  background:rgba(5,5,7,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12)}
.cx-lb-info{padding:32px 28px;display:flex;flex-direction:column;overflow-y:auto}
.cx-lb-rubro{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan)}
.cx-lb-info h3{font-size:34px;letter-spacing:-.025em;font-weight:600;margin:10px 0 4px;color:var(--fg)}
.cx-lb-prod{font-size:14px;color:var(--fg-dim);font-weight:500}
.cx-lb-info p{font-size:15px;line-height:1.6;color:var(--fg-dim);margin:18px 0 0;white-space:pre-line}
.cx-lb-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:22px}
.cx-lb-thumb{width:62px;height:46px;border-radius:8px;border:1px solid var(--line);cursor:pointer;
  background-size:cover;background-position:center;opacity:.55;transition:opacity .2s, border-color .2s, transform .2s;
  padding:0}
.cx-lb-thumb:hover{opacity:.85;transform:translateY(-2px)}
.cx-lb-thumb.on{opacity:1;border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}