/* ==========================================================
   Páginas claras: Início (index.html) e Sobre (gustavo.html)
   Folha clara por cima do site escuro. As duas usam <body class="page-gustavo">.
   Tudo aqui começa com .g ou .page-gustavo, pra não mexer nas outras páginas.
   Este arquivo NÃO passa pelo ferramentas/escala.py: os tamanhos já são os finais.
   ========================================================== */

.page-gustavo {
  --paper: #EFEDE8;
  --paper-2: #E5E2DA;
  --ink: #0B1114;
  --ink-mute: rgba(11, 17, 20, .62);
  --ink-line: rgba(11, 17, 20, .16);
  --g-sans: "Unbounded", system-ui, sans-serif;
  --g-script: "Instrument Serif", Georgia, "Times New Roman", serif;
  --g-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --g-pad: clamp(20px, 5vw, 88px);
}

/* ---------- Cabeçalho em cima do papel ---------- */
.page-gustavo:not(.page-sobre) .header { --osso: var(--ink); --mute: var(--ink-mute); --line: var(--ink-line); color: var(--ink); }
.page-gustavo:not(.page-sobre) .header.is-scrolled { background: color-mix(in srgb, var(--paper) 78%, transparent); }
.page-gustavo:not(.page-sobre) .header :focus-visible { outline-color: var(--ink); }

.page-sobre .header.is-scrolled { background: rgba(11, 17, 20, .9); }

