/* Portfolio + case drawer (portafolio.html) — page-specific styles.
   Tokens, resets and site chrome live in tokens.css / base.css / layout.css. */

.wrap{max-width:1160px;margin:0 auto;padding:56px 24px 96px}
h1.big{font-size:clamp(2.2rem,5.5vw,3.6rem);margin:14px 0 16px}
h1.big .em{color:var(--electric)}
.lede{color:var(--n-600);font-size:1.05rem;max-width:60ch}

/* filters */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:34px 0 30px;padding-bottom:22px;border-bottom:var(--bd-hair)}
.filt{font-size:.83rem;font-weight:600;padding:9px 16px;border:var(--bd-hair);border-radius:var(--r-pill);
  background:var(--white);transition:.13s var(--ease);color:var(--n-600)}
.filt:hover{color:var(--ink);box-shadow:var(--sh-1);transform:translate(-1px,-1px)}
.filt.on{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:var(--sh-1)}

/* grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.proj{background:var(--white);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  overflow:hidden;cursor:pointer;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.proj:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-hover)}
.proj-cover{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:var(--bd)}
.proj-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.proj:hover .proj-cover img{transform:scale(1.04)}
.proj-num{position:absolute;top:12px;left:12px;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border:1.5px solid var(--ink);border-radius:var(--r-pill)}
.proj-body{padding:22px}
.badge{display:inline-block;font-size:.7rem;font-weight:600;padding:4px 11px;border-radius:var(--r-pill);
  border:1.5px solid var(--electric-700);background:var(--electric-100);color:var(--electric-700)}
.proj-body h2{font-size:1.55rem;margin:11px 0 4px}
.tag{font-size:.9rem;color:var(--n-500);font-style:italic;margin-bottom:10px}
.sum{font-size:.9rem;color:var(--n-600);margin-bottom:18px}
.proj-foot{display:flex;align-items:center;justify-content:space-between;
  padding-top:15px;border-top:1.5px solid var(--n-200)}
.dots{display:flex;gap:6px}
.dot{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--ink)}
.see{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--electric)}
.proj:hover .see .ic{transform:translateX(3px);transition:.16s var(--ease)}

/* empty state */
.empty{grid-column:1/-1;border:2px dashed var(--n-300);border-radius:var(--r-lg);background:var(--white);
  padding:52px 26px;text-align:center}
.empty .spark{width:26px;height:26px;color:var(--n-300);margin-bottom:12px}
.empty h4{font-size:1.1rem;margin-bottom:8px}
.empty p{font-size:.88rem;color:var(--n-500);max-width:44ch;margin:0 auto}

/* ---------------- drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(17,24,39,.55);backdrop-filter:blur(2px);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100%);background:var(--paper);
  border-left:var(--bd);z-index:70;transform:translateX(102%);transition:transform .38s var(--ease);
  display:flex;flex-direction:column}
.drawer.on{transform:translateX(0)}
.drawer-bar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:var(--bd);
  background:var(--white);flex:none}
.drawer-bar .dt{font-family:var(--font-display);font-weight:800;font-size:1.05rem}
.close{margin-left:auto;width:42px;height:42px;border:var(--bd);border-radius:var(--r-md);background:var(--white);
  box-shadow:var(--sh-1);display:grid;place-items:center;transition:.13s var(--ease)}
.close:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);background:var(--electric-50)}
.close .ic{width:19px;height:19px}
.drawer-scroll{overflow-y:auto;flex:1;overscroll-behavior:contain}

.case-hero{padding:52px 30px;display:grid;place-items:center;border-bottom:var(--bd)}
.plogo{max-height:96px;width:auto;max-width:78%}
.case-body{padding:30px}
.case-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.mchip{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;
  border-radius:var(--r-pill);border:1.5px solid var(--ink)}
.mchip.out{background:var(--white);color:var(--n-600)}
.case-title{font-size:2.3rem}
.case-tag{font-style:italic;color:var(--n-500);margin-top:5px}

.blk{margin-top:38px}
.blk h3{font-size:1.15rem;display:flex;align-items:center;gap:11px;margin-bottom:14px}
.blk h3 .rule{width:22px;height:5px;background:var(--accent);border:1.5px solid var(--ink);
  border-radius:2px;flex:none}
.blk p{color:var(--n-600);font-size:.93rem}
.blk .note{margin-top:14px;font-size:.86rem;border-left:3px solid var(--accent);padding-left:13px}
h4.mini{font-family:var(--font-display);font-size:.95rem;margin:18px 0 7px}

.concept-img{border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:26px;
  display:grid;place-items:center;margin-bottom:16px}
.concept-img img{max-height:150px;width:auto}

.fonts{display:grid;gap:14px}
.fcard{background:var(--white);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px}
.frole{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.fname{font-family:var(--font-display);font-weight:800;font-size:1.5rem;margin:5px 0 9px}
.fcard p{font-size:.86rem}
.wts{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.wt{font-size:.7rem;font-weight:600;color:var(--n-600);background:var(--n-100);
  border:1.5px solid var(--n-200);padding:3px 9px;border-radius:var(--r-pill)}

.sws{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sw{background:var(--white);border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.sw-chip{height:78px;border-bottom:var(--bd)}
.sw-n{font-family:var(--font-display);font-weight:700;font-size:.88rem;padding:11px 12px 3px}
.sw-v{font-size:.68rem;color:var(--n-500);padding:0 12px 13px;line-height:1.55;font-variant-numeric:tabular-nums}
.sw-v b{color:var(--ink)}

.shots{display:grid;gap:16px}
.shot{border:var(--bd);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;background:var(--white)}
.shot img{width:100%;height:auto;cursor:zoom-in;transition:transform .4s var(--ease)}
.shot:hover img{transform:scale(1.02)}
.shot figcaption{font-size:.78rem;color:var(--n-500);padding:11px 14px;border-top:1.5px solid var(--n-200)}
.shot.ph{box-shadow:none;border:2px dashed var(--n-300)}
.ph-box{padding:44px 20px;display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--n-400)}
.ph-box .spark{width:22px;height:22px}
.ph-box span{font-size:.82rem}

.cta{margin-top:44px;padding:26px;border:var(--bd);border-radius:var(--r-lg);background:var(--ink);
  color:var(--paper);text-align:center;box-shadow:var(--sh-2)}
.cta h4{color:var(--white);font-size:1.15rem;margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.92rem;
  padding:12px 22px;border:var(--bd);border-radius:var(--r-md);background:var(--white);color:var(--ink);
  box-shadow:var(--sh-2);transition:transform .12s var(--ease),box-shadow .12s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-hover)}
.btn-primary{background:var(--electric);color:var(--white)}

/* lightbox */
.lbox{position:fixed;inset:0;background:rgba(11,15,26,.93);z-index:90;display:none;
  align-items:center;justify-content:center;padding:26px}
.lbox.on{display:flex}
.lbox img{max-width:96%;max-height:90vh;border:var(--bd);border-radius:var(--r-md);width:auto}
.lbox .close{position:absolute;top:20px;right:20px}

.foot{border-top:var(--bd-hair);margin-top:60px;padding-top:24px;text-align:center;
  font-size:.78rem;color:var(--n-500)}

@media(max-width:860px){
  .grid{grid-template-columns:1fr}
  .sws{grid-template-columns:1fr}
  .case-body,.drawer-bar{padding-left:20px;padding-right:20px}
  .case-title{font-size:1.8rem}
}