/* ALL TYPE · home — Fichas técnicas */

@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/quicksand.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"); size-adjust: 90%; }
@font-face { font-family: "Quicksand Fallback"; src: local("Arial"); size-adjust: 102%; }

:root {
  --lime: #D9FC19;
  --lime-2: #EBFF7B;
  --paper: #F0F0F0;
  --white: #FFFFFF;
  --ink: #282828;
  --black: #000000;
  --soft: #858585;
  --label: #6A6A6A;
  --serif: "Cormorant", "Cormorant Fallback", Georgia, serif;
  --sans: "Quicksand", "Quicksand Fallback", Arial, sans-serif;
  --gut: max(clamp(20px, 4.4vw, 64px), (100vw - 1200px) / 2); /* the page's column: 1200px at most, centred; the paper runs on */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --caps: 700 13px/1 var(--sans);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink) var(--paper); scroll-padding-top: 24px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 16px/1.55 var(--sans); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
::selection { background: var(--lime); color: var(--black); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }
.i { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 12px 18px; background: var(--ink); color: var(--lime); font: 600 15px/1.2 var(--sans); letter-spacing: .02em; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------- header ---------- */
.top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 104px; padding: 0 var(--gut); }
@media (min-width: 1100px) and (max-height: 860px) { .top { height: 84px; } } /* short desktop screens (1280 x 800): the tablet's height, the same on every page */
.brand { display: block; color: var(--black); }
.brand .logo { width: 76px; height: 64px; }
.nav ul { display: flex; justify-content: center; gap: clamp(18px, 2.4vw, 34px); margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 9px 0 4px; border-top: 3px solid transparent; font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.nav a:hover { border-top-color: var(--lime); }
.nav a[aria-current] { border-top-color: var(--ink); } /* lime on paper is 1.03:1: the current page needs ink */
.menu-toggle, .menu-close { display: none; }
.cta { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); font: var(--caps); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.cta:hover { background: var(--lime); color: var(--black); }
.cta .i { width: 18px; height: 18px; }

/* desktop: the popover nav is simply inline */
@media (min-width: 1100px) {
  .nav { display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
}

/* ---------- works head ---------- */
.works { padding: 22px var(--gut) 0; }
.works-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 64px; }
.line { max-width: 18em; min-height: 3lh; font: 500 clamp(28px, 2.8vw, 40px)/1.1 var(--serif); text-wrap: balance; } /* 3 lines with or without the web font: no shift when it swaps in */
.sig { display: flex; align-items: center; gap: 14px; margin-top: 18px; font: 700 13px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.sig::before { content: ""; width: 56px; height: 6px; background: var(--lime); }
.works-title { font: 600 clamp(40px, 4.4vw, 64px)/1 var(--serif); text-align: right; letter-spacing: -.01em; }
.works-title span { color: var(--soft); }

/* ---------- fichas: one row that scrolls sideways (home.js: the arrows step a ficha, a mouse drags it) ---------- */
/* the row is a container, so a ficha is a share of it: 4 and a quarter on desktop, the quarter saying there is more */
.fichas { display: flex; gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; container-type: inline-size; }
.fichas::-webkit-scrollbar { display: none; } /* from the first paint; without JS the row wraps (a noscript style) */
.js .fichas { cursor: grab; user-select: none; } /* the arrows, a drag or a finger move it */
.fichas > li { flex: none; scroll-snap-align: start; }
/* where the column stops at 1200px, the row runs on to the screen's right edge; its fichas keep the column's share and
   the last one ends at the column's edge (the padding, with the scroll-padding for its end snap) */
@media (min-width: 1329px) { #trabalhos_recentes .fichas { margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); scroll-padding-right: var(--gut); } }
.fichas > li:last-child { scroll-snap-align: end; } /* the far end is a snap position too, so the last item shows whole */
.ficha { width: calc((100vw - 2 * var(--gut) - 96px) / 4.25); width: calc((100cqw - 96px) / 4.25); } /* first: without cq units */
.fichas.is-dragging { scroll-snap-type: none; } /* the drag moves the row itself; its drop glides to the nearer edge */
.fichas.is-dragging, .fichas.is-dragging a { cursor: grabbing; }
/* pinned (home.js pinRow): the box stays at the top while the page's own scroll carries the row; the ::after is the row's
   travel, so the page scrolls on once the last ficha is in. No snap then: the page's scroll is the row's */
.works.is-pinned > .works-pin { position: sticky; top: var(--pin-top, 0px); }
.works.is-pinned::after { content: ""; display: block; height: var(--pin-travel, 0px); }
.works.is-pinned .fichas { scroll-snap-type: none; }
/* a finger or a touchpad dragging the row on past its start would run the browser's swipe-back: the root's none stops it
   (a contain on the row would keep the overscroll from the root, as in the panel's strips); on touch devices it holds on
   the whole page that has a row (Sobre and Currículo keep the browser's swipe-back), since switching it on as a finger
   lands on the row undoes about a third of quick flicks */
html:has(.fichas:hover) { overscroll-behavior-x: none; }
@media (any-pointer: coarse) { html:has(.fichas) { overscroll-behavior-x: none; } }
/* the row clips what passes its edge: a ficha's focus ring is drawn inside it, over the plate */
.fichas .ficha-link:focus-visible { outline: 0; box-shadow: none; }
.fichas .ficha-link:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 2; outline: 3px solid var(--lime); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--ink); }
.all-works { display: flex; align-items: center; padding: 0 12px; } /* room for the button's ring at the row's end */
.works .strip-nav { justify-content: flex-end; margin-top: 16px; }
.works .strip-nav[hidden] { display: flex; visibility: hidden; } /* its room is kept: the arrows come without moving the page */
.ficha-link { position: relative; display: flex; flex-direction: column; height: 100%; padding-top: 8px; container-type: inline-size; background: var(--white); color: inherit; text-decoration: none; }
.ficha-link::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 14px; background: var(--lime); transform: scaleY(calc(8 / 14)); transform-origin: top; transition: transform .2s var(--ease); }
.ficha-link:hover::before, .ficha-link:focus-visible::before { transform: none; }
.ficha-plate, .panel-plate { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 310 / 430; padding: clamp(14px, 1.6vw, 22px); background: var(--lime-2); overflow: hidden; }
/* each cover takes its piece's own size before the image loads (--r = width / height from the build), so the badge
   sits on the piece and nothing in the plate moves when the image arrives */
