/*
Theme Name: rdrvcv
Theme URI: https://rdrvcv.com/
Author: Raffael Dutra Rocha
Description: RDRVCV portfolio theme (Design System RDRVCV). Home and 7 cases in English, Portuguese and Spanish, light and dark. Built from the approved site RDR-0008 v24. Pages are pre-rendered in content/ and served by functions.php; no database content needed.
Version: 1.0.129
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rdrvcv
*/
/* =====================================================================
   RDRVCV · site novo · RDR-0008 v23 · 2026-09-29
   Built from the RDRVCV Design System (RDR-0006 v10 · rdrvcv.com/design-system)
   Tokens, text styles, buttons, chip, topbar and theme switch = system values.
   Grid: 12 columns · margin 64 / 32 / 16 · gutter 24 · max 1792 (section 14, 17).
   ===================================================================== */

/* ---------- tokens (= design system, part 1) ---------- */
:root {
  --color-ink: #000000; --color-paper: #ffffff; --color-mist: #ccd7ff;
  --color-gray-600: #595959; --color-gray-400: #a5a5a5; --color-gray-200: #dfdfdf; --color-gray-800: #262626;
  --color-signal: #00e5ff; --color-alert: #f04438;

  --text-primary: var(--color-ink); --text-muted: var(--color-gray-600); --text-inverse: var(--color-paper);
  --surface-default: var(--color-paper); --surface-accent: var(--color-mist); --surface-inverse: var(--color-ink);
  --border-strong: var(--color-ink); --border-soft: var(--color-gray-200);
  --state-disabled: var(--color-gray-400); --state-focus: var(--color-signal); --state-danger: var(--color-alert);
  --text-on-accent: var(--color-ink); --border-on-accent: var(--color-ink);
  --text-read: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--color-gray-600) 50%, var(--color-mist)) 60%, var(--color-gray-400)) 86%, var(--color-gray-600)); /* cinza levemente azulado ≈ #91949e */ /* corpo de leitura, RDR-0033 v29–v47 */

  --font-display: 'Jost', sans-serif; --font-body: 'Work Sans', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-0: 0px; --radius-pill: 999px;
  --stroke-1: 1px; --stroke-2: 2px; --stroke-3: 3px;
  --duration-quick: 120ms; --duration-base: 240ms; --duration-slow: 480ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* layout (part 3 · grid + responsive) */
  --margin: 64px; --gutter: 24px; --max: 1792px;
  --display-size: 80px; --display-line: 88px;
  --h1-size: 56px; --h1-line: 64px;
}
.theme-dark {
  --text-primary: var(--color-paper); --text-muted: var(--color-gray-400); --text-inverse: var(--color-ink);
  --surface-default: var(--color-ink); --surface-inverse: var(--color-paper);
  --border-strong: var(--color-paper); --border-soft: var(--color-gray-800);
  --state-disabled: var(--color-gray-600); --border-on-accent: var(--color-paper);
  --text-read: color-mix(in srgb, color-mix(in srgb, color-mix(in srgb, var(--color-gray-600) 70%, var(--color-mist)) 85%, var(--color-gray-600)) 84%, var(--color-gray-400)); /* ≈ #7e8089 */
}
@media (max-width: 1279px) { :root { --margin: 32px; --display-size: 56px; --display-line: 64px; --h1-size: 44px; --h1-line: 52px; } }
@media (max-width: 767px)  { :root { --margin: 16px; --gutter: 16px; --display-size: 48px; --display-line: 52px; --h1-size: 32px; --h1-line: 40px; } }

/* ---------- text styles (1 class = 1 style) ---------- */
.t-display { font: 700 var(--display-size)/var(--display-line) var(--font-display); text-transform: uppercase; }
.t-h1      { font: 700 var(--h1-size)/var(--h1-line) var(--font-display); text-transform: uppercase; }
.t-h2      { font: 700 40px/48px var(--font-display); }
.t-h3      { font: 500 28px/36px var(--font-display); }
.t-lead    { font: 700 20px/24px var(--font-display); text-transform: uppercase; }
.t-body    { font: 400 16px/24px var(--font-body); }
.t-small   { font: 400 14px/20px var(--font-body); }
.t-caption { font: 400 12px/16px var(--font-body); }
.t-label   { font: 700 12px/16px var(--font-display); letter-spacing: .18em; text-transform: uppercase; }
.t-button  { font: 700 14px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.t--muted  { color: var(--text-muted); }
@media (max-width: 767px) { .t-h2 { font-size: 32px; line-height: 40px; } .t-h3 { font-size: 22px; line-height: 30px; } }

/* ---------- page ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--surface-default); overflow-x: clip; }
body { background: var(--surface-default); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: var(--stroke-2) solid var(--state-focus); outline-offset: 3px; }
.skip { position: absolute; left: var(--margin); top: -80px; z-index: 20; padding: var(--space-3) var(--space-4); background: var(--surface-inverse); color: var(--text-inverse); }
.skip:focus { top: var(--space-2); }
main, .talk, .footer { width: 100%; max-width: calc(var(--max) + 2 * var(--margin)); margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); }

/* ---------- topbar (section 8) ---------- */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 64px; padding: 0 var(--margin); background: var(--surface-default); border-bottom: var(--stroke-1) solid var(--border-soft); }
.topbar__brand { display: flex; align-items: baseline; gap: var(--space-3); }
.topbar__controls { display: flex; gap: var(--space-4); align-items: center; }
.topbar > .copy-mail + .topbar__controls { margin-left: var(--space-4); }
.topbar__link { display: flex; align-items: center; height: 64px; border-bottom: 4px solid transparent; padding-top: 4px; color: var(--text-muted); transition: color var(--duration-quick) var(--ease-out); }
.topbar__link:hover, .topbar__link.is-current { color: var(--text-primary); border-bottom-color: var(--border-strong); }
.topbar__link--mail { text-transform: none; letter-spacing: .08em; }
.theme-switch { display: flex; border: var(--stroke-2) solid var(--border-strong); }
.theme-switch__option { height: 32px; padding: 0 var(--space-3); border: 0; background: var(--surface-default); color: var(--text-primary); cursor: pointer; letter-spacing: .12em; }
.theme-switch__option + .theme-switch__option { border-left: var(--stroke-2) solid var(--border-strong); }
.theme-switch__option[aria-pressed="true"] { background: var(--surface-inverse); color: var(--text-inverse); }
@media (max-width: 767px)  { .topbar { gap: var(--space-3); } .theme-switch__option { padding: 0 var(--space-2); } }
@media (max-width: 400px)  { .topbar__controls { gap: var(--space-2); } .theme-switch__option { padding: 0 6px; letter-spacing: .08em; } .lang__trigger { padding: 0 var(--space-1); } }
@media (max-width: 359px)  { .lang__trigger > .lang__icon:first-child { display: none; } .theme-switch__option { padding: 0 4px; font-size: 11px; letter-spacing: .04em; } }

/* ---------- dark mode toggle = design system section 9 toggle (copied as is): one switch, on = dark ---------- */
.control { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.theme-toggle { height: 32px; padding: 0; border: 0; background: transparent; color: var(--text-primary); cursor: pointer; }
.toggle__track { display: flex; align-items: center; width: 40px; height: 24px; padding: 0 3px; border: var(--stroke-2) solid var(--border-strong); border-radius: var(--radius-pill); transition: background var(--duration-quick) var(--ease-out); }
.toggle__thumb { width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--text-primary); }
.toggle__track--on { justify-content: flex-end; background: var(--surface-inverse); }
.toggle__track--on .toggle__thumb { background: var(--text-inverse); }

/* ---------- buttons · chip (section 7) ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-5); border: var(--stroke-2) solid var(--border-strong); border-radius: var(--radius-0); background: var(--surface-default); color: var(--text-primary); cursor: pointer; white-space: nowrap; transition: background var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }
.button--primary { background: var(--surface-inverse); color: var(--text-inverse); }
.button--primary:hover { background: var(--surface-default); color: var(--text-primary); }
.button--secondary:hover { background: var(--surface-accent); color: var(--text-on-accent); border-color: var(--border-on-accent); }
.button--text { border-color: transparent; padding: 0 var(--space-1); background: transparent; }
.button__arrow { display: inline-block; transition: transform var(--duration-base) var(--ease-out); }
.button--text:hover .button__arrow, .card:hover .button__arrow, .button--secondary:hover .button__arrow { transform: translateX(4px); }
/* v1.0.57 · text links: hover underline under the label only (site.js wraps the text in .button__label), never under the arrow */
.button__label { padding-bottom: 7px; margin-bottom: -7px; background: linear-gradient(currentColor, currentColor) left bottom / 0 2.5px no-repeat; transition: background-size var(--duration-slow) var(--ease-out); }
.button--text:hover .button__label, .button--text:focus-visible .button__label { background-size: 100% 2.5px; }
@media (prefers-reduced-motion: reduce) { .button__label { transition: none; } }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 var(--space-3); border: var(--stroke-1) solid var(--border-strong); border-radius: var(--radius-pill); }
.chip .t-label { font-size: 11px; letter-spacing: .12em; }
.chip__dot { width: 8px; height: 8px; border: var(--stroke-1) solid var(--border-strong); border-radius: var(--radius-pill); }
.chip--active .chip__dot { background: var(--surface-inverse); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* ---------- home · intro ---------- */
.intro { display: flex; flex-direction: column; gap: var(--space-7); padding: var(--space-9) 0 var(--space-8); }
.intro__name { display: block; width: 100%; }
.fit { display: inline-block; white-space: nowrap; font: 700 var(--display-size)/1 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.intro__name .fit { line-height: .9; }
.intro__row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; }
.intro__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
@media (max-width: 767px) { .intro { padding: var(--space-8) 0 var(--space-7); gap: var(--space-6); } .intro__actions { gap: var(--space-4); } }

/* ---------- section head ---------- */
.section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.work { padding: var(--space-8) 0 var(--space-9); }
/* RDR-0046: Artigos, Trabalhos e Projetos Pessoais com o mesmo espaçamento (antes Artigos tinha padding-bottom: 0 → 64px até Trabalhos contra 144px entre as outras) */

/* ---------- case card (section 11) ---------- */
.cards { display: grid; gap: var(--gutter); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .cards--3 { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; border: var(--stroke-3) solid var(--border-strong); background: var(--surface-default); transition: background var(--duration-quick) var(--ease-out); }
.card { position: relative; isolation: isolate; }
/* v1.0.48 · hover: black/white diagonal band moving up-right; difference blend = negative where it crosses text. v1.0.61: band starts below the photo (--stripe-top, set by site.js; 56% fallback) */
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% / 36); z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: difference; background: #fff; transition: opacity var(--duration-quick) var(--ease-out); }
.card:hover::after, .card:focus-visible::after { opacity: 1; }
@keyframes card-stripes { to { background-position: -48px -48px; } }
@media (prefers-reduced-motion: reduce) { .card:hover::after, .card:focus-visible::after { animation: none; } }
.card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--stroke-3) solid var(--border-strong); background: none; }
.card__media img, .card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
.card--crop-bottom .card__media img, .card--crop-bottom .card__video { transform-origin: 50% 8%; transform: scale(1.08); }   /* top 0.6% (dark rows of the film) + bottom 7.4% (green under the table in close-ups, max 4.8%) */   /* hides the table edge at the bottom of the film frame */
.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-3); flex: 1; }
.card__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__foot { padding: 0 var(--space-4) var(--space-4); }
.card__foot .button { height: 40px; }

/* ---------- case page ---------- */
.case__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-7) 0 var(--space-8); }
.case__back { margin-left: calc(-1 * var(--space-1)); height: 40px; margin-bottom: var(--space-4); }
.case__back span:not(.button__label) { transition: transform var(--duration-base) var(--ease-out); }
.case__back:hover span:not(.button__label) { transform: translateX(-4px); }
.case__title { max-width: 20ch; }
.hero { margin: 0 calc(-1 * var(--margin)); }
.hero__media { width: 100%; height: auto; max-height: 88vh; object-fit: cover; }
.media-video { display: block; width: 100%; height: auto; background: var(--surface-default) center / cover no-repeat; }
/* the film files carry 4 dark rows at the top in their first half second (and on every loop): a 1.2% crop from the top hides them */
.hero { overflow: hidden; }
.hero .media-video { transform: scale(1.075); transform-origin: 50% 8%; }   /* top 0.6% (dark rows) + bottom 6.9%: in every close-up the white table runs to the edge (max band under it: 4.8%) */
.hero .media-video { max-height: 88vh; object-fit: cover; }
.case__content { display: flex; flex-direction: column; }

/* split = label on 5 columns, text on 7 (sections 14 · 16) */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); padding: var(--space-8) 0; border-top: var(--stroke-1) solid var(--border-soft); }
.case__content > .split:first-child { border-top: 0; }
.split__label { grid-column: 1 / span 5; padding-top: var(--space-1); }
.split__body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: var(--space-5); }
.prose { max-width: 68ch; }
.prose i, .prose em { font-style: italic; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.split__figure img, .split__figure video { width: 100%; height: auto; border: var(--stroke-1) solid var(--border-soft); }
.quote { gap: var(--space-5); }
.quote__text { quotes: none; }
@media (max-width: 767px) { .split { padding: var(--space-7) 0; } .split__label, .split__body { grid-column: 1 / -1; } }

/* gallery */
.gallery { display: grid; gap: var(--gutter); padding: var(--space-5) 0 var(--space-8); }
.gallery--1 { grid-template-columns: 1fr; }
.gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery__item img, .gallery__item video { width: 100%; height: auto; }
@media (max-width: 1023px) { .gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .gallery--2 { grid-template-columns: 1fr; } }

/* divider = part opener */
.divider { padding: var(--space-9) 0 var(--space-6); border-top: var(--stroke-3) solid var(--border-strong); margin-top: var(--space-8); }

/* story = numbered chapter */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-5); padding: var(--space-8) 0; border-top: var(--stroke-1) solid var(--border-soft); }
.story__head { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--space-3); }
.story__body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: var(--space-4); }
.story__figure { grid-column: 1 / -1; margin-top: var(--space-5); }
.story__figure img { width: 100%; height: auto; border: var(--stroke-1) solid var(--border-soft); }
@media (max-width: 767px) { .story__head, .story__body { grid-column: 1 / -1; } }

/* more work */
.more { padding: var(--space-9) 0; margin-top: var(--space-8); }

/* ---------- Art Direction case (v11): canvas -> concepts -> proof -> question ---------- */
.hero__cap { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--margin) 0; }
.ad-method { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-7); padding: var(--space-9) 0 var(--space-8); }
.ad-method__label { grid-column: 1 / -1; }
.ad-steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); list-style: none; }
.ad-step { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: var(--stroke-3) solid var(--border-strong); }
.ad-step__num { color: var(--text-muted); }
.ad-step:last-child { border-top-color: var(--surface-accent); }
.ad-step:last-child .ad-step__num { color: var(--text-primary); }
.ad-method__text { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: var(--space-4); }
.ad-concepts { display: flex; flex-direction: column; gap: var(--space-9); padding: var(--space-8) 0 var(--space-9); }
.ad-plate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-4); align-items: end; }
.ad-plate__media { grid-column: 1 / span 9; }
.ad-plate__media img { width: 100%; height: auto; }
.ad-plate__cap { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-2); }
.ad-plate--flip .ad-plate__media { grid-column: 4 / span 9; grid-row: 1; }
.ad-plate--flip .ad-plate__cap { grid-column: 1 / span 3; grid-row: 1; }
.ad-plate__line { font-style: italic; }
.ad-proof { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); border: var(--stroke-3) solid var(--border-strong); background: var(--surface-default); color: var(--text-primary); }
.ad-proof__quote { max-width: 30ch; quotes: none; }
.ad-proof__author { color: var(--text-muted); }
.ad-question { padding: var(--space-10) 0 var(--space-6); max-width: 18ch; }
@media (max-width: 1023px) {
  .ad-plate__media, .ad-plate--flip .ad-plate__media { grid-column: 1 / -1; grid-row: auto; }
  .ad-plate__cap, .ad-plate--flip .ad-plate__cap { grid-column: 1 / -1; grid-row: auto; }
  .ad-method__text { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .ad-steps { grid-template-columns: 1fr; }
  .hero__cap { flex-direction: column; gap: var(--space-1); }
  .ad-proof { padding: var(--space-6) var(--space-5); }
  .ad-proof .t-h2 { font-size: 26px; line-height: 34px; }
  .ad-question { padding-top: var(--space-9); }
}

/* ---------- Product Design case (v15): people -> house system -> same spine, another brand ---------- */
.pd-lead { max-width: 60ch; color: var(--text-muted); }
.pd-ch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-5); padding: var(--space-9) 0 var(--space-6); }
.pd-ch__head { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--space-3); }
.pd-ch__body { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: var(--space-5); }
.pd-shots img, .pd-compare img { border: var(--stroke-1) solid var(--border-soft); }
.pd-proof { margin: var(--space-5) 0 0; }
.pd-compare { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) 0 var(--space-5); }
.pd-compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--gutter); }
.pd-close { max-width: 20ch; }
@media (max-width: 767px) {
  .pd-ch__head, .pd-ch__body { grid-column: 1 / -1; }
  .pd-ch { padding-top: var(--space-8); }
  .pd-compare__grid { gap: var(--space-2) var(--space-3); }
  .actions .button { white-space: normal; height: auto; min-height: 48px; padding-top: var(--space-3); padding-bottom: var(--space-3); text-align: left; }
}

