/* ILUSTRATON · project pages. Each page sets its own palette on <body>:
   --bg, --ink, --accent, --accent2, --surface, --muted */

body.work {
  --bg: var(--papel);
  --ink: var(--marca-nanquim);
  --accent: var(--amarelo-assinatura);
  --accent2: var(--coral-detalhe);
  --surface: #fff;
  --muted: color-mix(in srgb, var(--ink) 70%, transparent);
  --wrap: 1240px;
  background: var(--bg);
  color: var(--ink);
}
html:has(body.work) { background: var(--bg, var(--papel)); scroll-behavior: auto; }
.work :focus-visible { outline-color: var(--accent); }
.work main { overflow-x: clip; }

/* Pattern layers, chosen per project */
.work.pat-dots { background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1.4px, transparent 1.6px); background-size: 26px 26px; }
.work.pat-halftone { background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1.1px, transparent 1.3px); background-size: 9px 9px; }
.work.pat-spots { background-image: radial-gradient(ellipse 40px 28px at 30% 40%, color-mix(in srgb, var(--accent) 10%, transparent) 60%, transparent 62%), radial-gradient(ellipse 30px 22px at 75% 70%, color-mix(in srgb, var(--accent) 8%, transparent) 60%, transparent 62%); background-size: 180px 160px; }
.work.pat-sky { background-image: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, #fff) 50%, var(--bg) 100%); background-attachment: fixed; }

/* ---------- Header ---------- */
.work-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: transform .35s ease;
}
.work-header.is-hidden { transform: translateY(-100%); }
.work-header__logo img { display: block; width: 132px; height: auto; }
.theme-dark .work-header__logo img { filter: brightness(0) invert(1); }
.work-header nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); font-family: var(--font-title); font-weight: 700; font-size: .98rem; }
.work-header nav a { color: inherit; text-decoration: none; }
.work-header nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.work-header .btn { min-height: 40px; padding: 8px 16px; font-size: .95rem; }
@media (max-width: 640px) { .work-header .hide-sm { display: none; } .work-header__logo img { width: 110px; } }
.work-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Shared type ---------- */
.w-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.w-kicker { display: inline-block; font-family: var(--font-hand); font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--accent2); margin-bottom: 10px; transform: rotate(-2deg); }
.w-title { font-size: clamp(2.6rem, 8.4vw, 6.6rem); line-height: .98; letter-spacing: -.01em; }
.w-title .w { display: inline-block; }
.w-h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); margin-bottom: 18px; }
.w-p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 62ch; }
.w-p + .w-p { margin-top: 14px; }
.w-section { padding: clamp(56px, 9vw, 120px) 0; }
.w-center { text-align: center; }
.w-center .w-p { margin-left: auto; margin-right: auto; }
.w-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: var(--ink-on-accent, var(--marca-nanquim)); font-family: var(--font-title); font-weight: 700; font-size: .85rem; }

