/* ==========================================================================
   Jana Sousa — Portfolio
   Ordem: fontes → tokens → base → componentes → seções → case → motion
   ========================================================================== */

/* ---------- Fontes (hospedadas no projeto, subset latin) ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('../fonts/fragment-mono-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Cor: neutros puros + um acento com função (marca raciocínio e foco) */
  --ink: #0B0B0C;
  --ink-2: #141416;
  --ink-3: #1D1D20;
  --paper: #FFFFFF;
  --paper-2: #F4F4F5;
  --paper-3: #E9E9EC;
  --line: #E4E4E7;
  --text: #0B0B0C;
  --text-2: #55555D;          /* 7,4:1 no branco */
  --on-ink: #F4F4F5;
  --on-ink-2: #A1A1AA;        /* 7,6:1 no ink */
  --on-ink-hero: #D4D4D8;     /* texto secundário sobre a parede escurecida */
  --on-ink-line: rgb(255 255 255 / .12);
  --on-ink-field: #6B6B73;    /* borda de campo no escuro, 3,7:1 */
  --accent: #FF4F23;          /* 6:1 no ink · 3,3:1 no branco (só texto grande) */
  --accent-ink: #C2381A;      /* acento para texto pequeno no claro, 5,4:1 */
  --danger-on-ink: #FF8A80;
  --success-on-ink: #5EE39A;
  --note-1: #FCE68A;
  --note-2: #FFD3C4;
  --note-3: #E4E4E7;

  /* Tipo */
  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-display: clamp(2.5rem, 1.25rem + 3.3vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.36rem + 2.6vw, 3.5rem);
  --fs-statement: clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.18rem + .8vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-mono: .8125rem;
  --lh-display: 1.02;
  --lh-heading: 1.08;
  --lh-body: 1.6;
  --track-display: -.035em;
  --track-heading: -.03em;
  --track-mono: .04em;

  /* Espaço — múltiplos de 4/8 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --gutter: clamp(20px, 4.4vw, 72px);
  --container: 1296px;
  --section-y: clamp(64px, 3vw + 40px, 96px);
  --head-gap: clamp(40px, 5vw, 72px);   /* título de seção → conteúdo */
  --block-gap: clamp(48px, 6vw, 80px); /* entre blocos dentro de uma seção */
  --header-h: 64px;

  /* Forma */
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 28px;
  --r-pill: 999px;

  /* Movimento */
  --ease-out: cubic-bezier(.2, .7, .2, 1);        /* validado na referência 1 */
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 150ms;
  --dur-2: 240ms;
  --dur-3: 400ms;
  --dur-4: 700ms;
  --dur-5: 1000ms;
}
@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}

/* Contexto de cor por seção: cada bloco escuro/claro redefine os papéis */
[data-theme="dark"] {
  --bg: var(--ink);
  --fg: var(--on-ink);
  --fg-2: var(--on-ink-2);
  --fg-hero: var(--on-ink-hero);
  --line-c: var(--on-ink-line);
  --line-strong: rgb(255 255 255 / .18);
  --accent-text: var(--accent);
  --chip-bg: rgb(255 255 255 / .05);
  --chip-line: rgb(255 255 255 / .18);
  --surface: var(--ink-2);
  --field-bg: var(--ink-2);
  --field-line: var(--on-ink-field);
  --field-line-hover: #8A8A93;
  --placeholder: #8A8A93;
  --danger: var(--danger-on-ink);
  --success: var(--success-on-ink);
  --shade: 11 11 12;
  --cv-bg: var(--ink-2);
  --cv-dot: rgb(255 255 255 / .09);
  --cv-draft: rgb(255 255 255 / .28);
  --cv-node-bg: var(--ink-3);
  --cv-node-line: rgb(255 255 255 / .22);
  --cv-node-fg: var(--on-ink);
  --cv-link: rgb(255 255 255 / .5);
  --cv-ring: transparent;
  --cv-shadow: rgb(0 0 0 / .65);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: var(--paper);
  --fg: var(--text);
  --fg-2: var(--text-2);
  --line-c: var(--line);
  --accent-text: var(--accent-ink);
  --chip-bg: var(--paper-2);
  --chip-line: var(--line);
  --surface: var(--paper-2);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.od-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: fixed;
  left: var(--s4);
  top: var(--s4);
  z-index: 100;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Tipografia compartilhada ---------- */
.hl {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  line-height: 1;
  letter-spacing: -.005em;
  color: var(--accent);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.section-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  max-width: 18ch;
  text-wrap: balance;
}
.section-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.pending {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-2);
  border-bottom: 1px dashed currentColor;
  white-space: nowrap;
}