.ficha-plate { container-type: size; }
.ficha-plate .cover { position: relative; flex: none; width: min(100cqw, 100cqh * var(--r, 1)); aspect-ratio: var(--r, 1); transition: transform .26s var(--ease); }
.ficha-plate picture { display: block; height: 100%; }
.ficha-plate img { width: 100%; height: 100%; }
.panel-plate picture { display: flex; min-width: 0; width: 100%; height: 100%; }
.panel-plate img { width: 100%; height: 100%; object-fit: contain; }
.ficha-link:hover .ficha-plate .cover, .ficha-link:focus-visible .ficha-plate .cover { transform: translateY(-4px); }
.badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--ink); color: var(--lime); font: var(--caps); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.badge .i { width: 12px; height: 12px; }
.ficha-rows { padding: 2px 18px 8px; }
.ficha-rows div, .credits div { display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 11px 0 9px; border-bottom: 1px solid var(--ink); }
.ficha-rows div:last-child { border-bottom: 0; }
dt { font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
dd { font: 600 clamp(19px, 7.6cqi, 24px)/1.1 var(--serif); overflow-wrap: break-word; hyphens: auto; }
@container (max-width: 250px) { .ficha-rows div { grid-template-columns: minmax(0, 1fr); gap: 5px; } }

/* ---------- panel (dialog) ---------- */
.panel { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior-y: contain; scroll-padding-top: 88px; } /* the dialog scrolls, so focus must clear its 72px bar */
html:not(.js) .panel:target { display: block; z-index: 20; }
.panel::backdrop { background: rgba(40, 40, 40, .45); }
/* a strip dragged on past its start would run the browser's swipe-back: the root's none stops it, if the overscroll reaches
   it (the panel contains only its own vertical overscroll) */
html:has(.panel[open]) { overflow: hidden; overscroll-behavior-x: none; }
.panel-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 28px; height: 72px; padding: 0 var(--gut); background: var(--paper); border-bottom: 1px solid var(--ink); }
.panel-prev, .panel-next, .panel-close { display: inline-flex; align-items: center; gap: 10px; font: var(--caps); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.panel-prev:hover span, .panel-next:hover span { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; }
.panel-wa { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin-left: auto; padding: 0 16px; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); font: var(--caps); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.panel-wa:hover { background: var(--lime); color: var(--black); }
.panel-cta { margin-top: 8px; }
.panel-close { height: 44px; padding: 0 18px; border: 1px solid var(--ink); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.panel-close:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
.panel-body { display: grid; grid-template-columns: max(360px, calc((100% - 72px) / 4)) minmax(0, 1fr); gap: 56px; padding: 40px var(--gut) 96px; } /* never narrower than a ficha: the plate morph grows */
.panel-credits { position: sticky; top: var(--credits-top, 112px); align-self: start; } /* home.js: a column taller than the viewport sticks by its bottom */
.panel-plate { margin-bottom: 28px; border-top: 8px solid var(--lime); view-transition-name: none; }
.panel-title { margin-bottom: 12px; font: 600 clamp(40px, 4vw, 60px)/1 var(--serif); letter-spacing: -.01em; }
.credits { margin-bottom: 24px; }
.credits div:first-child { border-top: 1px solid var(--ink); }
.desc { max-width: 65ch; margin-bottom: 14px; font: 500 17px/1.6 var(--sans); }
.ext { margin: 14px 0 0; text-wrap: balance; }
/* inline at line-height 2: a wrapped link keeps its 4px underline between lines and its arrow after the last word */
.ext a { font: var(--caps); line-height: 2; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: .45em; }
.ext .i { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: middle; }

.piece-group { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "nav" "cap" "ext"; gap: 0 40px; margin-bottom: 64px; }
/* min-content media row: a strip is a scroll container (minimum contribution 0), so without it a shorter side
   caption spread its height into the empty ext row */
.piece-group:has(.caption) { grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); grid-template-rows: auto min-content auto auto; grid-template-areas: "head head" "media cap" "nav cap" "ext cap"; }
.piece-group[data-shape="wide"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "media" "nav" "cap" "ext"; } /* wide screenshots keep the full width; their text follows */
.piece-group[data-shape="wide"] .caption { margin-top: 24px; }
/* a portrait reel keeps its own width, so its text sits right beside it instead of across a gap */
@media (min-width: 1100px) {
  .piece-group[data-type="video"]:has(.caption) { grid-template-columns: auto minmax(240px, 1fr); }
}
.group-title { grid-area: head; margin-bottom: 18px; font: 600 28px/1.15 var(--serif); }
.strip, .piece-group > .piece { grid-area: media; }
.strip-nav { grid-area: nav; }
.caption { grid-area: cap; align-self: start; }
.piece-group > .ext { grid-area: ext; }
/* every strip fits its widest slide (--r: width / height, from the build), so no slide is ever wider than the strip */
.strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; container-type: inline-size; }
.strip-track { display: flex; gap: 16px; margin: 0; padding: 0 0 12px; list-style: none; }
.strip li { flex: none; height: min(68vh, 620px, 100cqw / var(--r, 1)); scroll-snap-align: start; }
.strip li:last-child { scroll-snap-align: end; } /* the far end is a snap position too, so the last slide shows whole */
.strip .piece { height: 100%; }
.strip .piece img, .strip video { height: 100%; width: auto; max-width: none; } /* out-ranks .piece img: slides follow their row */
.strip-nav { display: flex; gap: 8px; margin-top: 8px; }
.strip-nav[hidden] { display: none; }
.strip-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); transition: background-color .2s var(--ease), color .2s var(--ease); }
.strip-nav button:hover:not([aria-disabled="true"]) { background: var(--lime); color: var(--black); }
.strip-nav button[aria-disabled="true"] { opacity: .35; cursor: default; } /* aria only: a disabled button drops the focus it holds */
.piece img { height: auto; }
.piece-group[data-type="image"] .piece img { width: 100%; max-height: 80vh; object-fit: contain; object-position: left top; }
/* a single image under its 80vh cap keeps its own width (--r from the build), so its zoom button, badge and ring hug it */
.piece-group[data-type="image"] > .piece { width: min(100%, 80vh * var(--r)); }
.piece-video { justify-self: start; }
.piece-video video { width: calc(min(72vh, 680px) * 9 / 16); max-width: 100%; height: auto; aspect-ratio: 9 / 16; background: var(--ink); } /* a narrow column shrinks the reel, no bars */
.dur { margin-top: 8px; font: var(--caps); letter-spacing: .2em; font-variant-numeric: tabular-nums; color: var(--label); }
.caption { max-width: 62ch; padding-top: 18px; border-top: 6px solid var(--lime); }
.caption p { margin-bottom: 12px; font: 500 21px/1.45 var(--serif); }
.caption .caption-k { margin-bottom: 10px; font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--label); }

