/* Max Studios — site pessoal de Max Paulo
   Conceito: galeria editorial em preto e branco; cor só em pequenos detalhes (pontos e destaques). */

@font-face { font-family: "Helvetica Neue MS"; src: url("../fonts/HelveticaNeueLight.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue MS"; src: url("../fonts/HelveticaNeueRoman.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue MS"; src: url("../fonts/HelveticaNeueItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue MS"; src: url("../fonts/HelveticaNeueMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue MS"; src: url("../fonts/HelveticaNeueBold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --preto: #111111;
  --branco: #ffffff;
  --papel: #f1f1ef;
  --linha: #d8d8d5;
  --suave: #6b6b6b;
  --suave-escuro: #9e9e9e;
  /* detalhes da paleta */
  --azul: #1c3de8;
  --laranja: #e94e1b;
  --magenta: #b43776;
  --lima: #dff1c4;

  --sans: "Helvetica Neue MS", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gutter: max(16px, min(4vw, 48px));
  --max: 1440px;
  --raio: 10px;
  --raio-g: 18px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--branco); color: var(--preto);
  font-family: var(--sans); font-size: 17px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.rotulo { font-size: 13px; letter-spacing: 0.02em; color: var(--suave); }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lima); flex: none; }

/* Botões */
.pill { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
.pill--preto { background: var(--preto); color: var(--branco); }
.pill--preto:hover { background: #2a2a2a; }
.pill--branco { background: var(--branco); color: var(--preto); }
.pill--contorno { border: 1px solid currentColor; }
.pill--contorno:hover { background: var(--preto); color: var(--branco); border-color: var(--preto); }

/* Cabeçalho: diferença de cor faz ele funcionar sobre o preto e o branco */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: max(18px, env(safe-area-inset-top, 0px)); padding-bottom: 18px;
  color: var(--branco); pointer-events: none;
  transition: background .3s, color .3s, padding .3s;
}
.topo.is-solido { background: rgba(255,255,255,.9); color: var(--preto); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-bottom: 14px; padding-top: max(14px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid rgba(17,17,17,.08); }
.topo.is-solido .pill--branco { background: var(--preto); color: var(--branco); }
.topo .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.topo a, .topo button { pointer-events: auto; }
.logo { display: inline-flex; width: 132px; }
.logo svg { width: 100%; height: auto; aspect-ratio: 536 / 74; fill: currentColor; display: block; }
.nav { display: flex; gap: 28px; font-size: 15px; }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav a:hover::after { transform: scaleX(1); }
.topo__acoes { justify-self: end; display: flex; align-items: center; gap: 16px; }
.topo .pill--branco { height: 38px; }
.menu-btn { display: none; font-size: 15px; }

.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--preto); color: var(--branco);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.menu[hidden] { display: none; }
.menu__topo { display: flex; justify-content: space-between; align-items: center; }
.menu nav { display: grid; gap: 6px; font-size: 44px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.menu .rotulo { color: var(--suave-escuro); }

/* Abertura com galeria */
.abertura { background: var(--preto); color: var(--branco); padding-top: 84px; padding-bottom: 8px; }
.galeria {
  position: relative; display: grid; gap: 8px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(84px, 11.5vw, 172px);
}
.tile { position: relative; overflow: hidden; border-radius: var(--raio); background: #222; }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.tile:hover img, .tile:hover video { transform: scale(1.03); }
.tile figcaption { position: absolute; left: 10px; bottom: 10px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(17,17,17,.72); color: var(--branco); backdrop-filter: blur(6px); }
.t1 { grid-column: 1 / 5;  grid-row: 1; }
.t2 { grid-column: 5 / 8;  grid-row: 1; }
.t3 { grid-column: 8 / 13; grid-row: 1; }
.t4 { grid-column: 1 / 4;  grid-row: 2 / 4; }
.t5 { grid-column: 4 / 10; grid-row: 2 / 4; }
.t6 { grid-column: 10 / 13; grid-row: 2 / 4; }
.t7 { grid-column: 1 / 7;  grid-row: 4; }
.t8 { grid-column: 7 / 13; grid-row: 4; }
.t7::after, .t8::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,17,17,.75), rgba(17,17,17,.15)); }
.t7 figcaption, .t8 figcaption { display: none; }

.marca-grande {
  position: relative; margin: 0; align-self: end; grid-column: 1 / -1; grid-row: 4 / 5;
  display: flex; align-items: center; gap: clamp(12px, 3vw, 40px);
  padding: 0 clamp(10px, 2vw, 28px) clamp(4px, .8vw, 12px);
  font-weight: 500; font-size: clamp(52px, 9.8vw, 152px); line-height: .9; letter-spacing: -0.055em;
  color: var(--branco); pointer-events: none; z-index: 2;
}
.marca-grande .traco { flex: 1; height: 2px; background: var(--branco); opacity: .85; transform: translateY(.06em); }
.marca-grande sup { font-size: .32em; letter-spacing: 0; vertical-align: .9em; margin-left: .04em; font-weight: 400; }

/* Apresentação */
.intro { background: var(--papel); padding-block: clamp(72px, 10vw, 140px); text-align: center; }
.intro .wrap { display: grid; justify-items: center; gap: 28px; }
.intro__texto { max-width: 26ch; margin: 0; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; text-wrap: balance; }
.intro__texto .serif-it { font-size: 1.12em; }
.clientes { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 15px; color: var(--suave); }
.clientes span:first-child { color: var(--preto); }

/* Cabeçalho de seção */
.secao { padding-block: clamp(80px, 10vw, 140px); }
.secao__topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.secao__titulo { margin: 0; font-size: clamp(44px, 7vw, 104px); line-height: .95; letter-spacing: -0.05em; font-weight: 500; text-wrap: balance; }
.secao__titulo .serif-it { letter-spacing: -0.02em; }

/* Serviços */
.servicos { border-top: 1px solid var(--linha); }
.servico {
  display: grid; grid-template-columns: 40px minmax(0, 1.25fr) minmax(0, 1fr) 24px; align-items: center; gap: 24px;
  padding-block: 26px; border-bottom: 1px solid var(--linha);
}
.servico__seta { font-size: 22px; color: var(--suave); transition: transform .3s, color .3s; }
.servico h3 { margin: 0; font-size: clamp(26px, 3.2vw, 44px); font-weight: 400; letter-spacing: -0.035em; line-height: 1.05; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.servico p { margin: 0; color: var(--suave); font-size: 16px; max-width: 42ch; }
.servico .ponto { justify-self: end; width: 10px; height: 10px; transition: transform .3s; }
.servico:hover h3 { transform: translateX(10px); }
.servico:hover .servico__seta { transform: rotate(-45deg); color: var(--preto); }
.servico:hover .ponto { transform: scale(1.8); }
.c-azul { background: var(--azul); } .c-laranja { background: var(--laranja); } .c-magenta { background: var(--magenta); } .c-lima { background: var(--lima); box-shadow: inset 0 0 0 1px #b9cf96; } .c-preto { background: var(--preto); }

/* Trabalhos */
.trabalhos { background: var(--papel); }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filtro { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha); background: var(--branco); font-size: 14px; transition: background .2s, color .2s, border-color .2s; }
.filtro:hover { border-color: var(--preto); }
.filtro[aria-pressed="true"] { background: var(--preto); color: var(--branco); border-color: var(--preto); }

.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(16px, 2vw, 24px); }
.case { grid-column: span 6; display: grid; gap: 16px; align-content: start; }
.case--largo { grid-column: span 7; }
.case--estreito { grid-column: span 5; }
.case[hidden] { display: none !important; }
.case__midia { position: relative; overflow: hidden; border-radius: var(--raio-g); background: var(--preto); aspect-ratio: 4 / 3; max-width: 100%; }
.case--largo .case__midia { aspect-ratio: 16 / 10.5; }
.case__midia > img, .case__midia > video { width: 100%; height: 100%; object-fit: cover; }
.case__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; }
.case__info h3 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.case__tipo { font-size: 14px; color: var(--suave); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.case__info p { grid-column: 1 / -1; margin: 0; color: var(--suave); font-size: 15px; max-width: 52ch; }

/* página inteira que rola ao passar o mouse */
.rolagem { background: #e6e6e3; }
.rolagem img { width: 100%; height: auto; object-fit: initial; transform: translateY(0); transition: transform 7s cubic-bezier(.45,.05,.35,1); }
.rolagem:hover img, .rolagem:focus-within img { transform: translateY(var(--rolar, 0px)); transition-duration: var(--dur, 7s); }
.rolagem__dica { position: absolute; right: 12px; bottom: 12px; font-size: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(17,17,17,.8); color: var(--branco); transition: opacity .3s; }
.rolagem:hover .rolagem__dica { opacity: 0; }
.rolagem--estreita img { width: 64%; margin-inline: auto; }

.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; background: var(--preto); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.mais { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--linha); }
.mais p { margin: 0; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.03em; }

/* Sobre */
.sobre { background: var(--preto); color: var(--branco); }
.sobre .rotulo { color: var(--suave-escuro); }
.sobre__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sobre__foto { border-radius: var(--raio-g); overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; }
.sobre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.sobre__texto { display: grid; gap: 28px; min-width: 0; }
.sobre__texto h2 { margin: 0; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 400; text-wrap: balance; }
.sobre__texto > p { margin: 0; color: #cfcfcf; font-size: 18px; max-width: 58ch; }
.tracos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #333; }
.traco-item { padding: 22px 22px 22px 0; border-bottom: 1px solid #333; }
.traco-item:nth-child(odd) { border-right: 1px solid #333; }
.traco-item:nth-child(even) { padding-left: 22px; }
.traco-item h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; }
.traco-item p { margin: 0; color: var(--suave-escuro); font-size: 15px; }
.ferramentas { display: flex; flex-wrap: wrap; gap: 8px; }
.ferramentas span { padding: 6px 14px; border: 1px solid #3a3a3a; border-radius: 999px; font-size: 14px; color: #dcdcdc; }

/* Contato */
.contato { padding-block: clamp(90px, 12vw, 170px) clamp(48px, 6vw, 80px); }
.contato__titulo { margin: 0 0 clamp(40px, 6vw, 80px); font-size: clamp(60px, 13vw, 200px); line-height: .88; letter-spacing: -0.06em; font-weight: 500; }
.contato__titulo .serif-it { letter-spacing: -0.03em; }
.canais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--preto); }
.canal { display: grid; gap: 10px; padding: 22px 20px 26px 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.canal + .canal { padding-left: 20px; border-left: 1px solid var(--linha); }
.canal__valor { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.canal a.canal__valor:hover { text-decoration: underline; text-underline-offset: 4px; }
.copiar { justify-self: start; font-size: 13px; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }

.rodape { padding-block: 32px max(32px, env(safe-area-inset-bottom, 0px)); }
.rodape .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; color: var(--suave); }
.rodape .logo { color: var(--preto); width: 110px; }

/* Celular e tablet */
@media (max-width: 900px) {
  .nav { display: none; }
  .topo__acoes { gap: 14px; }
  .topo .logo { width: 104px; }
  .topo .topo__cta { height: 34px; padding: 0 14px; font-size: 13px; }
  .topo .wrap { grid-template-columns: 1fr auto; }
  .menu-btn { display: inline-flex; }
  .galeria { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 24vw; }
  .t1 { grid-column: 1 / 4; grid-row: 1; }
  .t2 { grid-column: 4 / 7; grid-row: 1; }
  .t3 { display: none; }
  .t5 { grid-column: 1 / 7; grid-row: 2 / 4; }
  .t4 { grid-column: 1 / 4; grid-row: 4 / 6; }
  .t6 { grid-column: 4 / 7; grid-row: 4 / 6; }
  .t7 { grid-column: 1 / 7; grid-row: 6; }
  .t8 { display: none; }
  .marca-grande { grid-row: 6 / 7; }
  .secao__topo { grid-template-columns: 1fr; }
  .servico { grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 6px 14px; padding-block: 22px; }
  .servico p { grid-column: 2 / 3; grid-row: 2; font-size: 15px; }
  .servico .ponto { grid-column: 3; grid-row: 1; }
  .case, .case--largo, .case--estreito { grid-column: 1 / -1; }
  .sobre__grade { grid-template-columns: 1fr; }
  .sobre__foto { max-width: 420px; }
  .canais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .canal:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .tracos { grid-template-columns: 1fr; }
  .traco-item:nth-child(odd) { border-right: 0; }
  .traco-item:nth-child(even) { padding-left: 0; }
  .canais { grid-template-columns: 1fr; }
  .canal + .canal { padding-left: 0; border-left: 0; }
  .case__info { grid-template-columns: 1fr; }
}

/* Telas de toque: a página longa rola com o dedo */
@media (hover: none) {
  .rolagem { overflow-y: auto; overscroll-behavior: contain; }
  .rolagem img { transform: none !important; }
  .rolagem__dica { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .rolagem:hover img { transform: none; }
}

/* Retrato do Max dentro do retângulo da marca: olhar na altura do meio, rosto à direita */
.t7--retrato { background: #1b1a19; }
.t7--retrato img { position: absolute; left: -8%; top: 50%; width: 165%; height: auto; max-width: none; object-fit: fill; transform: translateY(-37%); }
.t7--retrato:hover img { transform: translateY(-37%) scale(1.02); }
.t7--retrato::after { background: linear-gradient(to right, rgba(17,17,17,.55), rgba(17,17,17,.1) 60%); }

/* Selo sobre a mídia de um case */
a.case__midia { display: block; }
.selo-midia { position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(17,17,17,.82); color: var(--branco); }
.mosaico--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Desktop: respiro lateral maior em todas as seções abaixo da galeria */
@media (min-width: 1024px) {
  main > section:not(.abertura) > .wrap,
  .rodape > .wrap {
    max-width: 1600px;
    padding-left: max(clamp(64px, 8vw, 144px), env(safe-area-inset-left, 0px));
    padding-right: max(clamp(64px, 8vw, 144px), env(safe-area-inset-right, 0px));
  }
}

/* Setas desenhadas (iguais em todos os aparelhos) */
.seta { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; flex: none; }
.servico__seta { display: inline-flex; font-size: 24px; }
.pill .seta, .selo-midia .seta { width: 14px; height: 14px; }

/* iPhone: esconde o botão de play nativo sobre vídeos que tocam sozinhos */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }

/* Revelação suave ao rolar (só com JavaScript ativo e sem preferência por menos movimento) */
.js-revela .revelar { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--atraso, 0ms); }
.js-revela .revelar.is-visivel { opacity: 1; transform: none; }