/* ---------- let's talk (full width, fitted by site.js) ---------- */
.talk { padding-top: var(--space-9); padding-bottom: var(--space-8); }
.talk__link { display: block; width: 100%; }
.talk__text { background: linear-gradient(currentColor, currentColor) left bottom / 0 .07em no-repeat; transition: background-size var(--duration-slow) var(--ease-out); padding-bottom: .04em; }
.talk__arrow { display: inline-block; width: .9em; height: .54em; margin-left: .22em; vertical-align: .14em; overflow: hidden; text-indent: 2em; white-space: nowrap; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M2 30H94M72 8l22 22-22 22' fill='none' stroke='%23000' stroke-width='7.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M2 30H94M72 8l22 22-22 22' fill='none' stroke='%23000' stroke-width='7.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: transform var(--duration-base) var(--ease-out); } /* seta desenhada: traço com a mesma espessura do sublinhado (.07em) */
.talk__link:hover .talk__text { background-size: 100% .07em; } /* mesma espessura do traço da seta */
.talk__link:hover .talk__arrow { transform: translateX(.08em); }
.talk__line { display: block; width: max-content; line-height: 1; }  .talk__line + .talk__line { margin-top: .14em; } .talk__line:not(:last-child) .talk__text { background-image: none; } /* mobile: cada palavra numa linha, ajustada pelo site.js */ /* mobile: "Vamos / conversar →" em duas linhas, maior */

/* ---------- availability (as the current site: green dot that pulses) ---------- */
.intro__about { display: flex; flex-direction: column; gap: var(--space-4); }
.status { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-primary); }
.status__dot { position: relative; width: 8px; height: 8px; border-radius: var(--radius-pill); background: #55c91c; flex: none; }
.status__dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #55c91c; animation: status-pulse 1.6s var(--ease-out) infinite; }
@keyframes status-pulse { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }

/* ---------- e-mail + copy (no link) ---------- */
.copy-mail { display: flex; align-items: center; gap: var(--space-1); }
.copy-mail__text { text-transform: none; letter-spacing: .08em; user-select: all; font-weight: 400; }
.copy-mail__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--duration-quick) var(--ease-out); }
.copy-mail__btn:hover, .copy-mail__btn.is-done { color: var(--text-primary); }
.copy-mail__btn .icon { width: 16px; height: 16px; }
.copy-mail__btn { position: relative; }
.copy-mail__tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -4px); padding: var(--space-1) var(--space-2); background: var(--surface-inverse); color: var(--text-inverse); white-space: nowrap; text-transform: none; letter-spacing: 0; pointer-events: none; opacity: 0; transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out); z-index: 30; }
.copy-mail__btn:hover .copy-mail__tip, .copy-mail__btn:focus-visible .copy-mail__tip, .copy-mail__btn.is-done .copy-mail__tip { opacity: 1; transform: translate(-50%, 0); }
.copy-mail__ok { display: none; }
.copy-mail__btn.is-done .copy-mail__ico { display: none; }
.copy-mail__btn.is-done .copy-mail__ok { display: inline-flex; }
.copy-mail__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.icon { display: block; flex: none; }
.topbar .copy-mail { margin-left: auto; }
/* phone: everything stays on the top row; e-mail, copy and language get compact */
@media (max-width: 767px) {
  .topbar { gap: var(--space-2); }
  .topbar > .copy-mail + .topbar__controls { margin-left: var(--space-2); }
  .topbar__controls { gap: var(--space-2); }
  .topbar__brand .t-lead { font-size: 15px; }
  .copy-mail { gap: 0; min-width: 0; }
  .copy-mail__text { font-size: 11px; letter-spacing: .05em; }
  .copy-mail__btn { width: 24px; }
  .copy-mail__btn .icon { width: 14px; height: 14px; }
  .copy-mail__tip { left: auto; right: 0; transform: translate(0, -4px); }
  .copy-mail__btn:hover .copy-mail__tip, .copy-mail__btn:focus-visible .copy-mail__tip, .copy-mail__btn.is-done .copy-mail__tip { transform: translate(0, 0); }
  .lang__trigger { padding: 0 2px; gap: var(--space-1); }
  .lang__trigger > .lang__icon:first-child { display: none; }
}
@media (max-width: 359px) {
  .topbar__brand .t-lead { font-size: 14px; }
  .copy-mail__text { font-size: 10px; letter-spacing: .03em; }
}

/* ---------- language menu = design system section 7 (RDR-0006 v10, copied as is): click to open, unlike the Light/Dark switch ---------- */
.lang { position: relative; display: flex; }
.lang__trigger { position: relative; display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2); border: 0; border-bottom: var(--stroke-2) solid transparent; background: transparent; color: var(--text-primary); cursor: pointer; }
/* v1.0.80 language toggle: no underline on hover; a tooltip box like the copy-e-mail icon ("Change language" / "Mudar idioma" / "Cambiar idioma", injected by site.js) */
.lang__tip { position: absolute; top: calc(100% + 8px); right: 0; transform: translate(0, -4px); padding: var(--space-1) var(--space-2); background: var(--surface-inverse); color: var(--text-inverse); white-space: nowrap; text-transform: none; letter-spacing: 0; pointer-events: none; opacity: 0; transition: opacity var(--duration-quick) var(--ease-out), transform var(--duration-quick) var(--ease-out); z-index: 30; }
@media (hover: hover) { .lang__trigger:hover .lang__tip { opacity: 1; transform: translate(0, 0); } }   /* v1.0.82 hover only: no focus-visible, so the box can't stay stuck after Esc / keyboard */
.lang.is-open .lang__tip { opacity: 0; }
.lang__icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.lang__chevron { transition: transform var(--duration-quick) var(--ease-out); }
.lang.is-open .lang__chevron { transform: rotate(180deg); }
.lang__list { position: absolute; top: calc(100% + 10px); left: 50%; right: auto; transform: translateX(-50%); z-index: 20; display: none; flex-direction: column; width: 200px; padding: 0; border: var(--stroke-2) solid var(--border-strong); background: var(--surface-default); }
.lang.is-open .lang__list { display: flex; }
@media (max-width: 480px) { .lang__list { left: auto; right: 0; transform: none; } }   /* v1.0.96 list opens centred under the language button; on phones it stays right-aligned so it can't leave the screen */
.lang__option { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--text-primary); text-align: left; cursor: pointer; }
/* v1.0.90 language option hover = the same moving black/white stripes as the cards (up-left, difference blend), instead of the grey fill */
.lang__option { position: relative; overflow: hidden; }
.lang__option::after { content: ""; position: absolute; inset: -40px; pointer-events: none; opacity: 0; mix-blend-mode: difference; background: transparent; transition: opacity var(--duration-quick) var(--ease-out); }   /* v1.0.93 oversized, un-tiled stripes (no tile seams = no white lines at the top/bottom of the row); loop = 20px diagonal shift */
/* v1.0.94 hovered row is solid black underneath the stripes (no white hairlines at fractional pixel sizes); list has no inner padding so the stripes reach the outline; list sits 14px below the toggle */
.lang__option:hover, .lang__option:focus-visible { background: var(--text-primary); color: var(--text-inverse); }
.lang__option:hover *, .lang__option:focus-visible * { color: var(--text-inverse) !important; }
.lang__option:hover::after, .lang__option:focus-visible::after { opacity: 0; }
@keyframes lang-stripes { to { transform: translate(-20px, -20px); } }
@media (prefers-reduced-motion: reduce) { .lang__option:hover::after, .lang__option:focus-visible::after { animation: none; } }
.lang__option.is-active { background: var(--surface-accent); color: var(--text-on-accent); }
.lang__option-code { width: 32px; flex-shrink: 0; white-space: nowrap; }
.lang__code, .lang__option-code { font-weight: 500; }
.copy-mail__btn .icon path { stroke-width: 1.5; }   /* v1.0.60: copy / check icon thinner (was 2) */   /* v1.0.59: EN / PT / ES lighter (was 700) */
.lang__option-name { flex: 1; }

/* ---------- motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, .reveal { transition: none !important; } .reveal { opacity: 1; transform: none; } .status__dot::after { animation: none; } }

/* ===== RDR-0011/0012 offer page pv107 (campaign imagery) ===== */
/* RDR-0011 v1 · página de oferta (/portfolio/ai-workflow) · só tokens e classes do design system RDRVCV */
.offer-lead { max-width: 48ch; }
.offer-hero .hero__media { max-height: 88vh; }
.offer .split__body > .t-h2 { max-width: 22ch; }
.offer-points, .offer-cols, .offer-steps { list-style: none; display: grid; gap: var(--space-6) var(--gutter); margin-top: var(--space-4); }
.offer-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-cols { grid-template-columns: 1fr; }
.offer-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-points__item, .offer-cols__item, .offer-steps__item { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: var(--stroke-2) solid var(--border-strong); }
.offer-points__item p, .offer-cols__item p, .offer-steps__item p { max-width: 38ch; }
.gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-fig { display: flex; flex-direction: column; gap: var(--space-2); }
.offer-gallery { padding-top: 0; }
.offer-gallery + .offer-gallery { padding-top: 0; }
.offer-series { padding: var(--space-5) 0 var(--space-8); }
.offer-series__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
.offer-slot { aspect-ratio: 9 / 16; display: flex; align-items: flex-start; justify-content: flex-start; padding: var(--space-3); border: var(--stroke-1) dashed var(--border-strong); }
.offer-series__cap { margin-top: var(--space-3); }
.offer-series__flag { font-weight: 600; }
.offer-close { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-9) 0 var(--space-6); border-top: var(--stroke-3) solid var(--border-strong); margin-top: var(--space-8); }
.offer-close .t-h1 { max-width: 18ch; }
.offer-note { margin-top: var(--space-4); }
@media (max-width: 1023px) {
  .offer-series__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .offer-points, .offer-steps { grid-template-columns: 1fr; }
  .offer .split__body > .t-h2 { max-width: none; }
}
@media (max-width: 599px) {
  .gallery--3 { grid-template-columns: 1fr; }
  .offer-series__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.offer-series__item { margin: 0; }
.offer-series__item img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }

.offer-gal-note { margin-top: var(--space-3); }

/* ===== RDR-0011 v07 · photo batteries (portrait + wide mix) and wide images per text block ===== */
.offer-bat { margin: var(--space-6) 0 var(--space-9); }
.offer-bat__tag { margin-bottom: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); }
.offer-bat__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); grid-auto-flow: dense; }
.offer-bat__item { margin: 0; overflow: hidden; background: var(--surface-accent); aspect-ratio: 4 / 5; }
.offer-bat__item--wide { grid-column: span 2; aspect-ratio: auto; }
.offer-bat__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offer-bat__item--wide:first-child { aspect-ratio: 16 / 9; }
@media (min-width: 600px) {
  .offer-bat__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .offer-bat__grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
}
.offer-wide { margin: var(--space-7) 0; }
.offer-wide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ===== layer editing block ===== */
.offer-lay { display: grid; gap: var(--space-6); margin: var(--space-6) 0 var(--space-9); }
.offer-lay__ba, .offer-lay__layers { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.offer-lay__vars { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); }
.offer-lay__item { margin: 0; }
.offer-lay__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface-accent); }
.offer-lay__item figcaption { margin-top: var(--space-2); }
.offer-lay__layers .offer-lay__item img { background: #000; }
@media (min-width: 600px) { .offer-lay__ba, .offer-lay__layers { grid-template-columns: 1fr 1fr; } .offer-lay__vars { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .offer-lay__vars { grid-template-columns: repeat(5, 1fr); } }

.offer-cols-note { margin-top: var(--space-6); }

/* ===== calls to action ===== */
.offer-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.offer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding: var(--space-5) 0; margin: var(--space-6) 0; border-top: var(--stroke-2) solid var(--border-strong); border-bottom: var(--stroke-2) solid var(--border-strong); }
.offer-cta__text { max-width: 32ch; }
.offer-cta__final { margin-top: var(--space-5); }
@media (max-width: 599px) { .offer-cta .button, .offer-hero-cta .button { width: 100%; } }

.offer-vid { margin-top: var(--space-4); }
.offer-vid__link { color: var(--text-primary); text-decoration: underline; text-underline-offset: .2em; }

/* ===== fixed elements: clothes, scenes, products ===== */
.offer-fixed { display: grid; gap: var(--space-8); margin: var(--space-7) 0 var(--space-9); }
.offer-fixed__item { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--stroke-2) solid var(--border-strong); }
.offer-fixed__item p { max-width: 52ch; }
.offer-fixed__slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.offer-slot { margin: 0; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; text-align: center; border: var(--stroke-2) dashed var(--border-soft); background: var(--surface-accent); }
@media (min-width: 1024px) { .offer-fixed__slots { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }
.offer-fixed__note { margin-top: var(--space-2); }

/* ===== v08 · creative layout: full-bleed images, overlay bands, media-split, statement ===== */
/* RDR-0045: sem corte lateral no .offer (cortava o "Mais conteúdo" e as imagens full-bleed na coluna de 1920px em telas largas; html/body já têm overflow-x: clip) */
.offer-bleed { margin: var(--space-8) calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.offer-bleed img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; max-height: 92vh; }
.offer-band { position: relative; margin: var(--space-8) calc(50% - 50vw); width: 100vw; min-height: min(88vh, 56vw); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #000; }
.offer-band__media { position: absolute; inset: 0; }
.offer-band__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.offer-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.08) 100%); }
.offer-band__txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-9) var(--gutter) var(--space-7); width: 100%; max-width: 1280px; margin: 0 auto; }
.offer-band__t { font-size: clamp(2rem, 5.6vw, 5rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; max-width: 16ch; color: #fff; }
.offer-band__p { max-width: 44ch; color: #fff; }
.offer-band__kick { color: rgba(255,255,255,.8); }
.offer-band .button { background: #fff; color: #000; border-color: #fff; }
.offer-ms { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin: var(--space-8) 0; align-items: start; }
.offer-ms__txt { display: flex; flex-direction: column; gap: var(--space-4); }
.offer-ms__img { margin: 0; }
.offer-ms__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 1024px) {
  .offer-ms { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
  .offer-ms--rev .offer-ms__img { order: -1; }
  .offer-ms__img { position: sticky; top: var(--space-6); }
}
.offer-points--one { grid-template-columns: 1fr; }
.offer-twocol { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter); margin: var(--space-6) 0; }
@media (min-width: 768px) { .offer-twocol { grid-template-columns: 1fr 1fr; } }
.offer-cols--wide { grid-template-columns: 1fr; margin: var(--space-5) 0; }
@media (min-width: 600px) { .offer-cols--wide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .offer-cols--wide { grid-template-columns: repeat(4, 1fr); } }
.offer-steps--row { grid-template-columns: 1fr; margin: var(--space-5) 0 var(--space-6); }
@media (min-width: 768px) { .offer-steps--row { grid-template-columns: repeat(4, 1fr); } }
.offer-statement { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-9) 0; }
.offer-statement__t { font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; max-width: 14ch; }

/* ===== v08 · creative layout: full-bleed images, media-split, statement (no text over images) ===== */
.offer-bleed { margin: var(--space-8) calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.offer-bleed img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; max-height: 92vh; }
.offer-bandtxt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin: var(--space-7) 0 var(--space-8); }
.offer-bandtxt__t { font-size: clamp(2rem, 5.2vw, 4.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; max-width: 18ch; }
.offer-band__p { max-width: 44ch; }
.offer-ms { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin: var(--space-8) 0; align-items: start; }
.offer-ms__txt { display: flex; flex-direction: column; gap: var(--space-4); }
.offer-ms__img { margin: 0; }
.offer-ms__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 1024px) {
  .offer-ms { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
  .offer-ms--rev .offer-ms__img { order: -1; }
}
.offer-points--one { grid-template-columns: 1fr; }
.offer-twocol { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter); margin: var(--space-6) 0; }
@media (min-width: 768px) { .offer-twocol { grid-template-columns: 1fr 1fr; } }
.offer-cols--wide { grid-template-columns: 1fr; margin: var(--space-5) 0; }
@media (min-width: 600px) { .offer-cols--wide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .offer-cols--wide { grid-template-columns: repeat(4, 1fr); } }
.offer-steps--row { grid-template-columns: 1fr; margin: var(--space-5) 0 var(--space-6); }
@media (min-width: 768px) { .offer-steps--row { grid-template-columns: repeat(4, 1fr); } }
.offer-statement { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-9) 0; }
.offer-statement__t { font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; max-width: 14ch; }

