@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700;800;900&family=Special+Elite&display=swap');
:root{--ink:#15110d;--paper:#efe8dc;--cream:#f7f1e6;--red:#c92619;--orange:#ed6c12;--acid:#f0ef22;--brown:#60482f;--line:rgba(21,17,13,.19);--max:1450px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
body:after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(var(--max),100%);margin:auto;padding-inline:clamp(20px,5vw,76px)}
nav{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:.25s}.navin{height:78px;display:flex;align-items:center;justify-content:space-between}
nav.scrolled{background:rgba(239,232,220,.88);backdrop-filter:blur(15px);border-color:var(--line)}.logo{font-family:"Archivo Black";font-size:29px;letter-spacing:-.08em}.logo b{color:var(--red)}
.navlinks{display:flex;gap:26px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}.navlinks a:hover{color:var(--red)}
.hero{min-height:100svh;padding-top:110px;display:grid;align-items:center;position:relative}.heroGrid{display:grid;grid-template-columns:1.05fr .95fr;gap:5vw;align-items:center;padding-bottom:55px}
.eyebrow{font-family:"Special Elite";font-size:13px;text-transform:uppercase;letter-spacing:.13em;color:var(--red)}h1,h2,.display{font-family:"Archivo Black";text-transform:uppercase;letter-spacing:-.055em}
h1{font-size:clamp(69px,10vw,158px);line-height:.79;margin:21px 0 28px}.outline{-webkit-text-stroke:2px var(--ink);color:transparent}.hero p{font-size:clamp(16px,1.4vw,20px);line-height:1.65;max-width:620px;color:#5e554b}
.actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);padding:14px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:900;cursor:pointer;background:transparent;transition:.2s}.btn.main{background:var(--ink);color:var(--cream)}.btn:hover{background:var(--red);border-color:var(--red);color:white;transform:translateY(-3px)}
.heroCollage{height:min(74vh,780px);min-height:540px;position:relative}.heroCollage img{position:absolute;object-fit:cover;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--orange);transition:transform .25s}
.heroCollage .a{width:66%;height:76%;right:4%;top:2%;transform:rotate(2deg)}.heroCollage .b{width:43%;height:52%;left:2%;bottom:4%;transform:rotate(-5deg)}.heroCollage:hover .a{transform:rotate(1deg) translateY(-4px)}.heroCollage:hover .b{transform:rotate(-3deg) translateX(-4px)}
.stamp{position:absolute;right:0;bottom:3%;background:var(--acid);border:2px solid var(--ink);padding:12px 14px;font-family:"Special Elite";font-weight:bold;transform:rotate(5deg)}
.tape{height:58px;background:var(--red);color:var(--cream);display:flex;align-items:center;overflow:hidden;border-block:2px solid var(--ink)}.tapeTrack{display:flex;width:max-content;animation:scroll 24s linear infinite}.tape span{padding-right:36px;font-family:"Archivo Black";font-size:14px;letter-spacing:.06em}.tape i{font-style:normal;color:var(--acid);padding-right:36px}@keyframes scroll{to{transform:translateX(-50%)}}
section{padding:clamp(90px,10vw,150px) 0}.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:40px}.sectionHead h2{font-size:clamp(52px,7.5vw,110px);line-height:.82;margin:12px 0 0}.sectionHead p{max-width:450px;color:#655c52;line-height:1.7}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:25px}.filter{background:transparent;border:1px solid var(--ink);padding:10px 13px;text-transform:uppercase;font-weight:900;font-size:10px;letter-spacing:.1em;cursor:pointer}.filter.active{background:var(--ink);color:white}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:17px}.project{grid-column:span 6;border:2px solid var(--ink);background:var(--cream);cursor:pointer;overflow:hidden;position:relative}.project:nth-child(3n){grid-column:span 5}.project:nth-child(3n+1){grid-column:span 7}
.media{height:clamp(380px,47vw,680px);overflow:hidden;background:#111}.project[data-kind="thumbnail"] .media{height:auto;aspect-ratio:16/9}.project img{width:100%;height:100%;object-fit:cover;display:block;transition:.55s}.project:hover img{transform:scale(1.035);filter:saturate(1.12) contrast(1.04)}.projectInfo{border-top:2px solid var(--ink);padding:14px 15px;display:flex;justify-content:space-between;gap:16px;align-items:center}.projectInfo h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.02em}.projectInfo span{font-family:"Special Elite";font-size:12px;color:#675c51}
.dark{background:var(--ink);color:var(--cream)}.dark .sectionHead p{color:#b9afa4}.dark .eyebrow{color:var(--acid)}.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.25)}.service{padding:30px 28px 45px 0;min-height:310px;border-bottom:1px solid rgba(255,255,255,.25)}.service+.service{border-left:1px solid rgba(255,255,255,.25);padding-left:28px}.service .num{color:var(--acid);font-family:"Special Elite"}.service h3{font-family:"Archivo Black";font-size:clamp(31px,3vw,48px);line-height:.95;text-transform:uppercase;margin:23px 0 12px}.service .price{color:#ff7a21;font-weight:900;margin-bottom:14px}.service p{color:#b9afa4;line-height:1.65;max-width:360px}
.videoGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.videoCard{border:2px solid var(--ink);background:var(--cream)}.videoCard video{display:block;width:100%;background:#000;object-fit:contain}.videoCard.vertical video{aspect-ratio:9/16;max-height:760px}.videoCard.horizontal video{aspect-ratio:16/9;max-height:none}.videoTag{display:inline-block;margin-bottom:7px;font-family:"Special Elite";font-size:11px;color:var(--red)}.videoInfo{padding:15px;border-top:2px solid var(--ink);font-weight:900;text-transform:uppercase;font-size:12px}
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:8vw;align-items:start}.about .display{font-size:clamp(48px,7vw,100px);line-height:.84}.aboutCopy p{font-size:clamp(16px,1.4vw,19px);line-height:1.75;color:#60564c}.facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:35px}.fact{border-top:2px solid var(--ink);padding-top:12px}.fact b{display:block;text-transform:uppercase;font-size:11px}.fact span{font-family:"Special Elite";font-size:13px}
.contact{background:var(--red);color:var(--cream);border-block:3px solid var(--ink)}.contact h2{font-size:clamp(55px,8.5vw,128px);line-height:.8;margin:13px 0 30px}.contact p{max-width:610px;line-height:1.7}.contact .btn{border-color:var(--cream);color:var(--cream)}.contact .btn.main{background:var(--cream);color:var(--ink)}.contact .btn:hover{background:var(--acid);color:var(--ink);border-color:var(--ink)}
footer{background:var(--ink);color:#b9afa4;padding:30px 0}.foot{display:flex;justify-content:space-between;gap:25px;font-size:11px}.foot a{font-weight:800;text-transform:uppercase;color:var(--cream)}
.modal{position:fixed;inset:0;z-index:90;background:rgba(21,17,13,.93);display:none;place-items:center;padding:30px}.modal.open{display:grid}.modalBox{width:min(1080px,100%);max-height:90vh;overflow:auto;background:var(--paper);border:3px solid var(--cream)}.modal img{display:block;width:100%;max-height:76vh;object-fit:contain;background:#111}.modalInfo{padding:20px}.modalInfo h3{margin:0 0 8px;text-transform:uppercase}.modalInfo p{margin:0;color:#655b50;line-height:1.6}.close{position:fixed;top:20px;right:25px;width:46px;height:46px;background:var(--acid);border:2px solid var(--cream);font-size:22px;cursor:pointer}
.reveal{opacity:0;transform:translateY(24px);transition:.65s}.reveal.show{opacity:1;transform:none}

/* Link hub */
.linkPage{min-height:100svh;background:var(--ink);color:var(--cream);display:grid;place-items:center;padding:40px 20px}.linkCard{width:min(620px,100%);border:2px solid var(--cream);background:#201913;box-shadow:14px 14px 0 var(--red);padding:clamp(28px,6vw,55px);position:relative}.linkCard:before{content:"DAV";position:absolute;right:18px;top:13px;font-family:"Archivo Black";font-size:76px;color:rgba(255,255,255,.035)}.avatar{width:105px;height:105px;border:2px solid var(--cream);object-fit:cover;margin-bottom:25px}.linkCard h1{font-size:clamp(50px,12vw,78px);margin:0 0 10px}.linkCard .role{font-family:"Special Elite";color:var(--acid);margin-bottom:20px}.linkCard p{color:#c9beb1;line-height:1.65}.linkButtons{display:grid;gap:11px;margin-top:28px}.linkButtons a,.copyDiscord{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border:1px solid #c9beb1;background:transparent;color:var(--cream);font:900 11px Inter;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.linkButtons a:hover,.copyDiscord:hover{background:var(--red);border-color:var(--red)}.mini{font-family:"Special Elite";font-size:12px;color:#a99d90;margin-top:23px}
@media(max-width:900px){.heroGrid,.about{grid-template-columns:1fr}.heroCollage{height:64vh;min-height:500px;margin-top:20px}.sectionHead{display:block}.sectionHead p{margin-top:20px}.project,.project:nth-child(3n),.project:nth-child(3n+1){grid-column:1/-1}.services{grid-template-columns:1fr}.service+.service{border-left:0;padding-left:0}.videoGrid{grid-template-columns:1fr}.navlinks a:not(:last-child){display:none}}
@media(max-width:560px){.heroCollage{height:54vh;min-height:410px}.heroCollage .a{width:72%}.heroCollage .b{width:49%}.stamp{font-size:11px}.facts{grid-template-columns:1fr}.foot{display:block}.foot div+div{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* ===== V7 — PORTFÓLIO MAIS COMPACTO E LEGÍVEL ===== */
.grid{
  grid-template-columns:repeat(12,1fr);
  gap:22px;
  align-items:start;
}
.project,
.project:nth-child(3n),
.project:nth-child(3n+1){
  grid-column:span 4;
  width:100%;
}
.project .media{
  height:auto;
  aspect-ratio:4/5;
  background:#e5ded3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.project[data-kind="thumbnail"] .media{
  aspect-ratio:16/9;
}
.project[data-kind="poster"] .media{
  aspect-ratio:4/5;
}
.project[data-kind="illustration"] .media{
  aspect-ratio:4/5;
}
.project img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#e5ded3;
}
.projectInfo{
  min-height:64px;
  align-items:flex-start;
}
.projectInfo h3{
  font-size:12px;
  line-height:1.25;
  max-width:68%;
}
.projectInfo span{
  font-size:10px;
  line-height:1.3;
  max-width:32%;
}
@media(max-width:1100px){
  .project,
  .project:nth-child(3n),
  .project:nth-child(3n+1){
    grid-column:span 6;
  }
}
@media(max-width:650px){
  .grid{gap:16px}
  .project,
  .project:nth-child(3n),
  .project:nth-child(3n+1){
    grid-column:1/-1;
  }
  .projectInfo h3{max-width:64%}
  .projectInfo span{max-width:36%}
}


/* ===== V8 — IDENTIDADE DAV ===== */
.logoWithIcon{
  display:flex;
  align-items:center;
  gap:10px;
}
.logoWithIcon img{
  width:38px;
  height:38px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--orange);
}
.logoWithIcon span{
  display:inline-flex;
  align-items:baseline;
}
.footerBrand{
  display:flex;
  align-items:center;
  gap:10px;
}
.footerBrand img{
  width:28px;
  height:28px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--cream);
}
.linkCard .avatar{
  width:112px;
  height:112px;
  border-radius:16px;
  object-fit:cover;
  box-shadow:7px 7px 0 var(--red);
}
@media(max-width:560px){
  .logoWithIcon img{width:32px;height:32px}
  .logoWithIcon{gap:8px}
}

/* ===== V9 — PAINEL DE LINKS MOBILE ===== */
.linksPanel{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:24px;background:rgba(21,17,13,.94);backdrop-filter:blur(10px)}
.linksPanel:target{display:grid}
.linksPanelCard{width:min(560px,100%);position:relative;padding:clamp(28px,6vw,48px);background:var(--paper);color:var(--ink);border:3px solid var(--cream);box-shadow:14px 14px 0 var(--red)}
.linksClose{position:absolute;right:14px;top:12px;width:42px;height:42px;display:grid;place-items:center;background:var(--acid);color:var(--ink);border:2px solid var(--ink);font-size:24px;font-weight:900}
.linksAvatar{width:92px;height:92px;object-fit:cover;border-radius:14px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--orange);margin-bottom:20px}
.linksPanelCard h2{font-family:"Archivo Black";font-size:clamp(52px,11vw,82px);line-height:.9;margin:10px 0 14px}
.linksPanelCard p{color:#655c52;line-height:1.6;max-width:420px}
.linksPanelButtons{display:grid;gap:10px;margin-top:24px}
.linksPanelButtons a,.linksPanelButtons button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:900 11px Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;text-align:left}
.linksPanelButtons a:hover,.linksPanelButtons button:hover{background:var(--red);border-color:var(--red);color:white}


/* ===== V10 — AJUSTES DE ESPAÇAMENTO NO CELULAR ===== */
@media(max-width:650px){
  section{
    padding:52px 0;
  }

  #portfolio{
    padding-top:46px;
  }

  #servicos,
  #videos,
  #sobre{
    padding-top:54px;
    padding-bottom:54px;
  }

  .sectionHead{
    margin-bottom:28px;
  }

  .sectionHead h2{
    margin-top:0;
    font-size:clamp(44px,13vw,68px);
    line-height:.88;
  }

  .sectionHead p{
    margin-top:18px;
    line-height:1.55;
  }

  .filters{
    margin-top:2px;
    margin-bottom:24px;
    gap:8px;
  }

  .filter{
    padding:10px 12px;
  }

  .tape{
    margin-bottom:0;
  }

  .grid{
    margin-top:0;
  }

  .contact{
    padding-top:60px;
    padding-bottom:60px;
  }

  /* Evita blocos altos demais entre seções no mobile */
  .hero{
    min-height:auto;
    padding-bottom:28px;
  }

  .heroGrid{
    padding-bottom:34px;
  }
}


/* ===== V11 — MOBILE REFINADO ===== */
section{
  scroll-margin-top:86px;
}

@media(max-width:650px){
  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .wrap{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
  }

  /* O espaço após a faixa vermelha estava grande demais. */
  #portfolio{
    padding-top:24px;
    padding-bottom:44px;
  }

  #servicos,
  #videos,
  #sobre{
    padding-top:44px;
    padding-bottom:44px;
  }

  .contact{
    padding-top:50px;
    padding-bottom:50px;
  }

  .sectionHead{
    margin-bottom:24px;
    width:100%;
    max-width:100%;
  }

  .sectionHead > div{
    width:100%;
    min-width:0;
  }

  .sectionHead .eyebrow{
    margin-bottom:12px;
    font-size:12px;
    line-height:1.2;
  }

  /* "SELECIONADOS" estava maior que a largura útil do celular. */
  .sectionHead h2{
    width:100%;
    max-width:100%;
    margin:0;
    font-size:clamp(38px,10.8vw,52px);
    line-height:.9;
    letter-spacing:-.06em;
    overflow-wrap:normal;
    word-break:normal;
  }

  .sectionHead p{
    width:100%;
    max-width:100%;
    margin-top:16px;
    font-size:16px;
    line-height:1.52;
  }

  /* Filtros 2x2: mais estáveis e claros no mobile. */
  .filters{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
    margin:0 0 24px;
  }

  .filter{
    width:100%;
    min-height:48px;
    padding:10px 8px;
    white-space:normal;
    line-height:1.15;
  }

  /* Mostra Portfólio + Contato no menu mobile. */
  .navlinks{
    gap:16px;
  }
  .navlinks a{
    display:none !important;
  }
  .navlinks a:first-child,
  .navlinks a:last-child{
    display:inline-block !important;
  }

  /* A faixa continua animada, mas fica mais proporcional no celular. */
  .tape{
    height:50px;
  }
  .tapeTrack span{
    font-size:12px;
    padding-right:28px;
  }
  .tapeTrack i{
    padding-right:28px;
  }

  /* Hero menos alto no mobile para evitar sensação de "buraco". */
  .heroGrid{
    padding-bottom:24px;
  }
  .heroCollage{
    height:50vh;
    min-height:360px;
    margin-top:12px;
  }

  .projectInfo{
    min-height:58px;
  }
}

/* Celulares bem estreitos */
@media(max-width:390px){
  .sectionHead h2{
    font-size:clamp(36px,10.4vw,44px);
  }
  .wrap{
    padding-left:18px;
    padding-right:18px;
  }
  .navlinks{
    gap:12px;
  }
  .navlinks a{
    font-size:10px;
  }
}


/* ===== V12 — DESKTOP REFINADO ===== */

/* Foco de teclado visível */
a:focus-visible,
button:focus-visible,
.project:focus-visible{
  outline:3px solid var(--acid);
  outline-offset:4px;
}

/* Link ativo no menu */
.navlinks a.active{
  color:var(--red);
}
.navlinks a.active::after{
  width:100%;
}

/* Desktop: ritmo mais compacto e previsível */
@media(min-width:1101px){
  section{
    padding-top:112px;
    padding-bottom:112px;
  }

  .sectionHead{
    margin-bottom:38px;
  }

  .sectionHead > div{
    min-width:0;
  }

  .sectionHead h2{
    max-width:900px;
    font-size:clamp(58px,6.6vw,96px);
    line-height:.86;
  }

  .sectionHead p{
    max-width:410px;
  }

  /* Galeria desktop uniforme:
     evita buracos causados pela mistura 16:9 + pôster vertical. */
  .grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
  }

  .project,
  .project:nth-child(3n),
  .project:nth-child(3n+1){
    grid-column:auto;
    min-width:0;
  }

  .project .media,
  .project[data-kind="thumbnail"] .media,
  .project[data-kind="poster"] .media,
  .project[data-kind="illustration"] .media{
    aspect-ratio:4/3;
    height:auto;
    position:relative;
    background:#e4ddd1;
  }

  .project img{
    object-fit:contain;
    transition:transform .45s ease, filter .35s ease;
  }

  .project .media::after{
    content:"ABRIR PROJETO ↗";
    position:absolute;
    right:12px;
    bottom:12px;
    padding:10px 12px;
    background:var(--acid);
    color:var(--ink);
    border:2px solid var(--ink);
    font:900 10px Inter,Arial,sans-serif;
    letter-spacing:.08em;
    transform:translateY(8px);
    opacity:0;
    transition:.22s ease;
    pointer-events:none;
  }

  .project:hover .media::after,
  .project:focus-visible .media::after{
    opacity:1;
    transform:none;
  }

  .project:hover img{
    transform:scale(1.025);
  }

  .projectInfo{
    min-height:72px;
  }

  .projectInfo h3{
    font-size:12px;
    line-height:1.3;
  }

  .projectInfo span{
    font-size:10px;
  }

  /* Serviços sem numeração: mais limpos no desktop */
  .service{
    padding-top:38px;
  }

  .service h3{
    margin-top:4px;
  }

  /* Vídeos verticais não precisam ocupar metade da tela inteira. */
  .videoCard.vertical{
    width:min(100%,430px);
    justify-self:center;
  }

  .videoCard.vertical video{
    max-height:720px;
  }

  .videoCard.horizontal video{
    aspect-ratio:16/9;
  }

  /* Hero um pouco mais controlado em monitores largos */
  .heroGrid{
    grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);
  }

  .hero h1{
    max-width:820px;
  }

  .heroCollage{
    max-width:650px;
    justify-self:end;
    width:100%;
  }
}