/* ---------- Botões e links ---------- */
.btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn__icon { --od-icon-size: 1.125rem; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .btn:hover .btn__icon { transform: translateX(4px); }
  .btn:hover .btn__icon--bob { transform: translateY(3px); }
}
.btn--sm { min-height: 44px; padding: 0 var(--s4); }
.btn--light { --btn-bg: var(--on-ink); --btn-fg: var(--ink); }
@media (hover: hover) { .btn--light:hover { --btn-bg: #FFFFFF; } }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--fg); border-color: var(--fg); }
@media (hover: hover) { .btn--outline:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); } }
.btn--block { width: 100%; }
.btn__count { font-family: var(--font-mono); font-weight: 400; font-size: .8125rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.link-arrow .od-icon { --od-icon-size: 1.125rem; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}

.tag {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  line-height: 1.4;
  padding: 4px 12px;
  border: 1px solid var(--chip-line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--fg);
  transition: transform var(--dur-3) var(--ease-out), color var(--dur-1) var(--ease-out);
  view-transition-name: site-header;
  animation: fade-in 600ms var(--ease-out) both;
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-c);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header::before, .site-header :where(*) { transition-duration: var(--dur-1); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s4);
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 44px;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand em, .footer__brand em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2em;
  letter-spacing: 0;
}
.site-nav { display: none; }
.site-nav__list {
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--line-c);
  border-radius: var(--r-pill);
}
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s5);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
@media (hover: hover) {
  .site-nav__list a:hover { background: var(--chip-bg); }
}
.site-nav__list a[aria-current="true"] { background: var(--fg); color: var(--bg); }

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.site-header__cta { display: none; }
.lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-c);
  border-radius: var(--r-pill);
}
.lang__btn {
  min-width: 44px;
  min-height: 40px;
  padding: 0 var(--s2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--fg-2);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.lang__btn[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (hover: hover) {
  .lang__btn[aria-pressed="false"]:hover { color: var(--fg); }
}
.menu-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-c);
  border-radius: var(--r-pill);
  --od-icon-size: 22px;
}
@media (min-width: 768px) {
  .site-header__inner { grid-template-columns: 1fr auto 1fr; }
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-header .menu-btn { display: none; }
}

/* Menu mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--bg);
  color: var(--fg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-out), visibility 0s linear 320ms;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease-out);
}
.menu__inner {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-bottom: var(--s6);
}
.menu__top {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu__list {
  display: grid;
  align-content: center;
  gap: var(--s2);
  padding-block: var(--s7);
}
.menu__list a {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s2);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.1;
}
.menu.is-open .menu__list li { animation: stack-in 600ms var(--ease-out) both; }
.menu.is-open .menu__list li:nth-child(2) { animation-delay: 50ms; }
.menu.is-open .menu__list li:nth-child(3) { animation-delay: 100ms; }
.menu__foot {
  padding-top: var(--s5);
  border-top: 1px solid var(--line-c);
}
.menu__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg-2);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 640px;
  background: var(--bg);
  color: var(--fg);
  overflow: clip;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--s7);
  width: 100%;
  padding-top: calc(var(--header-h) + var(--s7));
  padding-bottom: var(--s5);
}
.hero__main {
  align-self: center;
  display: grid;
  gap: var(--s6);
}
.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  max-width: 19ch;
  text-wrap: balance;
}
.hero__side {
  display: grid;
  justify-items: start;
  gap: var(--s5);
  max-width: 400px;
}
.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-hero);
}
.hero__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s5);
  padding-top: var(--s5);
}
.hero__foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left center;
}
.hero__person {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.hero__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .2);
}
.hero__id { display: grid; gap: 2px; }
.hero__id > span { display: block; }
.hero__name { font-weight: 600; font-size: var(--fs-small); }
.hero__role { font-size: .875rem; color: var(--fg-hero); }
.hero__award {
  display: grid;
  gap: 2px;
  min-height: 44px;
  align-content: center;
  font-size: .875rem;
}
.hero__award > span { display: block; }
.hero__award-line { font-weight: 600; }
.hero__award-sub { color: var(--fg-hero); }
@media (hover: hover) {
  .hero__award:hover .hero__award-line { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}
@media (min-width: 768px) {
  .hero { min-height: max(720px, 100svh); }
  .hero__inner { padding-top: calc(var(--header-h) + var(--s8)); padding-bottom: var(--s6); }
  .hero__award { text-align: right; }
}
@media (min-width: 1024px) {
  .hero__main {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--s8);
    align-items: end;
  }
}

/* Parede curva 3D — anel visto por dentro (decorativo, recorte deliberado) */
.wall {
  --wall-p: 456px;
  --wall-z: -76px;
  --wall-r: 380px;
  --wall-step: 36deg;
  --card-w: 175px;
  --card-h: 233px;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 1200ms var(--ease-out);
}
.js .wall:not(.is-ready) { opacity: 0; }
@media (min-width: 768px) {
  .wall { --card-w: 143px; --card-h: 191px; }
}
@media (min-width: 1024px) {
  .wall { --wall-p: 590px; --wall-z: -98px; --wall-r: 491px; --card-w: 185px; --card-h: 247px; }
}
@media (min-width: 1440px) {
  .wall { --wall-p: 830px; --wall-z: -136px; --wall-r: 690px; --card-w: 260px; --card-h: 347px; }
}
.wall__stage {
  position: absolute;
  inset: 0;
  perspective: var(--wall-p);
  perspective-origin: 50% 44%;
}
.wall__ring {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateZ(var(--wall-z)) rotateY(12deg);
}
.wall__card {
  position: absolute;
  --h: calc(var(--card-w) / (var(--ar, 4 / 3)));
  left: calc(var(--card-w) / -2);
  top: calc(var(--h) / -2);
  width: var(--card-w);
  height: var(--h);
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--ink-3);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * var(--wall-step))) translateZ(calc(var(--wall-r) * -1));
}
.wall__card img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* quadro inteiro, sem recorte */
}
.wall__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--shade) / .9) 0%, rgb(var(--shade) / .74) 36%, rgb(var(--shade) / .62) 60%, rgb(var(--shade) / .8) 100%),
    linear-gradient(180deg, rgb(var(--shade) / .7) 0%, rgb(var(--shade) / 0) 20%, rgb(var(--shade) / 0) 58%, rgb(var(--shade) / .97) 90%);
}

/* ---------- Seções ---------- */
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
}
.section-head {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--head-gap);
}
.section-head__main { display: grid; gap: var(--s5); }
@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: var(--s8);
    align-items: end;
  }
}

