/* Layout: home = hero com o fluxo N1 anotado + grade assimétrica de cases; case = capítulos com número fixo à esquerda e corpo à direita.
   Visual único (claro), escolhido de propósito para o portfólio: todas as cores definidas aqui. */
:root {
  color-scheme: light;
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --inv: #0B0B0C;
  --inv-2: #26262B;
  --on-inv: #FFFFFF;
  --on-accent: #FFFFFF;
  --ink: #0B0B0C;
  --ink-2: #26262B;
  --muted: #4A4A52;
  --subtle: #6B6B74;
  --faint: #8A8A93;
  --line: #E4E4E0;
  --line-2: #DCDCD7;
  --wash: #EDEBE6;
  --ph: #ECEBE7;
  --num: #CFCEC8;
  --accent: #1F4BFF;
  --accent-wash: #EEF2FF;
  --accent-line: #C7D2FE;
  --note: #FF5B2E;
  --label: #C2410C;
  --ok: #16A34A;
  --ok-wash: #E7F6EC;
  --ok-ink: #15803D;
  --warn: #E07B00;
  --warn-wash: #FFF4E5;
  --warn-ink: #8A4B00;
  --stop: #D92D20;
  --stop-wash: #FDE8E8;
  --stop-ink: #B42318;
  --t-hero: #E9EDF6;
  --t-n1: #F3EBE4;
  --t-zurich: #E6ECF7;
  --t-aud: #ECEEE3;
  --t-moby: #E4EEE8;
  --t-pronaf: #EFEAF3;
  --font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 24px 48px rgba(15, 23, 42, 0.11);
}

/* v12 — ajustes pontuais: leitura do hero e pilha de projetos sem transparência cruzada */
.intro-giant {
  opacity: .22;
  mix-blend-mode: normal;
}
.intro-left::before,
.intro-right::before {
  content: "";
  position: absolute;
  inset: -16px -18px;
  z-index: -1;
  border-radius: 22px;
  background: linear-gradient(110deg, rgba(255,252,248,.58), rgba(255,252,248,.22));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  pointer-events: none;
}

@media (min-width: 901px) {
  .projects.stack > a {
    overflow: hidden;
    transform: translateZ(0) scale(var(--sc, 1));
    filter: none;
    opacity: 1;
    z-index: calc(10 + var(--i));
  }
  .projects.stack > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: inherit;
    opacity: calc((1 - var(--br, 1)) * 3.5);
  }
  .projects.stack > a > * {
    position: relative;
    z-index: 4;
  }
}

:root[data-theme="dark"] .intro-giant,
:root:not([data-theme="light"]) .intro-giant {
  opacity: .20;
  mix-blend-mode: normal;
}
:root[data-theme="dark"] .intro-left::before,
:root[data-theme="dark"] .intro-right::before,
:root:not([data-theme="light"]) .intro-left::before,
:root:not([data-theme="light"]) .intro-right::before {
  background: linear-gradient(110deg, rgba(251,243,247,.66), rgba(251,243,247,.26));
}

@media (max-width: 900px) {
  .intro-left::before,
  .intro-right::before {
    inset: -12px;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1440px; margin-inline: auto; padding-inline: clamp(16px, 4.4vw, 64px); }

/* Cabeçalho */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; text-decoration: none; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--line-2); flex: none; object-fit: cover; }
.pillnav { display: flex; gap: 4px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 1px 2px rgba(15, 15, 20, 0.05); }
.pillnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; }
.pillnav a:hover { background: var(--bg); color: var(--ink); }
.status { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--muted); }
.dot-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15); flex: none; }
.back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; }