/* ---------- Hero ---------- */
.w-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.w-hero__media { position: absolute; inset: 0; }
.w-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.w-hero--cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--hero-shade, #000) 72%, transparent) 100%); }
.w-hero--cover .w-hero__text { position: relative; z-index: 2; color: #fff; padding-bottom: clamp(48px, 8vh, 96px); }
.w-hero--cover .w-kicker { color: var(--accent); }
.w-hero__lead { font-size: clamp(1.05rem, 1.8vw, 1.35rem); max-width: 52ch; margin-top: 16px; }
.w-hero--stack { min-height: auto; display: block; padding-top: 112px; }
.w-hero--stack .w-hero__text { padding-bottom: clamp(28px, 4vw, 48px); }
.w-hero--stack .w-hero__media { position: relative; inset: auto; margin: 0 var(--gutter); border-radius: clamp(14px, 2vw, 28px); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); max-width: 1500px; }
@media (min-width: 1564px) { .w-hero--stack .w-hero__media { margin: 0 auto; } }
.w-hero--stack .w-hero__media img { height: auto; }
.w-hero--split { padding-top: 96px; align-items: center; }
.w-hero--split .w-hero__grid { display: grid; gap: 32px; align-items: center; }
.w-hero--split .w-hero__media { position: relative; inset: auto; }
.w-hero--split .w-hero__media img { height: auto; max-height: 82vh; width: auto; max-width: 100%; margin: 0 auto; display: block; border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .5); }
@media (min-width: 900px) { .w-hero--split .w-hero__grid { grid-template-columns: 1.05fr .95fr; } }
.w-scrollcue { position: absolute; left: 50%; bottom: 18px; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border: 3px solid currentColor; border-radius: 14px; color: #fff; opacity: .8; }
.w-scrollcue::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Lead + facts ---------- */
.w-lead { display: grid; gap: 40px; }
@media (min-width: 900px) { .w-lead { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.w-lead__big { font-family: var(--font-title); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.3; margin-bottom: 22px; }
.w-facts { display: grid; gap: 14px; padding: 24px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.w-facts dt { font-family: var(--font-hand); font-size: 1.15rem; color: var(--accent2); line-height: 1.1; }
.w-facts dd { font-weight: 700; }
.w-facts a { color: inherit; }

/* ---------- Media blocks ---------- */
.w-fig { position: relative; }
.w-fig img { display: block; width: 100%; height: auto; }
.w-fig figcaption { margin-top: 12px; font-size: .95rem; color: var(--muted); }
.w-full { width: 100%; }
.w-full .w-fig figcaption { padding: 0 var(--gutter); }
.w-wide .w-fig img { border-radius: clamp(12px, 1.6vw, 22px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .45); }
.w-wide .w-fig.is-alpha img, .w-grid .w-fig.is-alpha img { box-shadow: none; border-radius: 0; }
.w-grid { display: grid; gap: clamp(16px, 2.4vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr)); align-items: start; }
.w-grid .w-fig img { border-radius: 16px; box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .5); }
.w-stack > * + * { margin-top: clamp(24px, 4vw, 56px); }
.w-head { margin-bottom: clamp(28px, 4vw, 48px); }

/* Stages: sketch → lines → final, crossfading while pinned */
.w-stages__stage { position: relative; }
.w-stages__frame { position: relative; aspect-ratio: var(--ar, 16 / 9); max-height: 78vh; margin: 0 auto; }
.w-stages__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.w-stages__labels { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.w-stages__labels span { padding: 6px 14px; border-radius: 999px; border: 2px solid currentColor; font-family: var(--font-title); font-weight: 700; font-size: .9rem; opacity: .45; transition: opacity .3s, background .3s, color .3s; }
.w-stages__labels span.is-on { opacity: 1; background: var(--accent); border-color: var(--accent); color: var(--ink-on-accent, var(--marca-nanquim)); }
.no-motion .w-stages__frame { aspect-ratio: auto; max-height: none; display: grid; gap: 16px; }
.no-motion .w-stages__frame img { position: static; height: auto; }
.motion-on .w-stages__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 72px var(--gutter) 24px; }
.motion-on .w-stages__pin .w-stages__frame { width: min(100%, calc((100svh - 220px) * var(--arn, 1.777))); }

/* Before / after slider */
.w-compare { position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .45); --pos: 50%; touch-action: pan-y; user-select: none; }
.w-compare img { display: block; width: 100%; height: auto; pointer-events: none; }
.w-compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.w-compare__after img { height: 100%; object-fit: cover; }
.w-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; margin-left: -2px; background: var(--accent); pointer-events: none; }
.w-compare__line::after { content: "↔"; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--ink-on-accent, var(--marca-nanquim)); font-weight: 800; font-size: 1.3rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.w-compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.w-compare__tags { position: absolute; inset: 14px 14px auto; display: flex; justify-content: space-between; pointer-events: none; }