/* ---------- Projetos ---------- */
.work-grid {
  display: grid;
  gap: var(--s8) var(--s6);
}
.work-card {
  position: relative;
  display: grid;
  gap: var(--s5);
  align-content: start;
}
.work-card__media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--surface);
}
.work-card__media img {
  transform-origin: 50% 50%;
  transition: transform 800ms var(--ease-out);
}
.work-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(11 11 12 / .12);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
.work-card__badge {
  position: absolute;
  top: var(--s4);
  left: var(--s4);
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgb(11 11 12 / .82);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  white-space: nowrap;
}
.work-card__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #FFFFFF;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
  will-change: transform;
}
.work-card__cursor .od-icon { --od-icon-size: 1rem; }
.work-card__cursor.is-on { opacity: 1; }
.work-card__meta { display: grid; gap: var(--s3); }
.work-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.work-card__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.work-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: var(--r-l);
}
.work-card__link:focus-visible { outline: none; }
.work-card__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 6px; }
.work-card__arrow {
  --od-icon-size: 1.5rem;
  transition: transform var(--dur-2) var(--ease-out);
}
.work-card__result { color: var(--fg-2); max-width: 52ch; }
.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s1);
}
@media (hover: hover) {
  .work-card:hover .work-card__media img { transform: scale(1.04); }
  .work-card:hover .work-card__media::after { opacity: 1; }
  .work-card:hover .work-card__arrow { transform: translate(3px, -3px); }
}
@media (hover: none) {
  .work-card__cursor { display: none; }
}
.work-card:has(.work-card__link:focus-visible) .work-card__media img { transform: scale(1.04); }
@media (min-width: 768px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-card--wide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .work-card--wide {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--s6);
    align-items: end;
  }
  .work-card--flip .work-card__media { order: 2; }
}
.work-more {
  display: flex;
  justify-content: center;
  margin-top: var(--s8);
}

/* Página "Todos os projetos": um case por linha, capa e ficha alternando de lado */
.work-grid--all {
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--block-gap);
}
.work-card--row .work-card__meta {
  gap: var(--s4);
  align-content: center;
}
.work-card--row .work-card__title {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}
.work-card__sub {
  max-width: 34ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
  text-wrap: balance;
}
.work-card__sub em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -.005em;
  color: var(--accent-text);
}
.work-card__facts {
  display: grid;
  margin-top: var(--s2);
  border-top: 1px solid var(--line-c);
}
.work-card__fact {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line-c);
}
.work-card__fact dt {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.work-card__fact dd { font-size: var(--fs-small); font-weight: 500; }
.work-card__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.work-card__cta .od-icon { --od-icon-size: 1.125rem; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .work-card:hover .work-card__cta .od-icon { transform: translateX(4px); }
}
.work-card:has(.work-card__link:focus-visible) .work-card__cta .od-icon { transform: translateX(4px); }
@media (min-width: 1024px) {
  .work-card--row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s8);
    align-items: center;
  }
  .work-card--row.work-card--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Páginas internas (todos os projetos, sobre mim) ---------- */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 64px));
  padding-bottom: var(--head-gap);
}
.page-hero .eyebrow { margin-bottom: var(--s5); }
.page-title {
  max-width: 18ch;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.page-title:focus { outline: none; }
.page-lead {
  max-width: 60ch;
  margin-top: var(--s5);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
/* título à esquerda, subtítulo na lateral — mesma grade do hero da home */
.page-head { display: grid; gap: var(--s5); }
.page-head .page-lead { max-width: 400px; margin-top: 0; }
@media (min-width: 1024px) {
  .page-head {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--s8);
    align-items: end;
  }
}
.page-body { padding-bottom: var(--section-y); }
.page-body .about__grid { margin-top: 0; }

/* ---------- Processo ---------- */
.process { --canvas-h: clamp(300px, 46svh, 420px); }
.process__body {
  display: grid;
  gap: var(--s5);
}
.process__stage {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-inline: calc(var(--gutter) * -1);
  padding: calc(var(--header-h) + var(--s2)) var(--gutter) var(--s3);
  background: var(--bg);
}
.canvas {
  height: var(--canvas-h);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-c);
  border-radius: var(--r-l);
  background-color: var(--cv-bg);
  background-image: radial-gradient(circle at 1px 1px, var(--cv-dot) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.canvas__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line-c);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--track-mono);
  color: var(--fg-2);
  white-space: nowrap;
}
.canvas__frame { display: inline-flex; gap: 6px; }
.canvas__hash { color: var(--accent-text); }
.canvas__step { color: var(--fg); transition: opacity var(--dur-2) var(--ease-out); }
.canvas__step.is-swapping { opacity: 0; }
.canvas__board {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--s4);
}
.artboard {
  position: relative;
  height: 100%;
  aspect-ratio: 3 / 4;
  container-type: size;
  isolation: isolate;
}
@media (min-width: 1024px) {
  .process { --canvas-h: min(640px, calc(100svh - var(--header-h) - 96px)); }
  .process__body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--s8);
    align-items: start;
  }
  .process__stage {
    top: calc(50svh - var(--canvas-h) / 2 + var(--header-h) / 2);
    margin: 0;
    padding: 0;
    background: none;
  }
  .canvas__board { padding: var(--s6); }
  .artboard { aspect-ratio: 9 / 16; }
}

/* fundo do artboard: rascunho tracejado → tela sólida */
.ab-bg {
  position: absolute;
  inset: 0;
  border-radius: 5cqw;
  transition: opacity var(--dur-4) var(--ease-out);
}
.ab-bg--draft { border: 1.5px dashed var(--cv-draft); }
.ab-bg--solid {
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--cv-ring), 0 30px 60px -24px var(--cv-shadow);
  opacity: 0;
}
.canvas[data-step="3"] .ab-bg--solid,
.canvas[data-step="4"] .ab-bg--solid { opacity: 1; }
.canvas[data-step="3"] .ab-bg--draft,
.canvas[data-step="4"] .ab-bg--draft { opacity: 0; }

