/* Página "Trabajo seleccionado": cards de casos y acceso a Diseño visual. */

.case-grid{list-style:none; margin:0 0 var(--gap); padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap);}
.case-grid > li{display:flex; animation:ccIn .7s var(--ease-out) both; animation-delay:calc(var(--i,0) * 90ms + 80ms);}
.case-card{
  flex:1;
  display:flex;
  flex-direction:column;
  border-radius:var(--r-tile);
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  background:var(--tile);
  border:1px solid var(--tile-line);
  transition:transform .6s var(--spring), border-color .3s, box-shadow .4s;
}
a.case-card:hover,
a.case-card:focus-visible{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--ac) 65%, transparent);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
a.case-card:focus-visible{outline:2px solid var(--ac); outline-offset:3px;}
.cc-media{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#1c1426;}
.cc-media img{width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 1s var(--ease-out);}
a.case-card:hover .cc-media img{transform:scale(1.04);}
.cc-body{display:flex; flex-direction:column; gap:10px; padding:clamp(20px,2.2vw,32px); flex:1;}
.cc-top{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; font-size:.88rem;}
.cc-n{font-weight:700; color:var(--ac); font-variant-numeric:tabular-nums;}
.cc-cat{color:var(--muted);}
.cc-title{font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(1.5rem,2.3vw,2.2rem); font-weight:700; line-height:1.1; margin:2px 0 0;}
.cc-sum{color:var(--muted); font-size:1rem; max-width:52ch;}
.cc-meta{display:flex; flex-wrap:wrap; gap:4px 20px; font-size:.86rem; color:var(--muted);}
.cc-meta b{font-weight:500; color:var(--ink);}
.cc-go{margin-top:auto; padding-top:10px; font-weight:600; display:inline-flex; gap:8px; align-items:center;}
.cc-go i{font-style:normal; display:inline-block; transition:transform .6s var(--spring);}
a.case-card:hover .cc-go i{transform:translateX(6px);}
@keyframes ccIn{from{opacity:0; transform:translateY(22px);}}
.work-h{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(1.25rem,2vw,1.6rem);
  font-weight:700;
  margin:0 0 16px;
}
.work-h .n{font-size:.62em; font-weight:800; padding:.2em .6em; border-radius:100px; background:var(--ac); color:#140c1a;}
#workVisual .work-h{margin-top:48px;}
.visual-card{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,40px);
  align-items:center;
  padding:clamp(20px,2.6vw,36px);
  border-radius:var(--r-tile);
  border:1px solid var(--tile-line);
  background:var(--tile);
  text-decoration:none;
  color:var(--ink);
  margin-bottom:var(--gap);
  transition:transform .6s var(--spring), border-color .3s, box-shadow .4s;
}
.visual-card:hover,
.visual-card:focus-visible{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--ac) 65%, transparent);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95);
}
.vc-body{display:flex; flex-direction:column; gap:10px;}
.vc-k{font-size:.86rem; font-weight:600; color:var(--ac);}
.vc-t{font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(1.5rem,2.3vw,2.2rem); font-weight:700; line-height:1.1;}
.vc-d{color:var(--muted);}
.vc-mosaic{position:relative; display:grid; grid-template-columns:1fr .36fr; grid-template-rows:auto auto; gap:10px;}
.vc-mosaic img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);
  transition:transform .8s var(--ease-out);
}
.vc-mosaic .m1{grid-column:1; grid-row:1; aspect-ratio:3.2;}
.vc-mosaic .m2{grid-column:1; grid-row:2; aspect-ratio:3.2;}
.vc-mosaic .m3{grid-column:2; grid-row:1 / 3;}
.visual-card:hover .m1{transform:translateX(-4px);}
.visual-card:hover .m3{transform:translateY(-4px);}
@media (max-width:860px){
  .case-grid{grid-template-columns:1fr;}
  .visual-card{grid-template-columns:1fr;}
}