.header-end { display: flex; align-items: center; gap: 16px; }
.social { display: flex; gap: 6px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--inv); border: 1px solid var(--inv); color: var(--on-inv); text-decoration: none; transition: background-color .15s, border-color .15s; }
.msr { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: "liga"; font-variation-settings: "FILL" 1, "wght" 600; width: 22px; overflow: hidden; display: inline-block; }
.icon-btn svg.svg-inline--fa, .icon-btn i { font-size: 19px; height: 19px; }
.icon-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn-dark { background: var(--inv); color: var(--on-inv); }
.btn-dark:hover { background: var(--inv-2); color: var(--on-inv); }
.btn-light { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-light:hover { border-color: var(--ink); color: var(--ink); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Home: hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 56px); align-items: center; padding-top: clamp(24px, 6vw, 72px); }
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.eyebrow { font-size: 16px; font-weight: 500; color: var(--accent); }
.eyebrow.case { color: var(--label); }
.display { font-size: clamp(42px, 5.2vw, 72px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; }
.lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); max-width: 36em; text-wrap: pretty; }
.caption { font-size: 14px; color: var(--subtle); }
.hero figure { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Recriação do fluxo N1 */
.mock { position: relative; border-radius: 28px; background: var(--t-hero); padding: clamp(24px, 4vw, 56px) clamp(16px, 3.6vw, 48px) 120px; display: flex; justify-content: center; }
.win { width: 100%; max-width: 640px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.win-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #EDEDF0; font-size: 14px; font-weight: 600; flex-wrap: wrap; }
.live { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: var(--warn-wash); color: var(--warn-ink); font-size: 12px; font-weight: 500; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.win-body { display: flex; }
.flowcol { flex: 1; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid #EDEDF0; }
.frow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #EDEDF0; border-radius: 10px; font-size: 13px; font-weight: 500; }
.frow .val { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--subtle); text-align: right; }
.frow.pending { border-style: dashed; border-color: #DCDCE2; color: var(--faint); font-weight: 400; }
.check { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--ok-wash); color: var(--ok-ink); display: grid; place-items: center; }
.num { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid #DCDCE2; font-size: 12px; display: grid; place-items: center; }
.num.on { border: 0; background: var(--accent); color: #FFFFFF; font-weight: 600; }
.factive { position: relative; padding: 14px; border: 1.5px solid var(--accent); border-radius: 10px; display: flex; flex-direction: column; gap: 12px; }
.factive-title { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.opts { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { padding: 7px 12px; border-radius: 8px; border: 1px solid #DCDCE2; font-size: 12px; }
.opt.on { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 500; }
.ask { position: relative; padding: 12px; border-radius: 8px; background: #F3F5FD; display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 500; }
.seg { display: flex; width: 160px; border: 1px solid #DCDCE2; border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg span { flex: 1; padding: 6px 0; text-align: center; font-size: 12px; font-weight: 400; }
.seg .on { background: var(--inv); color: var(--on-inv); font-weight: 500; }
.summary { position: relative; width: 200px; flex: none; margin: 0; padding: 18px 16px; background: #FAFAFB; display: flex; flex-direction: column; gap: 14px; }
.summary-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--subtle); }
.summary dt { font-size: 11px; color: var(--faint); }
.summary dd { font-size: 13px; font-weight: 500; }
.marker { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--note); color: #FFFFFF; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 3px #FFFFFF; }
.ask .marker { left: -23px; top: 50%; margin-top: -11px; }
.summary .marker { right: 12px; top: 14px; box-shadow: 0 0 0 3px #FAFAFB; }
.notes { position: absolute; left: clamp(16px, 2vw, 24px); bottom: 20px; right: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; list-style: none; margin: 0; padding: 0; }
.notes li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); font-size: 13px; }
.notes b { width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--note); color: #FFFFFF; font-size: 11px; display: grid; place-items: center; }

/* Home: seções */
.section { padding-top: clamp(80px, 10vw, 144px); }
.clients { margin-top: clamp(64px, 8vw, 96px); padding-block: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 48px; }
.clients-label { font-size: 14px; color: var(--subtle); }
.clients ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 44px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: #86868E; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; padding-bottom: 32px; }
.h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 600; letter-spacing: -0.03em; }
.section-note { max-width: 24em; font-size: 17px; color: var(--muted); }

.projects { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; }
.card { display: flex; flex-direction: column; gap: 18px; text-decoration: none; min-width: 0; }
.s7 { grid-column: span 7; }
.s5 { grid-column: span 5; }
.shot { position: relative; height: clamp(300px, 33vw, 480px); border-radius: 24px; display: flex; align-items: flex-end; justify-content: center; gap: 24px; padding: 56px clamp(24px, 3vw, 48px) 0; overflow: hidden; }
.screen { width: 100%; height: 100%; background: var(--surface); border-radius: 12px 12px 0 0; box-shadow: var(--shadow); display: flex; align-items: flex-end; padding: 18px; font-size: 14px; color: var(--subtle); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.screen.phone { width: min(220px, 44%); border-radius: 28px 28px 0 0; }
.screen.phone + .screen.phone { height: 88%; }
.card:hover h3 { color: var(--accent); }
.badge { position: absolute; left: 20px; top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--note); }
.card-text { display: flex; flex-direction: column; gap: 8px; padding-inline: 4px; }
.card-meta { font-size: 14px; color: var(--subtle); }
.card h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; transition: color .15s; }
.card p { font-size: 17px; color: var(--muted); }
.more { font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 48px; align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.wide:hover h3 { color: var(--accent); }
.wide .ph { min-height: 240px; background: var(--t-pronaf); }

.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); }
.about-side { display: flex; flex-direction: column; gap: 24px; }
.about-photo { width: 100%; height: 480px; border-radius: 24px; background: var(--line-2); object-fit: cover; object-position: 50% 20%; }
.about-body { display: flex; flex-direction: column; gap: 40px; padding-top: 88px; min-width: 0; }
.prose { display: flex; flex-direction: column; gap: 20px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.path { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.path li { display: flex; justify-content: space-between; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); font-size: 17px; }
.path li span:first-child { font-weight: 500; }
.path li span:last-child { color: var(--subtle); text-align: right; }

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.quote { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; gap: 28px; }
.quote blockquote { font-size: 20px; line-height: 1.45; letter-spacing: -0.01em; }
.quote figcaption { margin-top: auto; font-size: 15px; line-height: 1.45; color: var(--subtle); }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 500; }

.contact { margin-top: clamp(80px, 10vw, 144px); padding: clamp(28px, 5vw, 64px); border-radius: 28px; background: #0B0B0C; color: #FFFFFF; border: 1px solid transparent; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.contact-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.contact-label { font-size: 18px; font-weight: 500; color: #A1A1AA; }
.contact-email { font-size: clamp(28px, 4.4vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; color: #FFFFFF; text-decoration: none; overflow-wrap: anywhere; }
.contact-email:hover { color: #C7D2FE; }
.contact .btn-light { background: transparent; border-color: #3F3F46; color: #FFFFFF; }
.contact .btn-light:hover { border-color: #FFFFFF; color: #FFFFFF; }
.contact .btn-dark { background: #FFFFFF; color: #0B0B0C; }
.contact .btn-dark:hover { background: #E4E4E7; color: #0B0B0C; }

.site-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 32px; font-size: 14px; color: var(--subtle); }

/* Páginas de case */
.case-hero { display: flex; flex-direction: column; gap: 40px; padding-top: clamp(24px, 6vw, 72px); }
.case-intro { display: flex; flex-direction: column; gap: 24px; max-width: 980px; }
.case-title { font-size: clamp(50px, 7vw, 96px); line-height: 0.98; font-weight: 600; letter-spacing: -0.045em; }
.case-lead { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.facts > div { background: var(--bg); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.facts > div:first-child { padding-left: 0; }
.facts dt { font-size: 13px; color: var(--subtle); }
.facts dd { font-size: 17px; font-weight: 500; line-height: 1.4; }
.state { display: inline-flex; align-items: center; gap: 8px; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.state.ok::before { background: var(--ok); }
.cover { height: clamp(300px, 44vw, 640px); border-radius: 28px; display: flex; align-items: flex-end; justify-content: center; gap: 32px; padding: clamp(32px, 4.4vw, 64px) clamp(20px, 6.6vw, 96px) 0; overflow: hidden; }
.cover .screen { border-radius: 14px 14px 0 0; font-size: 15px; padding: 22px; }
.cover .screen.phone { width: min(280px, 44%); border-radius: 32px 32px 0 0; }

.chapter { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px; padding-top: clamp(80px, 10vw, 144px); }
.ch-side { display: flex; flex-direction: column; gap: 8px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); align-self: start; }
.ch-num { font-size: 64px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--num); font-variant-numeric: tabular-nums; }
.ch-name { font-size: 15px; font-weight: 500; color: var(--subtle); }
.ch-body { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ch-title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.ch-text { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.6; color: var(--ink-2); max-width: 38em; }
.ch-text + .ch-text { margin-top: -8px; }

.callout { padding: 24px 28px; background: var(--wash); border-radius: 16px; display: flex; flex-direction: column; gap: 8px; }
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--label); }
.callout p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; }
.callout.dark { background: #0B0B0C; color: #FFFFFF; border: 1px solid transparent; }
.callout.dark .label { color: #FDBA8C; }

.panel { padding: clamp(20px, 2.4vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; gap: 20px; }
.panel-title { font-size: 18px; font-weight: 600; }
.panel-note { font-size: 14px; color: var(--subtle); }

.ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ba > div { padding: 20px; border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ba > .after { background: var(--accent-wash); }
.tag { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--subtle); }
.after .tag { color: var(--accent); }
.ba p { font-size: 15px; line-height: 1.5; color: var(--muted); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font-size: 14px; }
.after .chip { border-color: var(--accent-line); }
.chip.pill { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; }
.chip.dark { background: var(--inv); border-color: var(--inv); color: var(--on-inv); font-weight: 500; }
.chip.ghost { border-style: dashed; color: var(--subtle); }
.chip.warn { background: var(--warn-wash); border-color: #F5C58A; color: var(--warn-ink); font-weight: 500; }
.chip.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.chip.bad { background: var(--stop-wash); border-color: var(--stop-wash); color: var(--stop-ink); font-weight: 500; }
.chip.ok { background: var(--ok-wash); border-color: var(--ok-wash); color: var(--ok-ink); font-weight: 500; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
.sw { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.arrow { flex: none; color: #9A9AA1; }

.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; font-size: 14px; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }

.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tile-title { font-size: 18px; font-weight: 600; }
.tile p, .tile li { font-size: 16px; line-height: 1.5; color: var(--muted); }
.tile ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.tile .kicker { font-size: 13px; font-weight: 500; color: var(--subtle); }
.ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ico.blue { background: #E6ECFF; color: var(--accent); }
.ico.orange { background: #FDEBDD; color: var(--label); }
.ico.green { background: #E3F2EB; color: #0F7A5A; }
.ico.ink { background: #EDEDEA; color: var(--ink); }

.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.flow .step { padding: 10px 16px; border-radius: 10px; background: var(--wash); font-size: 15px; font-weight: 500; }
.flow .step.now { background: var(--accent); color: var(--on-accent); }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.stepper.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stepper li { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--bg); font-size: 16px; font-weight: 500; }
.stepper .n { width: 24px; height: 24px; border-radius: 50%; background: var(--inv); color: var(--on-inv); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.stepper.loop li:nth-child(5) { background: var(--stop-wash); color: var(--stop-ink); }
.stepper.loop li:nth-child(5) .n { background: var(--stop); }
.stepper.loop li:nth-child(6) { background: var(--warn-wash); color: var(--warn-ink); }
.stepper.loop li:nth-child(6) .n { background: var(--warn); }

.evidence { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.evidence.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evidence > div { background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.evidence strong { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.evidence strong.word { font-size: 20px; line-height: 1.7; }
.evidence span { font-size: 15px; line-height: 1.4; color: var(--muted); }

.ph { min-height: clamp(220px, 26vw, 380px); border-radius: 20px; background: var(--ph); display: flex; align-items: flex-end; padding: 22px; font-size: 15px; color: var(--subtle); }
.ph.short { min-height: clamp(200px, 20vw, 300px); }

.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.voice { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; gap: 16px; }
.voice blockquote { font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; }
.voice figcaption { margin-top: auto; font-size: 14px; color: var(--subtle); }

.todo { display: inline; padding: 1px 6px; border-radius: 6px; background: var(--warn-wash); color: var(--warn-ink); font-size: 0.85em; font-weight: 500; }

/* Cards da home em arte */
.shot.art { display: block; padding: 0; background: var(--c); }
.art-mini { position: absolute; left: clamp(20px, 2.4vw, 32px); top: clamp(20px, 2.2vw, 28px); z-index: 1; color: #FFFFFF; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; }
.shot.art .art-shot { position: absolute; right: 0; bottom: 0; width: 80%; height: 70%; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.shot.art .art-shot.phone { right: 14%; width: min(220px, 44%); height: 80%; }
.shot.art .badge { left: auto; right: 20px; }
.wide-art { min-height: 260px; border-radius: 20px; background: var(--c); color: #FFFFFF; padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-width: 0; }
.wide-art .art-mini { position: static; }
.wide-art .art-loop { margin: 0; width: 100%; justify-self: stretch; }
.wide-art .art-loop li { padding: 12px 14px; font-size: 15px; }

/* Capa em arte: nome do cliente, cor do produto e um recorte da tela */
.cover.art { position: relative; height: auto; min-height: clamp(320px, 40vw, 580px); background: var(--c); color: #FFFFFF; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: 32px; padding: clamp(28px, 4vw, 64px) 0 0 clamp(28px, 4vw, 64px); overflow: hidden; }
.art-text { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-bottom: clamp(28px, 4vw, 64px); min-width: 0; }
.art-kicker { font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; }
.art-client { display: block; font-size: clamp(40px, 5.4vw, 80px); line-height: 0.98; font-weight: 600; letter-spacing: -0.045em; text-wrap: balance; }
.art-project { display: block; margin-top: 14px; font-size: clamp(17px, 1.5vw, 21px); opacity: 0.82; }
.art-shot { align-self: end; height: clamp(240px, 32vw, 480px); border-radius: 16px 0 0 0; overflow: hidden; background: #FFFFFF; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28); }
.art-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.art-shot.phone { justify-self: center; width: min(300px, 70%); height: clamp(300px, 36vw, 520px); border-radius: 28px 28px 0 0; border: 8px solid #111111; border-bottom: 0; }
.art-loop { align-self: center; justify-self: center; margin: 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px) 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 560px); }
.art-loop li { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 16px; font-weight: 500; display: flex; flex-direction: column; gap: 8px; }
.art-loop li span { font-size: 12px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.art-loop li.stop { background: rgba(255, 255, 255, 0.92); color: #7A1F1A; }

/* Capa em tela cheia */
.cover.full { padding: 0; gap: 0; }
.cover.full .screen { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.cover.full .screen.has-img img { object-position: center top; }
.video-link { position: relative; display: block; text-decoration: none; color: inherit; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px; background: rgba(11, 11, 12, 0.86); color: #FFFFFF; font-size: 15px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: transform .2s; }
.play i { width: 30px; height: 30px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; }
.video-link:hover .play { transform: translate(-50%, -50%) scale(1.05); }

/* Telas reais */
.screen.has-img { padding: 0; overflow: hidden; align-items: stretch; }
.screen.has-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.shot-figure { display: flex; flex-direction: column; gap: 12px; }
.shot-frame { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
.shot-frame img { width: 100%; height: auto; }
.pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--note); color: #FFFFFF; font-size: 13px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(15, 23, 42, 0.2); }
.pins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.pins li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--muted); }
.pins li strong { color: var(--ink); font-weight: 600; }
.pins b { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--note); color: #FFFFFF; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }

.next { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: clamp(96px, 11vw, 160px); padding-block: 40px; border-top: 1px solid var(--line); }
.next-case { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-decoration: none; text-align: right; }
.next-case span:first-child { font-size: 14px; color: var(--subtle); }
.next-case span:last-child { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }

/* Responsivo */
@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .status { display: none; }
  .site-header { row-gap: 12px; }
  .s7, .s5 { grid-column: 1 / -1; }
  .projects { gap: 48px 24px; }
  .wide { grid-template-columns: minmax(0, 1fr); }
  .about { grid-template-columns: minmax(0, 1fr); }
  .about-body { padding-top: 0; }
  .about-photo { height: 420px; max-width: 480px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:first-child { padding-left: 24px; }
  .facts > div:nth-child(odd) { padding-left: 0; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ch-side { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .ch-num { font-size: 40px; }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  .evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence.three { grid-template-columns: minmax(0, 1fr); }
  .stepper.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pillnav { order: 3; flex-basis: 100%; justify-content: space-between; }
  .pillnav a { flex: 1; justify-content: center; padding: 0 12px; }
  .mock { flex-direction: column; align-items: stretch; padding-bottom: 20px; border-radius: 22px; }
  .notes { position: static; margin-top: 16px; }
  .notes li { border-radius: 14px; }
  .win-body { flex-direction: column; }
  .flowcol { border-right: 0; border-bottom: 1px solid #EDEDF0; }
  .ask .marker { left: auto; right: 10px; top: 12px; margin-top: 0; }
  .summary { width: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .summary-label { grid-column: 1 / -1; }
  .ba, .grid2, .legend, .pins { grid-template-columns: minmax(0, 1fr); }
  .pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 11px; }
  .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot { padding-top: 52px; }
  .cover { border-radius: 22px; }
  .cover.art { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .art-text { padding-bottom: 8px; padding-right: 28px; }
  .art-shot { height: 240px; margin-left: 0; }
  .art-shot.phone { height: 300px; }
  .art-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 28px 28px 0; justify-self: stretch; width: auto; }
  .next-case { align-items: flex-start; text-align: left; }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div, .facts > div:first-child, .facts > div:nth-child(odd) { padding-left: 0; }
  .evidence { grid-template-columns: minmax(0, 1fr); }
  .frow .val { display: none; }
  .site-header { padding-block: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .card:hover .screen, .card:hover .art-shot { transform: none; }
}

/* ============ Acessibilidade ============ */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--inv); color: var(--on-inv); font-weight: 500; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); color: var(--on-inv); }
main:focus { outline: none; }
.contact :focus-visible { outline-color: #FFFFFF; }
.cover.art:focus-visible, .card:focus-visible, .wide:focus-visible { outline-offset: 4px; border-radius: 26px; }

/* ============ Header fixo ============ */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); transition: box-shadow .2s; }
.site-header::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .2s; }
.site-header.is-scrolled::after { opacity: 1; }
.pillnav a { transition: background-color .2s, color .2s; }
.pillnav a[aria-current="location"] { background: var(--inv); color: var(--on-inv); }
.pillnav a[aria-current="location"]:hover { background: var(--inv-2); color: var(--on-inv); }

/* Barra de leitura nos cases */
.read-progress { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 3px; z-index: 30; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ============ Microinterações ============ */
.btn { transition: background-color .15s, border-color .15s, transform .12s; }
.btn:active, .icon-btn:active, .back:active { transform: scale(.97); }
.icon-btn { transition: background-color .15s, border-color .15s, transform .15s; }
.icon-btn:hover { transform: translateY(-2px); }
.back { transition: border-color .15s; }
.back:hover { border-color: var(--ink); color: var(--ink); }
.back svg { transition: transform .2s; }
.back:hover svg { transform: translateX(-3px); }
.more { position: relative; text-decoration: none; }
.more::after { content: " →"; display: inline-block; transition: transform .2s; }
.card:hover .more::after, .wide:hover .more::after { transform: translateX(4px); }
.prose a, .caption a { text-decoration-color: var(--line-2); transition: text-decoration-color .15s, color .15s; }
.prose a:hover, .caption a:hover { text-decoration-color: currentColor; }
.shot-frame img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.video-link:hover .shot-frame img { transform: scale(1.02); }

/* Entrada suave do hero: começa visível, só desliza um pouco */
@keyframes rise { from { transform: translateY(14px); opacity: .01; } to { transform: none; opacity: 1; } }
.hero-copy > *, .hero figure { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: .05s; }
.hero-copy > *:nth-child(3) { animation-delay: .1s; }
.hero-copy > *:nth-child(4) { animation-delay: .15s; }
.hero figure { animation-delay: .12s; }

/* Demo interativa do N1 */
.opt, .seg button { font: inherit; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.opt { background: var(--surface); color: var(--ink); min-height: 32px; font-size: 12px; }
.opt:hover { border-color: var(--accent); }
.opt:active, .seg button:active { transform: scale(.96); }
.seg button { flex: 1; min-height: 30px; padding: 6px 0; border: 0; background: transparent; color: var(--ink); font-size: 12px; }
.seg button.on { background: var(--inv); color: var(--on-inv); font-weight: 500; }
.ask[hidden] { display: none; }
@keyframes askIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ask.enter { animation: askIn .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes flash { 0% { background: var(--accent-wash); } 100% { background: transparent; } }
.summary dd.flash { animation: flash .9s ease-out; border-radius: 4px; }
.demo-hint { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-size: 12px; font-weight: 500; }

/* Faixa de clientes em movimento */
.clients { display: block; padding-block: 0; }
.clients-row { display: flex; align-items: center; gap: 16px 24px; padding-block: 22px; }
.clients-label { flex: none; }
.marquee { position: relative; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee ul { list-style: none; margin: 0; padding: 0 22px 0 0; display: flex; gap: 44px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -0.01em; color: #86868E; white-space: nowrap; }
.marquee li { display: flex; align-items: center; gap: 44px; }
.marquee li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-toggle { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.marquee-toggle:hover { border-color: var(--ink); color: var(--ink); }
.marquee-toggle .i-play { display: none; }
.marquee-toggle[aria-pressed="true"] .i-play { display: inline; }
.marquee-toggle[aria-pressed="true"] .i-pause { display: none; }

/* Copiar e-mail */
.copy-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #3F3F46; background: transparent; color: #FFFFFF; font: inherit; font-size: 14px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.copy-btn:hover { border-color: #FFFFFF; }
.copy-btn.is-done { background: #16A34A; border-color: #16A34A; }

/* Próximo case abrindo embaixo */
.next-preview { margin-top: clamp(96px, 11vw, 160px); display: flex; flex-direction: column; gap: 20px; }
.next-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); }
.next-label { margin: 0; font-size: 14px; color: var(--subtle); }
.next-art { text-decoration: none; color: #FFFFFF; border-radius: 28px; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-radius .35s; }
.next-art:hover { color: #FFFFFF; transform: translateY(-6px); }
.next-art .art-shot { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.next-cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 18px; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); font-size: 15px; font-weight: 500; transition: background-color .2s; }
.next-art:hover .next-cta { background: rgba(255, 255, 255, 0.26); }
.next-cta span { transition: transform .2s; }
.next-art:hover .next-cta span { transform: translateX(4px); }
.next-art.is-opening { transform: scale(1.03) translateY(-24px); border-radius: 0; }
.case-hero .cover.art { view-transition-name: case-cover; }
.case-hero .cover.art.vt-off { view-transition-name: none; }
.next-art.vt-source { view-transition-name: case-cover; }

@view-transition { navigation: auto; }
::view-transition-old(case-cover), ::view-transition-new(case-cover) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 720px) {
  .clients-row { flex-wrap: wrap; }
  .marquee { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero figure, .ask.enter, .summary dd.flash { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; }
  .marquee ul { flex-wrap: wrap; white-space: normal; gap: 12px 32px; }
  .marquee ul[aria-hidden="true"], .marquee-toggle { display: none; }
  .next-art, .next-art:hover, .next-art .art-shot, .next-art:hover .art-shot, .icon-btn:hover { transform: none; }
  @view-transition { navigation: none; }
}

/* MobyApp: duas telas, antes e depois */
.art-phones { align-self: end; justify-self: center; display: flex; align-items: flex-end; gap: clamp(14px, 2vw, 28px); height: clamp(300px, 36vw, 520px); padding-right: clamp(20px, 4vw, 64px); }
.art-phones .pw { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; }
.art-phones .pw.old { height: 86%; }
.art-phones .pf { flex: 1; min-height: 0; width: clamp(130px, 15vw, 230px); border-radius: 28px 28px 0 0; border: 8px solid #111111; border-bottom: 0; overflow: hidden; background: #FFFFFF; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.28); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.art-phones img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-tag { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); color: #FFFFFF; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.shot.art .art-phones { position: absolute; right: 7%; bottom: 0; height: 80%; padding: 0; }
.shot.art .art-phones .pf { width: clamp(110px, 12vw, 180px); }
@media (max-width: 720px) {
  .art-phones { height: 300px; padding-right: 0; justify-self: center; }
  .art-phones .pf { width: 130px; }
}
@media (prefers-reduced-motion: reduce) { .card:hover .art-phones .pf, .next-art:hover .art-phones .pf { transform: none; } }

/* Hover no bloco inteiro, sem mexer na tela de dentro */
.shot { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.card:hover .shot { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16); }
.next-art { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-radius .35s; }
.next-art:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18); }

/* MobyApp: duas telas centralizadas e inteiras dentro do bloco */
.art-phones { --ph: clamp(280px, 30vw, 420px); align-self: center; justify-self: center; height: auto; padding: 0 0 clamp(28px, 4vw, 64px); gap: clamp(16px, 2.4vw, 32px); align-items: flex-end; }
.art-phones .pw, .art-phones .pw.old { height: auto; flex: none; }
.art-phones .pf { flex: none; height: var(--ph); width: calc(var(--ph) * 9 / 19); aspect-ratio: auto; border: 7px solid #111111; border-radius: 30px; }
.shot.art .art-phones { --ph: clamp(200px, 22vw, 330px); position: absolute; left: 0; right: 0; top: auto; bottom: 7%; justify-content: center; padding: 0; }
@media (max-width: 720px) {
  .art-phones { --ph: 260px; padding-bottom: 28px; }
  .shot.art .art-phones { --ph: 200px; bottom: 6%; }
}
@media (prefers-reduced-motion: reduce) { .card:hover .shot, .next-art:hover { transform: none; } }
@media (max-width: 720px) {
  .shot.art .art-phones { --ph: 180px; }
  .back ~ .brand { display: none; }
  .back ~ .header-end .btn { display: none; }
  .header-end { gap: 10px; }
  .icon-btn { width: 40px; height: 40px; }
  .social { gap: 6px; }
}

/* ============ Modo escuro ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F0F11; --surface: #18181B; --ink: #F2F2EF; --ink-2: #D4D4D0; --muted: #B0B0B8; --subtle: #95959D; --faint: #77777F;
    --line: #2A2A2F; --line-2: #3A3A40; --wash: #1F1F23; --ph: #1F1F23; --num: #45454C;
    --accent: #8EA2FF; --accent-wash: #1C2340; --accent-line: #33427A; --label: #FF9F66;
    --ok: #34D374; --ok-wash: #13301F; --ok-ink: #8AE6AC; --warn: #F5A524; --warn-wash: #33240E; --warn-ink: #F7CC85; --stop: #F2645A; --stop-wash: #3A1714; --stop-ink: #FFA39B;
    --inv: #F2F2EF; --inv-2: #D4D4D0; --on-inv: #0B0B0C; --on-accent: #0B0B0C; --t-hero: #1A2031;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F0F11; --surface: #18181B; --ink: #F2F2EF; --ink-2: #D4D4D0; --muted: #B0B0B8; --subtle: #95959D; --faint: #77777F;
  --line: #2A2A2F; --line-2: #3A3A40; --wash: #1F1F23; --ph: #1F1F23; --num: #45454C;
  --accent: #8EA2FF; --accent-wash: #1C2340; --accent-line: #33427A; --label: #FF9F66;
  --ok: #34D374; --ok-wash: #13301F; --ok-ink: #8AE6AC; --warn: #F5A524; --warn-wash: #33240E; --warn-ink: #F7CC85; --stop: #F2645A; --stop-wash: #3A1714; --stop-ink: #FFA39B;
  --inv: #F2F2EF; --inv-2: #D4D4D0; --on-inv: #0B0B0C; --on-accent: #0B0B0C; --t-hero: #1A2031;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 24px 48px rgba(0, 0, 0, 0.45);
}
/* O mockup do produto continua claro, como a tela real */
.win {
  color-scheme: light; color: #0B0B0C;
  --surface: #FFFFFF; --ink: #0B0B0C; --ink-2: #26262B; --muted: #4A4A52; --subtle: #6B6B74; --faint: #8A8A93;
  --line: #E4E4E0; --line-2: #DCDCD7; --accent: #1F4BFF; --accent-wash: #EEF2FF; --inv: #0B0B0C; --on-inv: #FFFFFF; --on-accent: #FFFFFF;
  --ok-wash: #E7F6EC; --ok-ink: #15803D; --warn-wash: #FFF4E5; --warn-ink: #8A4B00; --warn: #E07B00;
}
.contact, .callout.dark { color-scheme: dark; }
:root[data-theme="dark"] .contact, :root[data-theme="dark"] .callout.dark { border-color: var(--line-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .contact, :root:not([data-theme="light"]) .callout.dark { border-color: var(--line-2); } }
:root[data-theme="dark"] .ico.blue, :root[data-theme="dark"] .ico.orange, :root[data-theme="dark"] .ico.green, :root[data-theme="dark"] .ico.ink { background: var(--wash); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico.blue, :root:not([data-theme="light"]) .ico.orange, :root:not([data-theme="light"]) .ico.green, :root:not([data-theme="light"]) .ico.ink { background: var(--wash); } }
.marquee ul { color: var(--subtle); }
.art-mini, .cover.art, .wide-art { color: #FFFFFF; }

/* Botões de tema e idioma */
.icon-btn.ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.icon-btn.ghost:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
body { transition: background-color .25s, color .25s; }
@media (max-width: 1180px) { .status { display: none; } }

/* ============ Topo mais justo no celular ============ */
@media (max-width: 720px) {
  .site-header .social { display: none; }
  .hero { padding-top: 12px; gap: 28px; }
  .hero-copy { gap: 18px; }
  .display { font-size: clamp(36px, 10.5vw, 44px); line-height: 1.04; }
  .lead { font-size: 16px; line-height: 1.55; text-wrap: pretty; }
  .hero .actions { gap: 10px; }
  .hero .actions .btn { flex: 1 1 0; padding: 0 14px; }
  .mock { padding: 14px 12px 16px; border-radius: 20px; gap: 12px; }
  .win { border-radius: 12px; }
  .win-head { padding: 12px 14px; }
  .flowcol { padding: 14px; gap: 8px; }
  .summary { padding: 14px; gap: 10px 14px; }
  .notes { margin-top: 0; gap: 6px; }
  .notes li { font-size: 12.5px; padding: 7px 12px 7px 7px; }
  .hero figcaption { font-size: 13px; }
  .clients { margin-top: 48px; }
  .clients-row { padding-block: 16px; gap: 10px; }
}
@keyframes langSwap { from { opacity: .35; } to { opacity: 1; } }
body.lang-swap main { animation: langSwap .35s ease-out; }
@media (prefers-reduced-motion: reduce) { body.lang-swap main { animation: none; } body { transition: none; } }

/* ===================== Laboratório de interações ===================== */
/* Avatar e balão */
.hello { display: flex; align-items: center; gap: 16px; margin-bottom: -4px; }
.avatar-btn { width: 104px; height: 104px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.avatar-btn svg { width: 100%; height: 100%; display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.avatar-btn:hover { transform: rotate(-6deg) scale(1.06); }
.avatar-btn.is-hi { animation: av-hop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes av-hop { 0% { transform: scale(1); } 35% { transform: translateY(-8px) rotate(-8deg) scale(1.08); } 100% { transform: none; } }
.avatar-btn .eye { transition: transform .08s; }
.avatar-btn.blink .eye { transform: scaleY(.1); }
.avatar-btn .pupil { transition: transform .12s ease-out; }
.bubble { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--ink); box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.bubble [data-bubble] { display: inline-block; min-width: 1ch; }
.bubble .wave { display: inline-block; transform-origin: 70% 80%; animation: wave 2.4s ease-in-out 1s infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.bubble .caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; background: var(--accent); vertical-align: -2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Título entra palavra por palavra */
.w { display: inline-block; }
.js-motion .display .w { opacity: 0; filter: blur(10px); transform: translateY(.3em); animation: w-in .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes w-in { to { opacity: 1; filter: blur(0); transform: none; } }

/* Letras que giram no botão */
.roll { display: inline-flex; overflow: hidden; line-height: 1.25; height: 1.25em; }
.roll .ch { display: inline-block; position: relative; white-space: pre; transition: transform .45s cubic-bezier(.7,0,.2,1); transition-delay: calc(var(--i) * 14ms); }
.roll .ch::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
.btn:hover .roll .ch, .btn:focus-visible .roll .ch { transform: translateY(-100%); }

/* Revelação ao rolar (desfoque para nítido) */
.js-motion .rv { opacity: 0; filter: blur(12px); transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.js-motion .rv.in { opacity: 1; filter: none; transform: none; }

/* Números */
.stats-strip { margin-top: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stat-n { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.stat-n strong { font-size: clamp(56px, 7vw, 96px); line-height: .9; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.stat-n span { font-size: 17px; color: var(--muted); max-width: 26ch; }
.stats-strip + #projetos { margin-top: 0; }

/* Cards: leve inclinação 3D e etiqueta que segue o mouse */
.shot[data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; position: relative; }
.shot[data-tilt].is-tilting { transition: transform .12s linear; }
.follow-tag { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; padding: 10px 16px; border-radius: 999px; background: #FFFFFF; color: #0B0B0C; font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(.6); transition: opacity .2s, transform .12s ease-out; }
.shot.is-tilting .follow-tag { opacity: 1; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(1); }

@media (max-width: 720px) {
  .hello { gap: 12px; }
  .avatar-btn { width: 68px; height: 68px; }
  .bubble { font-size: 15px; padding: 10px 14px; }
  .stats-strip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stat-n { flex-direction: row; align-items: baseline; gap: 16px; padding-block: 16px; }
  .stat-n strong { font-size: 52px; min-width: 2.4ch; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble .wave, .avatar-btn.is-hi { animation: none; }
  .roll .ch { transition: none; }
  .shot[data-tilt] { transform: none !important; }
}

/* ===================== Abertura editorial com foto ===================== */
.intro { position: relative; height: clamp(620px, calc(100vh - 116px), 880px); margin-top: 8px; border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--wash); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; padding: 0 clamp(20px, 3vw, 44px) clamp(24px, 3vw, 40px); }
.intro-glow { position: absolute; inset: 0; z-index: -2; background: radial-gradient(520px 520px at var(--gx, 50%) var(--gy, 40%), color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); transition: background-position .2s; }
.intro-giant { position: absolute; left: 0; right: 0; top: clamp(28px, 6vh, 70px); z-index: -1; margin: 0; display: flex; flex-direction: column; align-items: center; font-size: clamp(72px, 13.5vw, 230px); line-height: .8; font-weight: 600; letter-spacing: -0.065em; color: var(--accent); pointer-events: none; user-select: none; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.intro-giant span:last-child { transform: translateX(6%); }
.intro-photo { position: absolute; left: 50%; bottom: 0; z-index: 1; height: 100%; aspect-ratio: 560 / 640; padding: 0; border: 0; background: none; cursor: crosshair; translate: -50% 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg)); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.intro-photo canvas, .intro-photo .face-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro-photo .face-img { object-fit: contain; -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent); mask-image: linear-gradient(180deg, #000 74%, transparent); }
.intro-photo.fx-ready .face-img { opacity: 0; }

.intro-photo.is-hi { animation: photo-hop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes photo-hop { 40% { transform: translate3d(var(--px, 0px), calc(var(--py, 0px) - 10px), 0) rotate(-1.5deg); } }
.intro-bubble { position: absolute; z-index: 2; left: calc(50% + clamp(110px, 12vw, 200px)); top: 36%; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 18px 18px 18px 6px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.08); font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.9); transform-origin: left bottom; transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.intro-bubble.on { opacity: 1; transform: none; }
.intro-bubble .wave { display: inline-block; transform-origin: 70% 80%; animation: wave 2.4s ease-in-out 1.2s infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.intro-left, .intro-right { grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.intro-left { grid-column: 1; max-width: 370px; }
.intro-right { grid-column: 3; justify-self: end; width: min(100%, 290px); }
.intro-kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--muted); }
.intro-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); }
.intro-h { font-size: clamp(30px, 2.9vw, 44px); line-height: 1.02; font-weight: 600; letter-spacing: -0.035em; }
.intro-lead { font-size: 16px; line-height: 1.5; color: var(--muted); }
.intro-left .actions { display: flex; flex-wrap: wrap; gap: 10px; }
.intro-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.intro-cases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.intro-cases a { display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; transition: padding .3s cubic-bezier(.2,.7,.2,1), color .2s; }
.intro-cases a small { font-size: 12px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.intro-cases a em { font-style: normal; font-size: 13px; color: var(--subtle); }
.intro-cases a:hover, .intro-cases a:focus-visible { padding-left: 10px; color: var(--accent); }
.intro-scroll { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); margin: 0; font-size: 13px; font-weight: 500; color: var(--muted); background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(8px); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); }
.intro-scroll span { display: inline-block; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
/* prévia do case que segue o cursor */
.case-peek { position: fixed; left: 0; top: 0; z-index: 60; width: 300px; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; pointer-events: none; background: var(--c, #13235B); box-shadow: 0 24px 60px rgba(0,0,0,.25); opacity: 0; transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(.85) rotate(-3deg); transition: opacity .25s, transform .18s ease-out; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 0 0 16px; color: #FFFFFF; }
.case-peek.on { opacity: 1; transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(1) rotate(-3deg); }
.case-peek b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.case-peek img { width: 100%; border-radius: 10px 0 0 0; display: block; }
/* demo do N1 depois da abertura */
.hero { margin-top: clamp(72px, 9vw, 120px); }
.demo-h { font-size: clamp(34px, 3.6vw, 52px) !important; }

@media (max-width: 1000px) {
  .intro { height: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 0; }
  .intro-giant { position: relative; top: auto; grid-column: 1 / -1; margin-top: 32px; font-size: 17vw; }
  .intro-photo { position: relative; left: auto; translate: none; grid-column: 1 / -1; justify-self: center; height: auto; width: min(80%, 560px); margin-top: -12vw; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%); mask-image: linear-gradient(180deg, transparent, #000 12%); }
  .intro-bubble { top: 30vw; left: 62%; }
  .intro-left { grid-column: 1; grid-row: 3; margin-top: 28px; }
  .intro-right { grid-column: 2; grid-row: 3; margin-top: 28px; }
  .intro-scroll { display: none; }
}
@media (max-width: 720px) {
  .intro { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0 20px 24px; border-radius: 22px; }
  .intro-giant { position: relative; top: auto; margin-top: 28px; font-size: 21vw; align-items: flex-start; }
  .intro-giant span:last-child { transform: none; }
  .intro-photo { width: 100%; margin: -8vw auto 0; align-self: center; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%); mask-image: linear-gradient(180deg, transparent, #000 12%); }
  .intro-bubble { top: 62vw; left: auto; right: 6px; margin: 0; font-size: 14px; padding: 9px 13px; }
  .intro-left, .intro-right { margin-top: 20px; max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-photo, .intro-giant { transform: none !important; transition: none; }
  .intro-bubble .wave, .intro-scroll span { animation: none; }
}

/* ===================== v3 · paleta do Instagram + mais interações ===================== */
:root {
  --bg: #F1ECE2; --surface: #FFFFFF; --wash: #E9E2D4; --ph: #E9E2D4;
  --line: #DDD5C5; --line-2: #D2C9B6; --num: #C9BFAB;
  --accent: #1F4BFF; --accent-wash: #E4E9FF; --accent-line: #BFCBFF; --note: #FF5B2E;
  --inv: #1F4BFF; --inv-2: #173BD6; --on-inv: #FFFFFF; --on-accent: #FFFFFF;
}
body { background: var(--bg); }
.contact { background: #1F4BFF; }
.contact-label { color: rgba(255,255,255,.72); }
.contact-email:hover { color: #FFD9CC; }
.contact .btn-light { border-color: rgba(255,255,255,.4); }
.contact .btn-dark { background: #FFFFFF; color: #1F4BFF; }
.contact .btn-dark:hover { background: #F1ECE2; color: #1F4BFF; }
.contact .copy-btn { border-color: rgba(255,255,255,.45); }
.contact .copy-btn:hover { border-color: #FFFFFF; }
::selection { background: #1F4BFF; color: #FFFFFF; }

/* relógio de Floripa */
.intro-kicker .clock { font-variant-numeric: tabular-nums; color: var(--subtle); }
.intro-kicker .clock::before { content: "·"; margin-right: 8px; }

/* Manifesto: palavras acendem conforme a rolagem */
.manifesto { margin-top: clamp(80px, 10vw, 140px); }
.manifesto p { font-size: clamp(30px, 4.2vw, 60px); line-height: 1.12; font-weight: 600; letter-spacing: -0.035em; max-width: 24ch; }
.manifesto .mw { color: var(--num); transition: color .25s; }
.manifesto .mw.lit { color: var(--ink); }
.manifesto .mw.hl.lit { color: var(--accent); }
.manifesto-kicker { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--muted); margin-bottom: 20px; }
.manifesto-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--note); }

/* Projetos empilhados (desktop) */
@media (min-width: 901px) {
  .projects.stack { display: block; }
  .projects.stack > a { position: sticky; top: calc(92px + var(--i) * 16px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: 18px clamp(24px, 3vw, 40px) 18px 18px; margin-bottom: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 -18px 50px rgba(20, 20, 30, .07); transform-origin: 50% 0; transform: scale(var(--sc, 1)); filter: brightness(var(--br, 1)); will-change: transform; }
  .projects.stack > a:last-child { margin-bottom: 0; }
  .projects.stack > a .shot { border-radius: 20px; }
  .projects.stack .card-text { gap: 14px; padding: 0; }
  .projects.stack > a h3 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -0.035em; }
  .projects.stack > a p { font-size: 18px; }
  .projects.stack > a .card-num { font-size: 15px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
  .projects.stack .shot[data-tilt] { transform: none !important; }
  .projects.stack > a.wide .wide-art { order: -1; border-radius: 20px; min-height: 380px; }
  .projects.stack > a.wide { color: inherit; text-decoration: none; }
}
.card-num { display: none; }
@media (min-width: 901px) { .projects.stack .card-num { display: block; } }

/* Cursor com etiqueta (só em mouse) */
.cur { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 999px; border: 1.5px solid var(--accent); display: grid; place-items: center; transform: translate3d(var(--x, -100px), var(--y, -100px), 0); transition: width .3s cubic-bezier(.2,.7,.2,1), height .3s cubic-bezier(.2,.7,.2,1), margin .3s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s, opacity .25s; }
.cur span { font-size: 13px; font-weight: 600; color: #FFFFFF; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.cur.link { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cur.label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--accent); border-color: var(--accent); }
.cur.label span { opacity: 1; }
.cur.hide { opacity: 0; }
.follow-tag { display: none !important; }

/* Faixa de clientes reage à velocidade da rolagem */
.marquee ul { transition: transform .4s cubic-bezier(.2,.7,.2,1); transform: skewX(var(--skew, 0deg)); }

/* Letreiro "Vamos conversar" */
.talk { margin-top: clamp(80px, 10vw, 140px); overflow: hidden; }
.talk-row { display: flex; gap: .4em; white-space: nowrap; font-size: clamp(64px, 11vw, 180px); line-height: .95; font-weight: 600; letter-spacing: -0.06em; transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.talk-row span:nth-child(odd) { color: var(--accent); }
.talk-row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.talk-row i { font-style: normal; color: var(--note); }
.talk + .contact { margin-top: 32px; }

/* Confete de pixels */
.pix { position: fixed; z-index: 95; width: 8px; height: 8px; pointer-events: none; border-radius: 1px; }

/* Bento atravessando a tela */
.bento-walk { position: fixed; left: 0; bottom: 14px; z-index: 96; font-size: 48px; pointer-events: none; transform: translateX(-80px) scaleX(-1); animation: bento 5.5s linear forwards; }
@keyframes bento { 0% { transform: translateX(-80px) scaleX(-1); } 100% { transform: translateX(calc(100vw + 80px)) scaleX(-1); } }
.bento-walk::after { content: ""; }
.bento-walk b { display: inline-block; animation: hop .35s ease-in-out infinite alternate; }
@keyframes hop { to { transform: translateY(-6px); } }

@media (max-width: 720px) {
  .manifesto p { font-size: 30px; }
  .talk-row { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto .mw { color: var(--ink); }
  .projects.stack > a { transform: none; filter: none; }
  .talk-row { transform: none !important; }
  .bento-walk { display: none; }
}

/* ===================== Páginas de case: movimento ===================== */
.js-motion .shot-frame { overflow: hidden; }
.js-motion .shot-figure.rv .shot-frame img { clip-path: inset(10% 8% 10% 8% round 18px); transform: scale(1.08); transition: clip-path 1.1s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1); }
.js-motion .shot-figure.rv.in .shot-frame img { clip-path: inset(0 0 0 0 round 0); transform: none; }
.js-motion .ch-num { transition: color .6s, transform .8s cubic-bezier(.2,.7,.2,1); }
.js-motion .chapter:not(.is-on) .ch-num { color: var(--num); transform: translateY(8px); }
.js-motion .chapter.is-on .ch-num { color: var(--accent); }
.case-hero .art-shot { transform: translate3d(0, var(--par, 0px), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js-motion .shot-figure.rv .shot-frame img { clip-path: none; transform: none; }
  .case-hero .art-shot { transform: none; }
}


/* ===================== v5 · Terracota & Areia ===================== */
:root {
  --bg: #F3EBE0; --surface: #FFFFFF; --wash: #EADFCF; --ph: #EADFCF;
  --ink: #1F1A16; --ink-2: #3A322B; --muted: #5A4F47; --subtle: #7A6D64; --faint: #9A8C82;
  --line: #DED1BF; --line-2: #D2C3AE; --num: #CDBBA4;
  --accent: #B03D17; --accent-wash: #F6DDD2; --accent-line: #E9B7A2; --label: #B03D17;
  --note: #2F5D50; --inv: #1F1A16; --inv-2: #3A322B; --on-inv: #F3EBE0; --on-accent: #FFFFFF;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #17120F; --surface: #211A16; --wash: #1D1713; --ph: #1D1713; --ink: #F3EBE0; --ink-2: #DCCFC0; --muted: #B8AA9C; --subtle: #9A8C7F; --faint: #7D7064;
  --line: #33291F; --line-2: #43372B; --num: #4A3D31; --accent: #E07A55; --accent-wash: #3A2016; --accent-line: #7A3A22; --label: #E07A55;
  --note: #7FB3A2; --inv: #E07A55; --inv-2: #EA9272; --on-inv: #17120F; --on-accent: #17120F; } }
:root[data-theme="dark"] {
  --bg: #17120F; --surface: #211A16; --wash: #1D1713; --ph: #1D1713; --ink: #F3EBE0; --ink-2: #DCCFC0; --muted: #B8AA9C; --subtle: #9A8C7F; --faint: #7D7064;
  --line: #33291F; --line-2: #43372B; --num: #4A3D31; --accent: #E07A55; --accent-wash: #3A2016; --accent-line: #7A3A22; --label: #E07A55;
  --note: #7FB3A2; --inv: #E07A55; --inv-2: #EA9272; --on-inv: #17120F; --on-accent: #17120F; }
body { background: var(--bg); }
::selection { background: var(--accent); color: #FFFFFF; }

/* abertura: areia, letreiro terracota, você em cor natural com luz quente */
.intro { background: var(--wash); }
.intro-giant { color: var(--accent); }
.intro-photo canvas, .intro-photo .face-img { filter: saturate(1.04) contrast(1.02); }
.intro-glow { background: radial-gradient(560px 560px at var(--gx, 50%) var(--gy, 40%), color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%); }
.intro-kicker::before { background: var(--note); box-shadow: 0 0 0 4px color-mix(in srgb, var(--note) 20%, transparent); }
.intro-bubble { background: #FFFFFF; color: #1F1A16; border-color: rgba(31,26,22,.12); }

/* destaques */
.manifesto-kicker::before { background: var(--note); }
.talk-row span:nth-child(odd) { color: var(--accent); }
.talk-row i { color: var(--note); }
.dot-ok { background: var(--note) !important; }

/* contato em terracota */
.contact { background: #B03D17; color: #F3EBE0; }
.contact-label { color: rgba(243,235,224,.75); }
.contact-email { color: #F3EBE0; }
.contact-email:hover { color: #FFFFFF; }
.contact .btn-light { border-color: rgba(243,235,224,.45); color: #F3EBE0; background: transparent; }
.contact .btn-light:hover { border-color: #F3EBE0; color: #FFFFFF; }
.contact .btn-dark { background: #F3EBE0; color: #B03D17; }
.contact .btn-dark:hover { background: #FFFFFF; color: #B03D17; }
.contact .copy-btn { border-color: rgba(243,235,224,.5); color: #F3EBE0; }
.contact :focus-visible { outline-color: #F3EBE0; }

/* halo na cor do cabelo atrás do rosto: suaviza as bordas do recorte */
.intro-photo::before { content: ""; position: absolute; inset: 2% -6% 8%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse 58% 54% at 50% 40%, rgba(92, 58, 34, .62), rgba(150, 102, 58, .34) 42%, rgba(176, 124, 69, .12) 62%, transparent 76%); filter: blur(18px); }
@media (max-width: 1000px) { .intro-photo::before { inset: 4% -4% 6%; background: radial-gradient(ellipse 62% 58% at 50% 42%, rgba(92, 58, 34, .72), rgba(150, 102, 58, .42) 44%, rgba(176, 124, 69, .16) 64%, transparent 80%); filter: blur(14px); } }

/* === Color study: referência pink / blue / orange === */
:root {
  --bg: #F7F2E8;
  --surface: #FFFDF8;
  --accent: #FF3F9D;
  --accent-wash: #FFF0F7;
  --accent-line: #FFC1DF;
  --wash: #F6EFE5;
  --t-hero: #F5ECFF;
}

/* O gradiente fica concentrado na abertura; o restante continua editorial e legível. */
.intro {
  background:
    radial-gradient(ellipse 72% 68% at 12% 95%, rgba(255, 31, 120, .94) 0%, rgba(255, 54, 158, .66) 35%, transparent 72%),
    radial-gradient(ellipse 65% 62% at 93% 70%, rgba(43, 103, 255, .94) 0%, rgba(70, 126, 255, .62) 40%, transparent 74%),
    radial-gradient(ellipse 50% 48% at 47% 28%, rgba(255, 103, 34, .88) 0%, rgba(255, 89, 145, .58) 45%, transparent 76%),
    linear-gradient(145deg, #F8F2E8 4%, #F9D9E8 38%, #FF69B7 67%, #457BFF 100%);
}
.intro::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.28), transparent 38%);
  backdrop-filter: blur(1px);
}
.intro-glow { opacity: .55; mix-blend-mode: screen; }
.intro-giant { color: #111111; text-shadow: 0 1px 0 rgba(255,255,255,.08); }
.intro-h, .intro-label, .intro-cases a { color: #111111; }
.intro-lead, .intro-kicker, .intro-cases a small, .intro-cases a em { color: rgba(17,17,17,.72); }
.intro-cases, .intro-cases a { border-color: rgba(17,17,17,.22); }
.intro-cases a:hover, .intro-cases a:focus-visible { color: #FFFFFF; }
.intro-scroll { background: rgba(255,253,248,.78); border-color: rgba(17,17,17,.12); color: #111; }
.intro-kicker::before { background: #111; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.btn-dark { background: #111111; color: #FFFFFF; }
.btn-dark:hover { background: #2B2B2B; }
.btn-light { background: rgba(255,253,248,.88); border-color: rgba(17,17,17,.16); }
.icon-btn:hover { background: #FF3F9D; border-color: #FF3F9D; }

/* Mantém a referência cromática nos blocos do index sem sacrificar contraste. */
.mock { background: linear-gradient(135deg, #FFD8EA 0%, #F4C5FF 42%, #A9C4FF 100%); }
.contact { background: linear-gradient(135deg, #FF4CA5 0%, #FF713C 48%, #4A78FF 100%); }

/* === Hero v2 · gradiente vivo inspirado na referência === */
.intro {
  isolation: isolate;
  overflow: hidden;
  background: #f7f2e8;
}
.intro::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 44% 52% at var(--gx, 18%) var(--gy, 82%), rgba(255,27,133,.98) 0%, rgba(255,55,172,.72) 38%, transparent 72%),
    radial-gradient(ellipse 46% 52% at calc(100% - var(--gx, 18%)) calc(100% - var(--gy, 82%)), rgba(46,100,255,.98) 0%, rgba(89,126,255,.66) 40%, transparent 73%),
    radial-gradient(ellipse 38% 40% at 52% 24%, rgba(255,106,31,.94) 0%, rgba(255,73,139,.62) 44%, transparent 76%),
    radial-gradient(ellipse 34% 34% at 44% 66%, rgba(217,119,255,.70), transparent 72%),
    linear-gradient(145deg, #f8f2e8 7%, #f9dce9 34%, #ff58ad 65%, #3d73ff 100%);
  filter: blur(24px) saturate(1.12);
  transform: scale(1.08);
  transition: background-position .12s linear;
}
.intro::after {
  z-index: -3;
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.32), transparent 26%),
    linear-gradient(to bottom, rgba(247,242,232,.76) 0%, rgba(247,242,232,.08) 24%, rgba(255,255,255,0) 62%);
  backdrop-filter: blur(2px);
}
.intro-glow {
  z-index: -2;
  opacity: .9;
  background: radial-gradient(430px 430px at var(--gx,50%) var(--gy,45%), rgba(255,255,255,.24), transparent 68%);
  mix-blend-mode: soft-light;
}
.intro-giant {
  top: clamp(46px, 8vh, 92px);
  font-size: clamp(88px, 15.2vw, 258px);
  line-height: .76;
  font-weight: 700;
  letter-spacing: -.075em;
  color: #101010;
  opacity: .96;
  text-shadow: 0 1px 0 rgba(255,255,255,.16);
}
.intro-giant span:last-child { transform: translateX(4%); }
.intro-left, .intro-right, .intro-photo, .intro-bubble, .intro-scroll { z-index: 2; }
.intro-h { max-width: 760px; text-wrap: balance; }
.intro-photo { filter: drop-shadow(0 26px 40px rgba(23,20,35,.16)); }
.intro-bubble { backdrop-filter: blur(14px); background: rgba(255,253,248,.78); border-color: rgba(17,17,17,.10); }
.intro-right { backdrop-filter: blur(10px); }
.intro-cases a { transition: color .25s ease, padding-left .25s ease, background .25s ease; }
.intro-cases a:hover, .intro-cases a:focus-visible { padding-left: 10px; background: rgba(17,17,17,.92); }
@media (max-width: 1000px) {
  .intro::before { inset: -10%; filter: blur(18px) saturate(1.08); }
  .intro-giant { font-size: 18vw; line-height: .8; }
}
@media (max-width: 700px) {
  .intro::before {
    background:
      radial-gradient(ellipse 70% 48% at 12% 76%, rgba(255,30,137,.94), transparent 72%),
      radial-gradient(ellipse 70% 52% at 92% 64%, rgba(53,102,255,.92), transparent 72%),
      radial-gradient(ellipse 62% 42% at 54% 25%, rgba(255,103,31,.86), transparent 74%),
      linear-gradient(150deg,#f8f2e8 4%,#ff70b9 60%,#4777ff 100%);
  }
  .intro-giant { font-size: 22vw; }
}
@media (prefers-reduced-motion: reduce) {
  .intro::before { transition: none; }
}

/* ===================== v4 · sistema cromático inspirado na linguagem atual da Lovable =====================
   Mantém a arquitetura da Nanda, mas distribui creme + pink + coral + blue pelo site inteiro. */
:root {
  --lov-cream: #F7F3EA;
  --lov-paper: #FFFCF7;
  --lov-pink: #F63BAF;
  --lov-hot: #FF4D72;
  --lov-coral: #FF7048;
  --lov-orange: #FF8A3D;
  --lov-blue: #4F73FF;
  --lov-violet: #8A63FF;
  --lov-grad: linear-gradient(125deg, #4F73FF 0%, #8A63FF 24%, #F63BAF 50%, #FF4D72 70%, #FF8A3D 100%);
  --lov-grad-soft: linear-gradient(125deg, rgba(79,115,255,.18), rgba(246,59,175,.17) 48%, rgba(255,138,61,.20));
  --bg: var(--lov-cream);
  --surface: var(--lov-paper);
  --wash: #EFE8DB;
  --line: rgba(25,22,22,.12);
  --line-2: rgba(25,22,22,.17);
  --accent: #5A54FF;
  --note: var(--lov-coral);
  --shadow: 0 1px 2px rgba(36,25,18,.04), 0 24px 64px rgba(61,43,30,.10);
}

/* Header mais leve, quase flutuante */
.site-header { position: sticky; top: 0; z-index: 80; margin-inline: calc(clamp(16px,4.4vw,64px) * -1); padding-inline: clamp(16px,4.4vw,64px); transition: background .25s, backdrop-filter .25s, border-color .25s; }
.site-header.is-scrolled { background: color-mix(in srgb, var(--lov-cream) 82%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid rgba(25,22,22,.08); }
.pillnav { background: rgba(255,252,247,.72); backdrop-filter: blur(14px); }
.pillnav a[aria-current="location"] { background: #111; color: #fff; }

/* Hero: mesma composição, acabamento cromático mais rico */
.intro { background: var(--lov-cream); border: 1px solid rgba(25,22,22,.08); box-shadow: inset 0 1px rgba(255,255,255,.7); }
.intro::before { content:""; position:absolute; inset:-20%; z-index:-3; background:
  radial-gradient(circle at 16% 42%, rgba(79,115,255,.58), transparent 29%),
  radial-gradient(circle at 53% 16%, rgba(246,59,175,.55), transparent 27%),
  radial-gradient(circle at 83% 45%, rgba(255,112,72,.56), transparent 30%),
  radial-gradient(circle at 48% 82%, rgba(138,99,255,.28), transparent 34%);
  filter: blur(34px); opacity:.92; transform: scale(1.04); }
.intro::after { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(247,243,234,.08),rgba(247,243,234,.38)); pointer-events:none; }
.intro-glow { background: radial-gradient(620px 620px at var(--gx,50%) var(--gy,40%), rgba(255,255,255,.34), transparent 66%); }
.intro-giant { color:#111; mix-blend-mode:multiply; opacity:.96; }
.intro-bubble, .intro-scroll { background:rgba(255,252,247,.78); backdrop-filter:blur(18px) saturate(140%); }
.intro-cases { border-color:rgba(17,17,17,.18); }
.intro-cases a { border-color:rgba(17,17,17,.14); }
.intro-cases a:hover { color:#111; background:rgba(255,255,255,.26); border-radius:10px; }

/* Botões */
.btn-dark, .icon-btn:not(.ghost) { background:#111; border-color:#111; }
.btn-dark:hover { background:var(--lov-blue); border-color:var(--lov-blue); color:#fff; transform:translateY(-1px); }
.btn-light { background:rgba(255,252,247,.66); backdrop-filter:blur(12px); }
.btn-light:hover { background:#fff; border-color:rgba(17,17,17,.3); color:#111; }

/* Demo: vira um bloco editorial com halo de cor */
.hero { position:relative; padding:clamp(42px,5vw,72px); border-radius:32px; background:rgba(255,252,247,.72); border:1px solid rgba(25,22,22,.09); overflow:hidden; }
.hero::before { content:""; position:absolute; width:520px; height:520px; right:-180px; top:-230px; border-radius:50%; background:var(--lov-grad); filter:blur(80px); opacity:.18; pointer-events:none; }
.eyebrow, .card-num, .more { color:#5A54FF; }
.mock { position:relative; }
.mock::before { content:""; position:absolute; inset:8% 4% -5%; background:var(--lov-grad); filter:blur(55px); opacity:.20; z-index:-1; border-radius:40%; }
.win { border-color:rgba(25,22,22,.12); box-shadow:0 24px 70px rgba(45,29,20,.13); }

/* Logos/clientes */
.clients { border:0; margin-top:clamp(64px,8vw,96px); }
.clients-row { border-block:1px solid rgba(25,22,22,.12); }
.marquee-track li { color:#55515A; }

/* Métricas em cards coloridos suaves */
.stats-strip { gap:14px; }
.stat-n { padding:clamp(20px,2.4vw,30px); border-radius:22px; background:rgba(255,252,247,.72); border:1px solid rgba(25,22,22,.09); }
.stat-n:nth-child(1) { background:linear-gradient(145deg,rgba(79,115,255,.16),rgba(255,252,247,.78) 60%); }
.stat-n:nth-child(2) { background:linear-gradient(145deg,rgba(246,59,175,.14),rgba(255,252,247,.78) 60%); }
.stat-n:nth-child(3) { background:linear-gradient(145deg,rgba(255,112,72,.16),rgba(255,252,247,.78) 60%); }
.stat-n strong { letter-spacing:-.055em; }

/* Manifesto como grande momento editorial */
.manifesto { position:relative; padding:clamp(54px,7vw,96px) 0; }
.manifesto::after { content:""; position:absolute; left:0; bottom:20px; width:min(440px,65vw); height:12px; border-radius:999px; background:var(--lov-grad); opacity:.95; }
.manifesto-kicker::before { background:var(--lov-grad); }
.manifesto .mw.hl.lit { color:var(--lov-pink); }

/* Projetos: cada case ganha personalidade sem virar carnaval */
.projects.stack > a { border-color:rgba(25,22,22,.10); box-shadow:0 -18px 50px rgba(42,28,20,.07),0 20px 50px rgba(42,28,20,.05); }
.projects.stack > a:nth-child(1) { background:linear-gradient(110deg,#FFFCF7 55%,rgba(79,115,255,.10)); }
.projects.stack > a:nth-child(2) { background:linear-gradient(110deg,#FFFCF7 55%,rgba(138,99,255,.10)); }
.projects.stack > a:nth-child(3) { background:linear-gradient(110deg,#FFFCF7 55%,rgba(246,59,175,.09)); }
.projects.stack > a:nth-child(4) { background:linear-gradient(110deg,#FFFCF7 55%,rgba(255,77,114,.10)); }
.projects.stack > a:nth-child(5) { background:linear-gradient(110deg,#FFFCF7 55%,rgba(255,138,61,.12)); }
.card:hover h3,.wide:hover h3 { color:var(--lov-pink); }
.shot { box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }

/* Sobre e depoimentos */
.about-photo { border:1px solid rgba(25,22,22,.10); box-shadow:var(--shadow); }
.quotes { gap:14px; }
.quote { background:rgba(255,252,247,.74); border:1px solid rgba(25,22,22,.09); border-radius:22px; }
.quote:nth-child(1) { background:linear-gradient(150deg,rgba(79,115,255,.11),rgba(255,252,247,.8) 55%); }
.quote:nth-child(2) { background:linear-gradient(150deg,rgba(246,59,175,.10),rgba(255,252,247,.8) 55%); }
.quote:nth-child(3) { background:linear-gradient(150deg,rgba(255,138,61,.12),rgba(255,252,247,.8) 55%); }

/* Faixa e contato: fechamento com a paleta completa */
.talk { border:0; background:#111; color:#fff; border-radius:24px; overflow:hidden; }
.talk i { color:var(--lov-pink); }
.contact { position:relative; overflow:hidden; background:#111; border:0; isolation:isolate; }
.contact::before { content:""; position:absolute; z-index:-1; width:70%; aspect-ratio:1; right:-18%; top:-75%; border-radius:50%; background:var(--lov-grad); filter:blur(48px); opacity:.92; }
.contact::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(100deg,rgba(17,17,17,.94) 20%,rgba(17,17,17,.38)); }
.contact .btn-dark { background:#fff; color:#111; }
.contact .btn-dark:hover { background:var(--lov-cream); color:#111; }
.contact-email:hover { color:#fff; opacity:.72; }

/* Dark mode mantém as cores vivas sem perder contraste */
:root[data-theme="dark"] { --bg:#121111; --surface:#1A1818; --wash:#211E1C; --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.18); }
:root[data-theme="dark"] .intro { background:#171515; }
:root[data-theme="dark"] .intro::after { background:linear-gradient(180deg,rgba(17,15,15,.10),rgba(17,15,15,.48)); }
:root[data-theme="dark"] .intro-giant { color:#fff; mix-blend-mode:normal; }
:root[data-theme="dark"] .hero,:root[data-theme="dark"] .stat-n,:root[data-theme="dark"] .quote { background:rgba(28,25,25,.78); }
:root[data-theme="dark"] .projects.stack > a { background:#1A1818; }

@media (max-width:900px) {
  .hero { padding:28px 18px; border-radius:24px; }
  .stat-n { border-radius:18px; }
  .contact::before { width:120%; right:-50%; top:-35%; }
}

/* v7 — capas dos projetos: gradientes claros e difusos, alinhados ao novo hero */
.projects .shot.art,
.projects .wide-art {
  --cover-ink: #171414;
  color: var(--cover-ink);
  border: 1px solid rgba(35, 28, 28, .08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  isolation: isolate;
}
.projects .shot.art::before,
.projects .wide-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 16%, var(--g1) 0, transparent 43%),
    radial-gradient(circle at 88% 12%, var(--g2) 0, transparent 46%),
    radial-gradient(circle at 72% 92%, var(--g3) 0, transparent 48%),
    #fbf7f0;
}
.projects .shot.art { position: relative; background: #fbf7f0 !important; overflow: hidden; }
.projects .wide-art { position: relative; background: #fbf7f0 !important; overflow: hidden; }
.projects > a:nth-child(1) .shot.art { --g1: rgba(255,112,150,.24); --g2: rgba(255,171,91,.22); --g3: rgba(125,132,255,.18); }
.projects > a:nth-child(2) .shot.art { --g1: rgba(115,173,255,.25); --g2: rgba(163,132,255,.20); --g3: rgba(255,151,193,.14); }
.projects > a:nth-child(3) .shot.art { --g1: rgba(255,191,115,.22); --g2: rgba(255,129,172,.18); --g3: rgba(151,132,255,.15); }
.projects > a:nth-child(4) .shot.art { --g1: rgba(255,142,184,.22); --g2: rgba(255,186,115,.19); --g3: rgba(137,151,255,.17); }
.projects > a:nth-child(5) .wide-art { --g1: rgba(255,188,106,.24); --g2: rgba(255,130,171,.16); --g3: rgba(132,165,255,.15); }
.projects .art-mini { color: var(--cover-ink); }
.projects .shot.art .art-shot { width: 84%; height: 72%; box-shadow: 0 24px 52px rgba(42,31,35,.15); border: 1px solid rgba(30,25,25,.08); }
.projects .wide-art .art-loop li { background: rgba(255,255,255,.48); border-color: rgba(30,25,25,.10); color: var(--cover-ink); backdrop-filter: blur(10px); }
.projects .wide-art .art-loop li.stop { background: rgba(255,255,255,.86); color: #B33A62; }
.projects .badge { background: rgba(255,255,255,.76); color: #171414; border: 1px solid rgba(30,25,25,.08); backdrop-filter: blur(10px); }
:root[data-theme="dark"] .projects .shot.art,
:root[data-theme="dark"] .projects .wide-art { color:#171414; }

@media (max-width: 700px) {
  .projects .shot.art .art-shot { width: 88%; height: 70%; }
}

/* v8 — capas dos cases usando a paleta clara rosa + azul da home */
.projects .shot.art,
.projects .wide-art {
  background: #f8f3eb !important;
}
.projects .shot.art::before,
.projects .wide-art::before {
  background:
    radial-gradient(ellipse 72% 62% at 8% 92%, rgba(255, 74, 177, .32) 0%, rgba(255, 74, 177, .16) 38%, transparent 70%),
    radial-gradient(ellipse 72% 64% at 92% 82%, rgba(77, 112, 255, .32) 0%, rgba(77, 112, 255, .15) 40%, transparent 72%),
    radial-gradient(ellipse 58% 48% at 56% 8%, rgba(255, 145, 86, .18) 0%, transparent 68%),
    linear-gradient(145deg, #fbf7ef 8%, #f9eff3 54%, #eef1ff 100%) !important;
}
/* pequenas variações de luz, mantendo a mesma família cromática */
.projects > a:nth-child(2) .shot.art::before {
  transform: scaleX(-1);
}
.projects > a:nth-child(3) .shot.art::before {
  background:
    radial-gradient(ellipse 70% 60% at 12% 14%, rgba(77,112,255,.27), transparent 70%),
    radial-gradient(ellipse 74% 62% at 88% 88%, rgba(255,74,177,.29), transparent 72%),
    radial-gradient(ellipse 52% 44% at 60% 4%, rgba(255,145,86,.16), transparent 68%),
    #f8f3eb !important;
}
.projects > a:nth-child(4) .shot.art::before {
  background:
    radial-gradient(ellipse 72% 62% at 8% 88%, rgba(255,74,177,.30), transparent 72%),
    radial-gradient(ellipse 70% 60% at 94% 14%, rgba(77,112,255,.27), transparent 70%),
    radial-gradient(ellipse 50% 44% at 48% 100%, rgba(255,145,86,.15), transparent 68%),
    #f8f3eb !important;
}
.projects > a:nth-child(5) .wide-art::before {
  background:
    radial-gradient(ellipse 72% 62% at 10% 12%, rgba(255,145,86,.19), transparent 70%),
    radial-gradient(ellipse 72% 64% at 90% 84%, rgba(77,112,255,.28), transparent 72%),
    radial-gradient(ellipse 64% 54% at 24% 94%, rgba(255,74,177,.28), transparent 72%),
    #f8f3eb !important;
}
.projects .shot.art .art-shot {
  box-shadow: 0 24px 58px rgba(70, 54, 88, .14);
}

/* v9 — paleta rosa + lilás + azul aplicada ao site inteiro */
:root {
  --bg:#F8F3EB;
  --surface:#FFFCF8;
  --wash:#F6ECF4;
  --line:rgba(44,32,43,.12);
  --line-2:rgba(44,32,43,.18);
  --accent:#4D70FF;
  --accent-wash:#EEF1FF;
  --accent-line:#C9D2FF;
  --note:#FF4AB1;
  --label:#E9439A;
  --lov-pink:#FF4AB1;
  --lov-blue:#4D70FF;
  --lov-orange:#FF9156;
  --lov-cream:#F8F3EB;
  --lov-grad:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%);
  --lov-grad-soft:linear-gradient(125deg,rgba(255,74,177,.18),rgba(229,107,216,.14) 38%,rgba(77,112,255,.18));
}
body {
  background:
    radial-gradient(900px 620px at -8% 22%,rgba(255,74,177,.075),transparent 68%),
    radial-gradient(850px 650px at 108% 55%,rgba(77,112,255,.075),transparent 68%),
    var(--bg);
}
.site-header { background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(18px); }
.pillnav { background:rgba(255,252,248,.76); border-color:rgba(65,45,58,.14); }
.pillnav a.active { background:#171414; color:#fff; }
.eyebrow,.card-num,.more,.manifesto-kicker { color:var(--lov-pink); }
.dot-ok { background:var(--lov-pink); box-shadow:0 0 0 4px rgba(255,74,177,.13); }

/* seções recebem halos muito leves para a cor acompanhar toda a rolagem */
.clients,.stats-strip,.manifesto,.projects,.about,.quotes { position:relative; isolation:isolate; }
.clients::before,.about::before,.quotes::before { content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%; filter:blur(70px); opacity:.16; }
.clients::before { width:360px;height:260px;left:-8%;top:-80px;background:#FF4AB1; }
.about::before { width:420px;height:320px;right:-10%;top:8%;background:#4D70FF; }
.quotes::before { width:360px;height:280px;left:20%;top:0;background:#D76BE7; }

.stat-n:nth-child(1){background:linear-gradient(145deg,rgba(255,74,177,.15),rgba(255,252,248,.82) 64%)}
.stat-n:nth-child(2){background:linear-gradient(145deg,rgba(140,121,244,.15),rgba(255,252,248,.82) 64%)}
.stat-n:nth-child(3){background:linear-gradient(145deg,rgba(77,112,255,.16),rgba(255,252,248,.82) 64%)}
.manifesto::after { background:var(--lov-grad); }
.manifesto .mw.hl.lit { color:var(--lov-pink); }

/* cards e superfícies editoriais */
.projects.stack > a,.wide,.quote,.panel,.tile,.callout:not(.dark) { border-color:rgba(50,35,48,.10); }
.projects.stack > a:nth-child(1){background:linear-gradient(110deg,#FFFCF8 50%,rgba(255,74,177,.09))}
.projects.stack > a:nth-child(2){background:linear-gradient(110deg,#FFFCF8 50%,rgba(140,121,244,.10))}
.projects.stack > a:nth-child(3){background:linear-gradient(110deg,#FFFCF8 50%,rgba(77,112,255,.10))}
.projects.stack > a:nth-child(4){background:linear-gradient(110deg,#FFFCF8 50%,rgba(255,74,177,.08),rgba(77,112,255,.08))}
.projects.stack > a:nth-child(5){background:linear-gradient(110deg,#FFFCF8 50%,rgba(229,107,216,.09),rgba(77,112,255,.08))}
.quote:nth-child(1){background:linear-gradient(150deg,rgba(255,74,177,.11),rgba(255,252,248,.86) 58%)}
.quote:nth-child(2){background:linear-gradient(150deg,rgba(140,121,244,.11),rgba(255,252,248,.86) 58%)}
.quote:nth-child(3){background:linear-gradient(150deg,rgba(77,112,255,.11),rgba(255,252,248,.86) 58%)}
.card:hover h3,.wide:hover h3 { color:var(--lov-pink); }

/* fechamento também usa a mesma assinatura, sem voltar ao preto chapado */
.talk { background:linear-gradient(120deg,#20191E 0%,#342036 48%,#20284D 100%); }
.contact { background:linear-gradient(125deg,#FF4AB1 0%,#D965DB 40%,#7A75F2 68%,#4D70FF 100%); color:#fff; }
.contact::before,.contact::after { display:none; }
.contact-label { color:rgba(255,255,255,.76); }
.contact-email,.contact-email:hover { color:#fff; }
.contact .btn-light { border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08); }
.contact .btn-dark { background:#fff;color:#171414;border-color:#fff; }

/* páginas internas: a mesma família aparece em hero, capas e destaques */
.case-hero .cover,.ph { background:linear-gradient(145deg,#FBF7EF 8%,#F9EAF3 48%,#EEF1FF 100%); }
.case-hero .cover.art { position:relative;overflow:hidden; }
.case-hero .cover.art::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 8% 90%,rgba(255,74,177,.25),transparent 70%),radial-gradient(ellipse 70% 62% at 92% 82%,rgba(77,112,255,.25),transparent 72%); }
.ba > .after,.chip.on,.flow .step.now { background:var(--lov-grad); color:#fff; border-color:transparent; }

:root[data-theme="dark"] { --bg:#151216;--surface:#1E191F;--wash:#261E28;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.18); }
:root[data-theme="dark"] body { background:radial-gradient(900px 620px at -8% 22%,rgba(255,74,177,.10),transparent 68%),radial-gradient(850px 650px at 108% 55%,rgba(77,112,255,.11),transparent 68%),var(--bg); }
:root[data-theme="dark"] .projects.stack > a,:root[data-theme="dark"] .quote,:root[data-theme="dark"] .stat-n { background:#1E191F; }

/* v10 — capa dos cases: imagem presa ao box (sem parallax) e letreiro escuro sobre o gradiente claro */
.case-hero .art-shot { transform: none !important; will-change: auto; }
.case-hero .cover.art { color: #171414; }
.case-hero .cover.art .art-kicker { color: #171414; opacity: .62; }
.case-hero .cover.art .art-client { color: #171414; }
.case-hero .cover.art .art-project { color: #171414; opacity: .72; }
.case-hero .cover.art .art-text, .case-hero .cover.art .art-shot, .case-hero .cover.art .art-phones, .case-hero .cover.art .art-loop { position: relative; z-index: 1; }
.case-hero .cover.art .pf-tag { color: #171414; background: rgba(255,255,255,.6); border-color: rgba(23,20,20,.14); }
.case-hero .cover.art .art-loop li { color: #171414; background: rgba(255,255,255,.5); border-color: rgba(23,20,20,.12); }
.case-hero .cover.art .art-loop li.stop { background: rgba(255,255,255,.9); color: #B33A62; }
@media (max-width: 720px) { .case-hero .cover.art .art-text { padding-bottom: 20px; } }


/* v11 — modo escuro: pastel mais denso (rosa, lilás e azul translúcidos) com letreiro em ameixa escura */

:root[data-theme="dark"] {
  color-scheme: light;
  --bg:#F3EAEF; --surface:#FDF8FA; --wash:#F0E5EC; --ph:#F0E5EC;
  --ink:#1E1530; --ink-2:#2E2340; --muted:#4A3B5C; --subtle:#6A5A7C; --faint:#8A7B98;
  --line:rgba(30,21,48,.14); --line-2:rgba(30,21,48,.20); --num:#CDB6D0;
  --accent:#3F5FF0; --accent-wash:#E2E6FF; --accent-line:#B9C4FF;
  --note:#F2359F; --label:#D12E8A; --lov-pink:#F2359F; --lov-blue:#3F5FF0;
  --lov-grad:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%);
  --inv:#1E1530; --inv-2:#33264A; --on-inv:#FFFFFF; --on-accent:#FFFFFF;
  --ok:#16A34A; --ok-wash:#DDF1E4; --ok-ink:#15803D; --warn:#D97706; --warn-wash:#FBE9D2; --warn-ink:#8A4B00;
  --stop:#D92D20; --stop-wash:#F9DCDC; --stop-ink:#B42318;
  --shadow:0 1px 2px rgba(30,21,48,.06), 0 24px 64px rgba(60,30,70,.14);
}
:root[data-theme="dark"] body { color:var(--ink); background:
  radial-gradient(900px 640px at -10% 18%,rgba(255,74,177,.15),transparent 66%),
  radial-gradient(860px 660px at 110% 52%,rgba(77,112,255,.16),transparent 66%),
  radial-gradient(760px 560px at 40% 102%,rgba(140,121,244,.13),transparent 68%),
  var(--bg); }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] .h2, :root[data-theme="dark"] .ch-title, :root[data-theme="dark"] .case-title, :root[data-theme="dark"] .intro-h, :root[data-theme="dark"] .stat-n strong, :root[data-theme="dark"] .evidence strong, :root[data-theme="dark"] .contact-email { color:#1E1530; }
:root[data-theme="dark"] .contact-email { color:#fff; }
:root[data-theme="dark"] .site-header, :root[data-theme="dark"] .site-header.is-scrolled { background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom-color:rgba(30,21,48,.10); }
:root[data-theme="dark"] .pillnav { background:rgba(251,243,247,.72); border-color:rgba(30,21,48,.14); }
:root[data-theme="dark"] .pillnav a { color:#1E1530; }
:root[data-theme="dark"] .pillnav a:hover { background:rgba(255,255,255,.6); color:#1E1530; }
:root[data-theme="dark"] .pillnav a[aria-current="location"] { background:#1E1530; color:#fff; }
:root[data-theme="dark"] .icon-btn.ghost { background:rgba(251,243,247,.8); border-color:rgba(30,21,48,.18); color:#1E1530; }
:root[data-theme="dark"] .icon-btn:not(.ghost) { background:#1E1530; border-color:#1E1530; color:#fff; }
:root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .card-num, :root[data-theme="dark"] .more, :root[data-theme="dark"] .manifesto-kicker { color:#D12E8A; }
:root[data-theme="dark"] .dot-ok { background:#F2359F; box-shadow:0 0 0 4px rgba(242,53,159,.16); }

/* abertura: pastel mais denso, letreiro em ameixa escura */
:root[data-theme="dark"] .intro { background:#F4E9EF; border-color:rgba(30,21,48,.10); box-shadow:inset 0 1px rgba(255,255,255,.6); }
:root[data-theme="dark"] .intro::before { opacity:1; filter:blur(34px); background:
  radial-gradient(circle at 50% 12%, rgba(255,74,177,.46), transparent 32%),
  radial-gradient(circle at 12% 58%, rgba(140,121,244,.44), transparent 32%),
  radial-gradient(circle at 90% 62%, rgba(77,112,255,.46), transparent 32%),
  radial-gradient(circle at 40% 96%, rgba(229,107,216,.28), transparent 36%); }
:root[data-theme="dark"] .intro::after { background:linear-gradient(180deg,rgba(244,233,239,.10) 0%,rgba(244,233,239,.20) 55%,rgba(244,233,239,.62) 100%); }
:root[data-theme="dark"] .intro-glow { background:radial-gradient(620px 620px at var(--gx,50%) var(--gy,40%), rgba(255,255,255,.30), transparent 66%); }
:root[data-theme="dark"] .intro-giant { color:#1E1530; mix-blend-mode:normal; opacity:.96; text-shadow:none; }
:root[data-theme="dark"] .intro-h, :root[data-theme="dark"] .intro-label, :root[data-theme="dark"] .intro-cases a { color:#1E1530; }
:root[data-theme="dark"] .intro-lead, :root[data-theme="dark"] .intro-kicker, :root[data-theme="dark"] .intro-cases a small, :root[data-theme="dark"] .intro-cases a em { color:#4A3B5C; }
:root[data-theme="dark"] .intro-kicker::before { background:#F2359F; box-shadow:0 0 0 4px rgba(242,53,159,.18); }
:root[data-theme="dark"] .intro-cases, :root[data-theme="dark"] .intro-cases a { border-color:rgba(30,21,48,.18); }
:root[data-theme="dark"] .intro-cases a:hover, :root[data-theme="dark"] .intro-cases a:focus-visible { background:rgba(255,255,255,.4); color:#1E1530; }
:root[data-theme="dark"] .intro-bubble, :root[data-theme="dark"] .intro-scroll { background:rgba(251,243,247,.82); color:#1E1530; border-color:rgba(30,21,48,.12); }

/* botões */
:root[data-theme="dark"] .btn-dark { background:#1E1530; border-color:#1E1530; color:#fff; }
:root[data-theme="dark"] .btn-dark:hover { background:#3F5FF0; border-color:#3F5FF0; color:#fff; }
:root[data-theme="dark"] .btn-light { background:rgba(251,243,247,.66); border-color:rgba(30,21,48,.20); color:#1E1530; }
:root[data-theme="dark"] .btn-light:hover { background:#fff; border-color:#1E1530; color:#1E1530; }

/* números, manifesto, clientes: transparências mais fortes */
:root[data-theme="dark"] .marquee ul, :root[data-theme="dark"] .marquee-track li { color:#4A3B5C; }
:root[data-theme="dark"] .clients::before, :root[data-theme="dark"] .about::before, :root[data-theme="dark"] .quotes::before { opacity:.16; }
:root[data-theme="dark"] .stat-n { border-color:rgba(30,21,48,.10); }
:root[data-theme="dark"] .stat-n:nth-child(1){background:linear-gradient(145deg,rgba(255,74,177,.14),rgba(253,248,250,.92) 62%)}
:root[data-theme="dark"] .stat-n:nth-child(2){background:linear-gradient(145deg,rgba(140,121,244,.24),rgba(253,248,250,.82) 66%)}
:root[data-theme="dark"] .stat-n:nth-child(3){background:linear-gradient(145deg,rgba(77,112,255,.14),rgba(253,248,250,.92) 62%)}
:root[data-theme="dark"] .stat-n span { color:#4A3B5C; }
:root[data-theme="dark"] .manifesto .mw { color:#CDB6D0; }
:root[data-theme="dark"] .manifesto .mw.lit { color:#1E1530; }
:root[data-theme="dark"] .manifesto .mw.hl.lit { color:#D12E8A; }

/* cards de projeto e capas */
:root[data-theme="dark"] .projects.stack > a, :root[data-theme="dark"] .wide { border-color:rgba(30,21,48,.10); box-shadow:0 -18px 50px rgba(60,30,70,.10),0 20px 50px rgba(60,30,70,.08); }
:root[data-theme="dark"] .projects.stack > a:nth-child(1){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(255,74,177,.14))}
:root[data-theme="dark"] .projects.stack > a:nth-child(2){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(140,121,244,.16))}
:root[data-theme="dark"] .projects.stack > a:nth-child(3){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(77,112,255,.14))}
:root[data-theme="dark"] .projects.stack > a:nth-child(4){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(255,74,177,.12),rgba(77,112,255,.12))}
:root[data-theme="dark"] .projects.stack > a:nth-child(5){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(229,107,216,.13),rgba(77,112,255,.12))}
:root[data-theme="dark"] .projects .shot.art, :root[data-theme="dark"] .projects .wide-art { background:#F6EEF2 !important; --cover-ink:#1E1530; color:#1E1530; border-color:rgba(30,21,48,.10); }
:root[data-theme="dark"] .projects .shot.art::before, :root[data-theme="dark"] .projects .wide-art::before { background:
  radial-gradient(ellipse 72% 62% at 8% 92%, rgba(255,74,177,.32), transparent 70%),
  radial-gradient(ellipse 72% 64% at 92% 82%, rgba(77,112,255,.32), transparent 72%),
  radial-gradient(ellipse 58% 48% at 56% 8%, rgba(140,121,244,.24), transparent 68%),
  #F6EEF2 !important; }
:root[data-theme="dark"] .projects .art-mini { color:#1E1530; }
:root[data-theme="dark"] .projects .badge { background:rgba(251,243,247,.82); color:#1E1530; border-color:rgba(30,21,48,.12); }
:root[data-theme="dark"] .badge::before { background:#F2359F; }
:root[data-theme="dark"] .projects .wide-art .art-loop li { background:rgba(255,255,255,.5); border-color:rgba(30,21,48,.12); color:#1E1530; }
:root[data-theme="dark"] .projects .wide-art .art-loop li.stop { background:rgba(255,255,255,.92); color:#B3266F; }
:root[data-theme="dark"] .projects .shot.art .art-shot { box-shadow:0 24px 58px rgba(60,30,70,.20); }
:root[data-theme="dark"] .card p, :root[data-theme="dark"] .wide p { color:#4A3B5C; }
:root[data-theme="dark"] .card:hover h3, :root[data-theme="dark"] .wide:hover h3 { color:#D12E8A; }

/* sobre, depoimentos */
:root[data-theme="dark"] .prose { color:#2E2340; }
:root[data-theme="dark"] .quote { border-color:rgba(30,21,48,.10); }
:root[data-theme="dark"] .quote:nth-child(1){background:linear-gradient(150deg,rgba(255,74,177,.13),rgba(253,248,250,.92) 58%)}
:root[data-theme="dark"] .quote:nth-child(2){background:linear-gradient(150deg,rgba(140,121,244,.20),rgba(253,248,250,.86) 60%)}
:root[data-theme="dark"] .quote:nth-child(3){background:linear-gradient(150deg,rgba(77,112,255,.13),rgba(253,248,250,.92) 58%)}
:root[data-theme="dark"] .talk { background:linear-gradient(120deg,#1E1530 0%,#3A1F48 50%,#1F2A5C 100%); }
:root[data-theme="dark"] .talk-row span:nth-child(odd) { color:#FF7ACB; }
:root[data-theme="dark"] .talk-row span:nth-child(even) { -webkit-text-stroke-color:#FBF3F7; }
:root[data-theme="dark"] .contact { background:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%); }

/* páginas de case */
:root[data-theme="dark"] .case-hero .cover, :root[data-theme="dark"] .ph { background:linear-gradient(145deg,#F8F0F4 8%,#F4E8F1 48%,#E9ECFC 100%); }
:root[data-theme="dark"] .case-hero .cover.art::before { background:
  radial-gradient(ellipse 70% 60% at 8% 90%,rgba(255,74,177,.30),transparent 70%),
  radial-gradient(ellipse 70% 62% at 92% 82%,rgba(77,112,255,.30),transparent 72%),
  radial-gradient(ellipse 56% 48% at 60% 6%,rgba(140,121,244,.20),transparent 68%); }
:root[data-theme="dark"] .case-hero .cover.art, :root[data-theme="dark"] .case-hero .cover.art .art-client { color:#1E1530; }
:root[data-theme="dark"] .case-hero .cover.art .art-kicker, :root[data-theme="dark"] .case-hero .cover.art .art-project { color:#1E1530; }
:root[data-theme="dark"] .back { background:rgba(251,243,247,.8); border-color:rgba(30,21,48,.18); color:#1E1530; }
:root[data-theme="dark"] .panel, :root[data-theme="dark"] .tile, :root[data-theme="dark"] .voice, :root[data-theme="dark"] .evidence > div { background:rgba(253,248,250,.92); border-color:rgba(30,21,48,.10); }
:root[data-theme="dark"] .shot-frame { border-color:rgba(30,21,48,.10); }
:root[data-theme="dark"] .evidence { background:rgba(30,21,48,.10); border-color:rgba(30,21,48,.10); }
:root[data-theme="dark"] .callout:not(.dark) { background:linear-gradient(135deg,rgba(255,74,177,.09),rgba(140,121,244,.08) 50%,rgba(77,112,255,.08)); }
:root[data-theme="dark"] .callout.dark { background:linear-gradient(125deg,#1E1530,#3A1F48 60%,#1F2A5C); color:#fff; }
:root[data-theme="dark"] .callout.dark p { color:#fff; }
:root[data-theme="dark"] .callout.dark .label { color:#FF9BD2; }
:root[data-theme="dark"] .ch-text, :root[data-theme="dark"] .case-lead { color:#2E2340; }
:root[data-theme="dark"] .ba > div { background:rgba(255,255,255,.75); }
:root[data-theme="dark"] .ba > .after, :root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .flow .step.now { background:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%); color:#fff; }
:root[data-theme="dark"] .stepper li { background:rgba(255,255,255,.75); }
:root[data-theme="dark"] .read-progress span { background:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%); }
:root[data-theme="dark"] .cur { border-color:#F2359F; }
:root[data-theme="dark"] .cur.label { background:#F2359F; border-color:#F2359F; }

@media (prefers-color-scheme: dark) {

:root:not([data-theme="light"]) {
  color-scheme: light;
  --bg:#F3EAEF; --surface:#FDF8FA; --wash:#F0E5EC; --ph:#F0E5EC;
  --ink:#1E1530; --ink-2:#2E2340; --muted:#4A3B5C; --subtle:#6A5A7C; --faint:#8A7B98;
  --line:rgba(30,21,48,.14); --line-2:rgba(30,21,48,.20); --num:#CDB6D0;
  --accent:#3F5FF0; --accent-wash:#E2E6FF; --accent-line:#B9C4FF;
  --note:#F2359F; --label:#D12E8A; --lov-pink:#F2359F; --lov-blue:#3F5FF0;
  --lov-grad:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%);
  --inv:#1E1530; --inv-2:#33264A; --on-inv:#FFFFFF; --on-accent:#FFFFFF;
  --ok:#16A34A; --ok-wash:#DDF1E4; --ok-ink:#15803D; --warn:#D97706; --warn-wash:#FBE9D2; --warn-ink:#8A4B00;
  --stop:#D92D20; --stop-wash:#F9DCDC; --stop-ink:#B42318;
  --shadow:0 1px 2px rgba(30,21,48,.06), 0 24px 64px rgba(60,30,70,.14);
}
:root:not([data-theme="light"]) body { color:var(--ink); background:
  radial-gradient(900px 640px at -10% 18%,rgba(255,74,177,.15),transparent 66%),
  radial-gradient(860px 660px at 110% 52%,rgba(77,112,255,.16),transparent 66%),
  radial-gradient(760px 560px at 40% 102%,rgba(140,121,244,.13),transparent 68%),
  var(--bg); }
:root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) .h2, :root:not([data-theme="light"]) .ch-title, :root:not([data-theme="light"]) .case-title, :root:not([data-theme="light"]) .intro-h, :root:not([data-theme="light"]) .stat-n strong, :root:not([data-theme="light"]) .evidence strong, :root:not([data-theme="light"]) .contact-email { color:#1E1530; }
:root:not([data-theme="light"]) .contact-email { color:#fff; }
:root:not([data-theme="light"]) .site-header, :root:not([data-theme="light"]) .site-header.is-scrolled { background:color-mix(in srgb,var(--bg) 82%,transparent); border-bottom-color:rgba(30,21,48,.10); }
:root:not([data-theme="light"]) .pillnav { background:rgba(251,243,247,.72); border-color:rgba(30,21,48,.14); }
:root:not([data-theme="light"]) .pillnav a { color:#1E1530; }
:root:not([data-theme="light"]) .pillnav a:hover { background:rgba(255,255,255,.6); color:#1E1530; }
:root:not([data-theme="light"]) .pillnav a[aria-current="location"] { background:#1E1530; color:#fff; }
:root:not([data-theme="light"]) .icon-btn.ghost { background:rgba(251,243,247,.8); border-color:rgba(30,21,48,.18); color:#1E1530; }
:root:not([data-theme="light"]) .icon-btn:not(.ghost) { background:#1E1530; border-color:#1E1530; color:#fff; }
:root:not([data-theme="light"]) .eyebrow, :root:not([data-theme="light"]) .card-num, :root:not([data-theme="light"]) .more, :root:not([data-theme="light"]) .manifesto-kicker { color:#D12E8A; }
:root:not([data-theme="light"]) .dot-ok { background:#F2359F; box-shadow:0 0 0 4px rgba(242,53,159,.16); }

/* abertura: pastel mais denso, letreiro em ameixa escura */
:root:not([data-theme="light"]) .intro { background:#F4E9EF; border-color:rgba(30,21,48,.10); box-shadow:inset 0 1px rgba(255,255,255,.6); }
:root:not([data-theme="light"]) .intro::before { opacity:1; filter:blur(34px); background:
  radial-gradient(circle at 50% 12%, rgba(255,74,177,.46), transparent 32%),
  radial-gradient(circle at 12% 58%, rgba(140,121,244,.44), transparent 32%),
  radial-gradient(circle at 90% 62%, rgba(77,112,255,.46), transparent 32%),
  radial-gradient(circle at 40% 96%, rgba(229,107,216,.28), transparent 36%); }
:root:not([data-theme="light"]) .intro::after { background:linear-gradient(180deg,rgba(244,233,239,.10) 0%,rgba(244,233,239,.20) 55%,rgba(244,233,239,.62) 100%); }
:root:not([data-theme="light"]) .intro-glow { background:radial-gradient(620px 620px at var(--gx,50%) var(--gy,40%), rgba(255,255,255,.30), transparent 66%); }
:root:not([data-theme="light"]) .intro-giant { color:#1E1530; mix-blend-mode:normal; opacity:.96; text-shadow:none; }
:root:not([data-theme="light"]) .intro-h, :root:not([data-theme="light"]) .intro-label, :root:not([data-theme="light"]) .intro-cases a { color:#1E1530; }
:root:not([data-theme="light"]) .intro-lead, :root:not([data-theme="light"]) .intro-kicker, :root:not([data-theme="light"]) .intro-cases a small, :root:not([data-theme="light"]) .intro-cases a em { color:#4A3B5C; }
:root:not([data-theme="light"]) .intro-kicker::before { background:#F2359F; box-shadow:0 0 0 4px rgba(242,53,159,.18); }
:root:not([data-theme="light"]) .intro-cases, :root:not([data-theme="light"]) .intro-cases a { border-color:rgba(30,21,48,.18); }
:root:not([data-theme="light"]) .intro-cases a:hover, :root:not([data-theme="light"]) .intro-cases a:focus-visible { background:rgba(255,255,255,.4); color:#1E1530; }
:root:not([data-theme="light"]) .intro-bubble, :root:not([data-theme="light"]) .intro-scroll { background:rgba(251,243,247,.82); color:#1E1530; border-color:rgba(30,21,48,.12); }

/* botões */
:root:not([data-theme="light"]) .btn-dark { background:#1E1530; border-color:#1E1530; color:#fff; }
:root:not([data-theme="light"]) .btn-dark:hover { background:#3F5FF0; border-color:#3F5FF0; color:#fff; }
:root:not([data-theme="light"]) .btn-light { background:rgba(251,243,247,.66); border-color:rgba(30,21,48,.20); color:#1E1530; }
:root:not([data-theme="light"]) .btn-light:hover { background:#fff; border-color:#1E1530; color:#1E1530; }

/* números, manifesto, clientes: transparências mais fortes */
:root:not([data-theme="light"]) .marquee ul, :root:not([data-theme="light"]) .marquee-track li { color:#4A3B5C; }
:root:not([data-theme="light"]) .clients::before, :root:not([data-theme="light"]) .about::before, :root:not([data-theme="light"]) .quotes::before { opacity:.16; }
:root:not([data-theme="light"]) .stat-n { border-color:rgba(30,21,48,.10); }
:root:not([data-theme="light"]) .stat-n:nth-child(1){background:linear-gradient(145deg,rgba(255,74,177,.14),rgba(253,248,250,.92) 62%)}
:root:not([data-theme="light"]) .stat-n:nth-child(2){background:linear-gradient(145deg,rgba(140,121,244,.24),rgba(253,248,250,.82) 66%)}
:root:not([data-theme="light"]) .stat-n:nth-child(3){background:linear-gradient(145deg,rgba(77,112,255,.14),rgba(253,248,250,.92) 62%)}
:root:not([data-theme="light"]) .stat-n span { color:#4A3B5C; }
:root:not([data-theme="light"]) .manifesto .mw { color:#CDB6D0; }
:root:not([data-theme="light"]) .manifesto .mw.lit { color:#1E1530; }
:root:not([data-theme="light"]) .manifesto .mw.hl.lit { color:#D12E8A; }

/* cards de projeto e capas */
:root:not([data-theme="light"]) .projects.stack > a, :root:not([data-theme="light"]) .wide { border-color:rgba(30,21,48,.10); box-shadow:0 -18px 50px rgba(60,30,70,.10),0 20px 50px rgba(60,30,70,.08); }
:root:not([data-theme="light"]) .projects.stack > a:nth-child(1){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(255,74,177,.14))}
:root:not([data-theme="light"]) .projects.stack > a:nth-child(2){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(140,121,244,.16))}
:root:not([data-theme="light"]) .projects.stack > a:nth-child(3){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(77,112,255,.14))}
:root:not([data-theme="light"]) .projects.stack > a:nth-child(4){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(255,74,177,.12),rgba(77,112,255,.12))}
:root:not([data-theme="light"]) .projects.stack > a:nth-child(5){background:linear-gradient(110deg,rgba(253,248,250,.94) 55%,rgba(229,107,216,.13),rgba(77,112,255,.12))}
:root:not([data-theme="light"]) .projects .shot.art, :root:not([data-theme="light"]) .projects .wide-art { background:#F6EEF2 !important; --cover-ink:#1E1530; color:#1E1530; border-color:rgba(30,21,48,.10); }
:root:not([data-theme="light"]) .projects .shot.art::before, :root:not([data-theme="light"]) .projects .wide-art::before { background:
  radial-gradient(ellipse 72% 62% at 8% 92%, rgba(255,74,177,.32), transparent 70%),
  radial-gradient(ellipse 72% 64% at 92% 82%, rgba(77,112,255,.32), transparent 72%),
  radial-gradient(ellipse 58% 48% at 56% 8%, rgba(140,121,244,.24), transparent 68%),
  #F6EEF2 !important; }
:root:not([data-theme="light"]) .projects .art-mini { color:#1E1530; }
:root:not([data-theme="light"]) .projects .badge { background:rgba(251,243,247,.82); color:#1E1530; border-color:rgba(30,21,48,.12); }
:root:not([data-theme="light"]) .badge::before { background:#F2359F; }
:root:not([data-theme="light"]) .projects .wide-art .art-loop li { background:rgba(255,255,255,.5); border-color:rgba(30,21,48,.12); color:#1E1530; }
:root:not([data-theme="light"]) .projects .wide-art .art-loop li.stop { background:rgba(255,255,255,.92); color:#B3266F; }
:root:not([data-theme="light"]) .projects .shot.art .art-shot { box-shadow:0 24px 58px rgba(60,30,70,.20); }
:root:not([data-theme="light"]) .card p, :root:not([data-theme="light"]) .wide p { color:#4A3B5C; }
:root:not([data-theme="light"]) .card:hover h3, :root:not([data-theme="light"]) .wide:hover h3 { color:#D12E8A; }

/* sobre, depoimentos */
:root:not([data-theme="light"]) .prose { color:#2E2340; }
:root:not([data-theme="light"]) .quote { border-color:rgba(30,21,48,.10); }
:root:not([data-theme="light"]) .quote:nth-child(1){background:linear-gradient(150deg,rgba(255,74,177,.13),rgba(253,248,250,.92) 58%)}
:root:not([data-theme="light"]) .quote:nth-child(2){background:linear-gradient(150deg,rgba(140,121,244,.20),rgba(253,248,250,.86) 60%)}
:root:not([data-theme="light"]) .quote:nth-child(3){background:linear-gradient(150deg,rgba(77,112,255,.13),rgba(253,248,250,.92) 58%)}
:root:not([data-theme="light"]) .talk { background:linear-gradient(120deg,#1E1530 0%,#3A1F48 50%,#1F2A5C 100%); }
:root:not([data-theme="light"]) .talk-row span:nth-child(odd) { color:#FF7ACB; }
:root:not([data-theme="light"]) .talk-row span:nth-child(even) { -webkit-text-stroke-color:#FBF3F7; }
:root:not([data-theme="light"]) .contact { background:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%); }

/* páginas de case */
:root:not([data-theme="light"]) .case-hero .cover, :root:not([data-theme="light"]) .ph { background:linear-gradient(145deg,#F8F0F4 8%,#F4E8F1 48%,#E9ECFC 100%); }
:root:not([data-theme="light"]) .case-hero .cover.art::before { background:
  radial-gradient(ellipse 70% 60% at 8% 90%,rgba(255,74,177,.30),transparent 70%),
  radial-gradient(ellipse 70% 62% at 92% 82%,rgba(77,112,255,.30),transparent 72%),
  radial-gradient(ellipse 56% 48% at 60% 6%,rgba(140,121,244,.20),transparent 68%); }
:root:not([data-theme="light"]) .case-hero .cover.art, :root:not([data-theme="light"]) .case-hero .cover.art .art-client { color:#1E1530; }
:root:not([data-theme="light"]) .case-hero .cover.art .art-kicker, :root:not([data-theme="light"]) .case-hero .cover.art .art-project { color:#1E1530; }
:root:not([data-theme="light"]) .back { background:rgba(251,243,247,.8); border-color:rgba(30,21,48,.18); color:#1E1530; }
:root:not([data-theme="light"]) .panel, :root:not([data-theme="light"]) .tile, :root:not([data-theme="light"]) .voice, :root:not([data-theme="light"]) .evidence > div { background:rgba(253,248,250,.92); border-color:rgba(30,21,48,.10); }
:root:not([data-theme="light"]) .shot-frame { border-color:rgba(30,21,48,.10); }
:root:not([data-theme="light"]) .evidence { background:rgba(30,21,48,.10); border-color:rgba(30,21,48,.10); }
:root:not([data-theme="light"]) .callout:not(.dark) { background:linear-gradient(135deg,rgba(255,74,177,.09),rgba(140,121,244,.08) 50%,rgba(77,112,255,.08)); }
:root:not([data-theme="light"]) .callout.dark { background:linear-gradient(125deg,#1E1530,#3A1F48 60%,#1F2A5C); color:#fff; }
:root:not([data-theme="light"]) .callout.dark p { color:#fff; }
:root:not([data-theme="light"]) .callout.dark .label { color:#FF9BD2; }
:root:not([data-theme="light"]) .ch-text, :root:not([data-theme="light"]) .case-lead { color:#2E2340; }
:root:not([data-theme="light"]) .ba > div { background:rgba(255,255,255,.75); }
:root:not([data-theme="light"]) .ba > .after, :root:not([data-theme="light"]) .chip.on, :root:not([data-theme="light"]) .flow .step.now { background:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%); color:#fff; }
:root:not([data-theme="light"]) .stepper li { background:rgba(255,255,255,.75); }
:root:not([data-theme="light"]) .read-progress span { background:linear-gradient(125deg,#FF4AB1 0%,#E56BD8 35%,#8C79F4 62%,#4D70FF 100%); }
:root:not([data-theme="light"]) .cur { border-color:#F2359F; }
:root:not([data-theme="light"]) .cur.label { background:#F2359F; border-color:#F2359F; }

}

/* v12 — correções finais para os problemas vistos no Chrome */
.intro-giant,
:root[data-theme="dark"] .intro-giant,
:root:not([data-theme="light"]) .intro-giant {
  opacity: .18 !important;
  mix-blend-mode: normal !important;
}
.intro-left::before,
.intro-right::before,
:root[data-theme="dark"] .intro-left::before,
:root[data-theme="dark"] .intro-right::before,
:root:not([data-theme="light"]) .intro-left::before,
:root:not([data-theme="light"]) .intro-right::before {
  background: linear-gradient(110deg, rgba(255,252,248,.70), rgba(255,252,248,.30)) !important;
}

@media (min-width: 901px) {
  .projects.stack > a {
    overflow: hidden;
    filter: none !important;
    opacity: 1 !important;
    isolation: isolate;
    background: #FFFCF8 !important;
  }
  .projects.stack > a:nth-child(1) { background: linear-gradient(110deg,#FFFCF8 54%,#F8EAF4 100%) !important; }
  .projects.stack > a:nth-child(2) { background: linear-gradient(110deg,#FFFCF8 54%,#EFEAFB 100%) !important; }
  .projects.stack > a:nth-child(3) { background: linear-gradient(110deg,#FFFCF8 54%,#EEF1FF 100%) !important; }
  .projects.stack > a:nth-child(4) { background: linear-gradient(110deg,#FFFCF8 54%,#F8EAF4 82%,#EEF1FF 100%) !important; }
  .projects.stack > a:nth-child(5) { background: linear-gradient(110deg,#FFFCF8 54%,#F5ECF8 82%,#EEF1FF 100%) !important; }
  .projects.stack > a::after {
    display: none !important;
  }
  .projects.stack > a > * {
    position: relative;
    z-index: 1;
  }
  :root[data-theme="dark"] .projects.stack > a,
  :root:not([data-theme="light"]) .projects.stack > a {
    background: #FDF8FA !important;
  }
  :root[data-theme="dark"] .projects.stack > a:nth-child(1),
  :root:not([data-theme="light"]) .projects.stack > a:nth-child(1) { background: linear-gradient(110deg,#FDF8FA 54%,#F8EAF4 100%) !important; }
  :root[data-theme="dark"] .projects.stack > a:nth-child(2),
  :root:not([data-theme="light"]) .projects.stack > a:nth-child(2) { background: linear-gradient(110deg,#FDF8FA 54%,#EFEAFB 100%) !important; }
  :root[data-theme="dark"] .projects.stack > a:nth-child(3),
  :root:not([data-theme="light"]) .projects.stack > a:nth-child(3) { background: linear-gradient(110deg,#FDF8FA 54%,#EEF1FF 100%) !important; }
  :root[data-theme="dark"] .projects.stack > a:nth-child(4),
  :root:not([data-theme="light"]) .projects.stack > a:nth-child(4) { background: linear-gradient(110deg,#FDF8FA 54%,#F8EAF4 82%,#EEF1FF 100%) !important; }
  :root[data-theme="dark"] .projects.stack > a:nth-child(5),
  :root:not([data-theme="light"]) .projects.stack > a:nth-child(5) { background: linear-gradient(110deg,#FDF8FA 54%,#F5ECF8 82%,#EEF1FF 100%) !important; }
}

.case-hero .cover.art,
.case-hero .cover.art.vt-off,
.next-art.vt-source {
  view-transition-name: none !important;
}
.next-art.is-opening {
  transform: none !important;
  border-radius: 28px !important;
}
@view-transition { navigation: none; }

/* v13 — rótulos Antes/Depois presos aos aparelhos nos cases */
.cover.art .art-phones .pw {
  position: relative;
  padding-top: 36px;
}
.cover.art .art-phones .pf-tag {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255, 255, 255, .78);
  color: #171414;
  border-color: rgba(23, 20, 20, .14);
  box-shadow: 0 6px 18px rgba(45, 30, 48, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 520px) {
  .cover.art .art-phones .pw {
    padding-top: 0;
  }
  .cover.art .art-phones .pf-tag {
    display: none;
  }
}