/* 1 · perguntas (post-its) → 2 · nós do fluxo */
.ab-note {
  position: absolute;
  left: 18%;
  width: 64%;
  height: 13%;
  display: grid;
  place-items: center;
  padding: 0 4cqw;
  isolation: isolate;
  text-align: center;
  font-size: 5cqw;
  font-weight: 600;
  line-height: 1.2;
  transition: transform var(--dur-4) var(--ease-in-out), opacity var(--dur-3) var(--ease-out);
  transition-delay: calc(var(--d) * 60ms);
}
.ab-note > span {
  grid-area: 1 / 1;
  transition: opacity var(--dur-3) var(--ease-out);
}
.ab-note::before,
.ab-note::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 2.4cqw;
  transition: opacity var(--dur-3) var(--ease-out);
}
.ab-note::before {
  background: var(--note-c, var(--note-3));
  box-shadow: 0 2cqw 5cqw rgb(0 0 0 / .35);
}
.ab-note::after {
  background: var(--cv-node-bg);
  border: 1px solid var(--cv-node-line);
  opacity: 0;
}
.ab-note__q { color: var(--ink); }
.ab-note__n { color: var(--cv-node-fg); font-weight: 500; opacity: 0; }
.ab-note--1 { top: 10%; --note-c: var(--note-1); --d: 0; }
.ab-note--2 { top: 32%; --note-c: var(--note-2); --d: 1; }
.ab-note--3 { top: 54%; --note-c: var(--note-3); --d: 2; }
.ab-note--4 { top: 76%; --d: 3; }
.canvas[data-step="1"] .ab-note--1 { transform: translate(-14cqw, 2cqh) rotate(-4deg); }
.canvas[data-step="1"] .ab-note--2 { transform: translate(14cqw, 5cqh) rotate(3deg); }
.canvas[data-step="1"] .ab-note--3 { transform: translate(-10cqw, 9cqh) rotate(-2deg); }
.canvas[data-step="1"] .ab-note--4 { opacity: 0; transform: translateY(3cqh) scale(.94); }
.canvas[data-step="2"] .ab-note::before { opacity: 0; }
.canvas[data-step="2"] .ab-note::after { opacity: 1; }
.canvas[data-step="2"] .ab-note__q { opacity: 0; }
.canvas[data-step="2"] .ab-note__n { opacity: 1; }
.canvas[data-step="3"] .ab-note,
.canvas[data-step="4"] .ab-note { opacity: 0; transform: scale(.92); }

.ab-link {
  position: absolute;
  left: 50%;
  width: 1.5px;
  height: 9%;
  background: var(--cv-link);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-3) var(--ease-out);
  transition-delay: calc(200ms + var(--d) * 80ms);
}
.ab-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.4cqw;
  height: 2.4cqw;
  border-right: 1.5px solid var(--cv-link);
  border-bottom: 1.5px solid var(--cv-link);
  transform: translate(-50%, 0) rotate(45deg);
}
.ab-link--1 { top: 23%; --d: 0; }
.ab-link--2 { top: 45%; --d: 1; }
.ab-link--3 { top: 67%; --d: 2; }
.canvas[data-step="2"] .ab-link { transform: scaleY(1); }

