/* ── portfolio — Orb Digital Branding (site-v3) ── */


/* ── Reset ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── Tokens Orb ── */
:root{
  --bg:      #000820;
  --text:    #f0ede8;
  --muted:   #3a4870;
  --line:    rgba(255,255,255,0.06);
  --blue:    #003FFF;
  --blue2:   #2255FF;
  --ease:    cubic-bezier(.77,0,.175,1);
  --serif:   'Ubuntu', Helvetica, Arial, sans-serif;
  --sans:    'IBM Plex Sans', Helvetica, Arial, sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden;cursor:none;padding-top:72px}
@media(hover:none){body{cursor:auto}}

/* ── Cursor ── */
#cur{
  position:fixed;width:10px;height:10px;border-radius:50%;
  background:var(--text);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .22s var(--ease),height .22s var(--ease);
  mix-blend-mode:difference;
}
#cur.big{width:44px;height:44px}
@media(hover:none){#cur{display:none}}

/* ── Logo ── */
.logo{
  position:fixed;top:20px;left:28px;z-index:600;
  text-decoration:none;display:flex;align-items:center;
}
.logo img{height:28px;width:auto;opacity:0.9}
.logo:hover img{opacity:1}

/* ── Badge filtro ativo ── */
.active-badge{
  position:fixed;top:22px;right:28px;z-index:600;
  font-size:8px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue2);opacity:0;transition:opacity .3s;pointer-events:none;
  font-family:var(--sans);
}
.active-badge.show{opacity:1}

/* ══════════════════════════════════════════
   GRID  — 4 colunas com espaço lateral
   O strip central fica entre col2 e col3
══════════════════════════════════════════ */
.grid-outer{
  display:flex;
  gap:2px;
  position:relative;
  /* padding lateral deixa as colunas afastadas do centro */
  /* cada par de colunas tem 28px de margin interna no centro */
}
.col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
/* As duas colunas internas têm margem do lado do strip central */
.col:nth-child(2){padding-right:30px}
.col:nth-child(3){padding-left:30px}

/* ── Card ── */
.card{
  position:relative;overflow:hidden;cursor:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease;
}
.card.visible{opacity:1;transform:translateY(0)}
.card.dimmed{opacity:.18;transition:opacity .4s ease}