/* ===== v08 · creative layout: full-bleed images, media-split, statement (no text over images, no thumbnail grids) ===== */
.offer-bleed { margin: var(--space-8) calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.offer-bleed img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; max-height: 92vh; }
.offer-bandtxt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin: var(--space-7) 0 var(--space-8); }
.offer-bandtxt__t { font-size: clamp(2rem, 5.2vw, 4.6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; max-width: 18ch; }
.offer-ms { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin: var(--space-8) 0; align-items: start; }
.offer-ms__txt { display: flex; flex-direction: column; gap: var(--space-4); }
.offer-ms__img { margin: 0; }
.offer-ms__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 1024px) {
  .offer-ms { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
  .offer-ms--rev .offer-ms__img { order: -1; }
}
.offer-points--one { grid-template-columns: 1fr; }
.offer-twocol { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--gutter); margin: var(--space-6) 0; }
@media (min-width: 768px) { .offer-twocol { grid-template-columns: 1fr 1fr; } }
.offer-cols--wide { grid-template-columns: 1fr; margin: var(--space-5) 0; }
@media (min-width: 600px) { .offer-cols--wide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .offer-cols--wide { grid-template-columns: repeat(4, 1fr); } }
.offer-steps--row { grid-template-columns: 1fr; margin: var(--space-5) 0 var(--space-6); }
@media (min-width: 768px) { .offer-steps--row { grid-template-columns: repeat(4, 1fr); } }
.offer-statement { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-9) 0; }
.offer-statement__t { font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; max-width: 14ch; }
.offer-series__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.offer-ms__img--9-16 img { aspect-ratio: 9 / 16; max-height: 86vh; width: auto; margin: 0 auto; }
.offer-ms__img--4-3 img { aspect-ratio: 4 / 3; }
.offer-ms__img--3-4 img { aspect-ratio: 3 / 4; }

/* ===== v09 · fewer lines, type-led layout, 3-image roll ===== */
.offer .split, .offer .offer-part { border-top: 0; }
.offer-points__item, .offer-cols__item, .offer-steps__item, .offer-fixed__item { border-top: 0; padding-top: 0; }
.offer-cta { border: 0; padding: var(--space-6) 0; }
.offer-cta__text { font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.08; font-weight: 700; max-width: 22ch; text-transform: uppercase; }
.offer-close { border-top: 0; }
.offer-lead2 { max-width: 30ch; margin-bottom: var(--space-3); }
.offer-ways { display: grid; gap: var(--space-5); margin: var(--space-8) 0 var(--space-7); }
.offer-ways__t { font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.02; max-width: 16ch; }
.offer-ways__list { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--gutter); }
@media (min-width: 768px) { .offer-ways__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .offer-ways__list { grid-template-columns: repeat(4, 1fr); } }
.offer-ways__list h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; }
.offer-ways__list li { display: flex; flex-direction: column; gap: var(--space-2); }
.offer-ways__note { max-width: 56ch; }
.offer-roll { margin: var(--space-8) 0; }
.offer-roll .offer-bleed { margin-top: 0; margin-bottom: 4px; }
.offer-roll .offer-bleed:last-child { margin-bottom: 0; }
.offer-ways { display: flex; flex-direction: column; grid-column: 1 / -1; width: 100%; }
.offer-ways > * { max-width: none; }
.offer-ways__t { max-width: 16ch; }
.offer-ways__note { max-width: 56ch; }
.offer-lead2 { text-transform: none; font-weight: 500; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.25; max-width: 34ch; letter-spacing: 0; }
.offer-privacy { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-8) 0; }
.offer-privacy__t { font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.12; font-weight: 600; max-width: 28ch; }
/* ways: image beside the list */
.offer-ways { display: grid !important; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.offer-ways__img { margin: 0; }
.offer-ways__img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.offer-ways__body { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 1024px) {
  .offer-ways { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
  .offer-ways__list { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== v10 · ways: one large image per item, alternating ===== */
.offer-ways { display: flex !important; flex-direction: column; gap: var(--space-5); }
.offer-ways__rows { display: flex; flex-direction: column; gap: var(--space-9); margin: var(--space-6) 0; }
.offer-way { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; }
.offer-way__img { margin: 0; }
.offer-way__img img { display: block; width: 100%; height: auto; object-fit: cover; }
.offer-way--4-5 .offer-way__img img { aspect-ratio: 4 / 5; }
.offer-way--9-16 .offer-way__img img { aspect-ratio: 9 / 16; max-height: 88vh; }
.offer-way--4-3 .offer-way__img img { aspect-ratio: 4 / 3; }
.offer-way--3-2 .offer-way__img img { aspect-ratio: 3 / 2; }
.offer-way--pend .offer-way__img { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border: var(--stroke-2) dashed var(--border-soft); }
.offer-way__t { font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1.05; font-weight: 700; margin-bottom: var(--space-3); }
.offer-way__txt .t-body { max-width: 34ch; }
@media (min-width: 1024px) {
  .offer-way { grid-template-columns: 7fr 5fr; gap: var(--space-8); }
  .offer-way--9-16, .offer-way--4-5 { grid-template-columns: 5fr 7fr; }
  .offer-way--9-16 .offer-way__img, .offer-way--4-5 .offer-way__img { max-width: 520px; }
  .offer-way--rev .offer-way__img { order: 2; justify-self: end; }
  .offer-way--rev .offer-way__txt { order: 1; }
  .offer-way--9-16.offer-way--rev, .offer-way--4-5.offer-way--rev { grid-template-columns: 7fr 5fr; }
}

/* ===== v11 · one text style: small label, giant 3-line title, body below ===== */
.offer-big, .offer-statement { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-9) 0; }
.offer-big__t, .offer-statement__t { font-size: clamp(2.4rem, 7vw, 6.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -.01em; max-width: 14ch; text-transform: none; }
.offer-big__t--ms { font-size: clamp(2.2rem, 4.6vw, 4.4rem); max-width: 12ch; }
.offer-ways__t { max-width: 12ch !important; }
.offer-big__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: 62ch; }
.offer-big__body .t-body, .offer-big .t-body { max-width: 62ch; }
.offer-big .offer-lead2 { font-size: clamp(1.2rem, 2vw, 1.6rem); max-width: 40ch; }
.offer-bandtxt { margin: var(--space-8) 0; }

/* ===== v12 · reference layout: wide 3-line titles, long blocks split in two, images fill space ===== */
.offer-big__t, .offer-statement__t { max-width: 20ch; font-size: clamp(2.4rem, 6.2vw, 5.8rem); }
.offer-big__t--ms { max-width: 14ch; font-size: clamp(2.2rem, 4.2vw, 4rem); }
.offer-ways__t { max-width: 14ch !important; }
.offer-big + .offer-big { margin-top: calc(var(--space-9) * -0.2); }
.offer-statement__sub { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-7); max-width: 46ch; }
.offer-ways__rows { gap: var(--space-8); }
@media (min-width: 1024px) {
  .offer-way, .offer-way--9-16, .offer-way--4-5, .offer-way--9-16.offer-way--rev, .offer-way--4-5.offer-way--rev { grid-template-columns: 8fr 4fr; gap: var(--space-7); }
  .offer-way--rev, .offer-way--9-16.offer-way--rev, .offer-way--4-5.offer-way--rev { grid-template-columns: 4fr 8fr; }
  .offer-way--rev .offer-way__img { order: 2; justify-self: stretch; }
  .offer-way--9-16 .offer-way__img, .offer-way--4-5 .offer-way__img { max-width: none; }
}
.offer-way--9-16 .offer-way__img img { aspect-ratio: 4 / 5; max-height: none; }
.offer-way__txt .t-body { font-size: 1.05rem; max-width: 30ch; }

/* ===== v13 · hero with option cards (tight blocks), short screens ===== */
.offer-ways--hero { padding: 0 var(--gutter); margin: var(--space-7) 0 var(--space-8); max-width: 1440px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.offer-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 900px) { .offer-cards { grid-template-columns: repeat(4, 1fr); } }
.offer-card { display: flex; flex-direction: column; gap: 4px; background: var(--surface-accent); padding-bottom: var(--space-3); }
.offer-card__img { margin: 0; }
.offer-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.offer-card__t { font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 700; padding: var(--space-2) var(--space-3) 0; line-height: 1.1; }
.offer-card__p { font-size: .9rem; line-height: 1.35; padding: 0 var(--space-3); max-width: 32ch; }
.offer-ways--hero .offer-ways__note { max-width: 62ch; }
.offer-hero { margin-top: var(--space-6); }

/* ===== v14 · ways as text-only tight blocks; before/after slider ===== */
.offer-card { background: none; padding: 0; gap: var(--space-2); }
.offer-card__t { padding: 0; font-size: clamp(1.3rem, 2vw, 1.9rem); }
.offer-card__p { padding: 0; font-size: 1rem; max-width: 30ch; }
.offer-cards { gap: var(--space-6) var(--gutter); }
.offer-ba { --p: 50%; position: relative; width: 100vw; margin: var(--space-6) calc(50% - 50vw) var(--space-8); aspect-ratio: 3 / 2; max-height: 90vh; overflow: hidden; background: #000; user-select: none; }
.offer-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.offer-ba__b { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.offer-ba__r { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.offer-ba::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.offer-ba__l { position: absolute; bottom: var(--space-4); padding: 4px 10px; background: #fff; color: #000; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; z-index: 2; }
.offer-ba__l--b { left: var(--space-4); }
.offer-ba__l--a { right: var(--space-4); }

/* ===== v15 · hero image beside the title ===== */
html, body { overflow-x: clip; }
.offer-headimg { margin: var(--space-6) 0 0; }
.offer-headimg img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 1024px) {
  .offer .case__head { display: grid; grid-template-columns: 6fr 5fr; column-gap: var(--space-8); align-items: start; }
  .offer .case__head > * { grid-column: 1; }
  .offer .case__head > .offer-headimg { grid-column: 2; grid-row: 1 / span 7; margin: 0; }
  .offer .case__head .offer-lead { max-width: 40ch; }
}
@media (min-width: 1024px) { .offer .case__head > * { justify-self: start; } .offer .case__head > .offer-headimg { justify-self: stretch; } }

/* ===== v16 · top banner ===== */
.offer .case__head { display: block !important; }
.offer-banner { margin: var(--space-6) 0 0; width: 100%; }
.offer-banner img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; }
.offer-banner figcaption { padding: var(--space-2) var(--gutter) 0; }
@media (min-width: 1024px) { .offer-banner { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; } .offer-banner figcaption { display: none; } }
.offer .case__head { display: flex !important; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-4); }
.offer .case__head > * { justify-self: auto; }
.offer-ways--hero { padding-left: 0; padding-right: 0; max-width: none; }

/* ===== v17 · landscape hero image in the right area of the header ===== */
.offer-ways--hero { padding: 0 var(--gutter); max-width: 1440px; }
.offer-headimg { margin: var(--space-5) 0 0; width: 100%; }
.offer-headimg img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 1024px) {
  .offer .case__head { display: grid !important; grid-template-columns: 1fr 1fr; /* título ganhou espaço (antes 5fr 7fr) */ column-gap: var(--space-8); align-items: center; }
  .offer .case__head > * { grid-column: 1; justify-self: start; }
  .offer .case__head > .offer-headimg { grid-column: 2; grid-row: 1 / span 7; margin: 0; justify-self: stretch; }
}

/* ===== v20 · AI tools strip (typographic marks, no logos) ===== */
.offer-ai { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-8) 0; }
.offer-ai__t { font-size: clamp(1.8rem, 4vw, 3.6rem); line-height: 1.06; font-weight: 700; letter-spacing: -.01em; max-width: 24ch; }
.offer-ai__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.offer-ai__list li { font-size: clamp(1.1rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: .02em; padding: var(--space-2) var(--space-4); border: var(--stroke-2) solid var(--border-strong); border-radius: 999px; }

/* ===== v21 · All in one place note with discreet AI names beside ===== */
.offer-allin { display: grid; grid-template-columns: 1fr; gap: var(--space-5); margin-top: var(--space-5); align-items: start; }
.offer-allin__txt { display: flex; flex-direction: column; gap: var(--space-3); }
.offer-allin__ai { display: flex; flex-direction: column; gap: var(--space-2); }
.offer-ai2 { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.offer-ai2 li { font-size: .95rem; font-weight: 600; letter-spacing: .02em; opacity: .75; }
@media (min-width: 1024px) { .offer-allin { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }

/* ===== v22 · AI tools as icon badges under the text ===== */
.offer-allin { display: flex !important; flex-direction: column; gap: var(--space-4); }
.offer-icons { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin: var(--space-2) 0; }
.offer-icons li { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-align: center; }
.offer-icons__i { width: 56px; height: 56px; border-radius: 16px; background: var(--text-primary, #000); color: var(--surface-default, #fff); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; }
.offer-icons__n { font-size: .78rem; font-weight: 600; line-height: 1.15; opacity: .8; }

/* ===== v23 · small outlined brand pills ===== */
.offer-pills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; }
.offer-pills li { font-size: .8rem; font-weight: 600; letter-spacing: .02em; padding: 4px 12px; border: var(--stroke-2, 1.5px) solid var(--border-strong, #000); border-radius: 999px; line-height: 1.4; }

/* ===== v24 · lighter, grey brand pills ===== */
.offer-pills li { font-weight: 400; color: var(--text-muted, #767676); border: 1px solid var(--border-soft, #c8c8c8); }
.offer .case__head .offer-vid { margin-top: 0; }

/* ===== v28 · body: concept + one section per service ===== */
.offer-series--pair { padding: var(--space-4) 0 var(--space-8); }
.offer-series--pair .offer-series__item img { aspect-ratio: 4 / 5; }

/* v29 medium duo (9:16 pair) */
.offer-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3,12px);max-width:1100px;margin:clamp(24px,4vw,56px) auto;padding-inline:var(--gutter,20px)}
.offer-duo figure{margin:0}
.offer-duo img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
@media(min-width:1024px){.offer-duo{gap:24px;max-width:960px}}

/* v30 trio + sequences media */
.offer-duo{max-width:1280px}
.offer-duo img{aspect-ratio:9/16}
.offer-ms__img--pair{aspect-ratio:auto}
.offer-ms__img--pair .offer-series__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer-ms__img--pair img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}

/* v31 service images at bleed size, trio */
.offer-duo{grid-template-columns:repeat(3,1fr);max-width:1440px;gap:12px}
@media(min-width:1024px){.offer-duo{gap:16px}}
.offer-bleed--169 img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;display:block}
.offer-pairwide{max-width:1440px;margin:clamp(24px,4vw,56px) auto;padding-inline:var(--gutter,20px)}
.offer-pairwide .offer-series__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offer-pairwide img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}

/* v33 justified rows + grids */
.jrow{display:flex;gap:12px;max-width:1440px;margin:12px auto;padding-inline:var(--gutter,20px)}
.jrow:first-of-type{margin-top:clamp(24px,4vw,56px)}
.jrow>figure{margin:0;flex:var(--r-g,1) 1 0;min-width:0;overflow:hidden}
.jrow>figure img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:var(--r)}
.jgrid{display:grid;gap:12px;max-width:1440px;margin:clamp(24px,4vw,56px) auto 0;padding-inline:var(--gutter,20px)}
.jgrid figure{margin:0;overflow:hidden}
.jgrid img{display:block;width:100%;height:auto;aspect-ratio:var(--r);object-fit:cover}
.jgrid--6{grid-template-columns:repeat(3,1fr)}
.jgrid--12{grid-template-columns:repeat(6,1fr);gap:8px}
@media(min-width:900px){.jgrid--6{grid-template-columns:repeat(6,1fr)}.jgrid--12{grid-template-columns:repeat(12,1fr)}}
.offer-bleed--219 img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block}
@media(max-width:700px){.jrow{flex-wrap:wrap}.jrow>figure{flex:1 1 40%}}

/* v36 bigger, fewer */
.jgrid--4{grid-template-columns:repeat(2,1fr);gap:12px}
.jgrid--8{grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:900px){.jgrid--4{grid-template-columns:repeat(4,1fr);gap:16px}.jgrid--8{grid-template-columns:repeat(8,1fr);gap:10px}}
.jrow{gap:16px}.jrow:first-of-type{margin-top:clamp(24px,4vw,56px)}
/* v37 batch strip: 6, larger */
.jgrid--batch{grid-template-columns:repeat(3,1fr);gap:12px}
@media(min-width:900px){.jgrid--batch{grid-template-columns:repeat(6,1fr);gap:14px}}

/* v39 larger: characters 3 across, batch 4 across, edge-to-edge */
.jgrid{max-width:none;padding-inline:clamp(12px,2vw,28px)}
.jrow{max-width:none;padding-inline:clamp(12px,2vw,28px)}
.jgrid--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.jgrid--4{grid-template-columns:repeat(3,1fr)}.jgrid--b4,.jgrid--batch.jgrid--b4{grid-template-columns:repeat(4,1fr)}}
.offer-cta__text{max-width:30ch}

/* v50 medium pair under the big wide */
.offer-pairmed{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:clamp(16px,2.5vw,32px) auto;padding-inline:var(--gutter,20px)}
.offer-pairmed figure{margin:0}
.offer-pairmed img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media(max-width:700px){.offer-pairmed{grid-template-columns:1fr}}

/* v52 four medium, a bit larger */
.offer-pairmed{max-width:1360px;gap:16px}
@media(min-width:1024px){.offer-pairmed{gap:20px}}

/* v60 anchor links */
a.offer-card{display:block;color:inherit;text-decoration:none}
a.offer-card:hover .offer-card__t,a.offer-card:focus-visible .offer-card__t{text-decoration:underline;text-underline-offset:.2em}
.offer-big[id]{scroll-margin-top:128px} /* topbar 64 + espaço para a dica/rótulo acima da linha de etapas */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* v61 calmer hover for service links */
a.offer-card{display:flex;flex-direction:column;gap:var(--space-2);color:inherit;text-decoration:none;background:none}
a.offer-card:hover,a.offer-card:focus-visible{color:inherit;text-decoration:none;background:none}
a.offer-card:hover *,a.offer-card:focus-visible *{text-decoration:none}
a.offer-card .offer-card__t,a.offer-card .offer-card__p{transition:opacity .2s ease}
a.offer-card:hover .offer-card__t,a.offer-card:focus-visible .offer-card__t{text-decoration:none;opacity:.55}
a.offer-card:focus-visible{outline:2px solid currentColor;outline-offset:6px}

/* v62 back-to-top link on service sections */
.offer-big[id]{position:relative}
.offer-top{position:absolute;top:var(--space-6,32px);right:0;color:inherit;text-decoration:none;opacity:.6;transition:opacity .2s ease;white-space:nowrap}
.offer-top:hover,.offer-top:focus-visible{opacity:1;color:inherit;text-decoration:none}
.offer-top{top:0}

/* v64 service-link hover: same animated underline as "Let's talk", with breathing room */
a.offer-card .offer-card__t,a.offer-card:hover .offer-card__t,a.offer-card:focus-visible .offer-card__t{opacity:1;text-decoration:none}
a.offer-card .offer-card__t{display:inline;align-self:flex-start;padding-bottom:.28em;background:linear-gradient(currentColor,currentColor) left bottom / 0 .075em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--duration-slow,.5s) var(--ease-out,ease)}
a.offer-card:hover .offer-card__t,a.offer-card:focus-visible .offer-card__t{background-size:100% .075em}
.offer-top{top:auto;bottom:0}