/* 3 · wireframe */
.wf {
  position: absolute;
  left: 7%;
  width: 86%;
  border-radius: 1.6cqw;
  background: #EDEDF0;
  opacity: 0;
  transform: translateY(2.5cqh);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: calc(var(--i) * 50ms);
}
.canvas[data-step="3"] .wf { opacity: 1; transform: none; }
.canvas[data-step="4"] .wf { opacity: 0; transform: none; transition-delay: 0ms; }
.wf--nav { top: 3.5%; height: 5%; border-radius: 0; background: transparent; border-bottom: 1px solid #D4D4D8; }
.wf--img {
  top: 11%;
  height: 38%;
  border: 1px solid #D4D4D8;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #CFCFD4 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #CFCFD4 50%, transparent calc(50% + 1px)),
    #F4F4F5;
}
.wf--t1 { top: 51.5%; width: 70%; height: 3.4%; }
.wf--t2 { top: 57%; width: 46%; height: 3.4%; }
.wf--price { top: 64%; width: 30%; height: 4.2%; background: #D4D4D8; }
.wf--chips { top: 71.5%; height: 6%; display: flex; align-items: center; gap: 3cqw; background: transparent; }
.wf--chips i { height: 100%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #C9C9CF; }
.wf--cta { top: 82%; height: 8%; border-radius: 2cqw; background: #C9C9CF; }

/* 4 · alta fidelidade + handoff */
.hf {
  position: absolute;
  left: 7%;
  width: 86%;
  margin: 0;
  color: var(--ink);
  opacity: 0;
  transform: scale(.98);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: calc(120ms + var(--i) * 60ms);
}
.canvas[data-step="4"] .hf { opacity: 1; transform: none; }
.hf--nav { top: 3.5%; height: 5%; display: flex; align-items: center; justify-content: space-between; }
.hf__logo { width: 16cqw; height: 3.2cqw; border-radius: 2cqw; background: var(--ink); }
.hf__icons { display: flex; gap: 2.4cqw; }
.hf__icons i { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: 1.5px solid var(--ink); }
.hf--img {
  top: 11%;
  height: 38%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3cqw;
  background: linear-gradient(160deg, #FFE7DE 0%, #FFC4B0 55%, #FF9C7E 100%);
}
.hf__bottle {
  position: relative;
  width: 24%;
  height: 66%;
  margin-top: 10%;
  border-radius: 8cqw 8cqw 4cqw 4cqw / 6cqw 6cqw 3cqw 3cqw;
  background: linear-gradient(90deg, #D93A16 0%, #FF5C33 42%, #FF8A66 64%, #D93A16 100%);
  box-shadow: 0 4cqw 8cqw -2cqw rgb(120 30 10 / .45);
}
.hf__cap {
  position: absolute;
  left: 22%;
  top: -12%;
  width: 56%;
  height: 13%;
  border-radius: 2cqw 2cqw 1cqw 1cqw;
  background: var(--ink);
}
.hf__label {
  position: absolute;
  left: 0;
  top: 40%;
  width: 100%;
  height: 22%;
  background: rgb(255 255 255 / .9);
}
.hf--title { top: 51.5%; font-size: 5.6cqw; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.hf--price { top: 64%; font-size: 5cqw; font-weight: 600; color: var(--accent-ink); }
.hf--chips { top: 71.5%; height: 6%; display: flex; align-items: center; gap: 3cqw; }
.hf--chips i { height: 70%; aspect-ratio: 1; border-radius: 50%; }
.hf--chips i:nth-child(1) { background: var(--accent); }
.hf--chips i:nth-child(2) { background: var(--ink); }
.hf--chips i:nth-child(3) { background: #3D6BE0; }
.hf--chips i:nth-child(4) { background: #D4D4D8; }
.hf--chips i.is-on { box-shadow: 0 0 0 1cqw #FFFFFF, 0 0 0 1.6cqw var(--ink); }
.hf--cta {
  top: 82%;
  height: 8%;
  display: grid;
  place-items: center;
  border-radius: 2cqw;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 4.4cqw;
  font-weight: 600;
}
.spec {
  position: absolute;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-4) var(--ease-out);
  transition-delay: calc(300ms + var(--i) * 70ms);
}
.canvas[data-step="4"] .spec { opacity: 1; transform: none; }
.spec--select {
  left: 7%;
  top: 82%;
  width: 86%;
  height: 8%;
  border: 1.5px solid var(--accent);
  border-radius: 2cqw;
  transform: scale(1.06);
}
.spec--select i {
  position: absolute;
  width: 2.6cqw;
  height: 2.6cqw;
  background: #FFFFFF;
  border: 1.5px solid var(--accent);
}
.spec--select i:nth-of-type(1) { left: -1.3cqw; top: -1.3cqw; }
.spec--select i:nth-of-type(2) { right: -1.3cqw; top: -1.3cqw; }
.spec--select i:nth-of-type(3) { left: -1.3cqw; bottom: -1.3cqw; }
.spec--select i:nth-of-type(4) { right: -1.3cqw; bottom: -1.3cqw; }
.spec__tag,
.spec__val {
  position: absolute;
  padding: .6cqw 1.8cqw;
  border-radius: 1.2cqw;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 3.2cqw;
  line-height: 1.3;
  white-space: nowrap;
}
.spec__tag { left: -1.5px; bottom: calc(100% + 2.4cqw); }
.spec--gap {
  left: 86%;
  top: 49%;
  height: 2.5%;
  border-left: 1.5px solid var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
}
.spec--gap .spec__val { left: 2cqw; top: -1.4cqw; }
.spec--pad {
  left: 0;
  top: 53.5%;
  width: 7%;
  border-top: 1.5px solid var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}
.spec--pad .spec__val { left: -1cqw; top: 1.4cqw; }

/* cursor que aponta o que mudou em cada etapa */
.ab-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  transform: translate(var(--cur-x, 70cqw), var(--cur-y, 47cqh));
  transition: transform var(--dur-4) var(--ease-in-out);
}
.ab-cursor svg { width: 5cqw; height: auto; }
.ab-cursor span {
  margin-top: 3.6cqw;
  margin-left: -.4cqw;
  padding: .6cqw 2cqw;
  border-radius: 1.4cqw;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 3.2cqw;
  line-height: 1.4;
}
.canvas[data-step="1"] .ab-cursor { --cur-x: 70cqw; --cur-y: 47cqh; }
.canvas[data-step="2"] .ab-cursor { --cur-x: 58cqw; --cur-y: 68cqh; }
.canvas[data-step="3"] .ab-cursor { --cur-x: 64cqw; --cur-y: 30cqh; }
.canvas[data-step="4"] .ab-cursor { --cur-x: 80cqw; --cur-y: 92cqh; }

/* etapas em texto */
.steps { display: grid; }
.step {
  display: grid;
  align-content: center;
  gap: var(--s3);
  min-height: 56svh;
  padding-block: var(--s7);
  border-top: 1px solid var(--line-c);
}
.step:first-child { border-top: 0; }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--fg-2);
  transition: color var(--dur-3) var(--ease-out);
}
.step__title {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--fg-2);
  transition: color var(--dur-3) var(--ease-out);
}
.step__text {
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}
.step__methods {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--fg-2);
}
.step.is-active .step__num { color: var(--accent-text); }
.step.is-active .step__title { color: var(--fg); }
@media (min-width: 1024px) {
  .step { min-height: 72svh; }
}

/* ---------- Sobre ---------- */
.about .eyebrow { margin-bottom: var(--s5); }
.statement {
  max-width: 40ch;
  font-size: var(--fs-statement);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}
.sl-w { opacity: var(--sl, 1); }
.about__grid {
  display: grid;
  gap: var(--s8);
  margin-top: var(--block-gap);
}
.about__photo {
  position: relative;
  max-width: 520px;
}
.about__photo img { border-radius: var(--r-l); background: var(--surface); }
.seal {
  position: absolute;
  right: var(--s3);
  bottom: calc(var(--s6) * -1);
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / .45);
}
.seal__ring {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  animation: seal-spin 30s linear infinite;
}
.seal__ring text {
  font-family: var(--font-mono);
  font-size: 8.6px;
  letter-spacing: .04em;
  fill: currentColor;
}
.seal__center {
  display: grid;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: .95;
  text-align: center;
  color: var(--accent);
}
.seal__center > span { display: block; }
.about__text {
  display: grid;
  gap: var(--s5);
  max-width: 640px;
  align-content: start;
}
.about__p { font-size: var(--fs-lead); line-height: 1.6; }
.about__label-gap { margin-top: var(--s5); }
.about__more { justify-self: start; margin-top: var(--s3); }
.awards {
  display: grid;
  border-top: 1px solid var(--line-c);
}
.award {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s2) var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line-c);
}
.award__place {
  min-width: 4.4ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.award__body { display: grid; gap: 2px; }
.award__body > span { display: block; }
.award__name { font-size: 1.125rem; font-weight: 600; }
.award__cat { font-size: var(--fs-small); color: var(--fg-2); }
.award__link {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.award__link .od-icon { --od-icon-size: 1.125rem; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  .award__link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .award__link:hover .od-icon { transform: translate(2px, -2px); }
}
@media (min-width: 640px) {
  .award { grid-template-columns: auto minmax(0, 1fr) auto; }
  .award__link { grid-column: 3; }
}
@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 96px);
    align-items: start;
  }
  .seal { right: calc(var(--s5) * -1); bottom: calc(var(--s5) * -1); width: 128px; height: 128px; }
}