/* Monitores muito largos: evita que tudo se espalhe demais. */
@media(min-width:1600px){
  :root{
    --max:1500px;
  }

  .heroGrid{
    gap:80px;
  }
}

/* ===== V14 — ACABAMENTO FINAL ===== */

/* Marquee contínuo, centralizado e sem quebra de linha */
.tape{
  position:relative;
  display:flex;
  align-items:center;
  height:58px;
  overflow:hidden;
}
.tapeTrack{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:max-content;
  height:100%;
  animation:davTicker 26s linear infinite;
  will-change:transform;
}
.tapeGroup{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:100%;
  white-space:nowrap;
}
.tapeGroup span,
.tapeGroup i{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  flex:0 0 auto;
  line-height:1;
}
.tapeGroup span{
  padding:0 28px;
  font-family:"Archivo Black";
  font-size:13px;
  letter-spacing:.06em;
}
.tapeGroup i{
  padding:0 8px;
  color:var(--acid);
  font-style:normal;
  font-size:15px;
}
@keyframes davTicker{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(pointer:fine){
  .tape:hover .tapeTrack{animation-play-state:paused}
}

/* Modal e mídia */
.modal[aria-hidden="false"]{display:grid}
.videoCard video{background:#0c0c0d}
.videoCard video[poster]{object-fit:contain}

/* Pequenos refinamentos de copy/layout */
.contact p{max-width:650px}
.footerBrand span{line-height:1.35}

@media(max-width:650px){
  .tape{height:46px}
  .tapeGroup span{font-size:11px;padding:0 18px}
  .tapeGroup i{padding:0 5px;font-size:13px}
}