/* Horizontal gallery (book spreads, sports) */
.w-hscroll { position: relative; }
.w-hscroll__head { padding: 0 var(--gutter); max-width: var(--wrap); margin: 0 auto 24px; display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.w-hscroll__count { font-family: var(--font-title); font-weight: 800; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.w-hscroll__track { display: flex; gap: clamp(14px, 2vw, 28px); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.w-hscroll__item { flex: 0 0 auto; width: min(86vw, var(--item-w, 1100px)); scroll-snap-align: center; }
.w-hscroll__item img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .5); }
.w-hscroll__item figcaption { margin-top: 12px; }
.w-hscroll__item figcaption strong { display: block; font-family: var(--font-title); font-size: 1.2rem; }
.is-pinned .w-hscroll__track { overflow: visible; scroll-snap-type: none; width: max-content; }
.is-pinned .w-hscroll__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; overflow: hidden; }
.is-pinned .w-hscroll__item { width: min(var(--item-w, 1100px), calc((100svh - 260px) * var(--arn, 1.414))); }

/* Virtues: one big word per illustration */
.w-virtue { display: grid; gap: 24px; align-items: center; }
.w-virtue + .w-virtue { margin-top: clamp(48px, 8vw, 110px); }
.w-virtue__word { font-family: var(--font-title); font-weight: 800; font-size: clamp(3rem, 10vw, 8rem); line-height: .9; color: var(--accent2); }
.w-virtue__word small { display: block; font-family: var(--font-body); font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.55; color: var(--ink); margin-top: 16px; max-width: 40ch; }
.w-virtue img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 18px; box-shadow: 0 28px 50px -30px rgba(0, 0, 0, .5); }
@media (min-width: 860px) {
  .w-virtue { grid-template-columns: 1fr 1fr; }
  .w-virtue:nth-child(even) .w-virtue__word { order: 2; }
}

/* Comic pages */
.w-comic { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.w-comic .w-fig img { background: #fff; padding: clamp(6px, 1vw, 12px); border-radius: 6px; box-shadow: 0 2px 0 var(--ink), 0 28px 50px -30px rgba(0, 0, 0, .5); }
.w-comic .w-fig:nth-child(odd) { transform: rotate(-.6deg); }
.w-comic .w-fig:nth-child(even) { transform: rotate(.6deg); }
.w-comic .w-fig figcaption { font-family: var(--font-hand); font-size: 1.15rem; }

/* Spotlight: one character on a glow */
.w-spot { position: relative; display: grid; place-items: center; }
.w-spot::before { content: ""; position: absolute; width: min(80vw, 760px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%); filter: blur(10px); }
.w-spot img { position: relative; width: min(100%, 760px); height: auto; }

/* Quote + note */
.w-quote { font-family: var(--font-hand); font-size: clamp(1.8rem, 4.6vw, 3.4rem); line-height: 1.15; text-align: center; max-width: 22ch; margin: 0 auto; }
.w-quote::before { content: "“"; display: block; font-family: var(--font-title); font-size: 2.4em; line-height: .6; color: var(--accent2); }
.w-quote cite { display: block; margin-top: 18px; font-family: var(--font-body); font-style: normal; font-size: 1rem; color: var(--muted); }
.w-note { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); border-radius: 20px; background: var(--surface); color: var(--surface-ink, var(--marca-nanquim)); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--accent); }
.w-note h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 14px; }

/* Character lineup (cast) */
.w-cast { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.w-cast .w-fig { background: var(--surface); border-radius: 18px; padding: 10px; box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .5); }
.w-cast .w-fig img { border-radius: 12px; }

