@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#101211;--surface:#181b18;--text:#f1f2ed;--muted:#92978e;--accent:#c3f85c;--line:#2c302b;--font:'DM Sans',sans-serif;--display:'Space Grotesk',sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 var(--font);overflow-wrap:break-word}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,label{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,label:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:var(--accent);color:var(--bg)}.wrap{width:min(1180px,calc(100% - 112px));margin-inline:auto}.header{height:104px;width:min(1320px,calc(100% - 112px));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font:700 36px/1 var(--display);letter-spacing:-3px}.brand span,.accent{color:var(--accent)}nav{display:flex;gap:36px;align-items:center;font-size:13px}nav a{color:#b4b9b0;transition:color .2s}nav a:hover,nav a.active{color:var(--accent)}nav .nav-contact{color:var(--text);margin-left:18px;border:1px solid #4a5045;border-radius:6px;padding:11px 17px}.nav-contact span{margin-left:20px}.menu-toggle{display:none}.hero{padding-top:87px;display:grid;grid-template-columns:1.3fr .9fr;column-gap:90px;position:relative}.eyebrow,.small-label{font:500 11px/1.6 var(--display);letter-spacing:1.8px}.eyebrow{margin:0 0 26px;color:#b8bdb2}.status-dot{width:6px;height:6px;display:inline-block;background:var(--accent);border-radius:50%;margin-right:10px;box-shadow:0 0 12px #c3f85c25;vertical-align:middle}h1,h2,h3,p{margin-top:0}h1{font:500 clamp(70px,7.7vw,112px)/.99 var(--display);letter-spacing:-6px;margin-bottom:30px}.hero-description{font-size:21px;line-height:1.6;letter-spacing:-.5px;margin-bottom:14px;color:#c2c7bc}.hero-description strong{color:var(--text);font-weight:500}.hero-sub{max-width:400px;font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:32px}.hero-actions{display:flex;gap:26px;align-items:center}.button{border:0;border-radius:5px;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:15px 20px;font-size:13px;font-weight:600;transition:transform .2s,background .2s}.primary{background:var(--accent);color:#17200c}.primary:hover{background:#d2ff83;transform:translateY(-3px)}.text-link{font-size:12px;color:#c1c6bb}.text-link span{margin-left:12px}.portrait-column{padding-top:14px}.portrait{aspect-ratio: .88;background:#20261c;position:relative;border:1px solid #46503c;border-radius:3px;isolation:isolate}.portrait:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,#849a5730,transparent 65%);z-index:-1}.portrait-grid{position:absolute;inset:0;background-image:linear-gradient(#a0b5790b 1px,transparent 1px),linear-gradient(90deg,#a0b5790b 1px,transparent 1px);background-size:36px 36px;z-index:-1}.photo-index{position:absolute;top:22px;left:23px;font:10px var(--display);letter-spacing:2px;color:#8b987b}.monogram{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 clamp(80px,10vw,145px) var(--display);letter-spacing:-13px;color:#a7be7a}.monogram span{color:var(--accent)}.portrait img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;border-radius:3px}.portrait:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#11170edf);pointer-events:none;z-index:1}.photo-caption{position:absolute;bottom:65px;left:25px;z-index:2;display:flex;flex-direction:column}.photo-caption span{font:500 19px var(--display)}.photo-caption small{font-size:11px;color:#b2bba7;margin-top:4px}.photo-picker{position:absolute;bottom:22px;left:25px;z-index:2;font-size:10px;color:#c4cdb8;cursor:pointer;border-bottom:1px solid #687854;padding-bottom:2px}.photo-picker:hover{color:var(--accent)}.corner{width:15px;height:15px;position:absolute;z-index:3;border-color:var(--accent)}.top-left{top:-1px;left:-1px;border-left:2px solid;border-top:2px solid;color:var(--accent)}.bottom-right{bottom:-1px;right:-1px;border-right:2px solid;border-bottom:2px solid;color:var(--accent)}.portrait-note{position:relative;display:flex;align-items:center;gap:17px;padding:16px 20px;background:#1b1e19;border:1px solid #353d2e;border-radius:5px;margin:-17px -16px 0 35px;z-index:4;box-shadow:0 12px 30px #0003}.code-mark{font:22px var(--display);color:var(--accent)}.portrait-note>span:nth-child(2){font-size:11px;line-height:1.5;color:#929b87}.portrait-note strong{font-weight:500;color:#d2d9c8}.mini-arrow{margin-left:auto;color:var(--accent)}.feedback{font-size:11px;color:var(--muted);margin:8px 0 0}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:72px;padding:25px 0;border-bottom:1px solid var(--line);font:9px var(--display);letter-spacing:1.5px;color:#7f8778}.hero-bottom a{letter-spacing:.3px;font:11px var(--font)}.hero-bottom a span{margin-left:30px}.section{display:grid;grid-template-columns:1fr 1fr;gap:110px;padding-block:110px;border-bottom:1px solid var(--line)}h2{font:500 clamp(34px,4vw,50px)/1.13 var(--display);letter-spacing:-2px;margin-bottom:24px}.muted{color:#747d6b}.section-heading>p:last-child{color:var(--muted);font-size:14px;max-width:270px}.about-copy{padding-top:38px}.large-copy{font:400 26px/1.5 var(--display);letter-spacing:-.7px}.about-copy>p:not(.large-copy){font-size:14px;color:var(--muted);line-height:1.9}.focus-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.focus-tags span,.tag{font:10px var(--display);border:1px solid #383f32;padding:7px 11px;border-radius:4px;color:#bac4ad}.timeline{padding-top:7px}.timeline-item{border-left:1px solid #384330;padding:0 0 36px 28px;position:relative}.timeline-item:last-child{padding-bottom:0}.timeline-dot{position:absolute;left:-5px;top:5px;width:9px;height:9px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px var(--bg)}.small-label{color:#8f9d7d;font-size:9px;margin-bottom:13px}.timeline h3{font:500 22px var(--display);letter-spacing:-.5px;margin-bottom:4px}.timeline-role{color:#c2cbb6;font-size:12px;margin-bottom:16px}.timeline-item>p:not(.small-label):not(.timeline-role){color:var(--muted);font-size:13px}.timeline-item .tag{display:inline-block}.pending{padding-top:5px}.pending .timeline-dot{background:#535d48;top:10px}.pending h3{color:#a2aa98;font-size:19px}.projects-section{padding-block:102px;background:#141713;border-bottom:1px solid var(--line)}.projects-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:35px}.projects-heading h2{margin-bottom:0}.projects-heading>p{font-size:13px;color:#acb4a1;max-width:310px;margin-bottom:3px}.demo-note{display:block;font-size:11px;color:#7b8670;margin-top:8px}.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.project-card{border:1px solid #343c2d;border-radius:7px;overflow:hidden;background:#181c16;transition:border-color .25s,transform .25s}.project-card:hover{border-color:#6c8050;transform:translateY(-5px)}.project-visual{height:230px;background:#20271c;border-bottom:1px solid #343c2d;padding:35px 32px;overflow:hidden}.api-art{background:radial-gradient(ellipse at top left,#39462c80,transparent),#1e251a}.endpoint{border:1px solid #4d5d3d;background:#252f1e;border-radius:5px;padding:10px 13px;font:10px monospace;color:#d1dac6;display:flex;align-items:center;gap:12px}.endpoint>span{color:var(--accent);font-size:9px}.endpoint b{margin-left:auto;color:#93a67c;font-weight:400}.response{font:10px monospace;padding:15px 13px;color:#a0b38a}.response>span{font-size:9px;color:var(--accent)}pre{line-height:1.8;font-size:10px;margin-top:9px;color:#bdc8b0;white-space:pre-wrap}.architecture-art{display:flex;flex-direction:column;justify-content:center;background-image:radial-gradient(#78945d30 .7px,transparent .7px);background-size:14px 14px}.architecture-label{font:8px var(--display);letter-spacing:2px;color:#91a27b;margin-bottom:22px}.flow{display:flex;align-items:center;justify-content:space-between;gap:9px}.flow>span{border:1px solid #536542;border-radius:4px;font:9px var(--display);padding:17px 12px;background:#252f1e}.flow>i{font-style:normal;color:#7d965f}.flow .flow-main{border-color:#94b75b;color:var(--accent);text-align:center;padding:15px 22px;font-size:14px;line-height:1.5}.flow-main small{font-size:7px;letter-spacing:2px}.flow-caption{font:8px var(--display);color:#9aaa8a;margin-top:23px;letter-spacing:.5px}.flow-caption .status-dot{width:4px;height:4px}.project-info{padding:25px 28px}.project-info h3{font:500 22px/1.3 var(--display);letter-spacing:-.7px;margin-bottom:12px}.project-info>p:not(.small-label){font-size:12px;color:#98a28d;line-height:1.8;max-width:350px}.project-footer{display:flex;align-items:center;justify-content:space-between;margin-top:24px}.round-link{width:38px;height:38px;border:1px solid #48573a;border-radius:50%;background:transparent;color:#c5d2b3;font-size:19px;transition:background .2s,color .2s}.round-link:hover{background:var(--accent);color:var(--bg)}.contact-section{padding-block:104px}.contact-section h2{font-size:clamp(37px,5.3vw,66px);max-width:800px;letter-spacing:-2.8px}.contact-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-top:35px}.contact-bottom>p{font-size:13px;color:var(--muted);margin:0}.contact-links{display:flex;gap:20px;flex-wrap:wrap}.contact-links a{border-bottom:1px solid #596846;padding-bottom:5px;font-size:13px}.contact-links a:hover{color:var(--accent)}.contact-placeholder{font-size:12px;color:#b0bba2;border-bottom:1px solid #48543b;padding-bottom:6px}.contact-placeholder span{margin-left:15px;color:var(--accent)}.footer{padding-block:29px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.footer .brand{font-size:28px}.footer>span,.footer>a:last-child{font-size:10px;color:#858e7b}.footer>a:last-child span{margin-left:20px}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--accent);color:#111;padding:8px 15px}.skip:focus{top:12px}dialog{background:#1c2218;color:var(--text);border:1px solid #536444;border-radius:10px;padding:42px;max-width:510px;width:calc(100% - 36px)}dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}dialog h2{font-size:30px;letter-spacing:-1px}dialog>p:not(.eyebrow){color:#a6b398;font-size:14px}.dialog-close{position:absolute;right:14px;top:10px;background:none;border:0;color:#b7c7a4;font-size:28px;width:36px;height:36px}.dialog-note{border-top:1px solid #394630;padding-top:18px}.dialog-done{margin-top:10px}.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .4s ease var(--delay,0ms),transform .4s ease var(--delay,0ms)}.motion-ready .reveal.visible{opacity:1;transform:none}
@media(min-width:1500px){.hero{padding-top:105px}.portrait{max-height:470px}.hero-bottom{margin-top:90px}}@media(max-width:1000px){.wrap,.header{width:calc(100% - 64px)}.hero{column-gap:45px;padding-top:60px}.hero-actions{gap:16px;flex-wrap:wrap}h1{letter-spacing:-4px}.section{gap:55px}.project-visual{padding:30px 20px}.flow>span{padding:15px 8px}.flow .flow-main{padding:12px 15px}.portrait-note{margin-left:15px;margin-right:-5px}.hero-description{font-size:18px}.projects-heading>p{max-width:250px}}
@media(max-width:700px){html{scroll-padding-top:22px}.wrap,.header{width:calc(100% - 40px)}.header{height:80px;position:relative;z-index:10}.brand{font-size:32px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;border:1px solid #414a37;background:transparent;border-radius:5px;padding:12px}.menu-toggle span{height:1px;background:#d2dec5;width:100%;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}nav{display:none;position:absolute;top:70px;left:0;right:0;padding:20px;background:#1b2117;border:1px solid #38432e;border-radius:5px;box-shadow:0 10px 40px #0008}nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}nav a{padding:12px;min-height:44px}nav .nav-contact{margin:10px 0 0}.hero{grid-template-columns:1fr;padding-top:51px;gap:35px}.eyebrow{font-size:9px;letter-spacing:1.5px;margin-bottom:24px}h1{font-size:82px;letter-spacing:-5px;margin-bottom:25px}.hero-description{font-size:20px}.hero-sub{max-width:360px}.hero-actions{gap:23px}.button{padding:15px 18px;min-height:48px}.text-link{padding-block:12px}.portrait-column{width:min(100%,380px);padding:0;justify-self:center}.portrait{aspect-ratio:1.08}.monogram{font-size:120px}.photo-caption{bottom:65px}.photo-picker{padding:8px 0;bottom:15px}.portrait-note{margin-left:30px;margin-right:0}.hero-bottom{margin-top:8px;padding-block:22px;gap:16px;font-size:8px;line-height:1.7;align-items:center}.hero-bottom>span{max-width:160px}.hero-bottom a{font-size:9px;white-space:nowrap}.hero-bottom a span{margin-left:8px}.section{grid-template-columns:1fr;padding-block:65px;gap:20px}.section-heading h2{font-size:38px}.about-copy{padding-top:0}.large-copy{font-size:24px}.timeline{margin-top:15px;margin-left:4px}.projects-section{padding-block:65px}.projects-heading{display:block}.projects-heading h2{font-size:38px;margin-bottom:20px}.projects-heading>p{max-width:330px}.projects-grid{grid-template-columns:1fr;gap:24px}.project-visual{height:225px;padding:32px 25px}.flow{justify-content:center;gap:12px}.flow>span{padding:17px 10px}.flow .flow-main{padding:14px 22px}.project-info{padding:23px}.round-link{width:44px;height:44px}.contact-section{padding-block:70px}.contact-section h2{font-size:38px;letter-spacing:-1.8px}.contact-bottom{align-items:flex-start;flex-direction:column;gap:28px}.contact-links a{padding-block:10px}.footer{gap:15px;flex-wrap:wrap}.footer>span{font-size:9px}.footer>a:last-child{font-size:9px}.footer>a:last-child span{margin-left:6px}.motion-ready .reveal{transform:translateY(10px)}}
@media(max-width:360px){h1{font-size:70px}.hero-actions{gap:10px}.flow{gap:7px}.flow>span{font-size:8px;padding:14px 7px}.flow .flow-main{padding:12px 15px}.project-visual{padding-inline:18px}.footer>a:last-child{width:100%;text-align:right}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}

/* Mantém a animação dos links visível sem mudar seu tamanho no layout. */
.header a, .hero a, .footer a { transform-origin: center; }
.hero .text-link, .hero-bottom a, .footer > a:last-child { display: inline-block; }
.project-visual .flow { flex-wrap: wrap; }

/* Captura real do projeto, sem cortar a interface. */
.project-cover { background: var(--surface); }
.project-screenshot { width: 100%; height: 230px; object-fit: contain; background: #141713; border-bottom: 1px solid var(--line); }
.project-screenshot:not([hidden]) { display: block; }
.project-cover [hidden] { display: none !important; }
.project-features { padding-left: 20px; color: #a6b398; font-size: 14px; line-height: 1.9; }
.project-stack { color: var(--accent) !important; }
.project-footer { gap: 8px; flex-wrap: wrap; }
.project-footer .round-link { margin-left: auto; flex-shrink: 0; }
@media (max-width: 700px) { .project-screenshot { height: auto; max-height: 300px; } }
/* Projeto: chamada acessível por mouse, toque e teclado. */
.project-cover { position: relative; overflow: hidden; }
.project-screenshot, .project-cover .architecture-art {
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.project-preview-action {
  position: absolute; right: 18px; bottom: 18px; z-index: 1;
  display: inline-flex; align-items: center; gap: 18px;
  min-height: 44px; padding: 10px 16px; border: 1px solid #d4ff8b;
  border-radius: 5px; background: var(--accent); color: #17200c;
  font: 600 12px var(--font); box-shadow: 0 6px 22px #0005;
  transition: opacity .25s ease, transform .25s ease;
}
.project-preview-action:focus-visible { outline-offset: -5px; outline-color: #17200c; }
@media (hover: hover) and (pointer: fine) {
  .project-preview-action { opacity: 0; transform: translateY(8px); }
  .project-card:hover .project-preview-action,
  .project-card:focus-within .project-preview-action { opacity: 1; transform: translateY(0); }
  .project-card:hover .project-screenshot,
  .project-card:focus-within .project-screenshot,
  .project-card:hover .architecture-art,
  .project-card:focus-within .architecture-art { transform: scale(1.035); filter: brightness(1.06); }
}
/* Trajetória: o traço acompanha a posição da seção na tela. */
.timeline { position: relative; }
.timeline.timeline-progress::before {
  content: ''; position: absolute; top: 7px; bottom: 0; left: 0;
  width: 2px; background: var(--accent); transform-origin: top;
  transform: scaleY(var(--timeline-progress, 0)); pointer-events: none;
}
.timeline.timeline-progress .timeline-dot { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .project-card:hover .project-screenshot, .project-card:focus-within .project-screenshot,
  .project-card:hover .architecture-art, .project-card:focus-within .architecture-art { transform: none; filter: none; }
  .project-preview-action { opacity: 1; transform: none; }
  .timeline.timeline-progress::before { transform: scaleY(1); }
}