/* ================================================================
   DANILO FÁVERO — AJUSTES FIEIS À REFERÊNCIA / V3
   Camada de CSS adicionada APÓS o estilo original. Não reestrutura cards.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Silkscreen:wght@400;700&family=Space+Mono:wght@400;700&display=swap');
:root {
  --bg: #fff;
  --main: #101010;
  --border: #101010;
  --font-bold: 'Inter', 'Arial Black', Arial, sans-serif;
  --font-pixel: 'Silkscreen', 'Courier New', monospace;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  --thick: 6px;
}
html {scroll-behavior:smooth; scroll-padding-top: 30px;}
body {
  background:#fff;
  color:#101010;
  padding: 25px;
  font-family: var(--font-bold);
  -webkit-font-smoothing: antialiased;
  transition: background .42s ease, color .42s ease;
  overflow-x:hidden;
}
* {cursor:auto;}
a,button,.menu-toggle {cursor:pointer;}
a:focus-visible,[role="button"]:focus-visible {outline:3px dashed #e92737; outline-offset:5px;}
/* O menu da referência não é uma moldura preta — manter logo e links na mesma linha. */
header {
  border:0;
  margin: 0 0 22px;
  padding: 6px 4px 15px;
  background: transparent;
  min-height: 62px;
  position:relative;
  z-index: 110;
  transition: color .35s ease;
}
.logo-box {
  padding: 0;
  background: none;
  color:inherit;
  font-family:var(--font-pixel);
  font-size:clamp(15px, 1.95vw, 27px);
  font-weight:700;
  letter-spacing: -.07em;
  line-height:1.1;
  white-space:nowrap;
  min-height:32px;
  display:flex;
  align-items:center;
  cursor:crosshair;
  transition: color .3s, transform .3s;
}
.logo-box:hover {transform:translateX(3px);}
.logo-box::after {
  content:'▮';display:inline-block;margin-left:5px;
  font-family:monospace;font-size:.9em;
  animation:cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink {50% {opacity:0}}
nav {gap:0;}
nav a {
  color:inherit;
  margin:0 0 0 7px;
  padding: 10px 8px;
  font-family: var(--font-pixel);
  font-size:clamp(9px, .90vw, 13px);
  font-weight:700;
  letter-spacing:.015em;
  text-transform:uppercase;
  transition:background .16s steps(2),color .16s steps(2),transform .18s;
  min-width:5ch;
  white-space:nowrap;
}
nav a:hover, nav a:focus-visible {color:#fff;background:#111;transform:translateY(-2px);}
.container {gap:18px;}
.block {
  border: var(--thick) solid #111;
  background: #fff;
  color:#111;
  padding: clamp(22px, 2.4vw, 38px);
  justify-content:flex-end;
  min-height:280px;
  box-shadow:none;
  transform:none;
  transition: background .34s ease, border-color .34s ease, color .34s ease, opacity .35s ease, filter .35s ease;
  isolation:isolate;
}
.block[data-theme='yellow']{--hover-accent:#f8d13b;}
.block[data-theme='pink']{--hover-accent:#ff4f7d;}
.block[data-theme='blue']{--hover-accent:#4c84ea;}
.block[data-theme='cyan']{--hover-accent:#26d0b7;}
.block[data-theme='orange']{--hover-accent:#ff8651;}
/* !important protege as regras originais que alteram --bg e --main no hover. */
.block:hover {
  color:#111 !important;
  background:var(--hover-accent,#e7e7e7) !important;
  border-color:#111 !important;
  box-shadow:none;
  transform:none;
  z-index:10;
}
.block h2, .block h1, .block .stat-huge {
  font-family:var(--font-bold);
  font-weight:900;
  letter-spacing:-.045em;
}
.block h2 {font-size:clamp(26px,3.15vw,53px);line-height: .99;margin-bottom:13px;}
.stat-huge{font-size:clamp(56px,8vw,112px);letter-spacing:-.07em;line-height:.90;}
.id-num, .case-num {
  font-family:var(--font-pixel);
  font-weight:700;
  letter-spacing:.04em;
  font-size:clamp(13px,1.6vw,22px);
  margin-bottom:15px;
}
.desc-small {font-family:var(--font-mono);font-size:clamp(11px,1vw,15px);line-height:1.52;opacity:1;letter-spacing:-.035em;}
/* Hero: mesmo bloco original, vídeo original oculto enquanto não há hover,
   reproduzindo a capa branca limpa da referência. */
.hero {
  padding:0;
  min-height:clamp(390px,40vw,580px);
  color:#111;
  background:#fff;
}
.hero-content {
  position:relative;
  z-index:3;
  padding:clamp(25px,3.2vw,50px);
}
.hero h1 {
  font-size: clamp(58px,8.4vw,132px);
  letter-spacing:-.065em;
  line-height:.90;
  margin: 5px 0 16px;
  color:inherit;
  overflow-wrap:normal;
}
.hero p {
  max-width:820px;
  font-family:var(--font-pixel);
  font-size:clamp(13px,1.25vw,21px);
  line-height:1.3;
}
.hero .id-num {font-size:clamp(16px,2vw,29px);}
.hero-video {opacity:0;filter: grayscale(1) blur(7px);transform:scale(1.05);transition:opacity .5s,filter .6s,transform 1s;}
.video-overlay {background:rgba(0,0,0,.50);opacity:0;transition:opacity .5s;}
.hero:hover .hero-video {opacity:1;filter:grayscale(.15) blur(0);transform:scale(1);}
.hero:hover .video-overlay {opacity:1;}
.block.hero:hover {color:#fff !important; background:#111 !important;}
.hero:hover .hero-content {color:#fff;}
/* A seção de apresentação permanece na mesma ordem, largura e colunas. */
.profile-img {filter:grayscale(1);object-fit:cover;transition:filter .6s,transform .7s;}
.block:hover .profile-img {filter:grayscale(0);transform:scale(1.025);}
/* Marquee: mesma posição e conteúdo, apenas moldura preta sobre branco */
.marquee-tech, .marquee-footer-box {
  border:var(--thick) solid #111;
  color:#111;
  background:#fff;
}
.marquee-tech {margin-top:0;padding:12px 0;}
.marquee-tech span,.marquee-footer-box span {font-family:var(--font-pixel);font-weight:700;}
.marquee-tech span {font-size:clamp(13px,1.5vw,20px);}
.marquee-footer-box {padding:20px 0;margin-top:12px;}
.marquee-footer-box span {font-size:clamp(38px,7vw,80px);letter-spacing:-.05em;}
/* Case heading segue no mesmo lugar — não vira grid. */
#projetos {color:inherit;}
#projetos h2 {font-family:var(--font-bold);font-weight:900;font-size:clamp(28px,4vw,52px);letter-spacing:-.04em;}
/* ACORDEÃO ORIGINAL: preservados 7 cases verticais e expansão horizontal. */
.cases-wrapper {
  height:clamp(390px,40vw,560px);
  border:var(--thick) solid #111;
  background:#fff;
  transition:border-color .4s,background .4s,filter .3s,opacity .3s;
}
.case-item {
  background:#fff;
  color:#111;
  border-right:4px solid #111;
  min-width:0;
  transition:flex .64s cubic-bezier(.23,1,.32,1),background .35s,color .35s,filter .35s,opacity .35s;
}
.case-header {padding:clamp(12px,1.9vw,26px);}
.case-title {
  font-family:var(--font-bold);
  font-size:clamp(16px,2vw,30px);
  letter-spacing:-.04em;
  font-weight:900;
  text-shadow:none;
  line-height:.95;
}
.case-img {
  background-color:#202020;
  filter: grayscale(1) blur(12px);
  transform:scale(1.08);
  opacity:0;
  transition: opacity .5s ease, filter .65s ease, transform .8s ease;
}
/* active original somente indica expansão inicial, não ativa uma imagem falsa */
.case-item.active {color:#111;background:#fff;}
.case-item.active .case-img {opacity:.06;filter:grayscale(1) blur(12px);}
.case-item:hover, .case-item:focus-visible {
  flex:5;
  background:#111 !important;
  color:#fff !important;
}
.cases-wrapper:has(.case-item:hover) .case-item.active:not(:hover),
.cases-wrapper:has(.case-item:focus-visible) .case-item.active:not(:focus-visible) {flex:1;}
.case-item:hover .case-img,.case-item:focus-visible .case-img {opacity:1;filter:grayscale(0) blur(0);transform:scale(1);}
.case-item:hover .case-title,.case-item:focus-visible .case-title,
.case-item.active .case-title {
  text-shadow:none;
  opacity:1;
  writing-mode:horizontal-tb;
  transform:none;
  align-self:flex-start;
}
.case-item:hover .case-header,.case-item:focus-visible .case-header {color:#fff;}
.case-item:hover .case-header::before,.case-item:focus-visible .case-header::before {
  content:'';z-index:-1;position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent 70%);
  pointer-events:none;
}
/* Referência: card ativo ganha foco; vizinhos ficam borrados/escuros. */
@media (hover:hover) and (pointer:fine) {
  body.is-card-hovered .container > .block:not(:hover),
  body.is-card-hovered .marquee-tech,
  body.is-card-hovered .cases-wrapper,
  body.is-card-hovered #projetos,
  body.is-card-hovered #contato:not(:hover) {
    opacity:.28;
    filter:blur(1.7px);
  }
  body.is-case-hovered {background:#111;color:#fff;}
  body.is-case-hovered header {color:#fff;}
  body.is-case-hovered nav a:hover {background:#fff;color:#111;}
  body.is-case-hovered .container>.block,
  body.is-case-hovered .marquee-tech,
  body.is-case-hovered #projetos,
  body.is-case-hovered #contato,
  body.is-case-hovered footer {opacity:.12;filter:blur(2.5px);}
  body.is-case-hovered .cases-wrapper {border-color:#fff;background:#111;}
  body.is-case-hovered .case-item:not(:hover) {background:#111;color:#777;border-color:#444;opacity:.27;filter:blur(1.5px);}
  body.is-case-hovered .case-item:hover {opacity:1;filter:none;}
}
/* Footer e botões com borda forte como no original */
.social-btn {color:#111;border:4px solid currentColor;width:58px;height:58px;}
.social-btn svg {width:24px;height:24px;fill:currentColor;}
.social-btn:hover {color:#fff;background:#111;}
.social-btn:hover svg {fill:#fff;}
footer {border:var(--thick) solid #111;background:#fff;color:#111;gap:18px;align-items:center;margin-top:18px;}
footer .logo-box {padding:7px 12px;background:#111;color:#fff;font-size:12px;}
footer .logo-box::after{display:none;}
/* Animação hacker sem duplicar ou mudar copy. */
.scrambling {font-variant-ligatures:none;}
[data-scramble-ready] {font-variant-ligatures:none;}
/* MENU MOBILE - mantém links antigos */
@media(max-width:768px){
 body{padding:14px;}
 header {min-height:56px;margin-bottom:11px;padding:5px 1px 15px;}
 .logo-box {font-size:clamp(13px,3.9vw,21px);}
 .menu-toggle {display:flex;position:relative;z-index:200;border:3px solid #111;width:42px;height:40px;gap:5px;align-items:center;justify-content:center;}
 .menu-toggle span {width:22px;height:3px;background:#111;transition:.25s;}
 .menu-toggle[aria-expanded='true'] {border-color:#fff;}
 .menu-toggle[aria-expanded='true'] span {background:#fff;}
 .menu-toggle[aria-expanded='true'] span:nth-child(1) {transform:translateY(8px) rotate(45deg);}
 .menu-toggle[aria-expanded='true'] span:nth-child(2) {opacity:0;}
 .menu-toggle[aria-expanded='true'] span:nth-child(3) {transform:translateY(-8px) rotate(-45deg);}
 nav {position:fixed;inset:0;left:auto;right:-105%;width:100%;height:100dvh;background:#111;color:#fff;z-index:150;border:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;transition:right .35s ease;visibility:hidden;}
 nav.open {right:0;visibility:visible;}
 nav a {color:#fff;font-size:clamp(19px,6vw,30px);margin:0;padding:17px;}
 nav a:hover {background:#fff;color:#111;}
 body.menu-open{overflow:hidden;}
 .container{gap:13px;}
 .block {min-height:240px;padding:22px !important;}
 .hero {min-height:420px;padding:0 !important;}
 .hero-content {padding:26px 20px;}
 .hero h1 {font-size:clamp(40px,11.5vw,78px);letter-spacing:-.06em;}
 .hero p {font-size:clamp(11px,3.1vw,17px);}
 .hero .id-num {font-size:18px;}
 .block h2 {font-size:clamp(27px,7vw,45px);}
 .desc-small {font-size:12px;line-height:1.5;}
 .stat-huge {font-size:clamp(65px,17vw,95px);}
 .marquee-tech {padding:12px 0;}
 #projetos {margin-top:15px !important;}
 .cases-wrapper {height:auto;flex-direction:column;}
 .case-item {height:78px;min-height:78px;flex:none !important;border-right:0;border-bottom:4px solid #111;}
 .case-item:last-child{border:0;}
 .case-item.active,.case-item.is-expanded {height:260px;min-height:260px;}
 .case-item:hover{flex:none;}
 .case-header{padding:15px 18px;}
 .case-title,.case-item.active .case-title {font-size:clamp(22px,5vw,34px);writing-mode:horizontal-tb;transform:none;align-self:flex-start;margin-top:3px;white-space:normal;}
 .case-item.is-expanded .case-img {opacity:1;filter:grayscale(0) blur(0);transform:scale(1);}
 .case-item.is-expanded {background:#111 !important;color:#fff;}
 .case-item.is-expanded .case-header {color:#fff;}
 .case-item.is-expanded .case-header:before {content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);z-index:-1;}
 footer{padding:18px;flex-wrap:wrap;font-size:11px;}
}
@media(max-width:380px){
 .hero h1{font-size:clamp(36px,10vw,48px);}
 .block h2{font-size:27px;}
 .id-num{font-size:16px;}
 .social-btn{width:54px;height:54px;}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after {animation-duration:.01ms !important; transition-duration:.01ms !important;scroll-behavior:auto !important;}
}