/* ---------- zoom (home.js): every panel image opens big, and at its real size ---------- */
.piece { position: relative; }
/* the button lies over its image, so the slide keeps the size its strip gives it */
.piece-zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.piece-zoom .i { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; padding: 8px; background: var(--ink); color: var(--lime); opacity: 0; transition: opacity .2s var(--ease); }
.piece-zoom:hover .i, .piece-zoom:focus-visible .i { opacity: 1; }
.piece-zoom:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--ink); } /* drawn inward: a strip clips its overflow */
@media (hover: none) {
  .piece-zoom .i { opacity: 1; } /* nothing hovers on a phone: the badge says the piece opens */
}
.zoom { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: hidden; }
.zoom[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); } /* a crowded bar never widens it */
.zoom::backdrop { background: var(--paper); }
html:has(.zoom[open]) { overscroll-behavior: none; } /* a swipe on the image flips it: never the browser's swipe-back or pull-to-refresh */
.zoom-bar { display: flex; align-items: center; gap: 8px; height: 80px; padding: 0 var(--gut); border-top: 8px solid var(--lime); border-bottom: 1px solid var(--ink); }
.zoom-step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); transition: background-color .2s var(--ease), color .2s var(--ease); }
.zoom-step:hover:not([aria-disabled="true"]), .zoom-real:hover:not([aria-disabled="true"]) { background: var(--lime); color: var(--black); }
.zoom-step[aria-disabled="true"], .zoom-real[aria-disabled="true"] { opacity: .35; cursor: default; } /* aria only: a disabled button drops the focus it holds */
.zoom-count { margin-left: 12px; font: var(--caps); letter-spacing: .16em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zoom-real { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin-left: auto; padding: 0 16px; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); font: var(--caps); letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease); }
.zoom-close { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; background: none; border: 1px solid var(--ink); font: var(--caps); letter-spacing: .16em; text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.zoom-close:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
/* the image fits the stage by its ratio (--r, from its width and height) before a single byte of it arrives */
/* a fitted stage takes no pan: one finger flips (home.js), two pinch; a pan would also run the browser's swipe-back */
/* no overscroll-behavior here: a real-size pan past an edge must reach the root, whose none is what stops the swipe-back */
.zoom-stage { display: flex; padding: clamp(12px, 2.4vw, 32px); overflow: hidden; container-type: size; touch-action: pinch-zoom; user-select: none; }
.zoom.is-real .zoom-stage, .zoom.is-pinched .zoom-stage { touch-action: manipulation; } /* the finger pans the image or the pinched page */
.zoom-stage img { flex: none; width: min(100cqw, 100cqh * var(--r, 1)); height: auto; max-width: none; aspect-ratio: var(--r, 1); margin: auto; background: var(--white) no-repeat center / 100% 100%; cursor: zoom-in; }
.zoom.no-real .zoom-stage img { cursor: default; }
/* real size: the stage scrolls, and a mouse drags it */
.zoom.is-real .zoom-stage { padding: 0; overflow: auto; cursor: grab; }
.zoom.is-real .zoom-stage img { width: var(--w); cursor: inherit; }
.zoom.is-real .zoom-stage.is-dragging { cursor: grabbing; }

/* ---------- trajetória: a timeline of the agencies (the old site drew a bare vertical line beside their buttons) ---------- */
.trajetoria { padding: 112px var(--gut) 104px; }
.traj-frame { --rail: 200px; --col: 64px; --gap: 88px; --size: clamp(34px, 3.5vw, 50px); --at: calc(var(--size) * .47); --mark: 24px; --line: 10px; padding: 52px 56px 56px 0; border-top: 10px solid var(--lime); border-right: 10px solid var(--lime); }
.section-title { margin-bottom: 32px; font: 600 clamp(40px, 4.4vw, 64px)/1 var(--serif); letter-spacing: -.01em; }
/* each agency a wide band along a rail: two-tone years (as the works' title) and its name at one display size, a step
   under the section title; a square marker between them, the button beside the name, then label-over-value columns (--at:
   the marker's height, mid-caps); the rail as heavy as the frame's lime */
.timeline { display: grid; gap: var(--gap); margin: 40px 0 96px; padding: 0; list-style: none; }
.tl-item { position: relative; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--col); }
/* the rail: an ink hairline from this marker to the next, which a lime band fills (drawn by the scroll where supported) */
.tl-item:not(:last-child)::after { content: ""; position: absolute; top: var(--at); bottom: calc(-1 * (var(--gap) + var(--at))); left: calc(var(--rail) + (var(--col) - var(--line)) / 2); width: var(--line); background: linear-gradient(var(--lime), var(--lime)) top / 100% 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat; }
.tl-item::before { content: ""; position: absolute; z-index: 1; top: calc(var(--at) - var(--mark) / 2); left: calc(var(--rail) + (var(--col) - var(--mark)) / 2); width: var(--mark); height: var(--mark); box-sizing: border-box; background: var(--lime); border: 2px solid var(--ink); }
.tl-years { display: grid; align-content: start; justify-items: end; font: 600 var(--size)/.95 var(--serif); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.tl-years time:last-child { color: var(--soft); }
.tl-dash { display: none; }
.tl-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 32px; }
.tl-agency { padding-bottom: 22px; font: 600 var(--size)/.95 var(--serif); letter-spacing: -.01em; }
.tl-body .btn { grid-row: 1; grid-column: 2; margin-top: calc(var(--at) - 24px); }
.tl-rows { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--ink); }
.tl-rows div { padding-top: 16px; }
.tl-rows dt { margin-bottom: 10px; }
.tl-rows dd { font: 500 clamp(19px, 1.6vw, 22px)/1.4 var(--serif); }
.tl-rows div:nth-child(3) { grid-column: 1 / -1; margin-top: 20px; border-top: 1px solid var(--ink); }
.tl-rows div:nth-child(3) dd { display: grid; gap: 8px; max-width: 34em; } /* the awards stack under their label */
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); font: var(--caps); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.btn:hover { background: var(--lime); color: var(--black); }
.marcas { max-width: 34em; margin-left: calc(var(--rail) + var(--col)); font: 500 clamp(22px, 2vw, 28px)/1.35 var(--serif); text-wrap: pretty; } /* in the timeline's text column */
/* where view timelines exist, each segment fills and each marker lights as it meets a reading line 60% down the screen;
   elsewhere, and under reduced motion, the rail shows whole and lit */
