/* =============================================================
   CASO — estilos de las páginas /casos/:slug
   Reutiliza las variables de color y tipografía de styles.css
   (ya está enlazado antes que este archivo en el <head>).
   ============================================================= */

.pagina-caso{ overflow-x:hidden; }
.cp-main{ padding:44px 0 80px; }

.cp-volver{
  display:inline-block;margin-bottom:26px;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);
}
.cp-volver:hover{ color:var(--halation); }

.cp-tag{ font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--halation);margin-bottom:12px; }
.cp-h1{ font-family:'Fraunces',serif;font-weight:600;font-size:clamp(30px,4.4vw,46px);line-height:1.08;max-width:18ch; }
.cp-cliente{ font-size:14.5px;color:var(--muted);margin-top:10px;margin-bottom:28px; }

.cp-video{
  border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(242,234,224,.12);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);margin-bottom:38px;
}
.cp-video video{ width:100%;display:block;aspect-ratio:16/9;object-fit:cover; }

.cp-grid{ display:grid;grid-template-columns:1.6fr 1fr;gap:32px;align-items:start; }
.cp-desc h2{ font-family:'Fraunces',serif;font-size:19px;margin-bottom:14px; }
.cp-desc p{ font-size:14.5px;color:var(--muted);line-height:1.65;max-width:64ch; }
.cp-chips{ display:flex;flex-wrap:wrap;gap:8px;margin-top:20px; }
.cp-chip{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);
  border:1px solid rgba(242,234,224,.14);border-radius:100px;padding:7px 13px;
}

.cp-side{ display:flex;flex-direction:column;gap:14px; }
.cp-metric{
  border-radius:12px;padding:22px 20px;text-align:center;
  background:linear-gradient(155deg,rgba(221,75,36,.13),rgba(242,234,224,.02));
  border:1px solid rgba(242,234,224,.1);
}
.cp-metric-label{ font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:8px; }
.cp-metric-valor{
  font-family:'Fraunces',serif;font-size:28px;color:var(--halation);
  text-shadow:0 0 26px rgba(221,75,36,.45);
}
.cp-side .btn{ text-align:center; }

.cp-otros{ margin-top:64px;padding-top:40px;border-top:1px solid var(--line); }
.cp-otros h2{ font-family:'Fraunces',serif;font-size:19px;margin-bottom:20px; }
.cp-rel-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.cp-rel{
  position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(242,234,224,.1);
  background:#000;aspect-ratio:4/3;display:block;transition:border-color .3s,transform .2s ease-out;
}
.cp-rel:hover{ border-color:rgba(221,75,36,.55);transform:translateY(-4px); }
.cp-rel img{ width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .3s; }
.cp-rel:hover img{ opacity:1; }
.cp-rel-info{
  position:absolute;left:0;right:0;bottom:0;padding:14px;
  background:linear-gradient(180deg,rgba(15,13,16,0),rgba(15,13,16,.92));
}
.cp-rel-tag{ font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--halation); }
.cp-rel-info h3{ font-family:'Fraunces',serif;font-size:16px;color:var(--text);margin-top:5px; }

.cp-foot{
  padding:30px 0;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);
}
.cp-foot .wrap{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; }
.cp-foot a:hover{ color:var(--halation); }

@media(max-width:900px){
  .cp-grid{ grid-template-columns:1fr; }
  .cp-rel-grid{ grid-template-columns:1fr; }
}