.experience {
  display: grid;
  gap: var(--s6);
  margin-top: var(--block-gap);
}
.experience__head {
  display: grid;
  gap: var(--s4);
  align-content: start;
}
.experience__title {
  max-width: 14ch;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}
.experience__cv { margin-top: var(--s2); }
.eyebrow--plain { color: var(--fg-2); }
.xp-list {
  display: grid;
  border-top: 1px solid var(--line-c);
}
.xp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line-c);
}
.xp__id { display: grid; gap: 2px; }
.xp__id > span { display: block; }
.xp__role { font-size: 1.125rem; font-weight: 600; }
.xp__org { color: var(--fg-2); }
.xp__period {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--track-mono);
  color: var(--fg-2);
  white-space: nowrap;
}
.xp__desc {
  grid-column: 1 / -1;
  max-width: 60ch;
  font-size: var(--fs-small);
  color: var(--fg-2);
}
@media (min-width: 1024px) {
  .experience {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 96px);
  }
  .experience__head {
    position: sticky;
    top: calc(var(--header-h) + var(--s6));
    align-self: start;
  }
}

.toolkit {
  display: grid;
  gap: var(--s7);
  margin-top: var(--block-gap);
  padding-top: var(--s7);
  border-top: 1px solid var(--line-c);
}
.toolkit__group { display: grid; gap: var(--s4); align-content: start; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* chips que preenchem a linha: cada um cresce na proporção do próprio texto (--grow, via app.js) */
.chips--fill .chip {
  flex: var(--grow, 1) 1 auto;
  padding: 10px 12px;
  font-size: var(--fs-small);
  text-align: center;
  white-space: nowrap;
}
/* quebra fixa: Ferramentas (4 + 3) e Habilidades (4 + 4) em duas linhas, lado a lado */
.chips__break { display: none; }
@media (min-width: 1280px) {
  .toolkit {
    grid-template-columns: minmax(0, 4fr) minmax(0, 9fr);
    column-gap: var(--s7);
  }
  .chips:has(.chips__break) { row-gap: calc(var(--s2) / 2); }
  .chips__break { display: block; flex-basis: 100%; height: 0; }
}
.chip {
  padding: 8px 16px;
  border: 1px solid var(--chip-line);
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
}


/* ---------- Contato ---------- */
.contact { padding-bottom: var(--block-gap); }
.contact__head {
  display: grid;
  gap: var(--s5);
  max-width: 920px;
  margin-bottom: var(--head-gap);
}
.contact__title {
  font-size: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.contact__grid { display: grid; gap: var(--s8); }
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: var(--s9);
    align-items: start;
  }
}
.form { display: grid; gap: var(--s5); }
.form__summary {
  display: grid;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--danger);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  font-size: var(--fs-small);
}
.form__summary-title { display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--danger); }
.form__summary-title .od-icon { --od-icon-size: 1.125rem; }
.form__summary ul { margin: 0; padding-left: 1.25em; }
.form__summary a { text-decoration: underline; text-underline-offset: 3px; }
.field { display: grid; gap: var(--s2); }
.field__label { font-size: var(--fs-small); font-weight: 600; }
.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--field-line);
  border-radius: var(--r-s);
  background: var(--field-bg);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.field__input::placeholder { color: var(--placeholder); }