@supports (animation-timeline: view()) {
  .tl-item { view-timeline: --step block; }
  .tl-item:not(:last-child)::after { animation: tl-fill linear both; animation-timeline: --step; animation-range: cover calc(40vh + var(--at)) cover calc(100% - 60vh + var(--gap) + var(--at)); }
  .tl-item::before { animation: tl-light linear both; animation-timeline: --step; animation-range: cover calc(40vh + var(--at)) cover calc(40vh + var(--at) + 1px); }
}
@keyframes tl-fill { from { background-size: 100% 0%, 1px 100%; } to { background-size: 100% 100%, 1px 100%; } }
@keyframes tl-light { from { background-color: var(--paper); } to { background-color: var(--lime); } }

/* ---------- contato ---------- */
.contato { padding: 104px var(--gut); background: var(--white); }
.rule { display: flex; align-items: center; gap: 22px; }
.rule::before { content: ""; width: 72px; height: 6px; flex: none; background: var(--lime); }
.contato-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 56px; align-items: start; }
.wa-big { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 22px; padding: 30px 34px; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.wa-big .i { width: 56px; height: 56px; grid-row: span 2; }
.wa-label { font: 600 clamp(34px, 3vw, 46px)/1 var(--serif); }
.wa-num { font: 600 15px/1.2 var(--sans); letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--paper); }
.wa-big:hover { background: var(--lime); color: var(--black); }
.wa-big:hover .wa-num { color: var(--ink); }
.canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.canais li { display: grid; } /* the link fills the row, so a wrapped e-mail and its neighbour share one bottom rule */
.canais a { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 2px 16px; padding: 16px 0; border-bottom: 1px solid var(--ink); text-decoration: none; }
.canais .i { width: 48px; height: 48px; padding: 12px; grid-row: span 2; background: var(--lime); color: var(--ink); }
.canais .k { font: 700 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.canais .v { font: 500 17px/1.3 var(--sans); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.canais a:hover .v { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; }

/* ---------- footer ---------- */
.foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px 48px; padding: 48px var(--gut) 40px; border-top: 1px solid var(--ink); }
.foot .logo { width: 86px; height: 72px; color: var(--black); }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 28px; font: 600 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; }
.credit { grid-column: 1 / -1; font: 500 13px/1.5 var(--sans); letter-spacing: .04em; color: var(--label); }
.credit a { text-decoration-color: currentColor; }
.wa-float { display: none; }

