/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --bg:#F0F0ED;
  --surface:#E4E4E0;
  --ink:#141414;
  --muted:#686863;
  --line:#CFCFC9;
  --accent:#2440D8;
  --grid-tint:rgba(36,64,216,.07);

  --font:"Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* grid */
  --cols:12;
  --gap:24px;
  --margin:clamp(20px, 4vw, 56px);
  --max:1440px;

  /* type scale */
  --t-display:clamp(44px, 7.4vw, 112px);
  --t-h1:clamp(36px, 5.2vw, 80px);
  --t-h2:clamp(24px, 2.4vw, 34px);
  --t-lead:clamp(19px, 1.6vw, 24px);
  --t-body:17px;
  --t-small:14px;

  /* vertical rhythm (base 8) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px; --s16:128px;

  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131312; --surface:#20201F; --ink:#ECECE8; --muted:#9B9B94; --line:#33332F;
    --accent:#8B9DFF; --grid-tint:rgba(139,157,255,.08); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131312; --surface:#20201F; --ink:#ECECE8; --muted:#9B9B94; --line:#33332F;
  --accent:#8B9DFF; --grid-tint:rgba(139,157,255,.08); color-scheme:dark;
}
@media (max-width:1023px){ :root{ --cols:8; --gap:20px; } }
@media (max-width:639px){ :root{ --cols:4; --gap:16px; --t-body:16px; } }

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{ box-sizing:inherit; margin:0; padding:0; }
html{ height:100%; scroll-padding-top:calc(env(safe-area-inset-top, 0px) + 72px); -webkit-text-size-adjust:100%; }
body{
  min-height:100%;
  background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--t-body); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px);
  z-index:10; background:var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background:var(--accent); color:var(--bg); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--margin); }
.grid{ display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); column-gap:var(--gap); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.full{ grid-column:1 / -1; }

.count{ font-weight:400; color:var(--muted); font-feature-settings:"tnum"; letter-spacing:0; }
.muted{ color:var(--muted); }
.link{ background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .3s ease; }
.link:hover{ background-size:100% 1px; }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header .grid{ height:64px; align-items:center; font-size:var(--t-small); }
.brand{ grid-column:span 3; font-weight:600; letter-spacing:-.01em; }
.brand-role{ grid-column:span 3; color:var(--muted); }
.nav{ grid-column:span 6; display:flex; justify-content:flex-end; gap:var(--s4); }
.nav a{ font-weight:500; }
@media (max-width:1023px){
  .brand{ grid-column:span 3; } .brand-role{ display:none; } .nav{ grid-column:span 5; }
}
@media (max-width:639px){
  .brand{ grid-column:span 2; } .nav{ grid-column:span 2; gap:var(--s2); }
  .nav .hide-sm{ display:none; }
}

/* =========================================================
   HOME
   ========================================================= */