@media (hover: hover) {
  .field__input:hover { border-color: var(--field-line-hover); }
}
.field__input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(255 79 35 / .3);
}
.field__input--area { min-height: 152px; resize: vertical; }
.field__hint { font-size: .875rem; color: var(--fg-2); }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--danger);
}
.field__error .od-icon { --od-icon-size: 1rem; margin-top: 2px; }
.field.is-invalid .field__input { border-color: var(--danger); }
.form__submit { margin-top: var(--s2); min-height: 56px; }
.spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgb(11 11 12 / .25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.form__submit.is-loading { cursor: progress; }
.form__submit.is-loading .spinner { display: inline-block; }
.form__submit.is-loading .btn__icon { display: none; }
.form-result {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  padding: var(--s6);
  border: 1px solid var(--line-c);
  border-radius: var(--r-l);
  background: var(--surface);
}
.form-result:focus { outline: none; }
.form-result__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
  --od-icon-size: 24px;
}
.form-result--error .form-result__icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.form-result__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.form-result__body { color: var(--fg-2); max-width: 48ch; }
.form-result__body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.channels { display: grid; gap: var(--s4); align-content: start; }
.channels__list { display: grid; border-top: 1px solid var(--line-c); }
.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 72px;
  border-bottom: 1px solid var(--line-c);
}
.channel__link {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 72px;
  padding-block: var(--s3);
}
.channel__text { display: grid; gap: 2px; min-width: 0; }
.channel__text > span { display: block; }
.channel__name { font-weight: 600; }
.channel__value { font-size: var(--fs-small); color: var(--fg-2); overflow-wrap: anywhere; }
.channel__icon { --od-icon-size: 1.25rem; transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
  a.channel__link:hover .channel__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  a.channel__link:hover .channel__icon { transform: translate(2px, -2px); }
  a.channel__link:hover .channel__icon--down { transform: translateY(2px); }
}
.channel--pending .channel__link { cursor: default; }
.icon-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--chip-line);
  border-radius: 50%;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  --od-icon-size: 1.125rem;
}
@media (hover: hover) {
  .icon-btn:hover { background: var(--fg); color: var(--bg); }
}

/* ---------- Rodapé ---------- */
.site-footer {
  padding-block: var(--s4) var(--s6);
  border-top: 1px solid var(--line-c);
  background: var(--bg);
  color: var(--fg);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  padding-bottom: var(--s7);
}
.footer__brand {
  display: inline-flex;
  align-items: baseline;
  gap: .22em;
  font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
}
.behind { border-block: 1px solid var(--line-c); }
.behind__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 64px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.behind__summary::-webkit-details-marker { display: none; }
.behind__icon { --od-icon-size: 1.25rem; transition: transform var(--dur-3) var(--ease-out); }
.behind[open] .behind__icon { transform: rotate(45deg); }
.behind__list {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s6);
}
.behind__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s4);
}
.behind__num {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--accent-text);
}
.behind__list p { max-width: 52ch; color: var(--fg-2); }
@media (min-width: 768px) {
  .behind__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); }
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s5);
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) {
  .footer__nav a:hover { color: var(--fg); }
}

/* ---------- Case ---------- */
.view--case, .view--page { background: var(--bg); color: var(--fg); }
.case-hero {
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 64px));
  background: var(--bg);
  color: var(--fg);
}
.case-title {
  max-width: 19ch;
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.case-title:focus { outline: none; }
.case-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -.005em;
  color: var(--accent);
}
/* título à esquerda, subtítulo + tags na coluna lateral — mesma grade do hero da home */
.case-head {
  display: grid;
  gap: var(--s6);
}
.case-side {
  display: grid;
  justify-items: start;
  gap: var(--s5);
  max-width: 400px;
}
@media (min-width: 1024px) {
  .case-head {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    column-gap: var(--s8);
    align-items: end;
  }
}
.case-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.case-cover {
  position: relative;
  margin-top: var(--head-gap);
}
.case-cover img { border-radius: var(--r-l); background: var(--surface); }
.case-body {
  display: grid;
  gap: var(--s7);
  padding-block: var(--block-gap);
  background: var(--bg);
  color: var(--fg);
}
.case-index { display: none; }
.case-index ol {
  display: grid;
  gap: 2px;
  border-left: 1px solid var(--line-c);
}
.case-index a {
  display: block;
  margin-left: -1px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid transparent;
  font-size: var(--fs-small);
  color: var(--fg-2);
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.case-index a[aria-current="true"] { color: var(--fg); font-weight: 600; border-left-color: var(--accent); }
@media (hover: hover) {
  .case-index a:hover { color: var(--fg); }
}
@media (min-width: 1024px) {
  .case-body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    column-gap: var(--s8);
  }
  .case-index {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s6));
    align-self: start;
  }
  .case-index .label { margin-bottom: var(--s4); }
}
.case-content {
  display: grid;
  gap: var(--block-gap);
  max-width: 860px;
}
.case-section {
  display: grid;
  gap: var(--s5);
  scroll-margin-top: calc(var(--header-h) + var(--s5));
}
.case-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.case-section__title:focus:not(:focus-visible) { outline: none; }
.case-section__body { display: grid; gap: var(--s4); }
.case-section__body p { max-width: 62ch; font-size: var(--fs-lead); line-height: 1.65; }
.why {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-c);
  border-radius: var(--r-m);
}
.why__part {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding: var(--s5);
}
.why__part > * { display: block; }
.why__part--decision { background: var(--surface); }
.why__part + .why__part { border-top: 1px solid var(--line-c); }
.why__label {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--accent-text);
}
.why__decision { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.why__reason { line-height: 1.6; }
@media (min-width: 768px) {
  .why { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .why__part + .why__part { border-top: 0; border-left: 1px solid var(--line-c); }
}
.figure { display: grid; gap: var(--s3); }
.figure img { border-radius: var(--r-m); background: var(--surface); }
.figure--narrow { max-width: 420px; }
.figure figcaption {
  display: flex;
  gap: var(--s2);
  font-size: var(--fs-small);
  color: var(--fg-2);
}

/* Desafios: cards no mesmo formato das etapas do processo na home */
.challenges { display: grid; gap: var(--s4); }
.challenge {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s5);
  border: 1px solid var(--line-c);
  border-radius: var(--r-m);
}
.challenge > * { display: block; }
.challenge__title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.challenge__text { line-height: 1.6; color: var(--fg-2); }
@media (min-width: 768px) {
  .challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Escopo em chips: rótulo à esquerda, como Ferramentas e Habilidades no Sobre */
.scope { display: grid; border-top: 1px solid var(--line-c); }
.scope__group {
  display: grid;
  gap: var(--s3);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line-c);
}
.scope__label {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg-2);
}
.scope__note { color: var(--accent-text); }
@media (min-width: 768px) {
  .scope__group {
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: var(--s5);
    align-items: baseline;
  }
}