/* ---------- cookie notice (consent.js): a grafite card at the foot of the view, the lime band on top; Aceitar and Recusar
   are the same button, neither one pushed. The open dialogs and the menu sit above it, in the top layer ---------- */
.cookies { position: fixed; left: 16px; bottom: 16px; z-index: 6; display: grid; gap: 18px; width: min(520px, calc(100vw - 32px)); padding: 22px 24px 24px; background: var(--ink); color: var(--paper); border-top: 8px solid var(--lime); }
.cookies-text { font: 500 15px/1.55 var(--sans); }
.cookies-text a { color: var(--lime); text-underline-offset: .2em; }
.cookies-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cookies .cta { flex: 1 1 140px; justify-content: center; cursor: pointer; }

/* ---------- motion ---------- */
::view-transition-group(plate), ::view-transition-group(piece) { animation-duration: .32s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- tablet & phone ---------- */
@media (max-width: 1099px) {
  /* without the Popover API (iOS <= 16) the menu is a wrapped row under the logo */
  .top { grid-template-columns: auto 1fr auto; min-height: 84px; padding-block: 18px; gap: 12px; }
  .brand .logo { width: 57px; height: 48px; }
  .top .cta { grid-column: 3; padding: 0 16px; }
  .nav { grid-column: 1 / -1; }
  .nav ul { flex-wrap: wrap; justify-content: flex-start; gap: 4px 20px; }
  @supports selector(:popover-open) {
    .top { grid-template-columns: auto 1fr auto auto; height: 84px; padding-block: 0; }
    .menu-toggle { display: inline-flex; grid-column: 3; align-items: center; height: 44px; padding: 0 16px; background: none; border: 1px solid var(--ink); font: var(--caps); letter-spacing: .2em; text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
    .menu-toggle:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
    .top .cta { grid-column: 4; }
    .nav { position: fixed; inset: 0 0 auto auto; width: min(320px, 100vw); height: 100dvh; margin: 0; padding: 96px 28px 28px; border: 0; border-left: 10px solid var(--lime); background: var(--paper); color: var(--ink); }
    .nav::backdrop { background: rgba(40, 40, 40, .45); }
    .menu-close { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); font: var(--caps); letter-spacing: .2em; text-transform: uppercase; transition: background-color .2s var(--ease), color .2s var(--ease); }
    .menu-close:hover { background: var(--lime); color: var(--black); }
    .nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .nav a { padding: 18px 0; border-top: 0; border-bottom: 1px solid var(--ink); font-size: 15px; }
    .nav a[aria-current] { padding-left: 14px; border-left: 4px solid var(--ink); }
  }
  .works-head { grid-template-columns: minmax(0, 1fr); }
  .works-title { text-align: left; }
  .fichas { gap: 16px; }
  .ficha { width: calc((100vw - 2 * var(--gut) - 32px) / 2.25); width: calc((100cqw - 32px) / 2.25); }
  .works .strip-nav { justify-content: flex-start; } /* the floating WhatsApp holds the bottom right corner */
  .panel-body { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .panel-credits { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
  .panel-plate { grid-row: span 4; margin: 0; }
  .piece-group:has(.caption) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "media" "nav" "cap" "ext"; }
  .caption { margin-top: 20px; }
  .traj-frame { --rail: 150px; --col: 48px; --gap: 72px; }
  /* the band stacks: its rows one under the other, the button after them */
  .tl-body { grid-template-columns: minmax(0, 1fr); }
  .tl-body .btn { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 26px; }
  .tl-rows { grid-template-columns: minmax(0, 1fr); }
  .tl-rows div + div { margin-top: 16px; border-top: 1px solid var(--ink); }
  .contato-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 5; display: grid; place-items: center; width: 56px; height: 56px; background: var(--ink); color: var(--lime); border: 1px solid var(--lime); }
  .wa-float .i { width: 28px; height: 28px; }
  .wa-float { transition: opacity .2s var(--ease), visibility .2s, background-color .2s var(--ease), color .2s var(--ease); }
  .wa-float:hover { background: var(--lime); color: var(--black); }
  html.js:not(.past-top) .wa-float { opacity: 0; visibility: hidden; }
  .foot { padding-bottom: 96px; }
}
@media (max-width: 720px) {
  .panel-prev span, .panel-next span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .panel-prev, .panel-next { min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (max-width: 640px) {
  .traj-frame { padding-right: 24px; }
  /* the rail runs down the left edge; the years, smaller than the name, sit above it on one line, joined by a dash */
  .traj-frame { --rail: 0px; --col: 40px; --gap: 64px; --size: 32px; --at: 13px; --mark: 20px; --line: 8px; }
  .tl-item { grid-template-columns: minmax(0, 1fr); padding-left: var(--col); }
  .tl-item::before { left: 0; }
  .tl-item:not(:last-child)::after { left: calc((var(--mark) - var(--line)) / 2); }
  .tl-years { display: flex; align-items: baseline; gap: 8px; justify-content: flex-start; margin-bottom: 10px; font-size: 26px; line-height: 1; }
  .tl-dash { display: inline; color: var(--soft); }
  .top .cta span, .panel-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .top .cta { width: 46px; padding: 0; justify-content: center; }
  .panel-wa { padding: 0 12px; }
  .panel-bar { gap: 20px; height: 64px; }
  .panel { scroll-padding-top: 80px; }
  .panel-credits { grid-template-columns: minmax(0, 1fr); }
  .panel-plate { grid-row: auto; margin-bottom: 24px; }
  .strip li { height: min(58vh, 520px, 100cqw / var(--r, 1)); }
  .piece-video video { width: calc(min(64vh, 560px) * 9 / 16); }
  .zoom-bar { height: 72px; }
  .zoom-real span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .zoom-real { width: 44px; padding: 0; justify-content: center; }
  .canais { grid-template-columns: minmax(0, 1fr); }
  .wa-big { padding: 24px; }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot-nav { justify-content: flex-start; }
  .trajetoria, .contato { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 640px) {
  .cookies { left: 0; bottom: 0; width: 100%; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); gap: 14px; }
}
@media (max-width: 479px) {
  .ficha { width: calc((100vw - 2 * var(--gut) - 16px) / 1.15); width: calc((100cqw - 16px) / 1.15); }
  .line { min-height: 4lh; } /* the fallback serif needs a 4th line around 414px */
  .zoom-close { padding: 0 12px; } /* from 401px Fechar has its word back, beside a count of two digits */
}
@media (max-width: 400px) {
  .panel-bar { gap: 8px; } /* 44px arrows, WhatsApp and Fechar fit 320px screens */
  .panel-close { padding: 0 12px; }
  .zoom-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .zoom-close { width: 44px; padding: 0; justify-content: center; } /* arrows, count, Ampliar and Fechar fit 320px screens */
}
/* a phone held sideways, a short window: a slimmer bar and paper, so the fitted image is larger than in its panel */
@media (max-height: 500px) {
  .zoom-bar { height: 56px; }
  .zoom-bar :focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--ink); } /* no room around a 44px control */
  .zoom-stage { padding: 8px; }
}
/* a low laptop window: thinner paper keeps a single image (80vh in its panel) larger in the zoom; the bar keeps its 80px,
   the room its focus ring needs */
@media (max-height: 720px) and (orientation: landscape) {
  .zoom-stage { padding: 8px; }
}
@media (max-width: 359px) {
  .line { min-height: 5lh; } /* and a 5th at 347-352px */
  .works-title { min-height: 2lh; } /* the fallback serif wraps "Trabalhos Recentes" at 338-344px */
  .panel-cta .cta { padding: 0 16px; letter-spacing: .12em; } /* keeps "Conversar no WhatsApp" on one line */
}

/* ---------- print (last, so its plain selectors win): the row wraps, three fichas a line so one fits a landscape page ---------- */
@media print {
  .works-head { break-after: avoid; }
  .fichas { flex-wrap: wrap; overflow: visible; }
  .fichas > li { break-inside: avoid; }
  .ficha { width: calc((100cqw - 48px) / 3); }
  .works .strip-nav, .works .strip-nav[hidden] { display: none; }
  .works.is-pinned::after { content: none; }
  .works.is-pinned > .works-pin { position: static; }
  .wa-float { display: none; }
  .cookies { display: none; }
  /* the timeline prints whole and lit whatever the scroll, its rail, markers and two-tone years even without background
     graphics, and no band splits across pages */
  .tl-item { break-inside: avoid; }
  .tl-years, .tl-item::before, .tl-item:not(:last-child)::after { animation: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}