/* ---------- Closing: CTA + next project ---------- */
.w-cta { text-align: center; }
.w-cta .w-h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.w-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.w-next { display: block; position: relative; overflow: hidden; color: #fff; text-decoration: none; border-radius: clamp(16px, 2vw, 28px); margin: 0 var(--gutter); min-height: clamp(280px, 46vw, 520px); background: #111; }
.w-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .8s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
.w-next:hover img { transform: scale(1.05); opacity: .6; }
.w-next__text { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 48px); right: 20px; }
.w-next__text span { font-family: var(--font-hand); font-size: 1.4rem; color: var(--accent); }
.w-next__text strong { display: block; font-family: var(--font-title); font-weight: 800; font-size: clamp(2rem, 6vw, 4.6rem); line-height: 1; text-shadow: 0 4px 30px rgba(0, 0, 0, .4); }
.w-allwork { display: flex; justify-content: center; margin: 28px 0 0; }
.w-allwork a { color: inherit; font-family: var(--font-title); font-weight: 700; }

.work .site-footer { border-top-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.work .site-footer a, .work .site-footer button { color: inherit; }
.work .whatsapp-float { opacity: 1; visibility: visible; }
.w-crumbs { font-size: .9rem; margin-bottom: 14px; opacity: .85; }
.w-crumbs a { color: inherit; }

/* Motion: hidden states only when the animation script is running */
.motion-on [data-reveal] { opacity: 0; transform: translateY(40px); }
@media (prefers-reduced-motion: reduce) { .w-scrollcue::after { animation: none; } }

/* ---------- Lightbox ---------- */
.lb-trigger { cursor: zoom-in; }
.lb-trigger:focus-visible { outline: 3px solid #FFC425; outline-offset: 4px; }
.w-stages__frame.lb-trigger { border-radius: 16px; }
html.lb-open, html.lb-open body { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: 1fr auto; background: rgba(18, 25, 44, .94); opacity: 0; transition: opacity .22s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb.is-on { opacity: 1; }
.lb[hidden] { display: none; }
.lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 64px 72px 8px; overflow: hidden; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); cursor: zoom-in; transform: scale(.96); transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s; user-select: none; -webkit-user-drag: none; touch-action: pan-y; }
.lb.is-on .lb__img { transform: scale(1); }
.lb.is-zoomed .lb__img { transform: scale(2.4); cursor: zoom-out; border-radius: 0; touch-action: none; }
.lb.is-loading .lb__img { opacity: .35; }
.lb__spin { position: absolute; width: 38px; height: 38px; border: 4px solid rgba(255, 196, 37, .25); border-top-color: #FFC425; border-radius: 50%; opacity: 0; pointer-events: none; animation: lb-spin .8s linear infinite; }
.lb.is-loading .lb__spin { opacity: 1; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb__cap { display: flex; justify-content: center; gap: 16px; align-items: baseline; margin: 0; padding: 12px 20px 20px; color: #FBF6EC; font-family: 'Gochi Hand', cursive; font-size: 1.25rem; text-align: center; }
.lb__n { font-family: 'Nunito', sans-serif; font-size: .85rem; opacity: .6; white-space: nowrap; }
.lb.is-zoomed .lb__cap, .lb.is-zoomed .lb__prev, .lb.is-zoomed .lb__next { opacity: 0; pointer-events: none; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #1E2A4A; border-radius: 50%; background: #FFC425; color: #1E2A4A; font: 700 1.25rem/1 'Nunito', sans-serif; cursor: pointer; box-shadow: 3px 3px 0 #1E2A4A; transition: transform .15s, box-shadow .15s, opacity .2s; }
.lb__btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1E2A4A; }
.lb__btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1E2A4A; }
.lb__btn:focus-visible { outline: 3px solid #FBF6EC; outline-offset: 3px; }
.lb__close { top: 14px; right: 14px; }
.lb__prev, .lb__next { top: 50%; margin-top: -24px; }
.lb__prev { left: 14px; }
.lb__next { right: 14px; }
@media (max-width: 700px) {
  .lb__stage { padding: 64px 8px 8px; }
  .lb__prev, .lb__next { top: auto; bottom: 14px; margin: 0; width: 42px; height: 42px; }
  .lb__cap { padding: 14px 64px 22px; font-size: 1.05rem; flex-direction: column; gap: 2px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .lb, .lb__img { transition: none; } }