/* Prêmio no fecho do case: colocação em serifa itálica, como na lista de prêmios */
.case-award {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  padding-block: var(--s5);
  border-block: 1px solid var(--line-c);
}
.case-award__place {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3rem, 2.2rem + 2.4vw, 4.5rem);
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
}
.case-award__text {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.case-award__text strong { font-weight: 600; }
.case-section__pending {
  padding: var(--s4) var(--s5);
  border: 1px dashed var(--line-c);
  border-radius: var(--r-m);
  color: var(--fg-2);
  font-size: var(--fs-small);
}
.case-next {
  padding-bottom: var(--block-gap);
  background: var(--bg);
  color: var(--fg);
}
.next-card {
  position: relative;
  display: grid;
  gap: var(--s5);
  padding: var(--s5);
  border-radius: var(--r-l);
  background: var(--surface);
}
.next-card__text { display: grid; gap: var(--s3); align-content: center; }
.next-card__text > * { display: block; }
.next-card__name {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}
.next-card__result { color: var(--fg-2); max-width: 40ch; }
.next-card__media { overflow: hidden; border-radius: var(--r-m); }
.next-card__media img { transition: transform 800ms var(--ease-out); }
.next-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-l);
}
.next-card__link { display: inline-flex; align-items: center; gap: var(--s2); }
.next-card__link .od-icon { --od-icon-size: 1.5rem; transition: transform var(--dur-2) var(--ease-out); }
.next-card__link:focus-visible { outline: none; }
.next-card__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) {
  .next-card:hover .next-card__media img { transform: scale(1.04); }
  .next-card:hover .next-card__link .od-icon { transform: translateX(4px); }
}
@media (min-width: 768px) {
  .next-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s7);
    padding: var(--s6);
  }
}

.viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--ink);
  color: var(--on-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.viewer.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.viewer__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--on-ink-line);
}
.viewer__title { flex: 1 1 auto; margin: 0; font-weight: 600; }
.viewer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--on-ink-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--on-ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .viewer__btn:hover { background: var(--on-ink); color: var(--ink); }
}
.viewer__btn:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }
.viewer__btn--close { padding: 0; font-size: 1.25rem; }
.viewer__scroll { overflow-y: auto; overscroll-behavior: contain; padding: var(--s5); background: var(--ink-2); }
.viewer__page { display: block; width: min(100%, 880px); height: auto; margin-inline: auto; background: #fff; border-radius: var(--r-s, 8px); }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s6);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--on-ink);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / .5);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.toast .od-icon { --od-icon-size: 1.125rem; color: #1F8A4C; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Motion — cada animação explica algo (ordem, estado, continuidade)
   ========================================================================== */

/* Entrada da hero: parede → H1 palavra a palavra → coluna → prova */
.hero__title .w { display: inline-block; }
.js .hero__title .w__i { display: inline-block; opacity: 0; }
.js .hero [data-enter] { opacity: 0; }
.js .hero__foot::before { transform: scaleX(0); }
.js .hero.is-entered .hero__title .w__i {
  animation: word-in 900ms var(--ease-out) both;
  animation-delay: calc(240ms + var(--wi) * 45ms);
}
.js .hero.is-entered [data-enter] {
  animation: stack-in 1000ms var(--ease-out) both;
  animation-delay: calc(640ms + var(--ei, 0) * 90ms);
}
.hero [data-enter="2"] { --ei: 1; }
.hero [data-enter="3"] { --ei: 3; }
.js .hero.is-entered .hero__foot::before { animation: line-in 1100ms var(--ease-out) 900ms both; }
.js .hero.is-static .hero__title .w__i,
.js .hero.is-static [data-enter] { animation: none; opacity: 1; }
.js .hero.is-static .hero__foot::before { animation: none; transform: none; }
.btn__icon--bob.is-bobbing { animation: bob 1.6s var(--ease-in-out) 3; }

@keyframes word-in {
  from { opacity: 0; filter: blur(12px); transform: translateY(.28em); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes stack-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}
@keyframes line-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@keyframes seal-spin { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Revelação em cascata ao rolar (uma vez) */
[data-reveal] {
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.js:not(.js-fallback) [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(12px);
}

/* Troca de rota e de idioma */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-group(case-media) {
  animation-duration: 640ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-group(site-header) { animation: none; }

/* Sem JavaScript funcional: tudo visível */
.js-fallback .hero [data-enter],
.js-fallback .hero__title .w__i { opacity: 1 !important; animation: none !important; }
.js-fallback .hero__foot::before { transform: none !important; }
.js-fallback .wall { opacity: 1 !important; }

/* Reduzir movimento: estado final direto, sem deslocamentos */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .js:not(.js-fallback) [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .js .hero [data-enter],
  .js .hero__title .w__i { opacity: 1; }
  .js .hero__foot::before { transform: none; }
  .seal__ring { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}