/* Hero dual: designer | <coder> */
.duo{
  --accent:#2440D8;
  --code-bg:#0F1117; --code-ink:#C9D1E4;
  position:relative; height:clamp(520px, 78vh, 760px); overflow:hidden;
  border-bottom:1px solid var(--line); touch-action:pan-y;
}
.duo-layer{ position:absolute; inset:0; display:grid; place-items:center; }
.duo-design,.duo-side-design{
  --bg:#F0F0ED; --surface:#E4E4E0; --ink:#141414; --muted:#686863; --line:#CFCFC9; --accent:#2440D8;
}
.duo-design{
  background:var(--bg);
  background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:20px 20px;
}
.duo-code{ background:var(--code-bg); color:var(--code-ink); clip-path:inset(0 0 0 var(--split)); }
.duo-divider{
  position:absolute; top:0; bottom:0; left:var(--split); width:2px; margin-left:-1px;
  background:var(--accent); pointer-events:none;
}
.duo-card{ position:relative; width:min(360px, 70vw); height:420px; border-radius:16px; }
/* lado Figma */
.duo-design .duo-card{
  background:var(--surface); padding:var(--s3); display:flex; flex-direction:column; gap:12px;
  outline:1.5px solid var(--accent); outline-offset:6px;
}
.dc-label{ position:absolute; top:-34px; left:-6px; font-size:12px; font-weight:600; color:var(--accent); }
.dc-media{ height:170px; border-radius:10px; background:linear-gradient(135deg, var(--accent), #8B9DFF); opacity:.85; }
.dc-title{ height:18px; width:70%; border-radius:4px; background:var(--ink); margin-top:8px; }
.dc-text{ height:10px; border-radius:4px; background:var(--muted); opacity:.5; }
.dc-text.short{ width:60%; }
.dc-btn{
  margin-top:auto; align-self:flex-start; padding:10px 18px; border-radius:999px;
  background:var(--ink); color:var(--bg); font-size:14px; font-weight:500;
}
.duo-design .h{ position:absolute; width:10px; height:10px; background:var(--bg); border:1.5px solid var(--accent); }
.h.tl{ top:-11px; left:-11px; } .h.tr{ top:-11px; right:-11px; }
.h.bl{ bottom:-11px; left:-11px; } .h.br{ bottom:-11px; right:-11px; }
.dc-size{
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  padding:2px 8px; border-radius:4px; background:var(--accent); color:#fff; font-size:11px; font-weight:600;
}
.dc-swatches{ position:absolute; left:max(var(--margin), (100% - var(--max)) / 2 + var(--margin)); bottom:var(--s6); display:flex; gap:8px; }
.dc-swatches i{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); }
.dc-swatches i:nth-child(1){ background:var(--ink); } .dc-swatches i:nth-child(2){ background:var(--accent); }
.dc-swatches i:nth-child(3){ background:var(--surface); } .dc-swatches i:nth-child(4){ background:#8B9DFF; }
/* lado código */
.duo-code .duo-card{
  margin:0; padding:var(--s3); border:1px solid #262B38; background:#151924;
  font:13px/1.7 ui-monospace, "SFMono-Regular", Consolas, monospace; white-space:pre; overflow:hidden;
}
.duo-code b{ font-weight:400; color:#7AA2F7; } .duo-code i{ font-style:normal; color:#BB9AF7; }
.duo-code s{ text-decoration:none; color:#9ECE6A; } .duo-code u{ text-decoration:none; color:#E0AF68; }
/* textos */
.duo-text{
  position:absolute; top:0; left:0; right:0; padding-top:var(--s12);
  align-items:start; pointer-events:none;
}
.duo-side{
  transition:opacity .4s ease, transform .4s ease; pointer-events:none;
}
.duo-side h2{ font-size:var(--t-h1); font-weight:600; line-height:1; letter-spacing:-.04em; margin-bottom:var(--s2); }
.duo-side p{ font-size:var(--t-small); }
.duo-side-design{ grid-column:1 / span 4; color:var(--ink); }
.duo-side-design p{ color:var(--muted); }
.duo-side-code{ grid-column:-5 / -1; text-align:right; color:var(--code-ink); }
.duo-side-code h2{ font-family:ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing:-.06em; color:#fff; }
.duo[data-side="code"] .duo-side-design,
.duo[data-side="design"] .duo-side-code{ opacity:0; transform:translateY(8px); }
@media (max-width:639px){
  .duo{ height:auto; min-height:640px; }
  .duo-text{ padding-top:var(--s6); }
  .duo-side-design{ grid-column:1 / span 2; }
  .duo-side-code{ grid-column:3 / -1; }
  .duo-side h2{ font-size:30px; }
  .duo-side p{ font-size:12px; }
  .duo-layer{ padding-top:180px; }
  .duo-card{ transform:scale(.82); }
  .dc-swatches{ display:none; }
}
@media (min-width:640px) and (max-width:1023px){
  .duo{ height:auto; min-height:820px; }
  .duo-layer{ padding-top:200px; }
  .duo-side-design{ grid-column:1 / span 3; } .duo-side-code{ grid-column:-4 / -1; }
}
@media (prefers-reduced-motion: reduce){ .duo-side{ transition:none; } }


.section{ padding:var(--s12) 0; border-top:1px solid var(--line); }
.section-head{ align-items:baseline; margin-bottom:var(--s8); }
.section-head h2{ grid-column:1 / span 6; font-size:var(--t-h2); font-weight:500; letter-spacing:-.025em; line-height:1.2; }
.section-head p{ grid-column:7 / span 5; color:var(--muted); }
@media (max-width:1023px){ .section-head h2{ grid-column:1 / -1; } .section-head p{ grid-column:1 / span 6; margin-top:var(--s2); } }
@media (max-width:639px){ .section-head p{ grid-column:1 / -1; } }

/* work cards */
.works{ row-gap:var(--s12); }
.work{ grid-column:span 6; display:block; }
.work.is-wide{ grid-column:1 / -1; }
.work .media{ aspect-ratio:4/3; }
.work-web .media{ aspect-ratio:16/10; }
.work-web:hover .work-title{ text-decoration:none; }
.work-cta{
  grid-column:1 / -1; justify-self:start; margin-top:var(--s2);
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:10px 20px; border:1px solid var(--ink); border-radius:999px;
  color:var(--ink); font-size:var(--t-small); font-weight:500; text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.work-cta:hover, .work-cta:focus-visible{ background:var(--ink); color:var(--bg); }
.work.is-wide .media{ aspect-ratio:21/9; }
.work-body{ margin-top:var(--s3); display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); column-gap:var(--gap); row-gap:var(--s1); }
.work.is-wide .work-body{ grid-template-columns:repeat(12, minmax(0,1fr)); }
.work-title{ grid-column:1 / span 4; font-size:var(--t-h2); font-weight:500; letter-spacing:-.025em; line-height:1.2; }
.work-context{ grid-column:5 / span 2; text-align:right; font-size:var(--t-small); color:var(--muted); align-self:center; }
.work-line{ grid-column:1 / span 5; color:var(--muted); }
.work.is-wide .work-title{ grid-column:1 / span 4; }
.work.is-wide .work-line{ grid-column:5 / span 5; grid-row:1; align-self:center; }
.work.is-wide .work-context{ grid-column:10 / span 3; grid-row:1; }
.work:hover .work-title{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }
@media (max-width:1023px){
  .work, .work.is-wide{ grid-column:1 / -1; }
  .work-body, .work.is-wide .work-body{ grid-template-columns:repeat(8, minmax(0,1fr)); }
  .work-title, .work.is-wide .work-title{ grid-column:1 / span 6; }
  .work-context, .work.is-wide .work-context{ grid-column:7 / span 2; grid-row:1; }
  .work-line, .work.is-wide .work-line{ grid-column:1 / span 7; grid-row:auto; }

  .work .media, .work.is-wide .media{ aspect-ratio:16/10; }
}
@media (max-width:639px){
  .work-body, .work.is-wide .work-body{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .work-title, .work.is-wide .work-title{ grid-column:1 / -1; }
  .work-context, .work.is-wide .work-context{ grid-column:1 / -1; grid-row:auto; text-align:left; }
  .work-line, .work.is-wide .work-line{ grid-column:1 / -1; }
  .work .media, .work.is-wide .media{ aspect-ratio:4/3; }
}

/* media placeholder */
.media{ position:relative; background:var(--surface); overflow:hidden; border-radius:4px; }
.media img{ width:100%; height:100%; object-fit:cover; }
.media .ph{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:space-between;
  padding:var(--s2); font-size:12px; color:var(--muted);
  background-image:linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:calc(100% / 12) 100%, 100% 25%;
  background-position:-1px 0, 0 -1px;
}

/* about / experience */
.about-text{ grid-column:1 / span 7; font-size:var(--t-lead); line-height:1.5; letter-spacing:-.01em; }
.about-text p + p{ margin-top:var(--s3); }
.rows{ grid-column:1 / -1; margin-top:var(--s12); border-top:1px solid var(--line); }
.row{ padding:var(--s3) 0; border-bottom:1px solid var(--line); align-items:baseline; }
.row .r-org{ grid-column:1 / span 4; font-weight:600; }
.row .r-role{ grid-column:5 / span 5; }
.row .r-time{ grid-column:10 / span 3; text-align:right; color:var(--muted); font-feature-settings:"tnum"; font-size:var(--t-small); }
.rows-label{ grid-column:1 / -1; font-size:var(--t-small); color:var(--muted); margin:var(--s8) 0 var(--s2); }
.rows-label:first-child{ margin-top:0; }
@media (max-width:1023px){
  .about-text{ grid-column:1 / -1; }
  .row .r-org{ grid-column:1 / span 3; } .row .r-role{ grid-column:4 / span 3; } .row .r-time{ grid-column:7 / span 2; }
}
@media (max-width:639px){
  .row .r-org{ grid-column:1 / span 3; } .row .r-time{ grid-column:4 / span 1; }
  .row .r-role{ grid-column:1 / -1; grid-row:2; color:var(--muted); font-size:var(--t-small); }
}

/* contact */
.contact{ padding:var(--s16) 0 var(--s8); border-top:1px solid var(--line); }
.contact h2{ grid-column:1 / span 10; font-size:var(--t-h1); font-weight:500; letter-spacing:-.04em; line-height:1.05; }
.contact .mail{ grid-column:1 / -1; margin-top:var(--s6); font-size:var(--t-h2); font-weight:500; letter-spacing:-.02em; color:var(--accent); justify-self:start; word-break:break-all; }
.footer{ margin-top:var(--s16); padding:var(--s3) 0; border-top:1px solid var(--line); font-size:var(--t-small); color:var(--muted); row-gap:var(--s2); }
.footer .f-copy{ grid-column:1 / span 4; }
.footer .f-links{ grid-column:5 / span 8; display:flex; justify-content:flex-end; gap:var(--s4); }
.footer .f-links a{ color:var(--ink); }
@media (max-width:1023px){ .contact h2{ grid-column:1 / -1; } .footer .f-copy{ grid-column:1 / span 4; } .footer .f-links{ grid-column:5 / span 4; } }
@media (max-width:639px){ .footer .f-copy, .footer .f-links{ grid-column:1 / -1; justify-content:flex-start; } }

/* =========================================================
   CASE TEMPLATE
   ========================================================= */
.case-top{ padding:var(--s8) 0 var(--s12); }
.back{ grid-column:1 / -1; font-size:var(--t-small); font-weight:500; margin-bottom:var(--s12); justify-self:start; }
.case-top h1{ grid-column:1 / -1; font-size:var(--t-display); font-weight:500; letter-spacing:-.045em; line-height:1.0; }
.case-summary{ grid-column:1 / span 8; margin-top:var(--s6); font-size:var(--t-lead); line-height:1.5; letter-spacing:-.01em; }
.case-meta{ grid-column:1 / -1; margin-top:var(--s12); padding-top:var(--s3); border-top:1px solid var(--line); row-gap:var(--s3); font-size:var(--t-small); }
.case-meta > div{ grid-column:span 3; }
.case-meta dt{ color:var(--muted); margin-bottom:var(--s1); }
.case-meta dd{ font-weight:500; }
@media (max-width:1023px){ .case-summary{ grid-column:1 / -1; } .case-meta > div{ grid-column:span 4; } }
@media (max-width:639px){ .case-meta > div{ grid-column:span 2; } }

.case-hero .media{ aspect-ratio:16/9; }

.story{ padding:var(--s12) 0 0; }
.story-block{ padding:var(--s8) 0; border-top:1px solid var(--line); }
.story-block:first-child{ border-top:0; padding-top:0; }
.story-block h2{ grid-column:1 / span 3; font-size:var(--t-small); font-weight:600; align-self:start; position:sticky; top:calc(env(safe-area-inset-top, 0px) + 88px); }
.story-body{ grid-column:5 / span 7; max-width:68ch; }
.story-body p{ font-size:var(--t-lead); line-height:1.55; letter-spacing:-.01em; }
.story-body p + p, .story-body p + ul, .story-body ul + p{ margin-top:var(--s3); }
.story-body ul{ border-top:1px solid var(--line); }
.story-body li{ padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.story-body li strong{ font-weight:600; display:block; margin-bottom:2px; }
.story-body li span{ color:var(--muted); }
@media (max-width:1023px){ .story-block h2{ grid-column:1 / span 2; } .story-body{ grid-column:3 / span 6; } }
@media (max-width:639px){ .story-block h2{ grid-column:1 / -1; position:static; margin-bottom:var(--s2); } .story-body{ grid-column:1 / -1; } .story-body p{ font-size:18px; } }

.metric{ padding:var(--s12) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:var(--s8); }
.metric-from, .metric-to{ grid-column:span 6; }
.metric-value{ font-size:var(--t-display); font-weight:500; letter-spacing:-.05em; line-height:1; font-feature-settings:"tnum"; }
.metric-to .metric-value{ color:var(--accent); }
.metric-label{ margin-top:var(--s2); color:var(--muted); font-size:var(--t-small); }
.metric.single .metric-to{ grid-column:1 / -1; }
@media (max-width:1023px){ .metric-from, .metric-to{ grid-column:span 4; } }
@media (max-width:639px){ .metric-from, .metric-to{ grid-column:1 / -1; } .metric-to{ margin-top:var(--s6); } }

.gallery{ padding:var(--s12) 0 0; row-gap:var(--gap); }
.gallery .media.s6{ grid-column:span 6; aspect-ratio:4/3; }
.gallery .media.s12{ grid-column:1 / -1; aspect-ratio:16/9; }
.gallery .media.s4{ grid-column:span 4; aspect-ratio:3/4; }
@media (max-width:1023px){ .gallery .media.s6{ grid-column:span 4; } .gallery .media.s4{ grid-column:span 4; } }
@media (max-width:639px){ .gallery .media.s6, .gallery .media.s4{ grid-column:1 / -1; } }

.next{ display:block; margin-top:var(--s16); padding:var(--s8) 0; border-top:1px solid var(--line); }
.next .grid{ align-items:end; }
.next small{ grid-column:1 / -1; font-size:var(--t-small); color:var(--muted); margin-bottom:var(--s2); }
.next strong{ grid-column:1 / span 10; font-size:var(--t-h1); font-weight:500; letter-spacing:-.04em; line-height:1.05; }
.next:hover strong{ color:var(--accent); }

/* =========================================================
   GRID OVERLAY
   ========================================================= */
.overlay{ position:fixed; inset:0; z-index:50; pointer-events:none; display:none; }
.overlay.on{ display:block; }
.overlay .wrap, .overlay .grid{ height:100%; }
.overlay .grid > span{ background:var(--grid-tint); border-left:1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-right:1px solid color-mix(in srgb, var(--accent) 25%, transparent); }

/* page-in */
#app{ animation:pagein .5s ease both; }
@keyframes pagein{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ #app{ animation:none; } .link{ transition:none; } }