.offer-bandtxt{position:relative}

/* v67 every image block follows the page guides (main padding), none touches the screen edge */
.offer-bleed{margin:var(--space-8) 0;width:100%;max-width:none}
.offer-ba{width:100%;max-width:none;margin:var(--space-6) 0 var(--space-8)}
.jrow,.jgrid,.offer-pairmed,.offer-duo{width:100%;max-width:none;margin-inline:0;padding-inline:0}
.jrow,.offer-pairmed{margin-block:16px}
.jgrid{margin-top:var(--space-6)}
.offer-pairmed,.offer-duo,.jrow,.jgrid{gap:16px}
.offer-bleed+.jrow,.offer-bleed+.offer-pairmed,.offer-bleed+.offer-duo{margin-top:calc(-1 * var(--space-4,16px))}
.offer-duo{margin-block:var(--space-8)}

/* v68 back-to-top lives in the header, shown after scrolling */
.offer-top{display:none}
.topbar__top{color:inherit;text-decoration:none;white-space:nowrap;margin-right:var(--space-5,24px);opacity:0;transition:opacity .25s ease;background:linear-gradient(currentColor,currentColor) left bottom / 0 .075em no-repeat;padding-bottom:.35em}
.topbar__top[hidden]{display:none}
.topbar__top.is-on{opacity:1}
.topbar__top:hover,.topbar__top:focus-visible{background-size:100% .075em;color:inherit;text-decoration:none}
@media(max-width:700px){.topbar__top{display:none!important}}

/* v70 same underline thickness on every hover link (fixed px, so small and large text match) */
a.offer-card .offer-card__t{background-size:0 2.5px;padding-bottom:.28em}
a.offer-card:hover .offer-card__t,a.offer-card:focus-visible .offer-card__t{background-size:100% 2.5px}
.topbar__top{background-size:0 2.5px;padding-bottom:.5em}
.topbar__top:hover,.topbar__top:focus-visible{background-size:100% 2.5px}

/* v71 mobile: back-to-top shown (short label), bigger logo, same breathing */
.topbar__top .tt-s{display:none}
@media(max-width:700px){
 .topbar__top{display:inline-block!important;margin-right:var(--space-3,12px)}
 .topbar__top[hidden]{display:none!important}
 .topbar__top .tt-l{display:none}.topbar__top .tt-s{display:inline}
 .topbar__brand .t-lead{font-size:19px!important}
}
@media(max-width:400px){.topbar__brand .t-lead{font-size:18px!important}}

/* v72 back-to-top at the far right of the header; the other controls slide left to make room */
.topbar__top,.topbar__top[hidden]{display:inline-block!important;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;margin:0;pointer-events:none;color:inherit;text-decoration:none;
 background:linear-gradient(currentColor,currentColor) left bottom / 0 2.5px no-repeat;padding-bottom:.5em;
 transition:max-width .45s var(--ease-out,ease),opacity .3s ease,margin-left .45s var(--ease-out,ease),background-size var(--duration-slow,.5s) var(--ease-out,ease)}
.topbar__top.is-on{max-width:150px;opacity:1;margin-left:var(--space-5,24px);pointer-events:auto}
.topbar__top.is-on:hover,.topbar__top.is-on:focus-visible{background-size:100% 2.5px}
@media(max-width:700px){
 .topbar__top{display:inline-block!important}
 .topbar__top.is-on{max-width:70px;margin-left:var(--space-3,12px)}
}
@media(max-width:520px){.topbar--top .copy-mail__text{display:none}}
@media(prefers-reduced-motion:reduce){.topbar__top{transition:none}}

/* v73 no extra gap while hidden; optical vertical centering */
.topbar__top{position:relative;top:.22em}
.topbar__top.is-on,.topbar .topbar__top.is-on{margin-left:0}
@media(max-width:700px){.topbar__top.is-on{margin-left:0}}

/* v74 mobile: keep the e-mail visible; the link becomes just the arrow and the copy icon steps aside */
@media(max-width:520px){
 .topbar--top .copy-mail__text{display:inline!important}
 .topbar--top .copy-mail__btn{display:none}
 .topbar__top .tt-s{display:none}
 .topbar__top.is-on{max-width:28px}
 .topbar__top{font-size:15px}
}

/* v75 mobile: more room between the arrow and the toggle */
@media(max-width:520px){.topbar__top.is-on{margin-left:var(--space-5,24px)!important}}

/* v76 e-mail closer to the language selector */
.topbar > .copy-mail + .topbar__controls{margin-left:0}

/* v77 mobile: keep the word "Top" next to the arrow */
@media(max-width:520px){
 .topbar__top .tt-s{display:inline}
 .topbar__top.is-on{max-width:60px;margin-left:var(--space-4,16px)!important}
 .topbar__top{font-size:inherit}
}

/* v78 mobile fit: label-size "Top", compact e-mail, nothing overlaps */
@media(max-width:520px){
 .topbar__top{font-size:11px!important;letter-spacing:.12em}
 .topbar__top.is-on{max-width:56px;margin-left:var(--space-3,12px)!important}
 .topbar--top{gap:var(--space-2)}
 .topbar--top .copy-mail{flex:none;margin-left:auto}
 .topbar--top .copy-mail__text{font-size:10px;letter-spacing:.02em;white-space:nowrap}
 .topbar--top .topbar__controls{gap:var(--space-1,4px);margin-left:var(--space-2)!important}
}

/* v79 very narrow phones (<=380px): chevron steps aside while "Top" is visible */
@media(max-width:380px){
 .topbar--top .lang__chevron{display:none}
 .topbar--top .copy-mail__text{font-size:9.5px}
 .topbar--top .topbar__controls{margin-left:0!important}
}

/* v80 back-to-top underline only under the word, not the arrow */
.topbar__top,.topbar__top.is-on:hover,.topbar__top.is-on:focus-visible{background:none!important}
.topbar__top .tt-l,.topbar__top .tt-s{background:linear-gradient(currentColor,currentColor) left bottom / 0 2.5px no-repeat;padding-bottom:5px;transition:background-size var(--duration-slow,.5s) var(--ease-out,ease)}
.topbar__top.is-on:hover .tt-l,.topbar__top.is-on:focus-visible .tt-l,.topbar__top.is-on:hover .tt-s,.topbar__top.is-on:focus-visible .tt-s{background-size:100% 2.5px}

/* v83 balanced line breaks on every short paragraph / subtext (no orphan last line) */
.offer p,.offer .t-body,.offer .t-lead,.offer .t-caption,.offer-card__p,.offer-lead,.offer-statement .prose,.offer-big__body p,.offer-band__p,.offer-ways__note,.offer-cta__text{text-wrap:balance}
.offer-big__t,.offer-statement__t,.offer-ms__txt h3,.case__title{text-wrap:balance}

/* v84 long single-line notes wrap into even lines */
.offer .t-caption,.offer-note,.offer-ways__note+.offer-pills+.t-caption{max-width:62ch;text-wrap:balance}
.offer-note{margin-inline:0}

/* v85 mobile: keep the copy-e-mail button while "Top" is visible; make room elsewhere */
@media(max-width:520px){
 .topbar--top .copy-mail__btn{display:inline-flex!important}
 .topbar--top .lang__chevron{display:none}
 .topbar--top{gap:6px}
 .topbar--top .copy-mail{gap:2px}
 .topbar--top .topbar__controls{gap:6px}
 .topbar--top .topbar__brand .t-lead{font-size:17px!important}
 .topbar__top.is-on{margin-left:var(--space-2,8px)!important}
}

/* v86 <=380px: a little tighter so the arrow is not clipped */
@media(max-width:380px){
 .topbar__top{flex:none}
 .topbar--top{gap:4px}
 .topbar--top .topbar__brand .t-lead{font-size:16px!important}
 .topbar--top .copy-mail__text{font-size:9px}
 .topbar--top .topbar__controls{gap:4px}
 .topbar__top.is-on{margin-left:4px!important}
}

/* RDR-0012: enquadramento de retratos nos slots recortados (mantem o rosto) */
.offer .offer-bleed img,.offer .jrow img,.offer .jgrid img{object-position:50% 20% !important}

/* RDR-0012: Dia a dia com foto vertical 9:16 (mulher no chão) em linha justificada, sem recortes */
.jgrid--batch.jgrid--has-tall figure{--r:4/5}
.jgrid--batch.jgrid--has-tall figure.jgrid__tall{--r:9/16;grid-column:span 2}
@media(min-width:900px){.jgrid--b4.jgrid--has-tall,.jgrid--batch.jgrid--b4.jgrid--has-tall{grid-template-columns:.5625fr .8fr .8fr .8fr;align-items:start}.jgrid--batch.jgrid--has-tall figure.jgrid__tall{grid-column:auto}}
.jgrid--batch.jgrid--has-tall figure.jgrid__tall img{aspect-ratio:9/16}

/* card tag: Service / Work */
.card__tag { align-self: flex-start; padding: 2px 10px; border: var(--stroke-1) solid var(--border-strong); border-radius: var(--radius-pill); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; }