/* ---------- A folha ---------- */
.g {
  /* Dentro da folha as cores do site se invertem: botões, rótulos e linhas ficam escuros sobre claro. */
  --deep: var(--paper); --osso: var(--ink); --mute: var(--ink-mute); --line: var(--ink-line);
  position: relative; z-index: 1; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border-radius: 0 0 clamp(28px, 5vw, 72px) clamp(28px, 5vw, 72px);
}
.g::before {
  /* grão de papel (sem mix-blend-mode: ele obrigava o navegador a recompor a página inteira a cada rolagem) */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.g > * { position: relative; z-index: 1; }
.g :focus-visible { outline-color: var(--ink); }
.g .btn:hover { background: #000; }
.g .btn--red { color: #fff; }
.g .btn--red:hover { background: #cf2f32; }
.g .btn--ghost:hover { background: transparent; border-color: var(--ink); }
.g p { margin: 0; }

.g-script { font-family: var(--g-script); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.g-script--red { color: var(--red); font-size: 1.22em; line-height: .8; }

/* ---------------- Capa ---------------- */
/* (.g > … pra ganhar do "main > section" do styles.css) */
.g > .g-hero {
  min-height: max(100svh, 620px);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 2svh, 26px);
  padding: calc(env(safe-area-inset-top, 0px) + clamp(84px, 12svh, 116px)) var(--g-pad) clamp(22px, 4svh, 40px);
}
.g-pill {
  padding: .7em 1.9em; border: 1.5px solid var(--ink); border-radius: 50%;
  font: 300 clamp(11px, 1.05vw, 15px)/1 var(--g-sans); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; white-space: nowrap;
}

/* O palco escala inteiro: tudo dentro dele é medido em cqw (1% da largura do palco). */
.g-stage { width: min(100%, 1500px, (100svh - 250px) * 2.25); margin-block: auto; container-type: inline-size; }
.g-row { display: flex; align-items: center; justify-content: center; }
.g-word { font: 300 16.5cqw/.8 var(--g-sans); letter-spacing: -.06em; white-space: nowrap; }

.g-face {
  position: relative; z-index: 3; flex: none; appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  width: 30cqw; margin: -3cqw -2.2cqw -5.5cqw; -webkit-tap-highlight-color: transparent;
}
.g-face__tilt { display: block; position: relative; transform: rotate(var(--rz, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)); transition: transform .5s var(--ease); filter: drop-shadow(0 2.2cqw 2.4cqw rgba(11, 17, 20, .2)); }
.g-face img { width: 100%; height: auto; opacity: 0; user-select: none; -webkit-user-drag: none; }
/* A primeira imagem (sorriso) fica sempre visível por baixo; as outras expressões aparecem por cima, na hora,
   sem fade: com fade as duas ficavam meio transparentes e a cabeça parecia sumir. */
.g-face img:first-child { opacity: 1; }
.g-face img + img { position: absolute; inset: 0; }
.g-face img.is-on { opacity: 1; }
.g-face:active .g-face__tilt { transform: rotate(var(--rz, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)) scale(.97); }
.g-amp {
  position: absolute; right: 1cqw; top: 1.5cqw; z-index: 2; width: 7cqw; height: 7cqw; border-radius: 50%;
  display: grid; place-items: center; background: var(--red); color: #fff; transform: rotate(-10deg);
  font: italic 400 5.6cqw/1 var(--g-script); padding-bottom: .5cqw;
  box-shadow: 0 .8cqw 1.6cqw rgba(229, 56, 59, .35);
}

.g-amp--m { display: none; }

.g-under { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4cqw; margin-top: -1.5cqw; }
.g-intro { display: grid; gap: clamp(14px, 1.8cqw, 26px); justify-items: start; max-width: 34cqw; padding-bottom: 1cqw; }
.g-intro p { font-size: clamp(14px, 1.45cqw, 20px); line-height: 1.45; font-weight: 600; text-wrap: pretty; }

.g-slot { --fs: 19cqw; --pad: .6cqw 2.2cqw 1.4cqw 1.2cqw; position: relative; margin-right: 6cqw; }
.g-ghost { visibility: hidden; box-sizing: content-box; padding: var(--pad); border: 1px solid transparent; }
.g-select { position: absolute; left: 0; top: 0; padding: var(--pad); border: 1px dashed var(--ink); }
/* A palavra é um SVG de 2.292em x .82em (mesma caixa que o texto ocupava); o tamanho vem do font-size (--fs). */
.g-ghost, .g-type { display: block; font-size: var(--fs); width: 2.292em; height: .82em; }
.g-type { position: relative; }
.g-type svg { display: block; width: 100%; height: 100%; overflow: visible; }
.g-type path { fill: none; stroke: var(--ink); stroke-width: max(1.3px, .12cqw); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.g-caret { display: none; position: absolute; left: .08em; top: 4%; height: 84%; width: max(2px, .018em); margin-left: .03em; background: var(--red); }
.g-h { position: absolute; width: clamp(6px, .8cqw, 11px); aspect-ratio: 1; background: var(--ink); translate: -50% -50%; }
.g-h--tl { left: 0; top: 0; } .g-h--tm { left: 50%; top: 0; } .g-h--tr { left: 100%; top: 0; }
.g-h--bl { left: 0; top: 100%; } .g-h--bm { left: 50%; top: 100%; } .g-h--br { left: 100%; top: 100%; }
.g-cursor { position: absolute; left: 100%; top: 100%; z-index: 4; display: flex; align-items: flex-start; translate: 2px 2px; pointer-events: none; }
.g-cursor svg { flex: none; fill: var(--red); stroke: #fff; stroke-width: 1.2; }
.g-cursor b { margin: 14px 0 0 -2px; padding: 5px 9px; border-radius: 4px 10px 10px 10px; background: var(--red); color: #fff; font: 600 12px/1 var(--text); white-space: nowrap; }

.g-cats {
  width: 100%; margin: 0; padding: clamp(14px, 2svh, 22px) 0 0; list-style: none; border-top: 1px solid var(--ink-line);
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  font: 300 clamp(10px, .95vw, 13px)/1.2 var(--g-sans); letter-spacing: .22em; text-transform: uppercase;
}

/* Entrada da capa */
@media (prefers-reduced-motion: no-preference) {
  .js .g-in { animation: g-rise .9s var(--ease) both; animation-delay: calc(.15s + var(--d, 0) * .09s); }
  .js .g-face { animation: g-pop 1s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
  .js .g-amp { animation: g-stamp .5s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
  /* O cursor "Gustavo" redimensiona a caixa do "Design": uma vez na entrada (enquanto a palavra é digitada)
     e depois de novo a cada 8 s. Quem muda é o tamanho da letra (font-size), não um "scale":
     assim o texto é redesenhado em cada tamanho e fica sempre nítido. */
  .js .g-cursor { animation: g-cursor .7s var(--ease-io) .8s both; }
  .js .g-select .g-type { animation: g-resize 1.2s ease-in-out 1.5s 1 both, g-resize-loop 8s ease-in-out 6s infinite; }
  .js .g-cursor svg { transform-origin: 15% 15%; animation: g-press 1.2s ease-in-out 1.5s 1, g-press-loop 8s ease-in-out 6s infinite; }
  .js .g-h--br { animation: g-grab 1.2s linear 1.5s 1, g-grab-loop 8s linear 6s infinite; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .g-type path { animation: g-key .001s linear both; animation-delay: calc(1.25s + var(--i) * .13s); }
  /* o cursor de texto espera no começo, pula pro fim de cada letra e depois fica piscando */
  .js .g-caret { display: block; animation: g-caret-x .78s step-end 1.25s forwards, g-blink 1.05s steps(1) 2.2s infinite; }
}
/* Capa fora da tela: nada dela fica animando à toa (o gustavo.js põe/tira "is-away"). */
.g-hero.is-away, .g-hero.is-away * { animation-play-state: paused !important; }
@keyframes g-caret-x { 0.0% { left: 22.73%; } 16.67% { left: 37.26%; } 33.33% { left: 49.78%; } 50.0% { left: 61.08%; } 66.67% { left: 77.92%; } 83.33% { left: 100.0%; } 100% { left: 100.0%; } }
@keyframes g-key { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes g-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes g-pop { from { opacity: 0; transform: translateY(8%) scale(.72) rotate(-6deg); } }
@keyframes g-stamp { from { opacity: 0; transform: rotate(18deg) scale(1.9); } }
@keyframes g-cursor { from { opacity: 0; translate: 90px 70px; } }
@keyframes g-resize { 0% { font-size: calc(var(--fs) * .9); } 40% { font-size: calc(var(--fs) * 1.07); } 72% { font-size: calc(var(--fs) * .975); } 100% { font-size: var(--fs); } }
@keyframes g-press { 0% { scale: 1; } 8%, 88% { scale: .84; } 100% { scale: 1; } }
@keyframes g-grab { 0% { background: var(--ink); scale: 1; } 8%, 88% { background: var(--red); scale: 1.35; } 100% { background: var(--ink); scale: 1; } }
@keyframes g-resize-loop { 0%, 10% { font-size: var(--fs); } 28%, 36% { font-size: calc(var(--fs) * 1.07); } 58%, 66% { font-size: calc(var(--fs) * .94); } 84%, 100% { font-size: var(--fs); } }
@keyframes g-press-loop { 0%, 7% { scale: 1; } 10%, 84% { scale: .84; } 88%, 100% { scale: 1; } }
@keyframes g-grab-loop { 0%, 9% { background: var(--ink); scale: 1; } 10%, 84% { background: var(--red); scale: 1.35; } 86%, 100% { background: var(--ink); scale: 1; } }

/* ---------------- Títulos e blocos comuns ---------------- */
.g > .g-about, .g > .g-cv, .g > .g-work, .g > .g-services, .g > .g-contact { padding: clamp(72px, 10vw, 150px) var(--g-pad); border-top: 1px solid var(--ink-line); }
.g-h2 { margin: 0; font: 300 clamp(32px, 5vw, 80px)/1.02 var(--g-sans); letter-spacing: -.05em; text-wrap: balance; }
.g-h2--xl { font-size: clamp(36px, 5.8vw, 96px); }
.g-lead { font: 300 clamp(18px, 1.9vw, 27px)/1.3 var(--g-sans); letter-spacing: -.03em; text-wrap: pretty; }
.g-head { display: grid; gap: clamp(16px, 2vw, 26px); margin-bottom: clamp(40px, 6vw, 84px); }
.g-head__note { max-width: 44ch; color: var(--ink-mute); font-size: 17px; }
.g-link { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; font-size: 15px; text-decoration: none; padding-bottom: 5px; border-bottom: 1.5px solid var(--ink); transition: color .3s, border-color .3s; }
.g-link:hover { color: var(--red); border-color: var(--red); }

/* ---------------- Sobre: abertura ---------------- */
.g > .g-me { padding: 0; }
.g > .g-me + section { border-top: 0; padding-top: clamp(40px, 6vw, 90px); }
.g-me__in {
  /* abertura escura: as cores se invertem (claro sobre escuro) */
  --paper: #0B1114; --paper-2: #172026; --ink: #EFEDE8; --ink-mute: rgba(239, 237, 232, .66); --ink-line: rgba(239, 237, 232, .16);
  --deep: var(--paper); --osso: var(--ink); --mute: var(--ink-mute); --line: var(--ink-line);
  position: relative; isolation: isolate; overflow: hidden; background: #0B1114; color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text art" "facts facts"; align-items: center; gap: clamp(20px, 3vw, 40px) clamp(28px, 5vw, 90px);
  min-height: calc(min(100svh, 980px) - clamp(44px, 8vw, 120px)); padding: calc(env(safe-area-inset-top, 0px) + clamp(110px, 11vw, 150px)) var(--g-pad) clamp(22px, 2.6vw, 36px);
}
.g .g-me__in .btn:hover { background: #fff; }
.g .g-me__in .btn--red:hover { background: #cf2f32; }
.g .g-me__in .btn--ghost:hover { background: transparent; border-color: var(--ink); }
.g-me__in :focus-visible { outline-color: var(--ink); }
/* quadriculado que só aparece em volta do mouse, com um brilho vermelho junto */
.g-me__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 420px at var(--mx, 74%) var(--my, 46%), rgba(229, 56, 59, .2), transparent 70%),
    linear-gradient(rgba(239, 237, 232, .13) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(239, 237, 232, .13) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(circle 460px at var(--mx, 74%) var(--my, 46%), #000 10%, transparent 72%);
  mask-image: radial-gradient(circle 460px at var(--mx, 74%) var(--my, 46%), #000 10%, transparent 72%);
}
.g-me__text { grid-area: text; display: grid; gap: clamp(18px, 2.2vw, 30px); justify-items: start; }
.g-me__title { margin: 0; font: 300 clamp(46px, 8.6vw, 148px)/.94 var(--g-sans); letter-spacing: -.06em; }
.g-me__title .g-script { display: block; font-size: 1.16em; line-height: .86; letter-spacing: -.02em; }
.g-me__text .g-lead { max-width: 40ch; font: 400 clamp(17px, 1.4vw, 21px)/1.55 var(--text); letter-spacing: 0; color: var(--ink-mute); }
.g-me__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.g-me__art { grid-area: art; position: relative; display: grid; justify-items: center; align-self: end; }
.g-me__fig { position: relative; display: block; width: min(100%, 540px); }
.g-me__fig img { display: block; width: 100%; height: auto; }
.g-me__final { position: relative; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)); }
.g-me__art .g-about__disc { background: var(--red); box-shadow: none; }
.g-me__art .g-about__disc::after { background: var(--ink); }
/* etiquetas soltas em volta do personagem */
.g-me__tag { position: absolute; z-index: 2; padding: 10px 16px; border-radius: 99px; font: 400 12.5px/1 var(--g-mono); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 14px 24px -12px rgba(11, 17, 20, .4); }
.g-me__tag--a { left: -4%; top: 26%; rotate: -8deg; background: var(--ink); color: var(--paper); }
.g-me__tag--b { right: -2%; top: 58%; rotate: 6deg; background: #0B1114; color: #EFEDE8; box-shadow: 0 0 0 1px rgba(239, 237, 232, .28), 0 14px 24px -12px rgba(0, 0, 0, .6); }
.g-me__facts { grid-area: facts; }
@media (prefers-reduced-motion: no-preference) {
  .g-me__tag--a { animation: g-float 5s ease-in-out infinite; }
  .g-me__tag--b { animation: g-float 6s ease-in-out -2s infinite; }
}
@keyframes g-float { 50% { translate: 0 -8px; } }

/* ---------------- Sobre: duas metades (barra que arrasta) ---------------- */
.g > .g-duo { padding: clamp(72px, 10vw, 150px) var(--g-pad); border-top: 1px solid var(--ink-line); }
.g-duo .g-head__note { max-width: 52ch; }
/* título: metade em letra de desenho (serifada), metade em letra de código */
.g-duo__title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .12em .32em; font: italic 400 clamp(44px, 6.6vw, 108px)/.92 var(--g-script); letter-spacing: -.015em; }
.g-duo__title code { font: 400 .62em/1 var(--g-mono); letter-spacing: -.05em; color: var(--red); white-space: nowrap; }
.g-duo__title code::after { content: ""; display: inline-block; width: .5em; height: .95em; margin-left: .14em; vertical-align: -.12em; background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .g-duo__title code::after { animation: g-blink 1.1s steps(1) infinite; } }
@keyframes g-blink { 50% { opacity: 0; } }
/* a "janela" com o site: barra em cima, e dentro o layout desenhado e o site pronto, um por cima do outro */
.g-duo__win { max-width: calc(76svh * 1.8); margin-inline: auto; border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden; background: #0B1114; box-shadow: 0 50px 80px -40px rgba(11, 17, 20, .6), 0 0 0 1px rgba(11, 17, 20, .9); }
.g-duo__chrome { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: #141C20; }
.g-duo__chrome i { width: 10px; height: 10px; border-radius: 50%; background: rgba(239, 237, 232, .22); }
.g-duo__chrome i:first-child { background: var(--red); }
.g-duo__chrome span { margin-left: 12px; padding: 6px 14px; border-radius: 99px; background: rgba(239, 237, 232, .07); color: rgba(239, 237, 232, .6); font: 400 11.5px/1 var(--g-mono); }
.g-duo__stage { position: relative; aspect-ratio: 1440 / 800; overflow: hidden; isolation: isolate; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.g-duo__side { position: absolute; inset: 0; }
.g-duo__side img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.g-duo__side--design { z-index: 0; background: #F6F4EF; color: #0B1114; }
.g-duo__side--design::after {
  /* quadriculado de prancheta por cima do desenho */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(11, 17, 20, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 17, 20, .06) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
}
.g-duo__side--dev { z-index: 1; background: #050505; clip-path: inset(0 0 0 var(--pos)); }
/* anotações do desenho */
.g-duo__box { position: absolute; left: 7.4%; right: 7.4%; top: 12.4%; bottom: 31.6%; z-index: 1; border: 1px dashed var(--red); pointer-events: none; }
.g-duo__box i { position: absolute; width: 9px; height: 9px; background: #F6F4EF; border: 1.5px solid var(--red); translate: -50% -50%; }
.g-duo__box i:nth-child(1) { left: 0; top: 0; } .g-duo__box i:nth-child(2) { left: 100%; top: 0; }
.g-duo__box i:nth-child(3) { left: 0; top: 100%; } .g-duo__box i:nth-child(4) { left: 100%; top: 100%; }
.g-duo__box b { position: absolute; left: -1px; bottom: 100%; padding: 5px 9px; border-radius: 4px 4px 4px 0; background: var(--red); color: #fff; font: 400 11px/1 var(--g-mono); white-space: nowrap; }
.g-duo__note { position: absolute; left: 14%; top: 73%; z-index: 1; rotate: -4deg; font: italic 400 clamp(17px, 2vw, 30px)/1.05 var(--g-script); color: var(--red); pointer-events: none; }
.g-duo__note i { font-style: normal; font-size: .8em; }
/* barra */
.g-duo__bar { position: absolute; left: clamp(1px, var(--pos), 100% - 1px); top: 0; bottom: 0; z-index: 2; width: 2px; translate: -50% 0; background: #EFEDE8; box-shadow: 0 0 0 1px rgba(11, 17, 20, .25); pointer-events: none; }
.g-duo__grip { position: absolute; left: clamp(34px - var(--w) * var(--p) / 100, 50%, var(--w) * (100 - var(--p)) / 100 - 33px); top: 50%; display: grid; place-items: center; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6), 0 0 0 4px rgba(239, 237, 232, .9); transition: scale .25s; }
.g-duo__stage.is-drag .g-duo__grip { scale: .9; }
.g-duo__range { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.g-duo__range:focus-visible + .g-duo__bar .g-duo__grip { outline: 2px solid var(--ink); outline-offset: 6px; }
/* legendas embaixo: um lado pra cada metade */
.g-duo__caps { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 24px clamp(20px, 4vw, 60px); max-width: calc(76svh * 1.8); margin: clamp(26px, 3.4vw, 48px) auto 0; }
.g-duo__caps .g-link { align-self: center; }
.g-duo__cap { display: grid; gap: clamp(8px, 1vw, 12px); justify-items: start; }
.g-duo__cap--dev { text-align: right; justify-items: end; }
.g-duo__kicker { font: 400 12px/1 var(--g-mono); letter-spacing: .04em; color: var(--ink-mute); }
.g-duo__cap h3 { margin: 0; font: italic 400 clamp(34px, 4vw, 60px)/.9 var(--g-script); letter-spacing: -.01em; }
.g-duo__cap--dev h3 { font: 400 clamp(21px, 2.4vw, 36px)/1.25 var(--g-mono); letter-spacing: -.05em; color: var(--red); }
.g-duo__cap p:last-child { max-width: 30ch; color: var(--ink-mute); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; }
@media (max-width: 760px) {
  .g-duo__win, .g-duo__caps { max-width: none; }
  .g-duo__stage { aspect-ratio: 390 / 720; }
  .g-duo__box { left: 7%; right: 7%; top: 17.6%; bottom: 62.6%; }
  .g-duo__box b { font-size: 10px; }
  .g-duo__note { left: 8%; top: 84.5%; font-size: 19px; }
  .g-duo__grip { width: 46px; height: 46px; }
  .g-duo__caps { grid-template-columns: 1fr; }
  .g-duo__caps .g-link { order: 3; justify-self: start; }
  .g-duo__cap--dev { text-align: left; justify-items: start; }
}

/* ---------------- Sobre: fora da tela (varal de polaroids, bloco escuro com papel rasgado) ---------------- */
.g > .g-fotos { position: relative; padding: 0; border-top: 0; background: #0B1114; }
.g > .g-fotos + section { border-top: 0; }
.g-fotos__in {
  --paper: #0B1114; --paper-2: #172026; --ink: #EFEDE8; --ink-mute: rgba(239, 237, 232, .66); --ink-line: rgba(239, 237, 232, .16);
  --deep: var(--paper); --osso: var(--ink); --mute: var(--ink-mute); --line: var(--ink-line);
  position: relative; overflow: hidden; color: var(--ink);
  padding: clamp(90px, 11vw, 170px) var(--g-pad) clamp(110px, 13vw, 200px);
  /* luz quente por trás do varal */
  background: radial-gradient(70% 46% at 50% 58%, rgba(255, 190, 110, .13), transparent 70%), #0B1114;
}
.g-fotos .g-head__note { max-width: 50ch; }
/* título todo na serifada itálica: é a parte "à mão" da página */
.g-fotos__title { margin: 0; font: italic 400 clamp(46px, 7vw, 116px)/.92 var(--g-script); letter-spacing: -.015em; text-wrap: balance; }
.g-fotos__title em { font: inherit; color: var(--red); letter-spacing: inherit; }
/* borda de papel rasgado: o papel claro da seção vizinha entra por cima do bloco escuro */
.g-rasgo { position: absolute; left: 0; top: -1px; z-index: 2; display: block; width: 100%; height: clamp(26px, 4.2vw, 60px); fill: #EFEDE8; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); pointer-events: none; }
.g-rasgo__b { fill: #CFCBC2; }
.g-rasgo--baixo { top: auto; bottom: -1px; transform: scaleY(-1); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
/* o varal: uma fila comprida de fotos que anda sozinha devagar e dá pra arrastar */
.g-varal { margin: clamp(10px, 2vw, 30px) calc(var(--g-pad) * -1) 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; outline-offset: -6px; }
.g-varal::-webkit-scrollbar { display: none; }
.g-varal.is-drag { cursor: grabbing; }
.g-polas { --cell: clamp(230px, 23vw, 330px); margin: 0; padding: 0 0 70px; list-style: none; display: flex; width: max-content; }
/* cada foto pendura no ponto mais baixo do seu pedaço de fio; nas emendas ficam as luzinhas */
.g-pola {
  position: relative; flex: none; width: var(--cell); padding-top: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q50 51 100 3' fill='none' stroke='%23EFEDE8' stroke-opacity='.5' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% 40px no-repeat;
}
.g-pola--larga { width: calc(var(--cell) * 1.3); }
/* um pedaço de fio a mais em cada ponta, pra primeira e a última foto não colarem na borda */
.g-polas::before, .g-polas::after { content: ""; flex: none; width: var(--g-pad); height: 40px; background: linear-gradient(rgba(239, 237, 232, .5), rgba(239, 237, 232, .5)) 0 2px / 100% 1.5px no-repeat; }
.g-pola::before { /* luzinha */ content: ""; position: absolute; left: 0; top: 5px; z-index: 1; width: 9px; height: 13px; translate: -50% 0; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #FFD9A0; box-shadow: 0 0 14px 5px rgba(255, 190, 110, .55), 0 0 44px 16px rgba(255, 170, 80, .22); }
.g-pola figure { position: relative; width: 76%; margin: 0 auto; padding: clamp(8px, .9vw, 12px) clamp(8px, .9vw, 12px) 0; background: #FBFAF7; color: #0B1114; border-radius: 3px; rotate: var(--r, 0deg); transform-origin: 50% -10px; box-shadow: 0 36px 50px -22px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .3); }
.g-pola--larga figure { width: 84%; }
.g-pola figure::before { /* pregador */ content: ""; position: absolute; left: 50%; top: -26px; width: 13px; height: 38px; translate: -50% 0; border-radius: 3px; background: linear-gradient(90deg, #C99A62, #E3BC85 45%, #B9884F); box-shadow: inset 0 -14px 0 -11px rgba(60, 35, 10, .5), 0 3px 5px rgba(0, 0, 0, .4); }
.g-pola__img { aspect-ratio: 1 / 1.06; overflow: hidden; background: #E5E2DA; }
.g-pola--larga .g-pola__img { aspect-ratio: 4 / 3; }
.g-pola__img img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.g-pola figcaption { display: grid; place-items: center; min-height: clamp(50px, 4.6vw, 66px); padding: 6px 4px 10px; text-align: center; font: italic 400 clamp(18px, 1.6vw, 24px)/1 var(--g-script); text-wrap: balance; }
.g-varal__dica { margin-top: -34px; text-align: center; font: 400 11.5px/1 var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.g-varal__dica::before, .g-varal__dica::after { content: "←"; margin-inline: 12px; opacity: .6; }
.g-varal__dica::after { content: "→"; }
@media (prefers-reduced-motion: no-preference) {
  /* as fotos balançam de leve no fio, e as luzes piscam devagar */
  .g-pola figure { animation: g-sway var(--t, 6s) ease-in-out infinite alternate; }
  .g-pola::before { animation: g-twinkle var(--t, 4s) ease-in-out infinite alternate; }
  .g-fotos.is-away .g-pola figure, .g-fotos.is-away .g-pola::before { animation-play-state: paused; }
}
@keyframes g-sway { from { rotate: calc(var(--r, 0deg) - 1.6deg); } to { rotate: calc(var(--r, 0deg) + 1.6deg); } }
@keyframes g-twinkle { from { opacity: .55; } to { opacity: 1; } }
@media (max-width: 760px) {
  .g-polas { --cell: 64vw; padding-bottom: 56px; }
  .g-fotos__in { padding-bottom: clamp(70px, 16vw, 110px); }
}

/* O currículo fica sobre papel quadriculado (o mesmo da prancheta dos Serviços) */
.page-sobre .g > .g-cv {
  background-image:
    linear-gradient(rgba(11, 17, 20, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 17, 20, .09) 1px, transparent 1px),
    linear-gradient(rgba(11, 17, 20, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 17, 20, .04) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; background-position: -1px -1px;
}

/* ---------------- Sobre (peças reaproveitadas) ---------------- */
.g-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.g-about__art { position: relative; display: grid; justify-items: center; }
.g-about__disc { position: absolute; left: 50%; top: 2%; width: 82%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 1.5px var(--ink-line); }
.g-about__disc::after { content: ""; position: absolute; right: 8%; top: 8%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: var(--red); }
.g-about__art img { position: relative; width: min(100%, 520px); height: auto; margin-bottom: -1px; filter: drop-shadow(0 18px 22px rgba(11, 17, 20, .16)); }
.g-about__facts { position: relative; width: 100%; margin: 0; padding: 16px 0 0; list-style: none; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.g-about__facts span { display: block; margin-bottom: 5px; font: 400 11px/1 var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.g-about__text { display: grid; gap: clamp(18px, 2vw, 28px); justify-items: start; }
.g-about__text > p:not(.label):not(.g-lead) { max-width: 54ch; color: var(--ink-mute); font-size: 17px; }
.g-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g-tags li { padding: 9px 15px; border: 1px solid var(--ink-line); border-radius: 99px; font: 400 12.5px/1 var(--g-mono); letter-spacing: .02em; white-space: nowrap; }
.g-tags li:first-child { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.g-about__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(4px, 1vw, 12px); }
/* Na página Sobre esta é a primeira seção: sobra espaço pro cabeçalho fixo e a linha de cima some. */
.g > .g-about:first-child { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(120px, 13vw, 190px)); border-top: 0; }

/* ---------------- Currículo ---------------- */
.g-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 40px; }
.g-head--row > div { display: grid; gap: clamp(16px, 2vw, 26px); }
/* A "mesa": faixa escura onde ficam o crachá e a folha */
.g-desk {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: clamp(210px, 22vw, 290px) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: start;
  padding: 0 clamp(20px, 4vw, 64px) clamp(28px, 4.5vw, 64px);
  border-radius: clamp(18px, 2.4vw, 32px); background: var(--ink); color: var(--paper);
}
.g-desk::before {
  /* duas linhas finas cruzando a mesa */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(118deg, transparent calc(34% - .5px), rgba(239, 237, 232, .16) 34%, transparent calc(34% + .5px)),
    linear-gradient(63deg, transparent calc(72% - .5px), rgba(239, 237, 232, .1) 72%, transparent calc(72% + .5px));
}
.g-badge { position: relative; z-index: 3; display: grid; justify-items: center; padding-top: clamp(70px, 9vw, 130px); transform-origin: 50% 0; transform: translateY(var(--drop, 0px)) rotate(var(--swing, 0deg)); will-change: transform; }
.g-badge__strap { position: absolute; left: 50%; top: -900px; bottom: calc(100% - clamp(70px, 9vw, 130px) - 14px); width: 22px; translate: -50% 0; background: var(--red); box-shadow: inset 5px 0 0 rgba(255, 255, 255, .14), inset -5px 0 0 rgba(0, 0, 0, .12); }
.g-badge__card { position: relative; width: 100%; display: grid; gap: 6px; padding: 34px 16px 16px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(11, 17, 20, .1); }
.g-badge__clip { position: absolute; left: 50%; top: 10px; width: 54px; height: 11px; translate: -50% 0; border-radius: 99px; background: var(--ink); box-shadow: 0 0 0 4px var(--paper-2); }
.g-badge__photo { display: block; aspect-ratio: 1 / 1.08; margin-bottom: 8px; border-radius: 12px; overflow: hidden; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(11, 17, 20, .1); }
.g-badge__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.12) translateY(5%); }
.g-badge b { font: 400 clamp(15px, 1.5vw, 19px)/1.05 var(--g-sans); letter-spacing: -.045em; }
.g-badge__role { font: 400 11px/1.2 var(--g-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.g-badge__foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--ink-line); font: 400 10.5px/1.35 var(--g-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.g-badge__foot i { flex: none; width: 64px; height: 28px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px); }

/* A folha é rasgada embaixo: o recorte fica na folha e a sombra no invólucro (sombra não atravessa clip-path). */
.g-sheet-wrap { position: relative; margin-top: clamp(28px, 4.5vw, 64px); transform: rotate(.6deg); filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .6)); }
.g-sheet { position: relative; overflow: hidden; padding: clamp(22px, 3.4vw, 52px) clamp(22px, 3.4vw, 52px) clamp(48px, 5.4vw, 80px); border-radius: 6px 6px 0 0; background: var(--paper); color: var(--ink); clip-path: polygon(0 0, 100% 0, 100.0% calc(100% - 6px), 97.3% calc(100% - 7px), 95.3% calc(100% - 9px), 93.5% calc(100% - 6px), 91.7% calc(100% - 6px), 89.3% calc(100% - 12px), 88.0% calc(100% - 4px), 85.2% calc(100% - 11px), 81.8% calc(100% - 20px), 78.3% calc(100% - 5px), 75.5% calc(100% - 20px), 72.7% calc(100% - 10px), 69.5% calc(100% - 3px), 67.7% calc(100% - 17px), 65.7% calc(100% - 9px), 64.1% calc(100% - 1px), 60.6% calc(100% - 14px), 58.8% calc(100% - 16px), 57.5% calc(100% - 9px), 54.5% calc(100% - 1px), 53.3% calc(100% - 11px), 51.3% calc(100% - 11px), 49.2% calc(100% - 15px), 47.7% calc(100% - 4px), 44.5% calc(100% - 15px), 43.1% calc(100% - 17px), 40.1% calc(100% - 21px), 38.4% calc(100% - 3px), 35.2% calc(100% - 2px), 33.6% calc(100% - 11px), 30.6% calc(100% - 10px), 27.2% calc(100% - 0px), 24.2% calc(100% - 6px), 21.5% calc(100% - 12px), 19.5% calc(100% - 9px), 17.3% calc(100% - 21px), 15.1% calc(100% - 6px), 12.0% calc(100% - 1px), 9.4% calc(100% - 1px), 6.4% calc(100% - 15px), 3.9% calc(100% - 12px), 2.2% calc(100% - 8px), 0.0% calc(100% - 5px)); }
.g-sheet__tape { position: absolute; left: 50%; top: -15px; z-index: 2; width: clamp(90px, 11vw, 150px); height: 30px; translate: -50% 0; rotate: -2.5deg; background: rgba(229, 56, 59, .82); box-shadow: 0 2px 5px rgba(0, 0, 0, .25); }
.g-sheet__cafe { position: absolute; right: -40px; bottom: 60px; width: 190px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 7px rgba(140, 90, 40, .1), inset 0 0 0 9px rgba(140, 90, 40, .05); rotate: 20deg; clip-path: polygon(0 0, 100% 0, 100% 62%, 60% 100%, 0 100%); }
.g-sheet mark { padding: .05em .25em; margin: 0 -.1em; color: inherit; background: linear-gradient(100deg, transparent 1%, rgba(255, 214, 64, .85) 3%, rgba(255, 214, 64, .7) 96%, transparent 99%); border-radius: 3px; }
/* anotações à mão, em vermelho */
.g-sheet__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
.g-sheet__nota { position: relative; font: italic 400 clamp(19px, 1.9vw, 26px)/1 var(--g-script); color: var(--red); white-space: nowrap; pointer-events: none; }
.g-sheet__nota--a { rotate: -3deg; }
.g-sheet__nota--b { rotate: 3deg; padding: 3px 14px 6px; }
.g-sheet__circ { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-sheet__circ path { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; }
.g-sheet__selo { position: absolute; right: 4%; bottom: -34px; display: grid; place-items: center; padding: 8px 12px 7px; rotate: -9deg; border: 2px solid var(--red); border-radius: 6px; color: var(--red); font: 400 13px/1 var(--g-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .78; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--red); pointer-events: none; }
.g-sheet__selo small { margin-top: 4px; font-size: 10px; letter-spacing: .2em; }
.g-sheet__chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.g-sheet__chips li { padding: 7px 11px; border-radius: 99px; font: 400 12px/1 var(--g-mono); box-shadow: inset 0 0 0 1px var(--ink-line); }
.g .g-sheet__resto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 8px 18px; margin-top: clamp(32px, 3.6vw, 52px); padding-bottom: clamp(14px, 2vw, 30px); color: #EFEDE8; }
.g-sheet__resto span { font: italic 400 clamp(20px, 2vw, 28px)/1 var(--g-script); color: rgba(239, 237, 232, .7); }
.g-sheet__resto a { font-weight: 600; font-size: 15px; color: #EFEDE8; text-decoration: none; padding-bottom: 4px; border-bottom: 1.5px solid #EFEDE8; transition: color .3s, border-color .3s; }
.g-sheet__resto a:hover { color: var(--red); border-color: var(--red); }
.g-sheet a { text-decoration: none; }
.g-sheet a:hover { color: var(--red); }
.g-sheet__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px 32px; padding-bottom: clamp(18px, 2.2vw, 28px); border-bottom: 1.5px solid var(--ink); }
.g-sheet__hi { font: italic 400 clamp(22px, 2.4vw, 34px)/1 var(--g-script); color: var(--red); }
.g-sheet__name { margin: 2px 0 10px; font: 300 clamp(28px, 3.6vw, 56px)/1 var(--g-sans); letter-spacing: -.055em; }
.g-sheet__role { font: 400 12px/1.3 var(--g-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); }
.g-sheet__contact { margin: 0; padding: 0; list-style: none; text-align: right; font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.g-sheet__bio { margin-top: clamp(18px, 2.2vw, 28px) !important; max-width: 70ch; font-size: 16px; line-height: 1.55; }
.g-sheet__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 64px); }
.g-sheet h4 { display: flex; align-items: center; gap: 10px; margin: clamp(24px, 3vw, 38px) 0 14px; font: 400 11.5px/1 var(--g-mono); letter-spacing: .14em; text-transform: uppercase; }
.g-sheet h4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.g-sheet__items, .g-sheet__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.g-sheet__items li { position: relative; display: grid; gap: 3px; }
.g-sheet__items span { font: 400 11px/1 var(--g-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.g-sheet__items b { font: 400 clamp(15px, 1.4vw, 18px)/1.2 var(--g-sans); letter-spacing: -.04em; }
.g-sheet__items p, .g-sheet__tools dd { color: var(--ink-mute); font-size: 14.5px; line-height: 1.5; }
.g-sheet__list { gap: 10px; font-size: 14.5px; line-height: 1.45; }
.g-sheet__list li { padding-left: 18px; position: relative; }
.g-sheet__list li::before { content: "→"; position: absolute; left: 0; color: var(--red); }
.g-sheet__tools { margin: 0; display: grid; gap: 10px; }
.g-sheet__tools div { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: baseline; }
.g-sheet__tools dt { font: 400 11px/1 var(--g-mono); letter-spacing: .06em; text-transform: uppercase; }
.g-sheet__tools dd { margin: 0; }
@media (max-width: 900px) {
  .g-desk { grid-template-columns: 1fr; gap: 0; }
  .g-badge { width: min(240px, 70%); justify-self: center; padding-top: 64px; }
  .g-badge__strap { bottom: calc(100% - 64px - 14px); }
  .g-sheet-wrap { transform: none; }
  .g-sheet__selo { right: 0; bottom: -26px; }
  .g-sheet__cols { grid-template-columns: 1fr; }
  .g-sheet__top { grid-template-columns: 1fr; }
  .g-sheet__contact { text-align: left; }
}

/* Impressão / PDF: só a folha do currículo, em A4 */
/* ---------------- Projetos em destaque (Início) ----------------
   Bloco escuro no meio da página clara. Em cima e embaixo, ondas: dois SVGs com o dobro da largura
   que deslizam meia largura e recomeçam (o desenho se repete, então não tem emenda). */
.g > .g-work { padding: 0; border-top: 0; }
.g > .g-work + section { border-top: 0; }
.g-work__in {
  /* aqui dentro as cores se invertem de novo: claro sobre escuro */
  --paper: #0B1114; --paper-2: #172026; --ink: #EFEDE8; --ink-mute: rgba(239, 237, 232, .62); --ink-line: rgba(239, 237, 232, .16);
  --deep: var(--paper); --osso: var(--ink); --mute: var(--ink-mute); --line: var(--ink-line);
  padding: clamp(36px, 5vw, 80px) var(--g-pad) clamp(56px, 8vw, 120px); background: #0B1114; color: var(--ink);
}
.g .g-work__in .btn:hover { background: #fff; }
.g-work__in .g-card { background: #151D21; box-shadow: inset 0 0 0 1px rgba(239, 237, 232, .1), 0 30px 50px -28px rgba(0, 0, 0, .7); }
.g-wave { position: relative; height: clamp(44px, 8vw, 120px); overflow: hidden; margin-bottom: -1px; }
.g-wave--bottom { margin: -1px 0 0; transform: scaleY(-1); }
.g-wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; fill: #0B1114; }
.g-wave svg:first-child { opacity: .28; }
@media (prefers-reduced-motion: no-preference) {
  .g-wave svg { animation: g-wave 22s linear infinite; will-change: transform; }
  .g-wave svg:first-child { animation-duration: 34s; animation-direction: reverse; }
  .g-wave--bottom svg { animation-duration: 28s; }
  .g-work.is-away .g-wave svg, .g-me.is-away .g-wave svg { animation-play-state: paused; }
}
@keyframes g-wave { to { transform: translateX(-50%); } }
.g-cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.g-card { display: flex; flex-direction: column; padding: 8px; border-radius: 20px; background: var(--ink); color: var(--paper); box-shadow: 0 30px 50px -28px rgba(11, 17, 20, .5); transition: translate .5s var(--ease); }
/* A capa do site. */
.g-card__thumb { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 13px; background: #000; box-shadow: inset 0 0 0 1px rgba(239, 237, 232, .12); }
.g-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 1.2s var(--ease); }
.g-card__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 12px; }
/* Projeto ainda sem imagem: o nome escrito no lugar da capa. */
.g-card__thumb--empty { display: grid; place-content: center; text-align: center; background: #151D21; color: #EFEDE8; }
.g-card__thumb--empty b { display: block; font: 300 clamp(22px, 2.4vw, 34px)/1.05 var(--g-sans); letter-spacing: -.05em; }
.g-card__thumb--empty small { display: block; margin-top: 10px; font: 400 11px/1.3 var(--g-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(239, 237, 232, .6); }
/* Faixa com nome e tipo por cima da capa: escondida até passar o mouse; em telas de toque fica sempre visível. */
.g-card__cap { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 2px; padding: 38px 14px 12px; background: linear-gradient(to top, rgba(11, 17, 20, .92), rgba(11, 17, 20, .55) 55%, transparent); color: #EFEDE8; transition: opacity .3s, translate .3s var(--ease); }
.g-card__cap b { font: 400 clamp(15px, 1.25vw, 18px)/1.1 var(--g-sans); letter-spacing: -.045em; }
.g-card__cap small { font-size: 12.5px; color: rgba(239, 237, 232, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .g-card__cap { opacity: 0; translate: 0 10px; }
  .g-card__thumb:hover .g-card__cap, .g-card__thumb:focus-visible .g-card__cap { opacity: 1; translate: 0; }
  .g-card:hover { translate: 0 -6px; }
  .g-card__thumb:hover img { scale: 1.04; }
}

/* ---------------- Serviços e stack ---------------- */
.g-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--ink-line); }
.g-list li { display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 4fr); gap: 12px 32px; align-items: baseline; padding: clamp(20px, 2.6vw, 34px) 0; border-top: 1px solid var(--ink-line); }
.g-list span { font: 400 13px/1 var(--g-mono); color: var(--red); }
.g-list h3 { margin: 0; font: 300 clamp(24px, 3.3vw, 52px)/1 var(--g-sans); letter-spacing: -.05em; transition: transform .5s var(--ease); }
.g-list p { color: var(--ink-mute); font-size: 16px; max-width: 42ch; }
@media (hover: hover) { .g-list li:hover h3 { transform: translateX(14px); } }
.g-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 80px); }

/* Faixa preta com as tecnologias (ícone + nome). Sem JS, ou com "reduzir movimento", vira uma lista que quebra linha. */
.g-band { margin-inline: calc(var(--g-pad) * -1); padding: clamp(22px, 3vw, 40px) var(--g-pad); background: var(--ink); color: var(--paper); }
.g-band > ul, .g-belt__set { display: flex; gap: clamp(8px, 1vw, 14px); margin: 0; padding: 0; list-style: none; }
.g-band > ul { flex-wrap: wrap; }
.g-band li, .g-chip {
  display: flex; align-items: center; gap: clamp(10px, 1.1vw, 16px); flex: none;
  padding: clamp(11px, 1.2vw, 17px) clamp(18px, 2vw, 30px) clamp(11px, 1.2vw, 17px) clamp(13px, 1.4vw, 20px);
  border: 1px solid rgba(239, 237, 232, .18); border-radius: 99px;
  font: 300 clamp(16px, 1.9vw, 28px)/1 var(--g-sans); letter-spacing: -.045em; white-space: nowrap;
  transition: background .25s, border-color .25s;
}
.g-band svg { flex: none; width: clamp(20px, 2.2vw, 32px); height: clamp(20px, 2.2vw, 32px); fill: currentColor; }
@media (hover: hover) { .g-band li:hover, .g-chip:hover { background: var(--red); border-color: var(--red); } }
.g-stack.is-live .g-band { padding-inline: 0; }
.g-stack.is-live .g-band > ul { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.g-stack__hint { margin-left: auto; white-space: nowrap; font: 400 11px/1 var(--g-mono); letter-spacing: .08em; text-transform: none; color: var(--ink-mute); }
.g-belts { display: grid; gap: clamp(8px, 1vw, 14px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.g-belts.is-dragging { cursor: grabbing; }
.g-belt { display: flex; gap: clamp(8px, 1vw, 14px); width: max-content; will-change: transform; }
.g-belt__set { flex: none; }

/* ---------------- Serviços: prancheta ----------------
   O lado "dev" da página: papel quadriculado e a lista como um arquivo aberto num editor de código.
   Vale enquanto a <section class="g-services"> tiver data-estilo="prancheta" (tirando o atributo, volta a lista simples). */
.g > .g-services[data-estilo="prancheta"] {
  background-image:
    linear-gradient(rgba(11, 17, 20, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 17, 20, .09) 1px, transparent 1px),
    linear-gradient(rgba(11, 17, 20, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 17, 20, .04) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; background-position: -1px -1px;
}
.g-services[data-estilo="prancheta"]::after { content: "grade 32 px · servicos.tsx · 5 itens"; position: absolute; right: var(--g-pad); top: clamp(24px, 3vw, 40px); font: 400 11px/1 var(--g-mono); letter-spacing: .06em; color: var(--ink-mute); }
.g-services[data-estilo="prancheta"] .g-list { border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: #F7F6F2; box-shadow: 10px 10px 0 rgba(11, 17, 20, .1); }
.g-services[data-estilo="prancheta"] .g-list::before {
  /* barra do editor: três bolinhas e o nome do arquivo */
  content: "servicos.tsx"; display: block; padding: 14px 18px 14px 78px; border-bottom: 1.5px solid var(--ink);
  font: 400 12px/1 var(--g-mono); letter-spacing: .04em; color: var(--ink-mute);
  background:
    radial-gradient(circle at 22px 50%, var(--red) 5px, transparent 5.6px),
    radial-gradient(circle at 40px 50%, rgba(11, 17, 20, .22) 5px, transparent 5.6px),
    radial-gradient(circle at 58px 50%, rgba(11, 17, 20, .22) 5px, transparent 5.6px), var(--paper-2);
}
.g-services[data-estilo="prancheta"] .g-list li { position: relative; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 4fr); gap: 8px 28px; align-items: center; padding: clamp(16px, 1.9vw, 26px) 24px clamp(16px, 1.9vw, 26px) 0; border-top: 1px dashed var(--ink-line); transition: background .3s; }
.g-services[data-estilo="prancheta"] .g-list li:first-of-type { border-top: 0; }
.g-services[data-estilo="prancheta"] .g-list span { align-self: stretch; display: grid; align-items: center; justify-items: end; padding-right: 16px; border-right: 1px solid var(--ink-line); color: var(--ink-mute); }
.g-services[data-estilo="prancheta"] .g-list h3 { font-size: clamp(20px, 2.5vw, 38px); }
.g-services[data-estilo="prancheta"] .g-list h3::before { content: "<"; }
.g-services[data-estilo="prancheta"] .g-list h3::after { content: " />"; }
.g-services[data-estilo="prancheta"] .g-list h3::before, .g-services[data-estilo="prancheta"] .g-list h3::after { font: 400 .62em/1 var(--g-mono); letter-spacing: 0; color: var(--red); vertical-align: .12em; }
.g-services[data-estilo="prancheta"] .g-list p { font: 400 13.5px/1.55 var(--g-mono); letter-spacing: -.01em; max-width: 46ch; }
.g-services[data-estilo="prancheta"] .g-list p::before { content: "// "; color: var(--red); }
/* ao passar o mouse a linha "roda": fica marcada e uma barra vermelha corre embaixo */
.g-services[data-estilo="prancheta"] .g-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
@media (hover: hover) {
  .g-services[data-estilo="prancheta"] .g-list li:hover { background: rgba(11, 17, 20, .045); }
  .g-services[data-estilo="prancheta"] .g-list li:hover::after { transform: scaleX(1); }
}
@media (max-width: 760px) {
  .g-services[data-estilo="prancheta"]::after { display: none; }
  .g-services[data-estilo="prancheta"] .g-list li { grid-template-columns: 44px minmax(0, 1fr); padding-right: 16px; }
  .g-services[data-estilo="prancheta"] .g-list span { grid-row: 1 / span 2; padding-right: 10px; }
}

/* ---------------- Contato ---------------- */
.g > .g-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 80px); align-items: end; padding-bottom: 0; }
.g-contact__text { display: grid; gap: clamp(18px, 2.2vw, 30px); justify-items: start; padding-bottom: clamp(64px, 9vw, 130px); }
.g-contact__text .g-lead { max-width: 30ch; }
.g-contact__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.g-contact__list { width: 100%; max-width: 640px; margin: clamp(8px, 1.4vw, 20px) 0 0; padding: 0; list-style: none; }
.g-contact__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 0; border-top: 1px solid var(--ink-line); }
.g-contact__list li:last-child { border-bottom: 1px solid var(--ink-line); }
.g-contact__list span { font: 400 11px/1 var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.g-contact__list a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; text-align: right; transition: color .3s; }
.g-contact__list a:hover { color: var(--red); }
.g-contact__art { position: relative; align-self: end; }
.g-contact__art img { width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(11, 17, 20, .16)); }
.g-bubble { position: absolute; right: 62%; top: 4%; z-index: 2; width: max-content; max-width: 210px; padding: 13px 16px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; line-height: 1.3; }

/* ---------------- Contato com quadro de conversa (Início) ----------------
   O quadro é uma chamada pra página de contato: o link .g-chat__all cobre o quadro inteiro,
   e as respostas e o campo de baixo são links por cima dele. */
.g > .g-contact--chat { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; padding-bottom: clamp(64px, 9vw, 130px); }
.g-contact--chat .g-contact__text { padding-bottom: 0; }
.g-chat { position: relative; justify-self: end; width: 100%; max-width: 500px; border-radius: 28px; overflow: hidden; background: #0B1114; color: #EFEDE8; box-shadow: 0 44px 70px -34px rgba(11, 17, 20, .6); }
.g-chat__all { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.g-chat__top, .g-chat__body { position: relative; pointer-events: none; }
.g-chat__opts, .g-chat__free { position: relative; z-index: 1; }
.g-chat__top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(239, 237, 232, .12); }
.g-chat__ava { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #222224; box-shadow: 0 0 0 1px rgba(239, 237, 232, .2); }
.g-chat__ava img { width: 100%; height: 100%; object-fit: cover; }
.g-chat__top b { display: block; font: 400 15px/1.1 var(--g-sans); letter-spacing: -.045em; }
.g-chat__top small { display: flex; align-items: center; gap: 7px; margin-top: 5px; font: 400 11px/1 var(--g-mono); letter-spacing: .04em; color: rgba(239, 237, 232, .6); }
.g-chat__top small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #46D07F; }
.g-chat__body { display: grid; gap: 8px; justify-items: start; padding: 22px 20px 6px; }
.g-chat__msg { max-width: 84%; padding: 12px 15px; border-radius: 4px 16px 16px 16px; background: #1B252B; font-size: 15px; line-height: 1.35; }
.g-chat__opts { display: grid; gap: 8px; justify-items: end; padding: 14px 20px 20px; pointer-events: none; }
.g-chat__opts p { justify-self: end; margin-bottom: 2px; font: 400 10.5px/1 var(--g-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(239, 237, 232, .5); }
.g-chat__opts a { pointer-events: auto; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--red); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background .25s, color .25s, translate .3s var(--ease); }
.g-chat__opts a:hover { background: #fff; color: #0B1114; translate: -6px 0; }
/* "Ou escreva do seu jeito": campo de mensagem com botão de enviar (igual ao da página de contato) */
.g-chat__free { display: flex; align-items: center; gap: 10px; margin: 0 20px 20px; text-decoration: none; }
.g-chat__free span:first-child { flex: 1; min-width: 0; padding: 15px 18px; border: 1px solid rgba(239, 237, 232, .22); border-radius: 14px; background: rgba(239, 237, 232, .05); color: rgba(239, 237, 232, .55); font-size: 15.5px; line-height: 1.2; transition: border-color .25s, color .25s; }
.g-chat__free span:last-child { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #EFEDE8; color: #0B1114; font: 700 18px/1 var(--text); transition: background .25s, color .25s; }
.g-chat__free:hover span:first-child { border-color: rgba(239, 237, 232, .6); color: #EFEDE8; }
.g-chat__free:hover span:last-child { background: var(--red); color: #fff; }
/* Entrada do quadro (gustavo.js, uma vez só): cada fala mostra os três pontinhos e depois o texto; as respostas entram em seguida. */
.g-chat.is-live .g-chat__msg:not(.is-in):not(.is-typing), .g-chat.is-live .g-chat__opts > :not(.is-in), .g-chat.is-live .g-chat__free:not(.is-in) { opacity: 0; translate: 0 10px; pointer-events: none; }
.g-chat.is-live .g-chat__msg, .g-chat.is-live .g-chat__free { transition: opacity .45s var(--ease), translate .45s var(--ease); }
.g-chat.is-live .g-chat__opts > * { transition: opacity .45s var(--ease), translate .45s var(--ease), background .25s, color .25s; }
.g-chat__msg.is-typing > span { display: none; }
.g-chat__dots { display: flex; gap: 5px; padding: 4px 2px; }
.g-chat__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(239, 237, 232, .55); animation: g-dot 1s ease-in-out infinite; }
.g-chat__dots i:nth-child(2) { animation-delay: .15s; } .g-chat__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes g-dot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.g-chat :focus-visible { outline-color: #EFEDE8; outline-offset: -4px; }
@media (max-width: 900px) {
  /* no celular: título, depois o quadro (a ação principal) e só então os outros contatos */
  .g > .g-contact--chat { gap: 18px; }
  .g-contact--chat .g-contact__text { display: contents; }
  .g-chat { justify-self: center; order: 1; margin-top: 10px; }
  .g-contact--chat .g-contact__list { order: 2; }
  .g-contact--chat .g-contact__go { order: 2; justify-self: start; margin-top: 8px; }
}

/* ---------------- Celular e tablet em pé ---------------- */
@media (max-width: 900px) {
  .g-about, .g > .g-contact { grid-template-columns: 1fr; }
  .g-me__in { grid-template-columns: 1fr; grid-template-areas: "text" "art" "facts"; min-height: 0; }
  .g-me__fig { width: min(74%, 400px); }
  .g-me__art .g-about__disc { width: min(60%, 330px); }
  .g-me__tag--a { left: 0; } .g-me__tag--b { right: 0; }
  .g-pilares { grid-template-columns: 1fr; }
  .g-about__art img { width: min(78%, 420px); }
  .g-contact__text { padding-bottom: 8px; }
  .g-contact__art { width: min(78%, 400px); justify-self: center; }
  .g-bubble { right: auto; left: -14%; top: -7%; max-width: 170px; }
}
/* Capa empilhada: celular e qualquer tela em pé */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .g > .g-hero { padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .g-stage { width: min(100%, 560px); }
  .g-row { flex-wrap: wrap; column-gap: 5cqw; }
  .g-face { order: -1; width: 74cqw; margin: 0 13cqw -9cqw; }
  .g-word { font-size: 24cqw; }
  /* o "&" vai pro meio do título: "Dev &" numa linha, "Web" na outra */
  .g-face .g-amp { display: none; }
  .g-amp--m { display: grid; position: static; flex: none; align-self: center; width: 15cqw; height: 15cqw; font-size: 12cqw; margin-top: 2cqw; }
  .g-under { grid-template-columns: 1fr; gap: 12cqw; margin-top: 5cqw; justify-items: center; }
  .g-slot { --fs: 34cqw; --pad: 1cqw 4cqw 3cqw 3cqw; order: -1; margin-right: 0; }
  /* no celular a etiqueta fica à esquerda da seta, pra não sair da tela */
  .g-cursor b { position: absolute; right: 100%; top: 8px; margin: 0; border-radius: 10px 4px 10px 10px; }
  .g-cursor b { font-size: 11px; }
  .g-intro { max-width: none; justify-items: center; text-align: center; }
  .g-intro p { font-size: 15px; max-width: 34ch; }
  .g-cats { display: grid; grid-template-columns: 1fr 1fr; letter-spacing: .14em; }
  .g-cats li:nth-child(even) { text-align: right; }
}
@media (max-width: 760px) {
  .g-list li { grid-template-columns: 40px minmax(0, 1fr); }
  .g-list p { grid-column: 2; }
  .g-about__facts { grid-template-columns: 1fr 1fr; }
  .g-contact__list li { flex-direction: column; gap: 6px; }
  .g-contact__list a { text-align: left; }
}