/* Imagem placeholder — substituir por <img style="width:100%;height:100%;object-fit:cover"> */
.card-bg{
  width:100%;aspect-ratio:3/4;display:block;
  position:relative;overflow:hidden;
  transition:transform .7s var(--ease);
}
.card:hover .card-bg{transform:scale(1.04)}
.card-bg img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* gradientes placeholder */
.g1 {background:linear-gradient(145deg,#6a1515 0%,#1e0608 100%)}
.g2 {background:linear-gradient(145deg,#8a7048 0%,#3a2010 100%)}
.g3 {background:linear-gradient(145deg,#0c1d5e 0%,#030818 100%)}
.g4 {background:linear-gradient(145deg,#1e4830 0%,#061410 100%)}
.g5 {background:linear-gradient(145deg,#4a1860 0%,#180828 100%)}
.g6 {background:linear-gradient(145deg,#482818 0%,#200c04 100%)}
.g7 {background:linear-gradient(145deg,#223858 0%,#080f1c 100%)}
.g8 {background:linear-gradient(145deg,#0a2040 0%,#040810 100%)}
.g9 {background:linear-gradient(145deg,#3c1c08 0%,#140802 100%)}
.g10{background:linear-gradient(145deg,#0c1832 0%,#04080e 100%)}
.g11{background:linear-gradient(145deg,#280838 0%,#0e0318 100%)}
.g12{background:linear-gradient(145deg,#183020 0%,#060e08 100%)}

/* Cards sem URL — não clicáveis */
.card.no-case{cursor:default}
.card.no-case .card-bg{transition:none}
.card.no-case:hover .card-bg{transform:none}

/* Badge "Em breve" */
.em-breve{
  position:absolute;bottom:12px;right:12px;
  font-size:7px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(240,237,232,.3);font-family:var(--sans);
}

/* micro grid pattern nos placeholders */
.card-bg::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:36px 36px;
}

/* Tag pill */
.tag{
  position:absolute;top:12px;right:12px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:100px;
  font-size:8px;font-weight:500;letter-spacing:.08em;
  color:var(--text);padding:4px 11px;pointer-events:none;
}

/* Rótulo inferior */
.card-label{
  position:absolute;bottom:0;left:0;right:0;
  padding:48px 14px 14px;
  background:linear-gradient(to top,rgba(0,4,20,.75) 0%,transparent 100%);
  pointer-events:none;
}
.card-label-name{
  font-family:var(--serif);font-size:14px;font-weight:400;
  color:var(--text);line-height:1.2;
}
.card-label-sub{
  font-size:8px;color:rgba(240,237,232,.65);
  margin-top:3px;letter-spacing:.06em;
}

/* ══════════════════════════════════════════
   STRIP CENTRAL  — Filter Work (vertical)
   position:fixed no centro exato do ecrã
══════════════════════════════════════════ */
.center-strip{
  position:fixed;left:50%;top:0;
  transform:translateX(-50%);
  width:52px;height:100vh;
  z-index:400;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  pointer-events:none;
}
.filter-label-v{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  transform:rotate(180deg);
  font-size:7px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  font-family:var(--sans);
  color:rgba(240,237,232,.3);
  cursor:none;pointer-events:all;
  transition:color .25s,opacity .3s;
  user-select:none;
}
.filter-label-v:hover{color:rgba(240,237,232,.8)}
.filter-label-v.gone{opacity:0;pointer-events:none}

.close-hint-v{
  writing-mode:vertical-rl;text-orientation:mixed;
  transform:rotate(180deg);
  font-size:7px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  font-family:var(--sans);
  color:rgba(240,237,232,.3);
  margin-top:14px;
  opacity:0;transition:opacity .3s;
  cursor:none;pointer-events:all;
  user-select:none;
}
.close-hint-v.show{opacity:.5}

/* ══════════════════════════════════════════
   PAINEL DE FILTRO
   Cobre o centro (col2+col3) — mesmo bg da página
   → aparece "entre" os cases, não sobre eles
══════════════════════════════════════════ */
.filter-panel{
  position:fixed;
  left:25%;right:25%;
  top:0;bottom:0;
  z-index:350;
  background:var(--bg); /* mesmo fundo da página */
  display:flex;flex-direction:column;
  justify-content:center;padding:0 40px;
  pointer-events:none;
  clip-path:inset(0 100% 0 0); /* fecha pelo lado */
  transition:clip-path .55s var(--ease);
}
.filter-panel.open{
  pointer-events:all;
  clip-path:inset(0 0% 0 0);
}

.filter-section{margin-bottom:36px}
.filter-section:last-child{margin-bottom:0}

.fsec-title{
  font-size:7px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;font-family:var(--sans);
}

.fitem{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border:none;background:none;
  width:100%;cursor:none;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.fitem:last-child{border-bottom:none}

.fname{
  font-family:var(--serif);font-size:clamp(22px,2.8vw,30px);
  font-weight:300;font-style:italic;
  color:rgba(240,237,232,.25);letter-spacing:-.01em;
  transition:color .2s,font-style .2s;
}
.fcount{
  font-size:12px;color:var(--muted);
  transition:color .2s;font-family:var(--sans);
}
.fitem:hover .fname{color:var(--text);font-style:normal}
.fitem.active .fname{color:var(--blue2);font-style:normal;font-weight:400}
.fitem.active .fcount{color:var(--blue2)}

/* ── Entrada escalonada ── */
.fitem{
  transform:translateX(-12px);opacity:0;
  transition:transform .45s var(--ease),opacity .4s ease,color .2s,font-style .2s;
}
.filter-panel.open .fitem{transform:translateX(0);opacity:1}
.filter-panel.open .fitem:nth-child(1){transition-delay:.1s}
.filter-panel.open .fitem:nth-child(2){transition-delay:.15s}
.filter-panel.open .fitem:nth-child(3){transition-delay:.20s}
.filter-panel.open .fitem:nth-child(4){transition-delay:.25s}
.filter-panel.open .fitem:nth-child(5){transition-delay:.30s}
.filter-panel.open .fitem:nth-child(6){transition-delay:.35s}
.filter-panel.open .fitem:nth-child(7){transition-delay:.40s}

/* ══════════════════════════════════════════
   (case overlay removido — páginas separadas)
══════════════════════════════════════════ */
.case-overlay{
  position:fixed;z-index:900;background:var(--bg);
  top:0;left:0;width:0;height:0;
  opacity:0;pointer-events:none;
  overflow:hidden;
}
.case-overlay.open{
  width:100vw;height:100vh;
  opacity:1;pointer-events:all;
  overflow-y:auto;
}

.case-nav{
  position:sticky;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;background:rgba(0,8,32,.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.case-nav-logo img{height:24px;opacity:.85}
.case-back-btn{
  font-size:8px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(240,237,232,.65);
  background:none;border:none;cursor:none;
  display:flex;align-items:center;gap:8px;
  transition:color .2s;font-family:var(--sans);
}
.case-back-btn:hover{color:var(--text)}
.case-back-btn::before{content:'←';font-size:12px}

/* Case: Hero */
.case-hero{
  background:linear-gradient(115deg,#000D99 0%,#0020CC 28%,#003FFF 60%,#001FDD 100%);
  padding:100px 40px 80px;
  text-align:center;
  position:relative;overflow:hidden;
}
.case-hero-pattern{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse at 15% 60%,rgba(0,10,140,.5) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 20%,rgba(0,80,255,.2) 0%,transparent 50%);
}
.case-hero-content{position:relative;z-index:1;max-width:760px;margin:0 auto}
.case-eyebrow{
  font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.65);margin-bottom:18px;
  font-family:var(--sans);
}
.case-hero-title{
  font-family:var(--serif);
  font-size:clamp(28px,4.5vw,52px);
  font-weight:300;line-height:1.15;color:#fff;
  letter-spacing:-.02em;margin-bottom:20px;
}
.case-hero-title em{font-style:italic;color:rgba(255,255,255,.65)}
.case-hero-sub{
  font-size:14px;font-weight:300;color:rgba(255,255,255,.6);
  line-height:1.8;max-width:580px;margin:0 auto 40px;
}
.case-meta-row{
  display:flex;gap:40px;flex-wrap:wrap;justify-content:center;
  padding-top:32px;border-top:1px solid rgba(255,255,255,.1);
}
.case-meta-item label{
  display:block;font-size:8px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.3);
  margin-bottom:5px;font-family:var(--sans);
}
.case-meta-item span{
  font-family:var(--serif);font-size:15px;font-weight:300;
  color:rgba(255,255,255,.75);
}

/* Case: Body */
.case-body{max-width:980px;margin:0 auto;padding:80px 40px 120px}

/* Case: Secção label */
.case-sec-label{
  font-size:8px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue2);
  margin-bottom:14px;display:block;font-family:var(--sans);
}
.case-h2{
  font-family:var(--serif);font-size:clamp(22px,3vw,36px);
  font-weight:300;letter-spacing:-.02em;line-height:1.2;
  margin-bottom:18px;
}
.case-h2 em{font-style:italic;color:rgba(240,237,232,.55)}
.case-p{
  font-size:13px;line-height:1.75;
  color:rgba(240,237,232,.55);margin-bottom:12px;
}

/* Desafio grid */
.challenge-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin:28px 0;
}
.challenge-card{
  border:1px solid var(--line);border-radius:8px;padding:22px;
  transition:border-color .3s;
}
.challenge-card:hover{border-color:rgba(0,63,255,.3)}
.ch-bar{width:24px;height:2px;background:var(--blue);opacity:.5;margin-bottom:12px;border-radius:2px}
.ch-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
.ch-desc{font-size:13px;color:var(--muted);line-height:1.55}

/* Insight */
.insight{
  border-left:2px solid var(--blue);
  padding:20px 24px;margin:28px 0;
  background:rgba(0,63,255,.04);border-radius:0 6px 6px 0;
}
.insight-label{
  font-size:8px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue2);display:block;margin-bottom:8px;font-family:var(--sans);
}
.insight p{font-size:12px;line-height:1.7;color:rgba(240,237,232,.55)}

/* Abordagem dark band */
.case-dark-band{
  background:linear-gradient(135deg,#0033DD 0%,#1a3fcc 40%,#3344bb 65%,#5533aa 100%);
  padding:72px 40px;margin:60px 0 0;
}
.case-dark-inner{max-width:980px;margin:0 auto}
.case-dark-band .case-sec-label{color:rgba(255,255,255,.65)}
.case-dark-band .case-h2{color:#fff}
.case-dark-band .case-h2 em{color:rgba(255,255,255,.6)}
.case-dark-band .case-p{color:rgba(255,255,255,.55)}

.approach-steps{display:flex;flex-direction:column;gap:20px;margin-top:28px}
.step{display:flex;gap:16px;align-items:flex-start}
.step-num{
  min-width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:rgba(255,255,255,.7);
  position:relative;top:2px;flex-shrink:0;
}
.step-h4{font-size:12px;font-weight:600;color:#fff;margin-bottom:3px}
.step-p{font-size:13px;color:rgba(255,255,255,.65);line-height:1.6}

/* Métricas */
.metrics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:12px;margin:28px 0;
}
.metric-card{
  border:1px solid var(--line);border-radius:8px;
  padding:24px 18px;text-align:center;
  transition:border-color .3s;
}
.metric-card:hover{border-color:rgba(0,63,255,.3)}
.metric-val{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,48px);
  font-weight:300;color:var(--text);
  line-height:1;margin-bottom:10px;
}
.metric-label{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
.metric-context{font-size:9px;color:rgba(240,237,232,.3);line-height:1.4}

/* Impacto */
.impact-band{
  text-align:center;padding:60px 32px;
  border:1px solid var(--line);border-radius:8px;
  margin:32px 0;
}
.impact-num{
  font-family:var(--serif);
  font-size:clamp(48px,8vw,96px);
  font-weight:300;color:var(--text);
  line-height:.9;margin-bottom:16px;
}
.impact-num em{font-style:normal;font-size:.5em;opacity:.6}
.impact-headline{
  font-family:var(--serif);
  font-size:clamp(18px,2.5vw,26px);
  font-weight:300;color:rgba(240,237,232,.7);
  letter-spacing:-.01em;
}
.impact-headline em{font-style:italic;color:var(--blue2)}

/* Quote */
.quote-section{
  padding:60px 0;border-top:1px solid var(--line);
  text-align:center;margin-top:20px;
}
.quote-mark{
  font-family:var(--serif);font-size:63px;color:rgba(0,63,255,.25);
  line-height:.7;margin-bottom:16px;
}
.quote-text{
  font-family:var(--serif);font-size:clamp(17px,2vw,22px);
  font-weight:300;font-style:italic;
  color:rgba(240,237,232,.65);line-height:1.65;
  max-width:640px;margin:0 auto 16px;
}
.quote-author{
  font-size:12px;color:var(--muted);letter-spacing:.06em;
  font-family:var(--sans);
}

/* Pilares tags */
.pilar-area{margin-top:40px;padding-top:32px;border-top:1px solid var(--line);text-align:center}
.pilar-label{
  font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;font-family:var(--sans);
}
.pilar-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pilar-tag{
  padding:5px 14px;border-radius:100px;
  font-size:9px;font-weight:500;letter-spacing:.06em;
  background:rgba(0,63,255,.1);
  border:1px solid rgba(0,63,255,.2);
  color:var(--blue2);
}

/* placeholder img block do case */
.case-img-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:3px;margin:40px 0;
}
.ci-block{
  border-radius:2px;overflow:hidden;
  aspect-ratio:4/3;
}
.ci-block.wide{grid-column:span 2;aspect-ratio:16/7}

/* ══════════════════════════════════════════
   MOBILE  —  ≤768px
   Grid passa a 2 colunas
   Strip central permanece vertical entre elas
   Círculo permanece no fundo
══════════════════════════════════════════ */
@media(max-width:768px){
  body{cursor:auto}

  /* Grid: 2 colunas + margem interior */
  .grid-outer{gap:2px}
  .col:nth-child(3),.col:nth-child(4){display:none} /* esconde cols 3 e 4 */
  .col{flex:1}
  /* A margem central cria o espaço para o strip */
  .col:nth-child(1){padding-right:24px}
  .col:nth-child(2){padding-left:24px}

  /* Strip central: mesma posição, mas sem o close hint*/
  .close-hint-v{display:none}

  /* Filtro: expande no centro mas respeita a proporção de 50% */
  .filter-panel{
    left:25%;right:25%;
  }
  .fname{font-size:17px}

  /* Case overlay */
  .case-nav{padding:16px 20px}
  .case-hero{padding:70px 20px 60px}
  .case-body{padding:48px 20px 80px}
  .challenge-grid{grid-template-columns:1fr}
  .metrics-grid{grid-template-columns:1fr 1fr;gap:8px}
  .case-img-grid{grid-template-columns:1fr}
  .ci-block.wide{grid-column:span 1;aspect-ratio:4/3}
  .case-meta-row{gap:20px}

}
@media(max-width:420px){
  .filter-panel{left:20%;right:20%}
  .fname{font-size:15px}
}