/* ===== header: no background, hides when idle, adapts to what is behind it (difference blend) ===== */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; border-bottom: 0; color: #fff; mix-blend-mode: difference; transition: transform .55s var(--ease-out, ease), opacity .4s ease; }
body { padding-top: 64px; }
.topbar.is-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.topbar, .topbar * { color: #fff !important; }
.topbar .t-label, .topbar .t--muted { opacity: 1; }
.topbar .toggle__track { border-color: #fff !important; background: transparent !important; }
.topbar .toggle__thumb { background: #fff !important; }
.topbar .lang__tip { background: #fff; color: #000 !important; }
.topbar .lang__list { background: #000; border-color: #fff; }
.topbar .lang__option.is-active { background: #fff; color: #000 !important; }
.topbar .lang__option.is-active * { color: #000 !important; }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }
.topbar .copy-mail__tip { background: #fff; }
.topbar .copy-mail__tip, .topbar .copy-mail__tip * { color: #000 !important; }
/* header bar itself is click-through: only its real elements (logo, e-mail, language, theme, back to top) keep it visible */
.topbar { pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar.is-hidden > * { pointer-events: none; }

/* Card tags: Work = outline, Service = filled (v1.0.21) */
.card__tag--work { background: transparent; color: var(--text-primary); }
.card__tag--service, .card__tag--article { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }

/* Back to top: lighter weight (v1.0.22) */
.topbar__top, .topbar .topbar__top.t-label { font-weight: 500; }

/* Card tags follow the card text on hover (v1.0.24) */
.card__tag { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

/* CV preview modal (v1.0.25) */
html.cv-open { overflow: hidden; }
.cvmodal { position: fixed; inset: 0; margin: auto; width: min(94vw, calc((94vh - 74px) * .7071)); height: fit-content; max-width: none; max-height: none; padding: 0; border: 0; background: #fff; color: var(--text-primary); display: none; flex-direction: column; overflow: hidden; }
.cvmodal[open] { display: flex; }
.cvmodal::backdrop { background: rgba(0, 0, 0, .72); }
.cvmodal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-1) solid var(--border-soft); }
.cvmodal__actions { display: flex; align-items: center; gap: var(--space-3); }
.cvmodal__close { width: 40px; height: 40px; border: var(--stroke-1) solid var(--border-strong); background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.cvmodal__close:hover, .cvmodal__close:focus-visible { background: var(--surface-inverse); color: var(--text-inverse); }
.cvmodal__head { background: var(--surface-default); }
.cvmodal__body { padding: 0; background: #fff; }   /* v1.0.87 no grey sides: the CV page fills the whole viewer width */
.cvmodal__page { display: block; width: 100%; height: auto; }

/* v1.0.43: beyond the 1920px page cap the hero image keeps its normal width; the row's own colour (--hero-bg, set per case) fills the rest of the screen. */
@media (min-width: 1921px) {
  html { overflow-x: clip; }
  .hero[style*="--hero-bg"] { background: var(--hero-bg); box-shadow: 0 0 0 100vmax var(--hero-bg); clip-path: inset(0 -100vmax); }
  .hero:not([style*="--hero-bg"]) { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }   /* photo heroes (Product Design etc.) run edge to edge */
}

/* v1.0.86 Art Direction case: main photo at normal content width (inside the page margins, natural proportion), not edge to edge */
.case--ad .hero:not([style*="--hero-bg"]) { margin-left: 0; margin-right: 0; }
.case--ad .hero__media { max-height: none; object-fit: contain; }
.case--ad .hero__cap { padding-left: 0; padding-right: 0; }

/* v1.0.88 header: no coloured box when a control is pressed/tapped (mobile tap highlight, mouse-click focus ring) */
.topbar, .topbar * { -webkit-tap-highlight-color: transparent; }
.topbar a:focus:not(:focus-visible), .topbar button:focus:not(:focus-visible) { outline: none; }
.topbar a:active, .topbar button:active { background-color: transparent; }

/* RDR-0015 · Campanha de Varejo · mapa de formatos (v02) */
.fmt-board{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:var(--space-7) var(--gutter);margin:var(--space-6) 0 var(--space-5);--u:180px}
.case__content + .fmt-board{margin-top:calc(var(--space-7) * -1)}
.fmt{display:flex;flex-direction:column;gap:var(--space-2)}
.fmt__stage{display:flex;align-items:flex-end;height:calc(var(--u) + 24px);margin-bottom:var(--space-2)}
.fmt__box{width:min(100%,calc(var(--ar) * var(--u) * var(--s,1)));aspect-ratio:var(--ar);border:var(--stroke-2) solid var(--border-strong);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}
.fmt__box--round{border-radius:50%}
.fmt:hover .fmt__box{background:var(--surface-accent);color:var(--text-on-accent);border-color:var(--border-on-accent)}
.fmt__ratio{font:700 12px/16px var(--font-display);letter-spacing:.18em;white-space:nowrap}
.fmt__name{font:500 20px/26px var(--font-display)}
.fmt__dim{font:400 14px/20px var(--font-mono)}
.fmt__use{font:400 14px/20px var(--font-body);color:var(--text-muted);max-width:30ch}
.fmt-board[data-set=print]{--u:210px}
.fmt-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--space-5) var(--gutter);margin:var(--space-5) 0 var(--space-5)}
.fmt-list li{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-4);border-top:var(--stroke-2) solid var(--border-strong)}
.fmt-list__n{font:500 20px/26px var(--font-display)}
.fmt-list__d{font:400 14px/20px var(--font-body);color:var(--text-muted);max-width:40ch}
.fmt-sub{margin:var(--space-7) 0 0}
.fmt-note{margin:0 0 var(--space-9);max-width:62ch}
@media (max-width:767px){.fmt-board,.fmt-board[data-set=print]{--u:140px;gap:var(--space-6) var(--gutter)}.fmt__name{font-size:18px;line-height:24px}}

/* v1.0.104 · hover = solid colour only (no stripes). Cards: the whole text area (body + foot) fills with the text colour and inverts with the theme (black on light, white on dark). Language rows: white fill, black text (the list is always black). */
.card::after { display: none; }
.card__body, .card__foot { transition: background var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out); }
.card:hover .card__body, .card:hover .card__foot, .card:focus-visible .card__body, .card:focus-visible .card__foot { background: var(--text-primary); color: var(--text-inverse); }
.card:hover .card__body *, .card:hover .card__foot *, .card:focus-visible .card__body *, .card:focus-visible .card__foot * { color: var(--text-inverse); }
.card:hover .card__tag--work, .card:focus-visible .card__tag--work { background: transparent; color: var(--text-inverse); border-color: var(--text-inverse); }
.card:hover .card__tag--service, .card:focus-visible .card__tag--service, .card:hover .card__tag--article, .card:focus-visible .card__tag--article { background: var(--text-inverse); color: var(--text-primary); border-color: var(--text-inverse); }
.topbar .lang__option:hover, .topbar .lang__option:focus-visible { background: #fff; color: #000 !important; }
.topbar .lang__option:hover *, .topbar .lang__option:focus-visible * { color: #000 !important; }

/* 2026-10-10 · links de voltar (← Trabalhos / Voltar ao topo): sublinhado do hover cresce da esquerda para a direita */
.case__back .button__label{background-position:left bottom}
.topbar__top,.topbar__top .tt-l,.topbar__top .tt-s{background-position:left bottom}

/* 2026-10-10 · offer-duo em 3:4 (fileira do topo com 3 fotos do dia a dia) */
.offer-duo--34 img{aspect-ratio:3/4}
.offer-duo--45 img{aspect-ratio:4/5}

/* 2026-10-11 · mobile: na grade de 4 com número ímpar de fotos, a última ocupa a largura toda (igual às outras seções) */
@media(max-width:899px){.jgrid--4>figure:last-child:nth-child(odd){grid-column:1/-1}}

/* 2026-10-11 · mobile: fileiras offer-duo com 3 fotos viram 2 + 1 (a última ocupa a largura toda), igual às outras seções */
@media(max-width:899px){.offer-duo{grid-template-columns:repeat(2,1fr)}.offer-duo>figure:last-child:nth-child(odd){grid-column:1/-1}}

/* 2026-10-11 · mobile: grades de 4 fotos (Edições em lote) viram 2 + 2 em vez de 3 + 1 */
@media(max-width:899px){.jgrid--b4,.jgrid--batch.jgrid--b4{grid-template-columns:repeat(2,1fr)}.jgrid--b4>figure:last-child:nth-child(odd){grid-column:1/-1}}

/* 2026-10-11 · mobile: no preview do CV o botão de download empurrava o X de fechar para fora da tela. Em telas estreitas o título some, o botão encolhe e o X fica sempre à vista. */
@media(max-width:600px){
  .cvmodal__head{padding:8px 10px;gap:8px}
  .cvmodal__title{display:none}
  .cvmodal__actions{flex:1 1 auto;min-width:0;justify-content:space-between;gap:8px}
  .cvmodal__dl{flex:1 1 auto;min-width:0;justify-content:center;padding-inline:12px;font-size:13px;white-space:nowrap}
  .cvmodal__close{flex:0 0 40px}
}

/* 2026-10-11 · mobile: fotos 16:9 da ai-custom-imagery trocam por versão 3:4 própria (picture/source) */
@media(max-width:899px){figure.has-m34 img{aspect-ratio:3/4;max-height:none;object-position:50% 50% !important}}

/* ---------- footer: copyright and year, horizontal at the end of the page (the year follows the server clock) ---------- */
.footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--gutter); padding: var(--space-5) 0 var(--space-6); }
.footer__copy { color: var(--text-primary); }
@media (max-width: 767px) { .footer__in { flex-direction: column; } }

/* ===== Componente: processo de ilustração (il-*) · usado em custom-generative-ai/illustrations-processes ===== */
.il-t{font:500 clamp(1.4rem,2.6vw,2.1rem)/1.15 var(--font-display);margin:0;max-width:24ch}
.il-p{max-width:60ch;margin:0}
.il-chips{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:900px}
.il-chips li{padding:var(--space-3) var(--space-4);border:var(--stroke-2,1.5px) solid var(--border-strong,#000);display:flex;flex-direction:column;gap:4px}
.il-code{margin:var(--space-2) 0 0;padding:var(--space-4);border:1px solid var(--border-soft,#c8c8c8);max-width:900px;font:400 13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.il-sub{margin:var(--space-6) 0 0}
.il-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 16px;margin:var(--space-4) 0 0}
.il-grid figure,.il-fin figure{margin:0}
.il-grid img,.il-fin img{display:block;width:100%;height:auto;object-fit:cover}
.il-grid img{aspect-ratio:4/5}
.il-grid figcaption,.il-fin figcaption{margin-top:var(--space-2)}
.il-stories{display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-4)}
.il-story{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:var(--space-6);align-items:center}
.il-story:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,380px)}.il-story:nth-child(even) figure{order:2}
.il-story figure{margin:0}.il-story img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.il-story__t{display:flex;flex-direction:column;gap:var(--space-2);max-width:34ch}.il-story__t p{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.35;margin:0}
@media (max-width:700px){.il-story,.il-story:nth-child(even){grid-template-columns:1fr}.il-story:nth-child(even) figure{order:0}.il-story figure{max-width:420px}}
.il-wide{margin:var(--space-4) 0 0}.il-wide img{aspect-ratio:16/9}
.il-fin{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 0}
.il-fin img{aspect-ratio:4/5}
@media (max-width:760px){.il-grid{grid-template-columns:repeat(2,1fr)}}
.il-grid figcaption b{display:block;font:700 12px/16px var(--font-display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;color:var(--text,#000)}
@media (max-width:640px){.il-chips{grid-template-columns:1fr}.il-fin{grid-template-columns:1fr 1fr}.il-fin figure:last-child:nth-child(odd){grid-column:1/-1}}
.il-h{font:500 clamp(2rem,4.6vw,3.6rem)/1.05 var(--font-display);letter-spacing:-.01em;margin:0}
.il-row.il-row--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.il-sp{max-width:62ch;margin:0;font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.5}
.il-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:var(--space-3) 0 0}
.il-row figure{margin:0}.il-row img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/5}
.il-row--w img{aspect-ratio:16/9}.il-row figcaption{margin-top:var(--space-2)}
.il-row--v{grid-template-columns:2fr 1fr;align-items:start}
.il-vid{margin:0}.il-vid video{display:block;width:100%;height:auto;background:#fff}
.il-vid--w video{aspect-ratio:16/9}.il-vid--p video{aspect-ratio:4/5}
@media (max-width:760px){.il-row{grid-template-columns:1fr 1fr}.il-row--w{grid-template-columns:1fr}.il-row--2 figure:last-child:nth-child(odd){grid-column:auto}.il-row--v{grid-template-columns:1fr}.il-row figure:last-child:nth-child(odd){grid-column:1/-1}}
.il-neg{margin:0}.il-neg img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.il-tag{display:block;margin-top:var(--space-3);padding-top:var(--space-2);border-top:var(--stroke-3,3px) solid var(--border-strong,#000);font-size:14px;letter-spacing:.14em}
.il-tag--no{color:var(--state-danger,#f04438);border-top-color:var(--state-danger,#f04438)}
.il-why{display:block;margin-top:4px;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.35}
.il-row.il-row--2{max-width:none}
.il-tag{border-top:0!important;padding-top:0!important;text-decoration:none!important}
.il-tag--no{text-decoration:none!important;color:var(--state-danger,#f04438)!important}
@media (max-width:760px){.il-row.il-row--1 .il-neg:only-child img{aspect-ratio:3/4}}
.il-sp{margin:var(--space-8,56px) 0 var(--space-5,24px)}
.il-h+.il-sp{margin-top:var(--space-4,16px)}
.il-row{margin-bottom:var(--space-3,12px)}
.il-ok{margin-top:var(--space-5,24px)!important}
.il-row.il-tall .il-neg img{aspect-ratio:3/4!important}
.il-row.il-r34 .il-neg img{aspect-ratio:3/4!important}
.il-row.il-tall .il-neg:first-child img{object-position:50% 62%}
.il-row.il-tall .il-neg:last-child img{object-position:80% 50%}
.il-ok .il-tag{display:inline-flex!important;align-items:center;gap:var(--space-2,8px);background:none!important;color:var(--text-primary,#000)!important;padding:0!important;margin-top:0!important}
.il-ok .icon{width:1.4em;height:1.4em;flex:none;fill:none;stroke:#16a34a;stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter}
.il-neg--no .il-tag--no,.il-tag--no{display:inline-flex!important;align-items:center;gap:var(--space-2,8px);color:var(--text-primary,#000)!important}
.il-tag--no .il-x-ico{width:1.4em;height:1.4em;flex:none;fill:none;stroke:var(--state-danger,#f04438);stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter}
.il-ok .il-why{margin-top:var(--space-3,12px)}
.il-ok{margin-top:var(--space-4,16px)}
.il-neg .il-x img{filter:none}
.il-row figcaption{font-size:1rem}
.il-row .il-neg:only-child img{aspect-ratio:16/9}
.il-row.il-row--1{grid-template-columns:1fr}
.il-foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4,16px);margin-top:var(--space-6,32px)}
.il-tag{font-size:clamp(1.05rem,1.6vw,1.3rem)!important;letter-spacing:.1em!important}.il-why{font-size:clamp(1.1rem,1.7vw,1.35rem)!important}
.il-row figcaption{font-size:1.1rem!important}
.il-x{display:block;position:relative}
.il-tag--no{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--state-danger,#f04438)}
.il-intro{margin:var(--space-4) 0 0}
.il-note{margin:0}
.case.offer .il-sub{font-size:14px}

/* ===== Design system · escala tipográfica das páginas de trabalho e serviço (.case) =====
   Fonte única: todas as páginas .case herdam daqui. Não sobrescrever tamanhos na página. */
:root{
  --offer-title: clamp(2.4rem, 5.6vw, 5.4rem);   /* h1 da página */
  --offer-head:  clamp(2.6rem, 6vw, 4.8rem);     /* títulos de seção */
  --offer-lead:  var(--offer-text);              /* texto de abertura = texto corrido (equilíbrio decidido pela Direção) */
  --offer-text:  clamp(1.25rem, 2vw, 1.8rem);    /* texto corrido e de abertura (−10% a pedido da Direção, 2026-10-12) */
  --offer-label: 15px;                           /* rótulos e numeração */
  --offer-btn:   clamp(.95rem, 1.3vw, 1.1rem);   /* botões */
  --offer-note:  1rem;                           /* nota de rodapé */
  --offer-caption: 15px;                         /* legendas e avisos */
}
@media (max-width:899px){:root{--offer-title: clamp(2rem, calc((100vw - 2 * var(--margin)) * .123), 3.15rem)}} /* celular: maior tamanho em que a palavra mais longa dos H1 (ILUSTRACIONES) cabe na largura */
.case .case__back{font-size:var(--offer-label)}
.case .split__label{font-size:var(--offer-label)}
.case .case__head .t-label{font-size:12px} /* rótulo acima do H1 menor que o link de voltar (15px), para não rivalizar */
.case .case__title{font-size:var(--offer-title);line-height:1.15} /* caixa alta com acento (Ê, Õ, Á): 1.15 evita o acento encostar na linha de cima */
.case.offer .case__head:not(:has(.offer-headimg)){grid-template-columns:minmax(0,1fr)}
.case.offer .case__head:not(:has(.offer-headimg)) .case__title{max-width:none}
.case.offer .offer-lead,.case.offer .il-intro{font-size:var(--offer-lead);line-height:1.4;font-weight:400;max-width:30em}
.case.offer .offer-big__t,.case.offer .offer-statement__t,.case.offer .il-h{font-size:var(--offer-head);line-height:1.05}
.case.offer .prose,.case.offer .offer-ways__note,.case.offer .offer-band__p,.case.offer .offer-big__body p,.case.offer .il-sp{font-size:var(--offer-text);line-height:1.5;max-width:60ch}
.case.offer .offer-hero-cta .button,.case.offer .offer-bandtxt .button,.case.offer .offer-cta .button,.case.offer .offer-big .button{font-size:var(--offer-btn);padding:1.05rem 1.6rem}
.case.offer .t-caption,.case.offer .il-note{font-size:var(--offer-caption);line-height:1.5}
.case.offer .offer-note{font-size:var(--offer-note);line-height:1.5;max-width:60ch}
/* Mesma escala nas demais páginas de trabalho (.case sem .offer): padrão do site aprovado pela Direção em 2026-10-12 */
.case:not(.offer) .case__head>.t-body,.case:not(.offer) .case__head>.t-lead{font:400 var(--offer-lead)/1.4 var(--font-body);text-transform:none;letter-spacing:0;max-width:30em}
.case:not(.offer) .prose,.case:not(.offer) .case__content p.t-body{font-size:var(--offer-text);line-height:1.5;max-width:60ch}
.case:not(.offer) .t-caption{font-size:var(--offer-caption);line-height:1.5}
.case:not(.offer) .ad-concepts>h2.t-h2,.case:not(.offer) .pd-ch__head h2.t-h2{font:500 var(--offer-head)/1.05 var(--font-display);letter-spacing:-.01em} /* títulos de seção = mesmo tamanho dos títulos de etapa */

/* il-ok · resultado aprovado ("Deu certo") no mesmo box do depoimento da Direção de Arte (.ad-proof):
   borda 3px preta, fundo da página, respiro grande, rótulo pequeno em cima e texto no estilo t-h2. */
.case.offer .il-ok{display:flex;flex-direction:column;gap:var(--space-6,32px);padding:var(--space-8,64px);border:var(--stroke-3,3px) solid var(--border-strong);background:var(--surface-default);color:var(--text-primary);margin-top:var(--space-6,32px)!important;max-width:none}
.case.offer .il-ok .il-tag{color:var(--text-primary)!important} /* mesmo tamanho dos "Não deu certo" (.il-tag) */
.case.offer .il-ok .il-why{margin:0!important;max-width:30ch;font:700 40px/48px var(--font-display)!important;color:var(--text-primary)}
@media (max-width:1279px){.case.offer .il-ok .il-why{font-size:32px!important;line-height:40px!important}}
@media (max-width:767px){.case.offer .il-ok{padding:var(--space-6,32px) var(--space-5,24px)}.case.offer .il-ok .il-why{font-size:26px!important;line-height:34px!important}}

/* ===== Design system · Etapas (.steps) · padrão aprovado pela Direção em 2026-10-12 =====
   Uso: <ol class="steps" style="--steps-n:N">
          <li><span class="steps__n">1 <span class="steps__of">de N</span></span>
              <div class="steps__body"><h2 class="steps__t">Título</h2><p class="steps__p">Texto</p> …imagens… </div></li> … </ol>
   - Linha de progresso em N partes acima de cada etapa: 3px, 24px entre partes (16px no celular), mesma medida das
     etapas da Direção de Arte (.ad-step). Partes anteriores em preto, a da etapa atual em azul (--surface-accent), as seguintes em cinza. Número sempre preto.
   - Número da etapa à direita, na linha do título, no mesmo tamanho do título (--offer-head). "de N" só para leitor de tela.
   - Título em --offer-head (Jost 500), texto em --offer-text. Não fixa na tela.
   - Navegador de progresso (Direção, 2026-10-16, RDR-0036): sempre que a lista tiver mais de 3 tópicos, a linha de progresso vira navegador (cada parte é link para a etapa). Com até 3 tópicos, nas páginas de texto (.il-flow), fica a barra cinza única. */
.steps{--steps-n:3;--steps-g:24px;--steps-num:calc(var(--offer-head) * .75);list-style:none;margin:var(--space-8,64px) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-8,64px)}
@media (max-width:767px){.steps{--steps-g:16px}}
.steps>li{position:relative;padding:var(--space-5,24px) 0 0!important;border:0!important;--steps-s:1}
.steps>li:nth-child(2){--steps-s:2}.steps>li:nth-child(3){--steps-s:3}.steps>li:nth-child(4){--steps-s:4}.steps>li:nth-child(5){--steps-s:5}.steps>li:nth-child(6){--steps-s:6}.steps>li:nth-child(7){--steps-s:7}.steps>li:nth-child(8){--steps-s:8}
.steps>li::before,.step::before{--seg:calc((100% - (var(--steps-n) - 1) * var(--steps-g)) / var(--steps-n));content:'';position:absolute;top:0;left:0;right:0;height:var(--stroke-3,3px);background:linear-gradient(to right,var(--border-strong) 0 calc((var(--steps-s) - 1) * (var(--seg) + var(--steps-g)) - var(--steps-g) / 2),var(--surface-accent) 0 calc(var(--steps-s) * (var(--seg) + var(--steps-g)) - var(--steps-g) / 2),var(--border-soft) 0);-webkit-mask:repeating-linear-gradient(to right,#000 0 var(--seg),transparent 0 calc(var(--seg) + var(--steps-g)));mask:repeating-linear-gradient(to right,#000 0 var(--seg),transparent 0 calc(var(--seg) + var(--steps-g)))}
/* Etapa avulsa (.step): mesma linha, número e título das .steps, para seções que não estão numa lista
   (ex.: as 8 seções de serviço da IA Generativa sob Medida). Uso: <section class="step" style="--steps-s:1;--steps-n:8">
   <span class="steps__n">1 <span class="steps__of">de 8</span></span> … */
.step{position:relative;padding-top:var(--space-5,24px)!important;--steps-g:24px;--steps-n:3;--steps-s:1;--steps-num:calc(var(--offer-head) * .75)}
@media (max-width:767px){.step{--steps-g:16px}}
.step .offer-big__t{font:500 var(--offer-head)/1.05 var(--font-display)!important;letter-spacing:-.01em;max-width:none!important;padding-right:calc(var(--steps-num) + var(--space-7,48px))}
.steps__body{display:flex;flex-direction:column;gap:var(--space-3,12px);min-width:0}
.steps__n{position:absolute;top:var(--space-5,24px);right:0;font:700 var(--offer-head)/1.05 var(--font-display);letter-spacing:-.01em;text-transform:none;color:var(--text-primary);white-space:nowrap}
.steps__of{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.steps__t{margin:0!important;font:500 var(--offer-head)/1.05 var(--font-display)!important;letter-spacing:-.01em;padding-right:calc(var(--steps-num) + var(--space-7,48px));max-width:none!important}
.steps__p{font-size:var(--offer-text)!important;line-height:1.5!important;max-width:60ch;margin:0}
/* Menu de serviços (offer-card) numerado 1–N (mesma numeração das seções .step): número pendurado à esquerda, na linha do título, no tamanho do título */
.offer-card{position:relative}
.offer-card__n{position:absolute;top:0;left:0;font-family:var(--font-display);font-weight:700;font-size:clamp(1.3rem, 2vw, 1.9rem);line-height:1.1;color:var(--text-primary)}
.offer-card{padding-left:calc(clamp(1.3rem, 2vw, 1.9rem) * .9 + var(--space-3,12px))}

/* Etapas · cada parte da linha de progresso é um link para a sua etapa (site.js cria .steps__nav). Área de clique maior que a linha. */
.steps>li,.step{scroll-margin-top:128px}
.steps__nav{position:absolute;top:-60px;left:0;right:0;height:calc(var(--stroke-3,3px) + 83px);display:grid;grid-template-columns:repeat(var(--steps-n),minmax(0,1fr));column-gap:var(--steps-g);z-index:1}
.steps__nav a{position:relative;display:block;height:100%;cursor:pointer}
/* Com o nav montado, cada parte da linha é desenhada pelo próprio link (sem sobrepor a linha de ::before, que deixava 1 px escuro na ponta do azul) */
.steps>li.has-steps-nav::before,.step.has-steps-nav::before{content:none}
.steps__nav a::after{content:'';position:absolute;left:0;right:0;top:var(--lt,60px);height:var(--lh,var(--stroke-3,3px));background:var(--border-soft);transition:background-color .15s ease}
.steps__nav a.is-done::after{background:var(--border-strong)}
.steps__nav a[aria-current]::after{background:var(--surface-accent)}
.steps__nav a:not([aria-current]):hover::after,.steps__nav a:not([aria-current]):focus-visible::after{background:var(--surface-accent)}
.steps__nav .steps__go{position:absolute;left:calc(var(--j,0) * -1 * (100% + var(--steps-g)));bottom:32px;white-space:nowrap;font:500 15px/1 var(--font-display);letter-spacing:0;text-transform:none;color:var(--text-muted);background:var(--surface-default);padding:2px 6px 2px 0;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.steps__nav a:not([aria-current]):focus-visible .steps__go{opacity:1;transform:none}
@media (hover:hover){.steps__nav a:not([aria-current]):hover .steps__go{opacity:1;transform:none}} /* no toque (celular) o rótulo não aparece; o traço azul sim */
.steps__nav a[aria-current="step"]{cursor:default}
.steps__nav a:focus-visible{outline:2px solid var(--border-strong);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){html:has(.steps__nav){scroll-behavior:smooth}}
/* Etapas · dica esporádica "Clique para navegar" no início da linha visível (site.js); some ao primeiro uso */
.steps__hint{position:absolute;left:0;bottom:32px;white-space:nowrap;font:500 15px/1 var(--font-display);color:var(--text-muted);background:var(--surface-default);padding:2px 6px 2px 0;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.steps__hint.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.steps__hint{transform:none;transition:opacity .2s linear}}
.steps__go b{font-weight:700;color:var(--text-primary)} /* nome da seção em destaque; "Ir para" em cinza */
/* Menu de serviços: sublinhado original (um traço sob o título, crescendo), limitado ao fim do texto:
   site.js mede a última linha do título (span.offer-card__tx) e grava em --ulw */
a.offer-card:hover .offer-card__t,a.offer-card:focus-visible .offer-card__t{background-size:var(--ulw,100%) 2.5px}

/* Toque no celular: sem a caixa azul nativa do navegador ao tocar em links/botões (o retorno vem do próprio componente) */
html{-webkit-tap-highlight-color:transparent}

/* Etapas: no hover de uma parte da linha (mouse/teclado), o número à direita rola até o número da seção de destino, em cinza; volta ao sair.
   site.js monta .steps__roll > span > i (acima · atual · abaixo). Para frente rola para cima; para trás, para baixo. */
.steps__roll{display:inline-block;overflow:hidden;height:1.05em;vertical-align:top}
.steps__roll>span{display:flex;flex-direction:column;align-items:flex-end;transform:translateY(-33.3333%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.steps__roll i{display:block;font-style:normal;height:1.05em;line-height:1.05;color:var(--surface-accent)} /* número de destino no azul do traço em hover */
.steps__roll i.is-c{color:inherit}
.steps__n.is-fwd .steps__roll>span{transform:translateY(-66.6667%)}
.steps__n.is-back .steps__roll>span{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.steps__roll>span{transition:none}}

/* Teste aprovado pela Direção (2026-10-12), só nos botões das seções da IA Generativa (.step): hover com texto preto e contorno azul mais grosso (por dentro, sem mudar o tamanho), sem preenchimento */
/* Botões (design system, aprovado pela Direção em 2026-10-12): contorno de 3 px, a mesma espessura dos cards da home.
   Secundário: no hover/foco fica sem preenchimento, texto preto e contorno azul. Primário (preto): mantém o hover branco, agora com contorno de 3 px. */
.button--primary,.button--secondary{border-width:var(--stroke-3,3px)}
.button--secondary:hover,.button--secondary:focus-visible{background:transparent;color:var(--text-primary);border-color:var(--surface-accent)}

/* Menu de serviços (.offer-cards): com 6 itens, 3 colunas no desktop (3 + 3) em vez de 4 + 2; com 8 itens segue 4 + 4 */
@media (min-width:900px){.offer-cards:has(> .offer-card:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}


/* RDR-0019 v55 · passo 2: drible em 16:9 no desktop e 4:5 no mobile, texto abaixo */
.il-lead{display:grid;gap:var(--space-5,24px);margin:var(--space-5,24px) 0}
.il-lead figure{margin:0}
.il-lead img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.il-lead .il-sp{margin:0}
@media (max-width:760px){.il-lead img{aspect-ratio:3/4}}
/* RDR-0019 v47 · passo 1: 2 falhas e 2 prints, todos em 3:4 */
.il-row.il-row--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3,12px);max-width:680px}
.il-row.il-row--4 img{aspect-ratio:3/4}
.il-row.il-row--4 .il-shot:nth-child(4) img{object-position:38% 50%}
@media (max-width:760px){.il-row.il-row--4{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}}

/* RDR-0036 · regra do design system: mais de 3 tópicos = navegador de progresso (linha em N partes com link); até 3 = a barra cinza abaixo */
/* RDR-0019 v45 · 2 etapas: barra cinza única, sem link, com a espessura e a cor da barra de progresso do site (a espessura vem do próprio nav, acertada pelo site.js); espaçamento da fileira do passo 1 */
.il-flow:not(:has(>li:nth-child(4)))>li .steps__nav{grid-template-columns:minmax(0,1fr);pointer-events:none}
.il-flow:not(:has(>li:nth-child(4)))>li .steps__nav a:not(:first-child),.il-flow:not(:has(>li:nth-child(4)))>li .steps__go,.il-flow:not(:has(>li:nth-child(4)))>li .steps__hint{display:none}
.il-flow:not(:has(>li:nth-child(4)))>li .steps__nav a::after,.il-flow:not(:has(>li:nth-child(4)))>li .steps__nav a[aria-current]::after,.il-flow:not(:has(>li:nth-child(4)))>li .steps__nav a.is-done::after{background:var(--border-soft)}
.il-row.il-row--4{column-gap:var(--space-5,24px);row-gap:var(--space-4,16px);max-width:960px;align-items:start}
.il-row.il-row--4 .il-tag{line-height:1.2;align-items:flex-start}
.il-row.il-row--4 .il-why{margin-top:var(--space-2,8px);line-height:1.35}
.il-row.il-row--4 figcaption{margin-top:var(--space-3,12px);line-height:1.35}

/* footer: balanced line breaks (same rule as the .offer texts) */
.footer__copy,.footer__note{text-wrap:balance}

/* RDR-0019 page balance: balanced line breaks on every text of the illustration-processes page (main.case) and its contact block */
main.case :is(h1,h2,h3,h4,p,figcaption,.il-why,.il-x,.il-tag,.t-lead,.t-body,.t-caption,.t-small,.card__title,.card__sub,.steps__t){text-wrap:balance}

/* RDR-0021 v12 · underline padrão dos links pequenos: cresce da esquerda, só sob o texto (.button__label), 2,5px */
.card:hover .button__label,.card:focus-visible .button__label,.offer-vid__link:hover .button__label,.offer-vid__link:focus-visible .button__label{background-size:100% 2.5px}
.offer-vid__link{text-decoration:none}

/* RDR-0034: articles row on the Home becomes a carousel once its cards no longer fit in one row (3 / 2 / 1 per view) */
.section-head--carousel { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.carousel-nav { display: none; gap: var(--space-2); flex-shrink: 0; }
[data-carousel].is-scrollable .carousel-nav { display: flex; }
.carousel-nav__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: var(--stroke-3) solid var(--border-strong); background: transparent; color: var(--text-primary); font: inherit; font-size: 20px; cursor: pointer; transition: background-color var(--duration-base), color var(--duration-base), opacity var(--duration-base); }
.carousel-nav__btn:hover:not(:disabled), .carousel-nav__btn:focus-visible { background: var(--surface-inverse); color: var(--text-inverse); }
.carousel-nav__btn:disabled { opacity: .3; cursor: default; }
.cards.cards--carousel { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gutter)) / 3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.cards.cards--carousel::-webkit-scrollbar { display: none; }
.cards--carousel > .card { scroll-snap-align: start; }
@media (max-width: 1023px) { .cards.cards--carousel { grid-auto-columns: calc((100% - var(--gutter)) / 2); } }
@media (max-width: 599px)  { .cards.cards--carousel { grid-auto-columns: 86%; } }

/* RDR-0034: running paragraphs inside a step (no images between them) keep the text rhythm, like .il-h+.il-sp */
.il-sp:has(+.il-sp){margin-bottom:0}
.il-sp+.il-sp{margin-top:var(--space-4,16px)}
/* RDR-0035: article cards show "Read more" and the estimated reading time (words / 200 per minute, rounded up) */
.card__foot:has(.card__meta) { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card__meta { white-space: nowrap; }
/* RDR-0037: hero with an image that is text or a diagram (VCV article): always whole, never cropped by the 88vh cap */
.hero--whole .hero__media{max-height:none;object-fit:contain}

/* RDR-0031 (2026-10-17): titulo do hero em linhas balanceadas (Onboarding: linhas balanceadas) */
.intro__role { text-wrap: balance; }

/* RDR-0038 v02: quando o carrossel tem mais cards do que cabem, a ponta do próximo card aparece também no desktop e no tablet (no celular já aparecia com 86%) */
@media (min-width: 1024px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((100% - 3 * var(--gutter)) / 3.25); } }
@media (min-width: 600px) and (max-width: 1023px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((100% - 2 * var(--gutter)) / 2.25); } }

/* RDR-0038 v03: no desktop e no tablet, o carrossel ativo usa a largura toda da tela (sangra as margens do main, como o .hero); o primeiro card continua alinhado ao título e o último card chega até a borda direita */
@media (min-width: 600px) {
  [data-carousel].is-scrollable .cards.cards--carousel { margin-left: calc(-1 * var(--margin)); margin-right: calc(-1 * var(--margin)); padding-left: var(--margin); padding-right: var(--margin); scroll-padding-left: var(--margin); scroll-padding-right: var(--margin); }
  [data-carousel].is-scrollable .cards.cards--carousel::after { content: ""; width: 1px; margin-left: calc(-1 * var(--gutter)); }
}

/* RDR-0038 v04: o carrossel ativo vai de borda a borda da janela (não só da margem do main, que é centrado e limitado a 1792px): sangra até 50vw de cada lado; o primeiro card continua alinhado ao título; sem padding à direita, o último card encosta na borda da janela. html já tem overflow-x: clip. */
@media (min-width: 600px) {
  [data-carousel].is-scrollable .cards.cards--carousel { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: calc(50vw - 50%); padding-right: 0; scroll-padding-left: calc(50vw - 50%); scroll-padding-right: 0; }
  [data-carousel].is-scrollable .cards.cards--carousel::after { content: none; }
}

/* RDR-0038 v05: margem também no fim da linha: o padding à direita é igual ao da esquerda, então o último card para alinhado com a margem do conteúdo (a faixa continua indo de borda a borda enquanto rola) */
@media (min-width: 600px) {
  [data-carousel].is-scrollable .cards.cards--carousel { padding-right: calc(50vw - 50%); }
}

/* RDR-0038 v06: a largura dos cards é calculada do primeiro card até a borda da janela (50vw + 50% do main), para 3 cards + ponta no desktop e 2 + ponta no tablet preencherem a tela */
@media (min-width: 1024px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((50vw + 50% - 3 * var(--gutter)) / 3.25); } }
@media (min-width: 600px) and (max-width: 1023px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((50vw + 50% - 2 * var(--gutter)) / 2.25); } }

/* RDR-0038 v08: celular e telas de toque como o Crunchyroll: só deslizar (sem setas no cabeçalho); no celular a faixa vai de borda a borda, com a margem do conteúdo nas duas pontas, o primeiro card alinhado ao título e a ponta do próximo card à direita; o encaixe (snap) é por card */
@media (max-width: 599px) {
  [data-carousel].is-scrollable .cards.cards--carousel { margin-left: calc(-1 * var(--margin)); margin-right: calc(-1 * var(--margin)); padding-left: var(--margin); padding-right: var(--margin); grid-auto-columns: 86%; }
}
@media (hover: none) { [data-carousel].is-scrollable .section-head--carousel .carousel-nav { display: none; } }

/* RDR-0038 v09: sangria medida em px pelo site.js (--bleed), igual nos dois lados; sombra (shade) translúcida e seta isolada, flutuando sobre os cards com fundo translúcido */
@media (min-width: 600px) {
  [data-carousel].is-scrollable .cards.cards--carousel { margin-left: calc(-1 * var(--bleed, calc(50vw - 50%))); margin-right: calc(-1 * var(--bleed, calc(50vw - 50%))); padding-left: var(--bleed, calc(50vw - 50%)); padding-right: var(--bleed, calc(50vw - 50%)); }
}
@media (min-width: 1024px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((100% + var(--bleed, calc(50vw - 50%)) - 3 * var(--gutter)) / 3.25); } }
@media (min-width: 600px) and (max-width: 1023px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((100% + var(--bleed, calc(50vw - 50%)) - 2 * var(--gutter)) / 2.25); } }

/* RDR-0038 v12: no fim do carrossel sobra só a margem padrão da página (--margin), não a sangria inteira; a largura dos cards segue indo do primeiro card até a borda da janela */
@media (min-width: 600px) {
  [data-carousel].is-scrollable .cards.cards--carousel { padding-right: var(--margin); }
}
@media (min-width: 1024px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((100% + var(--margin) - 3 * var(--gutter)) / 3.25); } }
@media (min-width: 600px) and (max-width: 1023px) { [data-carousel].is-scrollable .cards.cards--carousel { grid-auto-columns: calc((100% + var(--margin) - 2 * var(--gutter)) / 2.25); } }

/* RDR-0038 v28/v29 · carrossel da Home, modelo Netflix com seta que segue o mouse (substitui v07–v27).
   Desktop (mouse): as bordas da fileira (largura da margem lateral) são zonas de clique invisíveis; dentro da zona, um botão quadrado com a seta
   (estilo do botão primário da casa) acompanha o cursor; clique avança uma página inteira. Paginador de barras à direita do título.
   A zona da esquerda só existe depois de avançar. Toque: só deslizar (v08). */
.carousel-stage { position: relative; --carousel-handle: max(var(--bleed, 64px), min(200px, 25vw)); }   /* v38: e nunca mais que 25% da janela (janela estreita no desktop) */   /* v31: a zona começa mais longe da borda (no mínimo 200px), para o chevron surgir antes de o mouse chegar ao fim da tela */
.carousel-handle { position: absolute; top: 0; bottom: 0; display: none; width: var(--carousel-handle); margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; cursor: pointer; }
.carousel-handle--prev { left: calc(-1 * var(--bleed, 0px)); }
.carousel-handle--next { right: calc(-1 * var(--bleed, 0px)); }
.carousel-handle:focus-visible { outline: var(--stroke-2) solid var(--border-strong); outline-offset: -2px; }
/* v30: chevron igual ao da versão Netflix (só o ">" no traço dos cards), em negativo (difference; #fff de propósito, operando do blend). Entra mais rápido (--duration-base) de fora da tela; segue o mouse com atraso (300 ms) e nunca fica embaixo do ponteiro: o site.js desloca o chevron 40px em direção à borda. */
/* v32: o negativo (difference) vai para o nível de fora. No nível de dentro ele não funcionava: o de fora tem transform (contexto de empilhamento próprio) e o chevron só misturava consigo mesmo, ficando branco liso. Com o blend no de fora, o chevron é o negativo do que está por baixo, como o menu de idioma: preto sobre o fundo claro, branco sobre o escuro, invertido sobre os cards; muda com o tema sozinho. */
.carousel-cursor { position: absolute; left: 0; top: 0; width: 48px; height: 48px; pointer-events: none; transform: translate(-50%, -50%); will-change: transform; transition: transform 300ms var(--ease-out); mix-blend-mode: difference; color: #fff; }
.carousel-cursor__in { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; transform: translateX(calc(var(--carousel-handle) + 80px)); transition: transform var(--duration-slow) var(--ease-out); }
.carousel-cursor--prev .carousel-cursor__in { transform: translateX(calc(-1 * (var(--carousel-handle) + 80px))); }
.carousel-cursor.is-on .carousel-cursor__in { transform: translateX(0); transition: transform var(--duration-base) var(--ease-out); }
/* v33: o chevron em repouso fica invisível de verdade (visibility, depois da saída) e não existe em carrossel sem rolagem — antes sobrava um pedaço dele perto do título da fileira de artigos (ruído) */
.carousel-cursor { visibility: hidden; transition: transform 300ms var(--ease-out), visibility 0s linear var(--duration-slow); }
/* v35: a chegada (de fora da tela) continua em 240ms; depois de chegar, o 'seguir o mouse' fica mais lento (700ms, ease-out) */
.carousel-cursor.is-on { visibility: visible; transition: transform 700ms var(--ease-out), visibility 0s; }
[data-carousel]:not(.is-scrollable) .carousel-cursor { display: none; }
/* v34: chevron mais grosso (5px) e um pouco maior (22px) · v61: maior (30px) e mais grosso (7px) */
.carousel-cursor__in > i { display: block; width: 30px; height: 30px; border-top: 7px solid currentColor; border-right: 7px solid currentColor; transform: rotate(45deg) translate(-5px, 5px); }
.carousel-cursor--prev .carousel-cursor__in > i { transform: rotate(-135deg) translate(-4px, 4px); }
.carousel-pager { display: none; gap: 2px; align-items: center; }
.carousel-pager > i { display: block; width: 12px; height: 2px; background: var(--border-soft); transition: background-color var(--duration-base) var(--ease-out); }
.carousel-pager > i.is-active { background: var(--text-primary); }
/* v37: o sistema do mouse vale em qualquer largura (hover: hover), inclusive com a janela do desktop redimensionada para tamanho de celular; o chevron fixo fica só para toque (hover: none) */
@media (hover: hover) {
  [data-carousel].is-scrollable .carousel-handle { display: block; }
  /* RDR-0038 v67: a zona da esquerda fica ativa no início, como a da direita no fim (clique = tranco do limite) */
  [data-carousel].is-scrollable .section-head--carousel .carousel-nav { display: none; }
  [data-carousel].is-scrollable .carousel-pager { display: flex; }
}

/* RDR-0038 v36 · toque (celular/tablet) com o mesmo sistema: zonas nas bordas com o chevron fixo, em negativo, sempre visível (sem mouse não há "seguir"); toque na zona avança uma página (no celular, um card). A zona da esquerda só existe depois de avançar. Deslizar continua funcionando. As setas do cabeçalho foram excluídas em todas as telas. */
.section-head--carousel .carousel-nav, [data-carousel] .carousel-nav { display: none; }
.carousel-handle > i { display: none; }
/* v38: em toque (hover: none) não há zonas nem chevron: só o arrastar do dedo (a sangria e a ponta do próximo card da v08 continuam) */
@media (hover: none) { [data-carousel] .carousel-handle, [data-carousel] .carousel-cursor { display: none; } }
@media (max-width: 599px) {
  /* no celular a faixa sangra as margens (v08); as zonas seguem a sangria (--bleed = 16px) e ficam encostadas nas bordas da tela */
  .carousel-handle--prev { left: calc(-1 * var(--margin)); }
  .carousel-handle--next { right: calc(-1 * var(--margin)); }
}

/* RDR-0038 v42 (refeito, substitui as versões 39 a 41): barra de progresso 20×3px que só aparece durante o hover da seção, com um fade simples e igual na entrada e na saída (--duration-base) */
.carousel-pager { gap: 3px; opacity: 0; transition: opacity var(--duration-base) var(--ease-out); }
.carousel-pager > i { width: 20px; height: 3px; }
@media (hover: hover) { [data-carousel].is-scrollable:has(.carousel-stage:hover) .carousel-pager, [data-carousel].is-scrollable:has(.carousel-handle:focus-visible) .carousel-pager { opacity: 1; } }   /* v46: no desktop o progresso aparecia só com o mouse sobre as zonas das setas · v62: aparece com o mouse em qualquer parte da fileira de cards (cards e zonas das setas) */

/* RDR-0038 v43: no celular os cards do meio encaixam no centro, então a ponta do card anterior aparece à esquerda e a do próximo à direita; o primeiro continua alinhado à margem (início) e o último também (fim) */
@media (max-width: 599px) {
  [data-carousel].is-scrollable .cards--carousel > .card { scroll-snap-align: center; }
  [data-carousel].is-scrollable .cards--carousel > .card:first-child { scroll-snap-align: start; }
  [data-carousel].is-scrollable .cards--carousel > .card:last-child { scroll-snap-align: end; }
}

/* RDR-0038 v44: sem o "esticar"/quique nativo ao passar do fim da faixa (overscroll-behavior-x: none); a resistência "pesada" é feita pelo site.js */
.cards.cards--carousel { overscroll-behavior-x: none; }

/* RDR-0038 v45/v49: no toque o progresso fica sempre visível, no canto superior direito */
@media (hover: none) {
  [data-carousel].is-scrollable .carousel-pager { display: flex; opacity: 1; }   /* v49: no toque o progresso fica no canto superior direito (cabeçalho), sempre visível */
}

/* RDR-0038 v47: a faixa rolava também na vertical (overflow-x: auto deixa overflow-y em auto, e o conteúdo era 16px mais alto que a caixa): ao arrastar a página para cima no celular, os cards subiam dentro da faixa. A faixa agora só rola na horizontal; o gesto vertical passa para a página. */
.cards.cards--carousel { overflow-y: hidden; touch-action: pan-x pan-y; }
/* os 16px a mais vêm da animação de entrada dos cards (sobem 16px ao aparecer); a faixa ganha 16px de folga embaixo, compensada na margem, para a borda de baixo do card não ser cortada durante a animação */
.cards.cards--carousel { padding-bottom: 16px; margin-bottom: -16px; }

/* RDR-0038 v50: título e progresso na mesma linha de base: a base das barras encosta na linha de base do texto do título (não no fundo da caixa da linha, que inclui o espaço das descendentes) */
.section-head--carousel { align-items: baseline; }
/* RDR-0038 v63 (meia margem para a direita) substituída pela v64: o progresso começa na mesma vertical em que começa o menu de idioma do topo; a medida é feita pelo site.js (margin-right inline) */

/* RDR-0038 v51: arrastar com o mouse. Durante o arraste o encaixe fica solto (a faixa acompanha o mouse 1:1), o texto não é selecionado, o cursor vira "agarrando", as setas que seguem o mouse somem e o progresso aparece com o mesmo fade */
[data-carousel].is-dragging .cards--carousel { scroll-snap-type: none; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
/* v52: o cursor "agarrando" só enquanto o botão está pressionado (.is-grabbing sai no instante em que solta) */
[data-carousel].is-grabbing .cards--carousel { cursor: grabbing; }
[data-carousel].is-grabbing .cards--carousel * { cursor: grabbing; pointer-events: none; }
[data-carousel].is-dragging .carousel-cursor { opacity: 0 !important; }
@media (hover: hover) { [data-carousel].is-scrollable.is-dragging .carousel-pager { opacity: 1; } }

/* RDR-0038 v58: no fim da faixa a zona e o chevron da direita continuam ativos; o clique não avança: a faixa dá um tranco curto contra o limite (site.js) e o chevron empurra 10px para a borda e volta */
@keyframes carousel-bump-next { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(10px); } }
.carousel-cursor--next.is-bump .carousel-cursor__in { animation: carousel-bump-next 420ms var(--ease-out); }
/* RDR-0038 v67: o mesmo tranco na esquerda, no início da faixa */
@keyframes carousel-bump-prev { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-10px); } }
.carousel-cursor--prev.is-bump .carousel-cursor__in { animation: carousel-bump-prev 420ms var(--ease-out); }

/* RDR-0033 · 2026-10-19 · tipografia aprovada: Jost nos títulos, Work Sans no resto, corpo de leitura em --text-read */
:is(p.t-body, p.prose, li.t-body, .offer-card__p) { color: var(--text-read); }
.offer-card__p { line-height: 1.5; } /* v77: subtítulo do índice dos artigos = corpo de leitura */

/* RDR-0045 · 2026-10-23 · cursor de barra de rolagem (.rcur) e adesivo R (.rsticker) removidos a pedido do Diretor */

/* RDR-0033 v84 · cursor exclusivo de arrasto horizontal nos carrosséis (independente do .rcur) */
.hcur { position: fixed; left: 0; top: 0; z-index: 61; width: 76px; height: 32px; margin: -16px 0 0 -38px; pointer-events: none; mix-blend-mode: difference; transform: translate3d(var(--hcur-x, -300px), var(--hcur-y, -300px), 0); visibility: hidden; }
.hcur__in { width: 100%; height: 100%; transform: scale(.6); opacity: 0; transition: transform var(--duration-quick) var(--ease-out), opacity var(--duration-quick) linear; }
.hcur.is-on { visibility: visible; }
.hcur.is-on .hcur__in { transform: scale(1); opacity: 1; }
.hcur svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hcur__thumb { fill: none; stroke: var(--color-paper); stroke-width: 5; }
.hcur__arrow { fill: none; stroke: var(--color-paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
html.hcur-active, html.hcur-active * { cursor: none; user-select: none; -webkit-user-select: none; }
@media not all and (hover: hover) and (pointer: fine) { .hcur { display: none; } }

/* 2026-10-22: carrossel que não rola (ex.: Artigos com 2 cards) usa a mesma largura de card do carrossel que rola (v12), para todos os cards da home terem o mesmo tamanho */
@media (min-width: 1024px) { [data-carousel]:not(.is-scrollable) .cards.cards--carousel { grid-auto-columns: calc((100% + var(--bleed, var(--margin)) - 3 * var(--gutter)) / 3.25); } }
@media (min-width: 600px) and (max-width: 1023px) { [data-carousel]:not(.is-scrollable) .cards.cards--carousel { grid-auto-columns: calc((100% + var(--bleed, var(--margin)) - 2 * var(--gutter)) / 2.25); } }

/* RDR-0040: pager no modelo Phitoss — pontos redondos, o ativo vira pílula; janela de até 7 pontos (o JS define --vis e --start); pontos das pontas encolhem quando a fila continua */
.carousel-pager { --dot: 6px; --gapd: 6px; --slot: calc(var(--dot) + var(--gapd)); display: block; overflow: hidden; height: 12px; width: calc(var(--vis, 1) * var(--slot) - var(--gapd) + var(--dot) * 2); }
.carousel-pager[hidden] { display: none; }
.carousel-pager__strip { display: flex; align-items: center; gap: var(--gapd); height: 100%; width: max-content; transform: translateX(calc(var(--start, 0) * var(--slot) * -1)); transition: transform var(--duration-base) var(--ease-out); }
.carousel-pager__strip > i { flex: none; display: block; width: var(--dot); height: var(--dot); border-radius: 999px; background: var(--border-soft); transition: width var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.carousel-pager__strip > i.is-active { width: calc(var(--dot) * 3); background: var(--text-primary); }
.carousel-pager__strip > i.is-mid { transform: scale(.66); }
.carousel-pager__strip > i.is-small { transform: scale(.4); }
@media (prefers-reduced-motion: reduce) { .carousel-pager__strip, .carousel-pager__strip > i { transition: none; } }

/* RDR-0047 (2026-10-23): VCV de vidro sobre o nome retirado a pedido do Diretor; mecanismo arquivado no Drive (RDR-0044 approved/RDR-0044_vcv_mecanismo_arquivado_2026-10-23) */

/* RDR-0041 v8: o nome já nasce no tamanho certo (antes nascia em --display-size e o JS encaixava depois → "fica grande e depois encaixa").
   Tamanho proporcional à largura do h1 (Jost 700, "RAFFAEL DUTRA ROCHA": 8,46cqw medido; 8,45 para nunca estourar). O ajuste fino do site.js continua (diferença < 1px). */
.intro__name { container-type: inline-size; }
.intro__name .fit { font-size: 8.45cqw; font-size: round(down, 8.4602cqw, 1px); }   /* v10: arredonda igual ao site.js (Math.floor) → sem meio-pixel de ajuste */

/* RDR-0041 v10: Jost hospedada no tema (mesmo arquivo variável latin do Google Fonts, OFL — assets/fonts/OFL-Jost.txt), pré-carregada na home.
   Assim o nome desenha com a Jost já na primeira pintura (sem trocar de fonte = sem "esticar"). Vem depois do CSS do Google, então prevalece. */
@font-face {
  font-family: 'Jost'; font-style: normal; font-weight: 400 700; font-display: block;
  src: url('assets/fonts/Jost-variable-latin.woff2') format('woff2');
  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;
}

/* RDR-0046 · 2026-10-23: carrossel que passa da coluna mas cabe inteiro na janela (.is-fit, marcado pelo site.js): mesmo layout e mesmo tamanho de card, sem progresso, setas, zonas nem arraste */
[data-carousel].is-fit .carousel-pager, [data-carousel].is-fit .carousel-nav, [data-carousel].is-fit .carousel-handle, [data-carousel].is-fit .carousel-cursor { display: none !important; }
[data-carousel].is-fit .cards.cards--carousel { overflow-x: hidden; }
[data-carousel]:not(.is-scrollable) .carousel-pager { display: none; }   /* RDR-0046: o pager modelo Phitoss (display: block) aparecia invisível também nos carrosséis que não rolam */
[data-carousel]:not(.is-scrollable) .carousel-pager { display: none; }   /* RDR-0046: o pager modelo Phitoss (display: block) ficava montado, invisível, também nos carrosséis que não rolam */
/* RDR-0046 (02:42): Diretor "aproximar um pouco a distância entre as 3 sections da home" — Artigos → Trabalhos → Projetos Pessoais: 160px → 128px (só entre elas) */
.home .work[data-carousel]:has(+ .work[data-carousel]) { padding-bottom: var(--space-8); }

/* RDR-0048 v2 (2026-10-23 · Diretor: "artigo só texto e ponto, trabalho preto, projeto pessoal outline")
   Trabalho = preenchido (ink no claro, paper no escuro) · Pessoal = contorno · Artigo = só texto com ponto */
.card__tag--work { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.card:hover .card__tag--work, .card:focus-visible .card__tag--work { background: var(--text-inverse); color: var(--text-primary); border-color: var(--text-inverse); }
.card__tag--personal { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.card:hover .card__tag--personal, .card:focus-visible .card__tag--personal { background: transparent; color: var(--text-inverse); border-color: var(--text-inverse); }
.card__tag--article { background: transparent; color: var(--text-primary); border-color: transparent; padding-left: 0; }
.card__tag--article::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.card:hover .card__tag--article, .card:focus-visible .card__tag--article { background: transparent; color: var(--text-inverse); border-color: transparent; }
/* RDR-0048 (13:09): o tempo de leitura fica à mesma distância da borda direita que o "Ler mais" da esquerda (o botão tem 4px de respiro interno) */
.card__foot .card__meta { padding-right: 4px; }
/* RDR-0049 (2026-10-23): botões do topo da Home em hierarquia (escolha A do Diretor): Currículo = principal, Portfólio = secundário (contorno), LinkedIn = link de texto ↗ */
.intro__actions { gap: var(--space-4); }

/* RDR-0050 (2026-10-23): VCV de vidro sobre a imagem principal do artigo Visão Criativa Versátil (assets/vcv/vcv-glass-img.js). Sem WebGL, nada aparece. */
[data-vcv-glass] { position: relative; }
[data-vcv-glass] .vcv-glass { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-out); }
[data-vcv-glass].vcv-on .vcv-glass { opacity: 1; }
/* RDR-0050: no tema escuro a imagem principal do artigo é a versão invertida (fundo preto, texto branco) */
html.theme-dark .offer-headimg .vcv-theme-light, html:not(.theme-dark) .offer-headimg .vcv-theme-dark { display: none; }

/* RDR-0051 · 2026-10-23 · Unprompted: selo de uso de IA (UNP-0044). Cheio = 100% humano, contorno = 90% humano, tracejado = IA declarada.
   Cores pelo currentColor: segue o tema claro/escuro e o hover do card sozinho. */
.unp-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.unp-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 8px 4px; border: 2px solid currentColor; color: var(--text-primary); font-family: "Jost", system-ui, sans-serif; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; }
.unp-chip b { font-size: 13px; font-weight: 700; }
.unp-chip span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.unp-chip--100 { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.unp-chip--ai { border-style: dashed; }
a.unp-chip { transition: background-color .2s ease, color .2s ease; }
a.unp-chip:hover, a.unp-chip:focus-visible { background: var(--text-primary); color: var(--text-inverse); border-color: var(--text-primary); }
.card__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.card__tags .card__tag { align-self: auto; }
.card__tags .unp-chip { color: inherit; }
.card:hover .unp-chip, .card:focus-visible .unp-chip { border-color: var(--text-inverse); }
.unp-label { display: inline-flex; flex-direction: column; gap: 6px; min-width: 212px; box-sizing: border-box; padding: 14px 16px; border: 3px solid currentColor; color: var(--text-primary); font-family: "Jost", system-ui, sans-serif; }
.unp-label--100 { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.unp-label--ai { border-style: dashed; }
.unp-label__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); }
.unp-label__n { font-size: 30px; font-weight: 700; line-height: 1; }
.unp-label__i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.unp-label__v { font-size: 14px; font-weight: 700; line-height: 1.15; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.unp-label__f { margin-top: 2px; padding-top: 6px; border-top: 2px solid currentColor; font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.unp-label--ai .unp-label__f { border-top-style: dashed; }
.unp-sign { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-7); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-soft); }
.unp-sign__labels { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.unp-sign__t { flex: 1 1 280px; min-width: 0; max-width: 46ch; display: flex; flex-direction: column; gap: var(--space-2); }
.unp-sign__t p { margin: 0; }
.unp-levels { display: grid; gap: var(--space-6); margin-top: var(--space-5); }
.unp-level { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.unp-level p { margin: 0; max-width: 52ch; }
.unp-levels .unp-label { width: 240px; }
@media (max-width: 640px) { .unp-level { grid-template-columns: 1fr; gap: var(--space-3); } }
/* RDR-0051 v02 · nos cards o selo é só texto, leve, sem caixa nem caixa-alta (Diretor) */
.card__tags .unp-chip { padding: 0; border: 0; background: none; color: var(--text-muted); font-family: inherit; font-weight: 400; }
.card__tags .unp-chip b, .card__tags .unp-chip span { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.card__tags .unp-chip--ai b { display: none; }
.card__tags .unp-chip:not(.unp-chip--ai) span { text-transform: lowercase; }
/* RDR-0051 v03 · selinho só de tipo no canto superior direito do card de artigo 100% humano (Diretor) */
.card__media:has(.unp-mini) { position: relative; }
.unp-mini { position: absolute; top: 12px; right: 12px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px 6px; background: var(--surface-inverse); color: var(--text-inverse); font-family: "Jost", system-ui, sans-serif; line-height: 1; pointer-events: none; }
.unp-mini b { font-size: 20px; font-weight: 700; }
.unp-mini span { font-size: 9.5px; font-weight: 600; line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; }
.card__tags .unp-chip { margin-left: auto; }   /* RDR-0051 v06: alinhado à direita (Diretor) */
.card__tags .unp-chip { margin-right: -8px; }   /* mesma borda direita do "min de leitura" do rodapé do card */
/* RDR-0051 v07 · o selo do card vai para o rodapé, ao lado do tempo de leitura (Diretor) */
.card__metas { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 8px; text-align: right; min-width: 0; }
.card__metas .unp-chip { padding: 0; border: 0; background: none; color: var(--text-muted); font-family: inherit; font-weight: 400; }
.card__metas .unp-chip b, .card__metas .unp-chip span { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.card__metas .unp-chip--ai b { display: none; }
.card__metas .unp-chip:not(.unp-chip--ai) span { text-transform: lowercase; }
.card__metas .unp-chip::after { content: "·"; margin-left: 8px; }
.card__metas .card__meta { white-space: nowrap; }
/* RDR-0051 v08 · uma linha só no desktop; ponto separador antes do tempo de leitura; no celular quebra sem o ponto */
.card__metas { flex-wrap: nowrap; white-space: nowrap; }
.card__metas .unp-chip::after { content: none; }
.card__metas .unp-chip + .card__meta::before { content: "·"; margin-right: 8px; }
@media (max-width: 640px) { .card__metas { flex-wrap: wrap; } .card__metas .unp-chip + .card__meta::before { content: none; } }
/* RDR-0051 v09 · selo empilhado sobre o tempo de leitura, alinhado à direita (não cabe numa linha com "Ler mais" no tablet) */
.card__metas { flex-direction: column; align-items: flex-end; row-gap: 2px; flex-wrap: nowrap; }
.card__metas .unp-chip + .card__meta::before { content: none; }
.card__foot:has(.card__metas) { align-items: flex-end; }
/* RDR-0051 v10 · quando falta espaço, o selo quebra a linha em vez de encostar no "Ler mais" */
.card__foot:has(.card__metas) .button { flex: none; }
.card__metas { white-space: normal; flex: 0 1 auto; }
.card__metas .unp-chip { white-space: normal; display: inline; text-align: right; }
.card__metas .unp-chip b { margin-right: .3em; }
/* RDR-0051 v11 · selo depois do tempo de leitura, na mesma linha e no mesmo estilo; o ponto separa; se faltar espaço, quebra depois do ponto */
.card__metas { display: block; text-align: right; white-space: normal; }
.card__metas .card__meta { display: inline; white-space: nowrap; padding-right: 0; }
.card__metas .card__meta::after { content: " ·"; }
.card__metas .unp-chip { display: inline; white-space: nowrap; margin-left: .3em; font-size: inherit; color: inherit; }
.card__metas .unp-chip b, .card__metas .unp-chip span { font-size: inherit; }
.card__foot .card__metas { padding-right: 4px; }
.card__metas .unp-chip { margin-left: 0; }   /* v12: o espaço real entre os dois dá a quebra natural depois do ponto */
.card__metas .unp-chip { white-space: normal; }   /* v13: no tablet a frase também pode quebrar */
.card__metas .unp-chip { display: inline-block; white-space: normal; }   /* v14: a frase desce inteira; só quebra por dentro se nem assim couber */
/* RDR-0051 v15 · a primeira linha (tempo de leitura) fica na altura do "Ler mais"; o selo desce abaixo (Diretor) */
.card__foot:has(.card__metas) { align-items: flex-start; }
.card__foot .card__metas { padding-top: calc((40px - 1lh) / 2); }
.card__foot .card__metas { box-sizing: border-box; min-height: calc((40px - 1lh) / 2 + 2lh); }   /* v16: mesma altura do "Ler mais" em todos os cards de artigo */
/* RDR-0051 v17 · a frase do selo usa a mesma entrelinha do tempo de leitura; abaixo de 1280 px reserva 3 linhas para o "Ler mais" ficar na mesma altura em todos os cards */
.card__metas .unp-chip { line-height: inherit; }
@media (max-width: 1279px) { .card__foot .card__metas { min-height: calc((40px - 1lh) / 2 + 3lh); } }
/* RDR-0051 v18 · padrão único de rodapé: todos os cards (trabalho, projeto, artigo) com a mesma altura de rodapé, botão no topo dele;
   o selo nunca passa de 2 linhas: abaixo de 1280 px vira "100% humano" e não quebra por dentro */
.card__foot { box-sizing: border-box; min-height: calc(var(--space-4) + (40px - 20px) / 2 + 40px); }
.card__foot:has(.card__metas) { align-items: flex-start; }
.card__foot .card__metas { min-height: 0; line-height: 20px; }
.card__metas .unp-chip { display: inline-block; white-space: nowrap; }
@media (max-width: 1279px) { .card__foot .card__metas { min-height: 0; } .card__metas .unp-x { display: none; } }
/* RDR-0051 v19 · rodapé mais baixo em todos os cards (Diretor): respiro de baixo menor; a 2ª linha do selo ocupa esse respiro em vez de esticar o rodapé */
.card__foot { padding-bottom: var(--space-3); min-height: calc(var(--space-3) + 40px); }
.card__foot .card__metas { margin-bottom: -10px; }
.card__foot .card__metas { line-height: 18px; padding-top: 11px; margin-bottom: -7px; }   /* v20: entrelinha 18 px dá folga da borda de baixo; 1ª linha segue no centro do botão */
.card__metas .unp-chip { vertical-align: top; }   /* v21: sem sobra de linha do inline-block */
.card__metas .card__meta { line-height: inherit; }   /* v22: as duas linhas com a mesma entrelinha */
/* RDR-0051 v23 · "Ler mais"/"Ver mais" e o tempo de leitura alinhados pela linha de base do texto (o navegador alinha; vale no Safari do iPhone também).
   A margem negativa faz o selo não mexer na altura do rodapé, que segue igual em todos os cards. */
.card__foot:has(.card__metas) { align-items: baseline; }
.card__foot .card__metas { padding-top: 0; margin-bottom: -60px; }
/* RDR-0051 v24/v25 · selo no topo direito do card, na linha da tag (Diretor). No tablet (card estreito) vira "100% humano" para não quebrar */
.card__tags { flex-wrap: nowrap; }
@media (min-width: 641px) and (max-width: 1279px) { .card__tags .unp-x { display: none; } }

/* ---------- RDR-0052 · 2026-10-26 · páginas revista das seções (/br/artigos/, /br/trabalhos/, /br/projetos-pessoais/) ----------
   v02: topo igual ao da Home (section.intro, fonte única); título da seção no estilo da Home; destaque com vários cards
   (capa grande + até 2 ao lado). Mesmos cards da Home (content/carousels.json). Só tokens do design system. */
.section-head__link { color: inherit; text-decoration: none; }
.section-head__text { background: linear-gradient(currentColor, currentColor) left bottom / 0 var(--stroke-3) no-repeat; transition: background-size var(--duration-base) var(--ease-out); }
.section-head__link:hover .section-head__text, .section-head__link:focus-visible .section-head__text { background-size: 100% var(--stroke-3); }
.section-head__arrow { position: relative; left: 0; font-weight: 400; white-space: nowrap; transition: left var(--duration-base) var(--ease-out); }   /* v08: inline (não inline-block), para o espaço fixo antes dela segurar a seta junto da última palavra */   /* v07: seta de link, como nos botões de texto */
.section-head__link:hover .section-head__arrow, .section-head__link:focus-visible .section-head__arrow { left: 4px; }
.mag__head { padding: var(--space-8) 0 var(--space-6); }
.mag__back { margin-top: var(--space-7); margin-bottom: 0; }   /* v04: "← Voltar" no topo, como nos artigos */
.mag__back + .intro { padding-top: var(--space-7); }
.mag__label { display: block; margin-bottom: var(--space-4); color: var(--text-muted); }
.mag__feature { padding-bottom: var(--space-9); }
.mag__lead { display: grid; gap: var(--gutter); }
.card--cover .card__title { font: 700 clamp(2rem, 4.2vw, 4.4rem)/1.04 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.card--cover .card__sub { display: block; -webkit-line-clamp: none; overflow: visible; font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; text-wrap: balance; }
.card--cover .card__body { gap: var(--space-4); }
@media (min-width: 600px) and (max-width: 1023px) {
  .mag__lead--1, .mag__lead--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag__lead > .card--cover { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .mag__lead--1, .mag__lead--2 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .mag__lead--2 > .card--cover { grid-row: 1 / span 2; }
  .mag__lead--0 > .card--cover { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-rows: 1fr auto; }
  .mag__lead--0 > .card--cover .card__media { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 16 / 10; border-bottom: 0; border-right: var(--stroke-3) solid var(--border-strong); }
  .mag__lead--0 > .card--cover .card__body { grid-column: 2; grid-row: 1; justify-content: flex-end; padding: var(--space-7) var(--space-6) var(--space-4); }
  .mag__lead--0 > .card--cover .card__foot { grid-column: 2; grid-row: 2; padding: 0 var(--space-5) var(--space-5); }
  .mag__lead--1 > .card--cover .card__body, .mag__lead--2 > .card--cover .card__body { padding: var(--space-6) var(--space-6) var(--space-4); }
}
.mag__lead + .mag__grid { margin-top: var(--gutter); }   /* v03: o resto da seção segue o destaque, sem título */
.mag__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mag__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1023px) { .mag__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .mag__grid--3, .mag__grid--2 { grid-template-columns: 1fr; } }

/* RDR-0051 v38 · 2026-10-27 · linha do topo do artigo: link de volta + texto curto na mesma linha (ex.: "100% escrito por humano") */
.case__topline { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-5); row-gap: var(--space-1); margin-bottom: var(--space-4); }
.case__topline .case__back { margin-bottom: 0; }

/* RDR-0052 v10: os 3 botões do topo, quando não cabem numa linha, ficam um em cada linha (assets/site.js marca .is-stacked) */
.intro__actions.is-stacked { flex-direction: column; align-items: flex-start; }

/* RDR-0054: placa com o fundo do tema sob a lista de idiomas (assets/site.js); a lista do topo mistura em negativo sobre ela */
.lang-plate { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 49; background: var(--surface-default); pointer-events: none; display: none; }
.lang-plate.is-on { display: block; }