:root {
  --bg: #030303;
  --fg: #f5f1e8;
  --muted: rgba(245, 241, 232, .52);
  --grid: rgba(245, 241, 232, .025);
  --target: rgba(245, 241, 232, .115);
  --target-locked: rgba(245, 241, 232, .72);
  --piece: rgba(245, 241, 232, .76);
  --stage-top: 50%;
  --stage-size: min(68vw, 360px);
  --page-x: clamp(28px, 11vw, 168px);
  --final-top: max(48px, calc(36px + env(safe-area-inset-top)));
  --story-top: 49%;
  --logo-size: clamp(38px, 9vw, 66px);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: Degular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
}

.screen.active {
  display: grid;
}

#intro {
  place-items: center;
  padding: 28px;
  text-align: center;
}

.intro-inner {
  width: min(980px, 100%);
}

#intro h1 {
  margin: 0;
  font-size: clamp(38px, 9.6vw, 92px);
  line-height: .94;
  letter-spacing: -0.058em;
  font-weight: 430;
}

#intro h1 span {
  display: block;
}

.intro-subtitle {
  width: min(720px, 100%);
  margin: 18px auto 0;
  color: rgba(245, 241, 232, .62);
  font-size: clamp(16px, 4.1vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.028em;
  font-weight: 360;
}

#startBtn {
  margin-top: 42px;
  appearance: none;
  border: 1px solid rgba(245, 241, 232, .24);
  background: transparent;
  color: var(--fg);
  border-radius: 999px;
  padding: 14px 26px 15px;
  font: inherit;
  cursor: pointer;
}

#experience {
  background: var(--bg);
  z-index: 10;
}

#diagramTitle {
  position: fixed;
  left: 50%;
  top: calc(var(--stage-top) - (var(--stage-size) / 2) - clamp(74px, 10vh, 104px));
  transform: translateX(-50%);
  width: var(--stage-size);
  margin: 0;
  color: var(--fg);
  text-align: left;
  font-size: clamp(19px, 5.35vw, 30px);
  line-height: .94;
  letter-spacing: -0.058em;
  font-weight: 410;
  transition: opacity .45s ease, transform .45s ease;
  z-index: 30;
  pointer-events: none;
}

#diagramTitle span {
  display: block;
}

#diagramTitle span + span {
  color: rgba(245, 241, 232, .70);
  padding-left: clamp(18px, 6vw, 42px);
}

#dragInstruction {
  position: fixed;
  left: 50%;
  bottom: max(22px, calc(16px + env(safe-area-inset-bottom)));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 48px));
  margin: 0;
  color: rgba(245, 241, 232, .45);
  text-align: center;
  font-size: clamp(12px, 3.25vw, 15px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 30;
  pointer-events: none;
}

#stage {
  position: absolute;
  left: 50%;
  top: var(--stage-top);
  width: var(--stage-size);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  transition:
    opacity .86s ease,
    filter .86s ease,
    transform 1.15s cubic-bezier(.76, 0, .24, 1),
    width 1.15s cubic-bezier(.76, 0, .24, 1),
    left 1.15s cubic-bezier(.76, 0, .24, 1),
    right 1.15s cubic-bezier(.76, 0, .24, 1),
    top 1.15s cubic-bezier(.76, 0, .24, 1);
  z-index: 2;
}

#symbolSvg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#grid line {
  stroke: var(--grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: opacity .32s ease;
}

.target-circle {
  fill: transparent;
  stroke: var(--target);
  stroke-width: 1.6;
  stroke-dasharray: 2.2 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .24s ease, stroke-dasharray .24s ease, opacity .32s ease;
}

.target-circle.locked {
  stroke: var(--target-locked);
  stroke-dasharray: none;
  stroke-width: 1.8;
}

#slotLabels text {
  fill: rgba(245, 241, 232, .72);
  font-size: 11px;
  letter-spacing: .13em;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .28s ease;
}

#slotLabels text.show {
  opacity: 1;
}

#finalMark {
  opacity: 0;
}

#finalMark.revealed {
  opacity: 1;
}

#finalMark path {
  fill: var(--fg);
  opacity: 0;
  transform-origin: 250px 250px;
  transition: fill .3s ease;
}

#finalMark.revealed path {
  animation: petalIn .58s cubic-bezier(.2, .85, .16, 1) forwards;
}

#finalMark.revealed #petalLeft { animation-delay: .08s; }
#finalMark.revealed #petalRight { animation-delay: .18s; }
#finalMark.revealed #petalTop { animation-delay: .28s; }

@keyframes petalIn {
  from { opacity: 0; transform: scale(.982); }
  to { opacity: 1; transform: scale(1); }
}

#zoomCore {
  fill: var(--fg);
  opacity: 0;
  transform-origin: 250px 250px;
  transition: opacity .22s ease;
}

#zoomCore.on {
  opacity: 1;
}

#piecesSvg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow: visible;
  z-index: 6;
  touch-action: none;
  transition: opacity .35s ease;
}

.piece-circle {
  fill: transparent;
  stroke: var(--piece);
  stroke-width: 2;
  cursor: grab;
  transition: stroke .18s ease, opacity .28s ease;
}

.piece-circle.dragging {
  stroke: var(--fg);
  cursor: grabbing;
}

.piece-circle.locked {
  opacity: 0;
  pointer-events: none;
}

#storyMessage,
#message {
  position: fixed;
  left: var(--page-x);
  width: min(760px, calc(100vw - (var(--page-x) * 2)));
  color: var(--fg);
  text-align: left;
  opacity: 0;
  pointer-events: none;
  z-index: 95;
}

#storyMessage {
  top: var(--story-top);
  transform: translateY(14px);
  transition: opacity .58s ease, transform .58s ease;
}

#storyMessage .story-copy {
  display: block;
  width: min(680px, 100%);
  color: rgba(245, 241, 232, .70);
  font-size: clamp(22px, 5.5vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.054em;
  font-weight: 360;
}

#storyMessage .story-line {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .72s ease, transform .72s ease;
}

#storyMessage .story-line + .story-line {
  margin-top: .48em;
}

#storyMessage.show {
  opacity: 1;
  transform: translateY(0);
}

#storyMessage.show-first .story-line-one,
#storyMessage.show-second .story-line-two {
  opacity: 1;
  transform: translateY(0);
}

#message {
  top: calc(var(--story-top) + clamp(96px, 14vh, 136px));
  transform: translateY(14px);
  transition:
    opacity .58s ease,
    transform 1.35s cubic-bezier(.76, 0, .24, 1),
    top 1.35s cubic-bezier(.76, 0, .24, 1),
    width 1.35s cubic-bezier(.76, 0, .24, 1);
}

#message .message-title {
  display: block;
  font-size: clamp(21px, 3.05vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.026em;
  font-weight: 430;
}

#message .brand-line {
  display: block;
}

#message .brand-line-two {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}

#message.show-line-two .brand-line-two {
  opacity: 1;
  transform: translateY(0);
}

#message.show {
  opacity: 1;
  transform: translateY(0);
}

body.completed #diagramTitle,
body.completed #dragInstruction {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

body.copy-phase #stage {
  opacity: .12;
  filter: blur(.2px);
}

body.copy-phase #piecesSvg {
  opacity: 0;
  pointer-events: none;
}

body.symbol-docked #stage {
  position: fixed;
  left: auto;
  right: var(--page-x);
  top: var(--final-top);
  width: var(--logo-size);
  opacity: 1;
  filter: none;
  transform: translate(0, 0);
  z-index: 96;
}

body.symbol-docked #grid,
body.symbol-docked #targetCircles,
body.symbol-docked #slotLabels,
body.symbol-docked #zoomCore {
  opacity: 0;
}

body.symbol-docked #finalMark {
  opacity: 1;
}

body.final-layout.symbol-docked #stage {
  opacity: .86;
  filter: none;
  transform: translate(0, 0);
}

body.final-layout:not(.symbol-docked) #stage {
  opacity: 0;
  filter: blur(2px);
  transform: translate(-50%, -50%) scale(.96);
}

body.final-layout #storyMessage {
  opacity: 0;
  transform: translateY(-18px);
}

body.final-layout #message {
  top: var(--final-top);
  width: min(560px, calc(100vw - (var(--page-x) * 2)));
  transform: translateY(0);
}

body.final-layout #message .message-title {
  font-size: clamp(21px, 3.05vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.026em;
}

#home {
  align-items: start;
  justify-items: start;
  background: transparent;
  color: var(--fg);
  padding: clamp(150px, 25vh, 220px) var(--page-x) max(32px, calc(22px + env(safe-area-inset-bottom)));
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 42;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.home-inner {
  width: min(1120px, 100%);
  min-height: calc(100dvh - clamp(150px, 25vh, 220px) - max(32px, calc(22px + env(safe-area-inset-bottom))));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.final-lead {
  width: min(1060px, 100%);
  margin: 0;
  color: rgba(245, 241, 232, .66);
  font-size: clamp(23px, 3.45vw, 46px);
  line-height: 1.18;
  letter-spacing: .012em;
  font-weight: 310;
  opacity: 0;
  transform: translateY(18px);
}

.final-lead span {
  display: block;
  width: max-content;
  max-width: 100%;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

.final-block {
  width: min(900px, 100%);
  margin-top: clamp(44px, 8vh, 86px);
  opacity: 0;
  transform: translateY(22px);
}

.final-block h2 {
  margin: 0 0 16px;
  color: rgba(245, 241, 232, .42);
  font-size: clamp(10px, 1.05vw, 12px);
  line-height: 1;
  letter-spacing: .17em;
  font-weight: 560;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
}

.final-services ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.final-services li {
  color: var(--fg);
  font-size: clamp(25px, 4.55vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 520;
  opacity: 0;
  transform: translateY(18px);
}

.final-services li + li {
  margin-top: .08em;
}

.final-cta {
  width: min(780px, 100%);
  margin-top: clamp(42px, 7vh, 76px);
}

.final-cta p {
  margin: 0;
  color: rgba(245, 241, 232, .72);
  font-size: clamp(24px, 4.2vw, 48px);
  line-height: 1;
  letter-spacing: -0.052em;
  font-weight: 430;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  min-height: 48px;
  padding: 14px 22px 15px;
  border: 1px solid rgba(245, 241, 232, .28);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1;
  letter-spacing: -0.018em;
  font-weight: 430;
  transition: border-color .22s ease, transform .22s ease, background .22s ease;
}

.cta-button:hover {
  border-color: rgba(245, 241, 232, .62);
  background: rgba(245, 241, 232, .05);
  transform: translateY(-1px);
}

.footer-meta {
  margin-top: auto;
  padding-top: clamp(54px, 10vh, 96px);
  font-size: clamp(12px, 1.14vw, 14px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(245, 241, 232, .55);
  opacity: 0;
  transform: translateY(22px);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgba(245, 241, 232, .58);
  text-decoration: none;
  transition: color .22s ease, transform .22s ease;
}

.social-links a:hover {
  color: rgba(245, 241, 232, .86);
  transform: translateY(-1px);
}

.social-links svg {
  display: block;
  width: 22px;
  height: 22px;
}

.social-links svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links a[aria-label="YouTube"] svg path:last-child {
  fill: currentColor;
  stroke: none;
}

.footer-meta strong {
  color: rgba(245, 241, 232, .78);
  font-weight: 620;
}

.footer-meta .cnpj {
  font-size: .82em;
  color: rgba(245, 241, 232, .38);
}

.contact-spacer {
  height: 11px;
}

#home.active .final-lead {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: .55s;
}

#home.active .final-lead span {
  animation: typeLine .92s steps(34, end) forwards;
}

#home.active .final-lead span:nth-child(1) { animation-delay: .82s; }
#home.active .final-lead span:nth-child(2) { animation-delay: 1.54s; }
#home.active .final-lead span:nth-child(3) { animation-delay: 2.26s; }
#home.active .final-lead span:nth-child(4) { animation-delay: 2.92s; }

#home.active .final-services {
  opacity: 1;
  transform: translateY(0);
}

#home.active .final-services h2 {
  animation: finalItemIn .72s cubic-bezier(.2, .85, .16, 1) forwards;
  animation-delay: 3.7s;
}

#home.active .final-services li {
  animation: finalItemIn .82s cubic-bezier(.2, .85, .16, 1) forwards;
}

#home.active .final-services li:nth-child(1) { animation-delay: 4.15s; }
#home.active .final-services li:nth-child(2) { animation-delay: 4.52s; }
#home.active .final-services li:nth-child(3) { animation-delay: 4.89s; }
#home.active .final-services li:nth-child(4) { animation-delay: 5.26s; }

#home.active .final-cta {
  animation: finalItemIn 1.0s cubic-bezier(.2, .85, .16, 1) forwards;
  animation-delay: 5.9s;
}

#home.active .footer-meta {
  animation: finalItemIn 1.0s cubic-bezier(.2, .85, .16, 1) forwards;
  animation-delay: 6.48s;
}

@keyframes typeLine {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes finalItemIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 720px) {
  :root {
    --stage-top: 54%;
    --stage-size: min(42vw, 500px);
    --page-x: clamp(56px, 11vw, 176px);
    --final-top: clamp(58px, 8.5vh, 92px);
    --story-top: 48%;
    --logo-size: clamp(42px, 5.2vw, 72px);
  }

  #diagramTitle {
    top: calc(var(--stage-top) - (var(--stage-size) / 2) - clamp(66px, 8vh, 96px));
    font-size: clamp(24px, 3.2vw, 39px);
  }

  #dragInstruction {
    bottom: max(30px, calc(22px + env(safe-area-inset-bottom)));
  }
}

@media (min-width: 1100px) {
  :root {
    --stage-top: 55%;
    --stage-size: min(34vw, 500px);
    --page-x: clamp(96px, 12vw, 190px);
    --story-top: 47%;
    --logo-size: clamp(46px, 4.2vw, 70px);
  }

  #diagramTitle {
    width: min(520px, var(--stage-size));
  }

  #home {
    padding-top: clamp(170px, 29vh, 245px);
  }

  .home-inner {
    min-height: calc(100dvh - clamp(170px, 29vh, 245px) - max(32px, calc(22px + env(safe-area-inset-bottom))));
  }
}

@media (max-height: 720px) {
  :root {
    --stage-top: 45%;
    --stage-size: min(62vw, 330px);
    --final-top: 42px;
    --story-top: 44%;
    --logo-size: clamp(34px, 8vw, 54px);
  }

  #diagramTitle {
    top: calc(var(--stage-top) - (var(--stage-size) / 2) - 54px);
    font-size: clamp(18px, 4.55vw, 28px);
  }

  #home {
    padding-top: 120px;
  }

  .home-inner {
    min-height: calc(100dvh - 120px - max(32px, calc(22px + env(safe-area-inset-bottom))));
  }

  .final-lead {
    font-size: clamp(21px, 3.2vw, 38px);
  }

  .final-block {
    margin-top: 34px;
  }

  .final-cta {
    margin-top: 30px;
  }
}

@media (max-width: 700px) {
  #intro h1 {
    font-size: clamp(30px, 8vw, 46px);
    letter-spacing: -.052em;
  }
}

@media (max-width: 430px) {
  :root {
    --page-x: 28px;
    --final-top: max(44px, calc(34px + env(safe-area-inset-top)));
    --stage-top: 50%;
    --stage-size: min(68vw, 350px);
    --story-top: 47%;
    --logo-size: clamp(36px, 9vw, 52px);
  }

  #diagramTitle {
    width: var(--stage-size);
    font-size: clamp(19px, 5.75vw, 25px);
    top: calc(var(--stage-top) - (var(--stage-size) / 2) - 62px);
  }

  #message {
    top: calc(var(--story-top) + 130px);
  }

  #storyMessage .story-copy {
    font-size: clamp(23px, 7.4vw, 31px);
  }

  #message .message-title {
    font-size: clamp(30px, 9.4vw, 40px);
  }

  body.final-layout #message {
    width: calc(100vw - 56px);
  }

  body.final-layout #message .message-title,
  #message .message-title {
    font-size: clamp(18px, 5.2vw, 24px);
  }

  #home {
    padding-top: 138px;
    padding-bottom: max(34px, calc(22px + env(safe-area-inset-bottom)));
  }

  .home-inner {
    min-height: calc(100dvh - 138px - max(34px, calc(22px + env(safe-area-inset-bottom))));
  }

  .final-lead {
    font-size: clamp(19px, 5.15vw, 24px);
    line-height: 1.22;
    letter-spacing: .006em;
  }

  .final-lead span {
    width: 100%;
    white-space: normal;
  }

  .final-block {
    margin-top: 38px;
  }

  .final-block h2 {
    margin-bottom: 13px;
    font-size: 10.5px;
  }

  .final-services li {
    font-size: clamp(25px, 8.4vw, 36px);
  }

  .final-cta p {
    font-size: clamp(20px, 6.1vw, 27px);
  }

  .footer-meta {
    font-size: 12.5px;
  }
}


/* v8 ajustes finais */
#intro {
  place-items: center start;
  padding: max(34px, calc(28px + env(safe-area-inset-top))) var(--page-x) max(34px, calc(24px + env(safe-area-inset-bottom)));
  text-align: left;
}

.intro-inner {
  width: min(980px, 100%);
}

#intro h1.intro-title {
  margin: 0;
  font-size: clamp(76px, 16vw, 172px);
  line-height: .82;
  letter-spacing: -0.072em;
  font-weight: 460;
}

#intro h1.intro-title span {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  animation: introWordIn .9s cubic-bezier(.2, .85, .16, 1) forwards;
}

#intro h1.intro-title span:nth-child(2) {
  animation-delay: .54s;
}

.intro-subtitle {
  width: min(680px, 100%);
  margin: clamp(24px, 4vh, 40px) 0 0;
  color: rgba(245, 241, 232, .58);
  font-size: clamp(18px, 3.9vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.034em;
  font-weight: 330;
  opacity: 0;
  transform: translateY(16px);
  animation: introWordIn .9s cubic-bezier(.2, .85, .16, 1) forwards;
  animation-delay: 1.16s;
}

#startBtn {
  margin-top: clamp(34px, 5.5vh, 56px);
  opacity: 0;
  transform: translateY(14px);
  animation: introWordIn .8s cubic-bezier(.2, .85, .16, 1) forwards;
  animation-delay: 1.86s;
}

@keyframes introWordIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* evita estouro lateral no texto digitado */
.final-lead span {
  width: 100%;
  max-width: 100%;
  white-space: normal;
}

/* mantém a frase de marca com a mesma escala antes e depois de subir */
#message .message-title,
body.final-layout #message .message-title {
  font-size: clamp(21px, 3.05vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.026em;
}

/* telefone não aparece mais como link azul; WhatsApp fica nas redes */
.footer-meta a,
.footer-meta a:visited {
  color: inherit;
}

@media (max-width: 700px) {
  #intro h1.intro-title {
    font-size: clamp(72px, 17.8vw, 112px);
    line-height: .83;
    letter-spacing: -0.074em;
  }

  .intro-subtitle {
    width: min(560px, 92%);
    margin-top: 28px;
    font-size: clamp(19px, 5.3vw, 29px);
    line-height: 1.06;
  }
}

@media (max-width: 430px) {
  #message .message-title,
  body.final-layout #message .message-title {
    font-size: clamp(18px, 5.2vw, 24px);
    line-height: 1.08;
    letter-spacing: -0.028em;
  }

  .social-links {
    gap: 12px;
  }
}


/* v9 ajuste fino do texto cinza */
.final-lead {
  width: min(920px, 100%);
  color: rgba(245, 241, 232, .58);
  font-size: clamp(24px, 3.05vw, 42px);
  line-height: 1.16;
  letter-spacing: .018em;
  font-weight: 300;
}

.final-lead span {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

@media (max-width: 700px) {
  .final-lead {
    width: min(360px, 100%);
    font-size: clamp(27px, 8.35vw, 37px);
    line-height: 1.11;
    letter-spacing: .012em;
  }
}

@media (max-width: 390px) {
  .final-lead {
    font-size: clamp(25px, 8vw, 33px);
  }
}


/* v10: texto cinza sem corte + movimento mais fluido do símbolo */
body.symbol-docked #stage {
  position: absolute;
  left: calc(100vw - var(--page-x) - (var(--logo-size) / 2));
  right: auto;
  top: calc(var(--final-top) + (var(--logo-size) / 2));
  width: var(--logo-size);
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
  z-index: 96;
}

.final-lead {
  width: min(940px, 100%);
}

@media (max-width: 700px) {
  .final-lead {
    width: min(320px, calc(100vw - (var(--page-x) * 2)));
    font-size: clamp(24px, 7.8vw, 34px);
    line-height: 1.10;
    letter-spacing: .01em;
  }

  .final-lead span {
    max-width: 100%;
  }
}


/* v11: diagramação do texto cinza + ordem de animação mais elegante */
.final-lead {
  width: min(980px, 100%);
  font-size: clamp(23px, 3vw, 40px);
  line-height: 1.14;
  letter-spacing: .012em;
  font-weight: 300;
}

.final-lead span {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

/* primeiro revela o trecho final, depois o resto */
#home.active .final-lead span:nth-child(5) { animation-delay: .82s; }
#home.active .final-lead span:nth-child(6) { animation-delay: 1.48s; }
#home.active .final-lead span:nth-child(1) { animation-delay: 2.28s; }
#home.active .final-lead span:nth-child(2) { animation-delay: 2.94s; }
#home.active .final-lead span:nth-child(3) { animation-delay: 3.60s; }
#home.active .final-lead span:nth-child(4) { animation-delay: 4.26s; }

#home.active .final-services h2 { animation-delay: 5.05s; }
#home.active .final-services li:nth-child(1) { animation-delay: 5.45s; }
#home.active .final-services li:nth-child(2) { animation-delay: 5.82s; }
#home.active .final-services li:nth-child(3) { animation-delay: 6.19s; }
#home.active .final-services li:nth-child(4) { animation-delay: 6.56s; }
#home.active .final-cta { animation-delay: 7.14s; }
#home.active .footer-meta { animation-delay: 7.72s; }

@media (max-width: 430px) {
  .final-lead {
    width: calc(100vw - 56px);
    font-size: clamp(18px, 4.8vw, 22px);
    line-height: 1.20;
    letter-spacing: .004em;
  }

  .final-lead span {
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  .final-lead {
    width: calc(100vw - 56px);
    font-size: 18px;
    line-height: 1.20;
  }
}


/* v12: texto cinza sem comer letras, maior e com entrada em blocos */
.final-lead {
  width: min(980px, 100%);
  color: rgba(245, 241, 232, .58);
  font-size: clamp(25px, 3.25vw, 44px);
  line-height: 1.13;
  letter-spacing: .006em;
  font-weight: 300;
}

.final-lead span {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  clip-path: none;
  opacity: 0;
  transform: translateY(12px);
}

/* anula o efeito de digitação antigo que estava cortando caracteres */
#home.active .final-lead span {
  animation-name: leadLineIn;
  animation-duration: .86s;
  animation-timing-function: cubic-bezier(.2, .85, .16, 1);
  animation-fill-mode: forwards;
}

/* entra primeiro o trecho final, depois a construção de cima */
#home.active .final-lead span:nth-child(5) { animation-delay: .75s; }
#home.active .final-lead span:nth-child(6) { animation-delay: 1.28s; }
#home.active .final-lead span:nth-child(1) { animation-delay: 2.08s; }
#home.active .final-lead span:nth-child(2) { animation-delay: 2.58s; }
#home.active .final-lead span:nth-child(3) { animation-delay: 3.08s; }
#home.active .final-lead span:nth-child(4) { animation-delay: 3.58s; }

@keyframes leadLineIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* puxa os serviços um pouco depois, respeitando a nova cadência */
#home.active .final-services h2 { animation-delay: 4.55s; }
#home.active .final-services li:nth-child(1) { animation-delay: 4.95s; }
#home.active .final-services li:nth-child(2) { animation-delay: 5.32s; }
#home.active .final-services li:nth-child(3) { animation-delay: 5.69s; }
#home.active .final-services li:nth-child(4) { animation-delay: 6.06s; }
#home.active .final-cta { animation-delay: 6.72s; }
#home.active .footer-meta { animation-delay: 7.28s; }

@media (max-width: 430px) {
  .final-lead {
    width: calc(100vw - 56px);
    font-size: clamp(26px, 7.25vw, 31px);
    line-height: 1.10;
    letter-spacing: .002em;
  }
}

@media (max-width: 390px) {
  .final-lead {
    font-size: clamp(24px, 7vw, 28px);
  }
}


/* v13: assinatura Felipe Argila + título de compartilhamento */
.site-signature {
  position: fixed;
  left: var(--page-x);
  top: max(28px, calc(20px + env(safe-area-inset-top)));
  z-index: 120;
  color: rgba(245, 241, 232, .74);
  text-decoration: none;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1;
  letter-spacing: .03em;
  font-weight: 430;
  opacity: .82;
  pointer-events: auto;
}

.site-signature:hover {
  opacity: 1;
}

@media (max-width: 430px) {
  .site-signature {
    top: max(24px, calc(16px + env(safe-area-inset-top)));
    font-size: 12px;
    letter-spacing: .025em;
  }
}


/* v14: texto cinza com quebras intencionais + redes sociais tipográficas */
.final-lead {
  width: min(820px, 100%);
  color: rgba(245, 241, 232, .58);
  font-size: clamp(27px, 3.35vw, 44px);
  line-height: 1.10;
  letter-spacing: .002em;
  font-weight: 300;
}

.final-lead span {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  clip-path: none;
  opacity: 0;
  transform: translateY(12px);
}

/* remove de vez a máscara antiga que comia letras */
#home.active .final-lead span {
  animation-name: leadLineIn;
  animation-duration: .82s;
  animation-timing-function: cubic-bezier(.2, .85, .16, 1);
  animation-fill-mode: forwards;
}

/* entra primeiro o final, depois completa a leitura acima */
#home.active .final-lead span:nth-child(5) { animation-delay: .74s; }
#home.active .final-lead span:nth-child(6) { animation-delay: 1.18s; }
#home.active .final-lead span:nth-child(7) { animation-delay: 1.62s; }
#home.active .final-lead span:nth-child(1) { animation-delay: 2.42s; }
#home.active .final-lead span:nth-child(2) { animation-delay: 2.88s; }
#home.active .final-lead span:nth-child(3) { animation-delay: 3.34s; }
#home.active .final-lead span:nth-child(4) { animation-delay: 3.80s; }

@keyframes leadLineIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#home.active .final-services h2 { animation-delay: 4.72s; }
#home.active .final-services li:nth-child(1) { animation-delay: 5.12s; }
#home.active .final-services li:nth-child(2) { animation-delay: 5.49s; }
#home.active .final-services li:nth-child(3) { animation-delay: 5.86s; }
#home.active .final-services li:nth-child(4) { animation-delay: 6.23s; }
#home.active .final-cta { animation-delay: 6.90s; }
#home.active .footer-meta { animation-delay: 7.46s; }

.social-links {
  gap: 10px;
  margin-bottom: 24px;
}

.social-links a {
  width: auto;
  height: auto;
  min-width: 28px;
  color: rgba(245, 241, 232, .52);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;
  font-weight: 420;
  text-transform: uppercase;
}

.social-links a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border: 1px solid rgba(245, 241, 232, .24);
  border-radius: 999px;
  padding: 0 7px;
}

.social-links a[aria-label="LinkedIn"] {
  text-transform: none;
}

.social-links a:hover {
  color: rgba(245, 241, 232, .86);
}

.social-links svg {
  display: none;
}

@media (max-width: 430px) {
  .final-lead {
    width: calc(100vw - 56px);
    font-size: clamp(30px, 8.25vw, 35px);
    line-height: 1.08;
    letter-spacing: -.006em;
  }

  .final-lead span {
    white-space: nowrap;
  }

  .social-links {
    gap: 9px;
  }

  .social-links a span {
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
  }
}

@media (max-width: 390px) {
  .final-lead {
    font-size: clamp(28px, 7.65vw, 32px);
  }
}


/* v15: CTA simplificado */
.final-cta {
  margin-top: clamp(40px, 7vh, 72px);
}

.final-cta p {
  display: none;
}

.cta-button {
  min-height: 54px;
  padding: 16px 24px 17px;
  font-size: clamp(15px, 1.55vw, 19px);
}


/* v16: redes sociais com SVGs reais */
.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2px;
  margin-bottom: 24px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(245, 241, 232, .48);
  text-decoration: none;
  transition: color .22s ease, transform .22s ease, opacity .22s ease;
}

.social-links a:hover {
  color: rgba(245, 241, 232, .88);
  transform: translateY(-1px);
}

.social-links svg {
  width: 22px;
  height: 22px;
  display: block;
}

.social-links svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links a[aria-label="YouTube"] svg path:last-child {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 430px) {
  .social-links {
    gap: 12px;
    margin-bottom: 22px;
  }

  .social-links a {
    width: 26px;
    height: 26px;
  }

  .social-links svg {
    width: 20px;
    height: 20px;
  }
}


/* v17: ajustes solicitados */
#diagramTitle {
  width: min(620px, calc(100vw - (var(--page-x) * 2)));
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245, 241, 232, .88);
  font-size: clamp(18px, 4.7vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 360;
}

#diagramTitle span {
  display: block;
}

#diagramTitle span:nth-child(1) {
  padding-right: clamp(18px, 8vw, 76px);
}

#diagramTitle span:nth-child(2) {
  color: rgba(245, 241, 232, .70);
}

#diagramTitle span:nth-child(3) {
  padding-left: clamp(18px, 8vw, 76px);
  color: rgba(245, 241, 232, .88);
}

#slotLabels text.show {
  opacity: 1;
  animation: slotWordSettle 1.38s cubic-bezier(.2,.85,.16,1) forwards;
}

@keyframes slotWordSettle {
  0% { opacity: 0; font-size: 34px; letter-spacing: -0.026em; }
  18% { opacity: 1; font-size: 34px; letter-spacing: -0.026em; }
  58% { opacity: 1; font-size: 34px; letter-spacing: -0.026em; }
  100% { opacity: 1; font-size: 11px; letter-spacing: .13em; }
}

#storyMessage .story-copy {
  width: min(760px, 100%);
}

#storyMessage .story-line-one {
  line-height: 1.04;
}

.final-services ul {
  width: min(1020px, 100%);
}

.final-services li {
  display: flex;
  align-items: baseline;
  gap: .28em;
}

.final-services li small {
  color: rgba(245, 241, 232, .42);
  font-size: .24em;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 520;
  text-transform: uppercase;
  transform: translateY(-.18em);
}

.cta-button {
  background: var(--fg);
  color: #080808;
  border-color: var(--fg);
  font-weight: 520;
  min-height: 56px;
  padding: 17px 25px 18px;
}

.cta-button:hover {
  background: #fff;
  color: #050505;
  border-color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 430px) {
  #diagramTitle {
    width: min(340px, calc(100vw - 52px));
    font-size: clamp(18px, 5.25vw, 23px);
    line-height: 1.08;
  }

  #diagramTitle span:nth-child(1) { padding-right: 22px; }
  #diagramTitle span:nth-child(3) { padding-left: 22px; }

  @keyframes slotWordSettle {
    0% { opacity: 0; font-size: 26px; letter-spacing: -0.026em; }
    18% { opacity: 1; font-size: 26px; letter-spacing: -0.026em; }
    58% { opacity: 1; font-size: 26px; letter-spacing: -0.026em; }
    100% { opacity: 1; font-size: 9.5px; letter-spacing: .11em; }
  }

  .final-services li {
    flex-wrap: wrap;
    gap: .18em .34em;
  }

  .final-services li small {
    font-size: .28em;
  }

  .cta-button {
    min-height: 52px;
    padding: 15px 21px 16px;
  }
}


/* v18: refino mobile/desktop do diagrama, labels e serviços */

/* Texto do diagrama: mais limpo e afastado do grid */
#diagramTitle {
  top: clamp(170px, 25vh, 260px);
  width: min(720px, calc(100vw - 48px));
  font-size: clamp(18px, 3.1vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.036em;
  z-index: 34;
}

/* Diagrama um pouco mais baixo no desktop */
@media (min-width: 720px) {
  :root {
    --stage-top: 61%;
    --stage-size: min(38vw, 500px);
  }

  #diagramTitle {
    top: clamp(170px, 24vh, 250px);
    width: min(760px, 70vw);
    font-size: clamp(20px, 2vw, 30px);
  }
}

@media (min-width: 1100px) {
  :root {
    --stage-top: 62%;
    --stage-size: min(32vw, 500px);
  }

  #diagramTitle {
    top: clamp(175px, 25vh, 255px);
    width: min(760px, 64vw);
  }
}

/* Mobile: texto sobe, diagrama desce, sem sobreposição */
@media (max-width: 430px) {
  :root {
    --stage-top: 58%;
    --stage-size: min(76vw, 360px);
  }

  #diagramTitle {
    top: max(188px, calc(118px + env(safe-area-inset-top)));
    width: min(360px, calc(100vw - 36px));
    font-size: clamp(18px, 4.72vw, 21px);
    line-height: 1.04;
    letter-spacing: -0.034em;
  }

  #diagramTitle span:nth-child(1),
  #diagramTitle span:nth-child(3) {
    padding-left: 0;
    padding-right: 0;
  }

  #diagramTitle span:nth-child(2) {
    color: rgba(245, 241, 232, .70);
  }

  #dragInstruction {
    bottom: max(70px, calc(56px + env(safe-area-inset-bottom)));
  }
}

/* Palavra grande ao encaixar: overlay HTML, funciona bem no mobile */
.slot-pop {
  position: fixed;
  transform: translate(-50%, -50%) scale(.92);
  z-index: 80;
  color: var(--fg);
  font-size: clamp(30px, 8vw, 58px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 430;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
}

.slot-pop.go {
  animation: slotPopSettle 1.26s cubic-bezier(.2,.85,.16,1) forwards;
}

@keyframes slotPopSettle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.88);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.62);
  }
}

/* Deixa o SVG final discreto, enquanto o overlay faz o impacto */
#slotLabels text.show {
  animation: slotWordSmallIn .56s ease forwards;
  animation-delay: .88s;
}

@keyframes slotWordSmallIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    font-size: 11px;
    letter-spacing: .13em;
  }
}

/* Serviços: aguardar todo o texto cinza antes de entrar */
#home.active .final-services h2 { animation-delay: 6.55s; }
#home.active .final-services li:nth-child(1) { animation-delay: 7.00s; }
#home.active .final-services li:nth-child(2) { animation-delay: 7.38s; }
#home.active .final-services li:nth-child(3) { animation-delay: 7.76s; }
#home.active .final-services li:nth-child(4) { animation-delay: 8.14s; }
#home.active .final-services li:nth-child(5) { animation-delay: 8.52s; }
#home.active .final-cta { animation-delay: 9.22s; }
#home.active .footer-meta { animation-delay: 9.92s; }

/* Tecnologia ao lado, pequeno e estável */
.final-services li {
  display: block;
}

.final-services .service-tag {
  display: inline-block;
  margin-left: .42em;
  color: rgba(245, 241, 232, .42);
  font-size: .22em;
  line-height: 1;
  letter-spacing: .14em;
  font-weight: 560;
  text-transform: uppercase;
  vertical-align: super;
  transform: translateY(-.08em);
}

/* Pequeno ajuste para a lista maior não parecer pesada no mobile */
@media (max-width: 430px) {
  .final-services li {
    font-size: clamp(26px, 8.1vw, 34px);
    line-height: 1.02;
  }

  .final-services .service-tag {
    margin-left: .36em;
    font-size: .25em;
    letter-spacing: .12em;
  }
}



/* v19: palavra vinculada ao slot fixo + CTA mais próximo da lista */
.final-cta {
  margin-top: clamp(22px, 3.8vh, 42px);
}

#home.active .final-cta {
  animation-delay: 9.02s;
}

#home.active .footer-meta {
  animation-delay: 9.62s;
}

@media (max-width: 430px) {
  .final-cta {
    margin-top: 24px;
  }
}


/* v20: esferas até o chão + instrução em badge + título mais alto */
#diagramTitle {
  top: clamp(128px, 18vh, 206px);
}

#dragInstruction {
  width: auto;
  max-width: calc(100vw - 48px);
  bottom: max(20px, calc(12px + env(safe-area-inset-bottom)));
  padding: 9px 14px 10px;
  color: rgba(245, 241, 232, .76);
  background: rgba(3, 3, 3, .86);
  border: 1px solid rgba(245, 241, 232, .12);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .44);
  z-index: 38;
}

/* As esferas seguem atrás do badge */
#piecesSvg {
  z-index: 6;
}

@media (min-width: 720px) {
  #diagramTitle {
    top: clamp(118px, 16vh, 190px);
  }
}

@media (min-width: 1100px) {
  #diagramTitle {
    top: clamp(112px, 15vh, 180px);
  }
}

@media (max-width: 430px) {
  #diagramTitle {
    top: max(134px, calc(72px + env(safe-area-inset-top)));
  }

  #dragInstruction {
    bottom: max(16px, calc(10px + env(safe-area-inset-bottom)));
    padding: 8px 12px 9px;
    font-size: 12px;
  }
}

@media (max-height: 720px) {
  #diagramTitle {
    top: max(102px, calc(62px + env(safe-area-inset-top)));
  }
}


/* v21: ajuste final da palavra das esferas + diagrama um pouco mais alto */

/* diagrama um pouco mais acima, preservando o restante */
:root {
  --stage-top: 53%;
}

@media (min-width: 720px) {
  :root {
    --stage-top: 57%;
  }
}

@media (min-width: 1100px) {
  :root {
    --stage-top: 58%;
  }
}

@media (max-width: 430px) {
  :root {
    --stage-top: 55%;
  }
}

/* uma palavra por vez: grande, reduz e só então fixa no SVG */
.slot-pop {
  z-index: 92;
}

.slot-pop.go {
  animation: slotPopSingleWord 1.42s cubic-bezier(.2,.85,.16,1) forwards;
}

@keyframes slotPopSingleWord {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.90);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  84% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.42);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.34);
  }
}

#slotLabels text.show {
  animation: fixedSlotLabelIn .22s ease forwards !important;
  animation-delay: 0s !important;
}

@keyframes fixedSlotLabelIn {
  from {
    opacity: 0;
    font-size: 11px;
    letter-spacing: .13em;
  }
  to {
    opacity: 1;
    font-size: 11px;
    letter-spacing: .13em;
  }
}

@media (max-width: 430px) {
  .slot-pop {
    font-size: clamp(31px, 9vw, 42px);
  }
}


/* v22: diagrama mais alto + redução da palavra até o ponto final */

/* sobe um pouco mais o diagrama, mantendo-o abaixo da frase */
:root {
  --stage-top: 50.5%;
}

@media (min-width: 720px) {
  :root {
    --stage-top: 54.5%;
  }
}

@media (min-width: 1100px) {
  :root {
    --stage-top: 55.5%;
  }
}

@media (max-width: 430px) {
  :root {
    --stage-top: 52.5%;
  }
}

/* a palavra grande agora reduz exatamente para a escala final antes do label fixo entrar */
.slot-pop.go {
  animation: slotPopToFinal 1.28s cubic-bezier(.2,.85,.16,1) forwards !important;
}

@keyframes slotPopToFinal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.90);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  52% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  88% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.20);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.20);
  }
}

/* o label fixo entra no mesmo tamanho, sem parecer uma segunda palavra nova */
#slotLabels text.show {
  animation: fixedSlotLabelFinal .16s linear forwards !important;
  animation-delay: 0s !important;
}

@keyframes fixedSlotLabelFinal {
  from {
    opacity: 0;
    font-size: 11px;
    letter-spacing: .13em;
  }
  to {
    opacity: 1;
    font-size: 11px;
    letter-spacing: .13em;
  }
}

@media (max-width: 430px) {
  .slot-pop.go {
    animation-name: slotPopToFinalMobile !important;
  }

  @keyframes slotPopToFinalMobile {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.90);
    }
    14% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    52% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    88% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(.22);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.22);
    }
  }
}


/* v23: mesma fonte na palavra das esferas + badge branco com chamada sutil */
.slot-pop,
#slotLabels text {
  font-family: Degular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 430;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

.slot-pop {
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* mantém a palavra grande com a mesma "voz" do label final, apenas em escala maior */
.slot-pop.go {
  animation: slotPopToFinalSameFont 1.28s cubic-bezier(.2,.85,.16,1) forwards !important;
}

@keyframes slotPopToFinalSameFont {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.2);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(4.2);
  }
  52% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(4.2);
  }
  88% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 430px) {
  .slot-pop.go {
    animation-name: slotPopToFinalSameFontMobile !important;
  }

  @keyframes slotPopToFinalSameFontMobile {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(3.25);
    }
    14% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(3.25);
    }
    52% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(3.25);
    }
    88% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

#dragInstruction {
  white-space: nowrap;
  max-width: calc(100vw - 36px);
  color: #070707;
  background: #f5f1e8;
  border: 1px solid rgba(245, 241, 232, .82);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .38);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: instructionNudge 1.9s cubic-bezier(.2,.85,.16,1) 1.05s 3;
}

@keyframes instructionNudge {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  12% {
    transform: translateX(-50%) translateY(-2px) rotate(-.45deg);
  }
  24% {
    transform: translateX(-50%) translateY(1px) rotate(.45deg);
  }
  36% {
    transform: translateX(-50%) translateY(-1px) rotate(-.22deg);
  }
  48% {
    transform: translateX(-50%) translateY(0) rotate(0);
  }
}

body.completed #dragInstruction {
  animation: none;
}

@media (max-width: 430px) {
  #dragInstruction {
    font-size: 11.5px;
    padding: 8px 11px 9px;
    max-width: calc(100vw - 24px);
  }
}


/* v24: corrige palavra das esferas sem overflow, sem piscar e sem reaparecer */
.slot-pop,
#slotLabels text {
  font-family: inherit;
  font-synthesis: none;
}

.slot-pop {
  font-size: clamp(28px, 5.2vw, 42px);
  line-height: 1;
  letter-spacing: -0.026em;
  font-weight: 430;
  text-transform: none;
  opacity: 0;
}

.slot-pop.go {
  animation: slotWordClean .96s cubic-bezier(.2,.85,.16,1) forwards !important;
}

@keyframes slotWordClean {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  68% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
  }
}

#slotLabels text.show {
  animation: slotLabelCleanIn .24s ease forwards !important;
  animation-delay: 0s !important;
}

@keyframes slotLabelCleanIn {
  from {
    opacity: 0;
    font-size: 11px;
    letter-spacing: .13em;
  }
  to {
    opacity: 1;
    font-size: 11px;
    letter-spacing: .13em;
  }
}

@media (max-width: 430px) {
  .slot-pop {
    font-size: clamp(25px, 7.1vw, 33px);
    max-width: 82vw;
    white-space: nowrap;
  }
}


/* v25: ajuste fino, uma única palavra reduz e fica fixa */
#slotLabels text,
#slotLabels text.show {
  opacity: 0 !important;
  animation: none !important;
}

.slot-pop {
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .13em;
  font-weight: 430;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) scale(3.45);
  transform-origin: center center;
  max-width: 88vw;
  white-space: nowrap;
}

.slot-pop.go {
  animation: slotWordSettleOne .98s cubic-bezier(.2,.85,.16,1) forwards !important;
}

@keyframes slotWordSettleOne {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.45);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3.45);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3.45);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

body.completed .slot-pop {
  opacity: 0;
  transition: opacity .32s ease;
}

@media (max-width: 430px) {
  .slot-pop {
    font-size: 9.5px;
    letter-spacing: .11em;
    transform: translate(-50%, -50%) scale(3.25);
  }

  .slot-pop.go {
    animation-name: slotWordSettleOneMobile !important;
  }

  @keyframes slotWordSettleOneMobile {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(3.25);
    }
    16% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(3.25);
    }
    58% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(3.25);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}


/* v26: palavra das esferas um pouco menor + limpeza ao revelar símbolo */
.slot-pop {
  transform: translate(-50%, -50%) scale(3.05);
}

.slot-pop.go {
  animation-name: slotWordSettleOneV26 !important;
}

@keyframes slotWordSettleOneV26 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.05);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3.05);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

body.completed .slot-pop,
body.final-layout .slot-pop {
  animation: none !important;
  opacity: 0 !important;
  pointer-events: none;
}

@media (max-width: 430px) {
  .slot-pop {
    transform: translate(-50%, -50%) scale(2.86);
  }

  .slot-pop.go {
    animation-name: slotWordSettleOneMobileV26 !important;
  }

  @keyframes slotWordSettleOneMobileV26 {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2.86);
    }
    16% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2.86);
    }
    58% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2.86);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}


/* v27: palavras permanecem com o símbolo branco antes de desaparecer */
body.completed .slot-pop.go {
  animation-play-state: running !important;
  opacity: 1;
}

body.completed .slot-pop {
  pointer-events: none;
}

body.completed .slot-pop.fade-out,
body.final-layout .slot-pop {
  opacity: 0 !important;
  transition: opacity .38s ease;
}


/* v28: corrige desaparecimento das palavras ao encaixar a última esfera */
body.completed .slot-pop.go:not(.fade-out) {
  opacity: 1 !important;
  animation: slotWordSettleOneV28 .98s cubic-bezier(.2,.85,.16,1) forwards !important;
  pointer-events: none;
}

@keyframes slotWordSettleOneV28 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.05);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3.05);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3.05);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

body.completed .slot-pop.go.fade-out {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity .42s ease !important;
}

body.final-layout .slot-pop {
  opacity: 0 !important;
  animation: none !important;
}

@media (max-width: 430px) {
  body.completed .slot-pop.go:not(.fade-out) {
    animation-name: slotWordSettleOneMobileV28 !important;
  }

  @keyframes slotWordSettleOneMobileV28 {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2.86);
    }
    16% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2.86);
    }
    58% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2.86);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}


/* v29: evita reanimar/aumentar as palavras quando a última esfera completa */
body.completed .slot-pop.go:not(.fade-out) {
  animation: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  pointer-events: none;
}

@media (max-width: 430px) {
  body.completed .slot-pop.go:not(.fade-out) {
    animation: none !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}


/* v30: elimina qualquer reanimação/pisca das palavras antes do símbolo mover */
.slot-pop.fade-out {
  animation: none !important;
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(1) !important;
  transition: opacity .46s ease !important;
}

body.completed .slot-pop,
body.completed .slot-pop.go,
body.completed .slot-pop.go:not(.fade-out),
body.completed .slot-pop.go.fade-out,
body.final-layout .slot-pop {
  animation: none !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 0 !important;
  transition: opacity .34s ease !important;
  pointer-events: none !important;
}


/* v32: instrução mais clara + alvos mais legíveis + acendimento durante arraste */
.target-circle {
  stroke: rgba(245, 241, 232, .26);
  stroke-width: 1.15;
  stroke-dasharray: 2.4 7.2;
}

body.dragging-piece .target-circle:not(.locked) {
  stroke: rgba(245, 241, 232, .58);
  stroke-width: 1.25;
  stroke-dasharray: 2.8 6.2;
}

.target-circle.locked {
  stroke: rgba(245, 241, 232, .82);
}

#dragInstruction {
  white-space: nowrap;
  color: rgba(245, 241, 232, .82);
  background: rgba(3, 3, 3, .88);
  border: 1px solid rgba(245, 241, 232, .18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .44);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.dragging-piece #dragInstruction {
  color: #070707;
  background: #f5f1e8;
  border-color: rgba(245, 241, 232, .82);
}

@media (max-width: 430px) {
  #dragInstruction {
    max-width: calc(100vw - 28px);
    font-size: 11.5px;
    padding: 8px 12px 9px;
  }
}


/* v34: condução clara por ordem + contraste de baixa luminosidade */

/* Pontilhado e grid um pouco mais aparentes */
#grid line {
  stroke: rgba(245, 241, 232, .075) !important;
  stroke-width: 1.05 !important;
}

.target-circle {
  stroke: rgba(245, 241, 232, .32) !important;
  stroke-width: 1.30 !important;
  stroke-dasharray: 2.7 6.4 !important;
}

/* Apenas a área da vez acende: Negócio > Cultura > Expressão > Experiência */
.target-circle.guided-target:not(.locked) {
  stroke: rgba(245, 241, 232, .72) !important;
  stroke-width: 1.52 !important;
  stroke-dasharray: 3 5.6 !important;
  animation: guidedTargetPulseV34 1.9s ease-in-out infinite;
}

body.dragging-piece .target-circle:not(.locked) {
  stroke: rgba(245, 241, 232, .32) !important;
  stroke-width: 1.30 !important;
}

body.dragging-piece .target-circle.guided-target:not(.locked) {
  stroke: rgba(245, 241, 232, .88) !important;
  stroke-width: 1.62 !important;
}

@keyframes guidedTargetPulseV34 {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: .70; }
}

/* A esfera sugerida dá um convite sutil */
.piece-circle {
  transform-box: fill-box;
  transform-origin: center;
}

.piece-circle.guided-piece:not(.locked):not(.dragging) {
  stroke: rgba(245, 241, 232, .96) !important;
  stroke-width: 2.25 !important;
  animation: guidedPieceKickV34 1.95s ease-in-out infinite;
}

@keyframes guidedPieceKickV34 {
  0%, 100% {
    transform: translateY(0) scale(1);
    stroke-opacity: .90;
  }
  18% {
    transform: translateY(-5px) scale(1.012);
    stroke-opacity: 1;
  }
  36% {
    transform: translateY(0) scale(1);
    stroke-opacity: .90;
  }
}

/* Dedo fantasma: ensina o gesto antes do primeiro toque */
.ghost-touch {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -17px;
  border: 1.4px solid rgba(245, 241, 232, .88);
  background: rgba(245, 241, 232, .12);
  border-radius: 999px;
  z-index: 74;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--from-x), var(--from-y)) scale(.82);
  box-shadow: 0 0 0 9px rgba(245, 241, 232, .06);
}

body.show-gesture .ghost-touch {
  animation: ghostDragGuideV34 2.45s cubic-bezier(.2, .85, .16, 1) forwards;
}

@keyframes ghostDragGuideV34 {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) scale(.82);
  }
  12% {
    opacity: .88;
    transform: translate(var(--from-x), var(--from-y)) scale(1);
  }
  26% {
    opacity: .88;
    transform: translate(var(--from-x), var(--from-y)) scale(.88);
  }
  72% {
    opacity: .88;
    transform: translate(var(--to-x), var(--to-y)) scale(.88);
  }
  88% {
    opacity: .52;
    transform: translate(var(--to-x), var(--to-y)) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(var(--to-x), var(--to-y)) scale(1.18);
  }
}

/* Labels finais menores, para não brigar com as linhas */
.slot-pop {
  font-size: 8.5px !important;
  letter-spacing: .105em !important;
}

.slot-pop.go {
  animation-name: slotWordSettleOneV34 !important;
}

@keyframes slotWordSettleOneV34 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.8);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Badge some assim que a 4ª esfera encaixa */
body.diagram-done #dragInstruction {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-8px) !important;
  pointer-events: none !important;
}

@media (max-width: 430px) {
  #grid line {
    stroke: rgba(245, 241, 232, .085) !important;
  }

  .target-circle {
    stroke: rgba(245, 241, 232, .36) !important;
    stroke-width: 1.38 !important;
  }

  .target-circle.guided-target:not(.locked) {
    stroke: rgba(245, 241, 232, .78) !important;
    stroke-width: 1.58 !important;
  }

  .slot-pop {
    font-size: 7.1px !important;
    letter-spacing: .095em !important;
  }

  .slot-pop.go {
    animation-name: slotWordSettleOneMobileV34 !important;
  }

  @keyframes slotWordSettleOneMobileV34 {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2.55);
    }
    16% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2.55);
    }
    58% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(2.55);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .ghost-touch {
    width: 31px;
    height: 31px;
    margin-left: -15.5px;
    margin-top: -15.5px;
  }
}


/* v35: esfera encaixada permanece como contorno sólido */
.target-circle.locked,
body.dragging-piece .target-circle.locked,
.target-circle.guided-target.locked {
  stroke: rgba(245, 241, 232, .88) !important;
  stroke-width: 1.72 !important;
  stroke-dasharray: none !important;
  stroke-opacity: 1 !important;
  animation: none !important;
}

.piece-circle.locked {
  opacity: 0;
  pointer-events: none;
}

/* reforço para evitar que o pontilhado de convite sobrescreva áreas já encaixadas */
body.has-guidance .target-circle.locked {
  stroke-dasharray: none !important;
}


/* v36: corrige flicker/deslocamento das esferas laterais ao cair */
.piece-circle,
.piece-circle.guided-piece,
.piece-circle.guided-piece:not(.locked):not(.dragging) {
  transform: none !important;
  transform-box: initial !important;
  transform-origin: initial !important;
}

/* mantém o convite visual sem mover a geometria do SVG */
.piece-circle.guided-piece:not(.locked):not(.dragging) {
  stroke: rgba(245, 241, 232, .96) !important;
  stroke-width: 2.25 !important;
  animation: guidedPiecePulseV36 1.85s ease-in-out infinite !important;
}

@keyframes guidedPiecePulseV36 {
  0%, 100% {
    stroke-opacity: .86;
  }
  48% {
    stroke-opacity: 1;
  }
}

/* evita qualquer transição visual estranha enquanto as esferas ainda estão pingando */
.piece-circle {
  transition: stroke .18s ease, opacity .28s ease, stroke-opacity .18s ease;
}


/* v37: queda das esferas sem deslocamento lateral */
.piece-circle {
  transform: none !important;
}

/* evita que qualquer animação de convite mova a geometria da esfera */
.piece-circle.guided-piece:not(.locked):not(.dragging) {
  transform: none !important;
}


/* v38: evita snap lateral em telas estreitas */
.piece-circle {
  transform: none !important;
}


/* v39: cor de teste no pontilhado guia aceso */
.target-circle.guided-target:not(.locked),
body.dragging-piece .target-circle.guided-target:not(.locked) {
  stroke: #F0FA73 !important;
}


/* v40: pontilhado guia só acende quando a esfera está pressionada/arrastando */
.target-circle.guided-target:not(.locked) {
  stroke: rgba(245, 241, 232, .36) !important;
  stroke-width: 1.38 !important;
  stroke-dasharray: 2.7 6.4 !important;
  animation: none !important;
}

body.dragging-piece .target-circle.guided-target:not(.locked) {
  stroke: #F0FA73 !important;
  stroke-width: 1.62 !important;
  stroke-dasharray: 3 5.6 !important;
  animation: guidedTargetPulseV34 1.9s ease-in-out infinite !important;
}

body.dragging-piece .target-circle:not(.guided-target):not(.locked) {
  stroke: rgba(245, 241, 232, .32) !important;
  stroke-width: 1.30 !important;
  stroke-dasharray: 2.7 6.4 !important;
  animation: none !important;
}


/* v41: cor de teste no pontilhado guia aceso */
body.dragging-piece .target-circle.guided-target:not(.locked) {
  stroke: #7FC0FA !important;
}


/* v42: leitura guiada antes da interação */
body.diagram-reading #stage,
body.diagram-reading #piecesSvg,
body.diagram-reading #dragInstruction,
body.diagram-reading .ghost-touch {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.diagram-reading #diagramTitle {
  top: 50% !important;
  left: 50% !important;
  width: min(680px, calc(100vw - 56px)) !important;
  transform: translate(-50%, -50%) !important;
  text-align: left;
  font-size: clamp(28px, 7.2vw, 58px);
  line-height: .95;
  letter-spacing: -0.06em;
  z-index: 80;
}

body.diagram-reading #diagramTitle span {
  opacity: 0;
  transform: translateY(14px);
  animation: diagramLineReadV42 .72s cubic-bezier(.2, .85, .16, 1) forwards;
}

body.diagram-reading #diagramTitle span:nth-child(1) { animation-delay: .30s; }
body.diagram-reading #diagramTitle span:nth-child(2) { animation-delay: 1.05s; }
body.diagram-reading #diagramTitle span:nth-child(3) { animation-delay: 1.80s; }
body.diagram-reading #diagramTitle span:nth-child(4) { animation-delay: 2.55s; }

@keyframes diagramLineReadV42 {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* antes da leitura acabar, nada interativo aparece */
body:not(.diagram-live):not(.completed):not(.copy-phase):not(.symbol-docked):not(.final-layout) #stage,
body:not(.diagram-live):not(.completed):not(.copy-phase):not(.symbol-docked):not(.final-layout) #piecesSvg,
body:not(.diagram-live):not(.completed):not(.copy-phase):not(.symbol-docked):not(.final-layout) #dragInstruction {
  opacity: 0;
  pointer-events: none;
}

/* quando a frase assume a posição atual, o diagrama entra junto */
body.diagram-live #stage {
  animation: diagramStageInV42 .72s ease forwards;
}

body.diagram-live #dragInstruction {
  animation: diagramBadgeInV42 .62s ease .25s both;
}

@keyframes diagramStageInV42 {
  from {
    opacity: 0;
    filter: blur(1.6px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

@keyframes diagramBadgeInV42 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

body.diagram-live #diagramTitle span {
  opacity: 1;
  transform: none;
}

/* garante que o texto volte para a posição já aprovada com transição suave */
#diagramTitle {
  transition:
    opacity .45s ease,
    transform .78s cubic-bezier(.2, .85, .16, 1),
    top .78s cubic-bezier(.2, .85, .16, 1),
    width .78s cubic-bezier(.2, .85, .16, 1),
    font-size .78s cubic-bezier(.2, .85, .16, 1);
}


/* v43: leitura inicial com a mesma diagramação do título final + sensação de scroll/revelação */

/* ruído/pontinhos claros para dar percepção de deslocamento vertical */
#experience::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle, rgba(245, 241, 232, .20) 0 1px, transparent 1.15px),
    radial-gradient(circle, rgba(245, 241, 232, .10) 0 1px, transparent 1.2px);
  background-size: 42px 42px, 67px 67px;
  background-position: 0 0, 18px 30px;
  transition: opacity .42s ease;
}

body.diagram-reading #experience::before,
body.diagram-live #experience::before {
  opacity: .18;
  animation: readingNoiseScrollV43 4.6s linear forwards;
}

@keyframes readingNoiseScrollV43 {
  from {
    background-position: 0 80px, 18px 120px;
  }
  to {
    background-position: 0 -180px, 18px -240px;
  }
}

/* o texto aparece no centro mantendo a MESMA diagramação da posição final */
body.diagram-reading #diagramTitle {
  top: 50% !important;
  left: 50% !important;
  width: var(--stage-size) !important;
  transform: translate(-50%, -50%) !important;
  text-align: left !important;
  font-size: clamp(19px, 5.35vw, 30px) !important;
  line-height: .94 !important;
  letter-spacing: -0.058em !important;
  font-weight: 410 !important;
  z-index: 80 !important;
}

body.diagram-reading #diagramTitle span {
  opacity: 0;
  transform: translateY(10px);
  animation: diagramLineReadV43 .68s cubic-bezier(.2, .85, .16, 1) forwards;
}

body.diagram-reading #diagramTitle span:nth-child(1) { animation-delay: .28s; }
body.diagram-reading #diagramTitle span:nth-child(2) { animation-delay: .90s; }
body.diagram-reading #diagramTitle span:nth-child(3) { animation-delay: 1.52s; }
body.diagram-reading #diagramTitle span:nth-child(4) { animation-delay: 2.14s; }

@keyframes diagramLineReadV43 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ao sair da leitura, o texto "rola" para a posição atual já aprovada */
body.diagram-live #diagramTitle {
  animation: diagramTitleSettleV43 .92s cubic-bezier(.2, .85, .16, 1) both;
}

@keyframes diagramTitleSettleV43 {
  from {
    filter: blur(.35px);
  }
  to {
    filter: none;
  }
}

/* diagrama revelado, não apenas aparecido */
body.diagram-reading #stage {
  opacity: 0 !important;
  clip-path: inset(0 0 100% 0);
}

body.diagram-live #stage {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0);
  animation: diagramRevealV43 .92s cubic-bezier(.2, .85, .16, 1) .18s both;
}

@keyframes diagramRevealV43 {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    filter: blur(1.2px);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}

/* badge só entra depois do diagrama revelar */
body.diagram-live #dragInstruction {
  animation: diagramBadgeInV43 .52s ease .74s both !important;
}

@keyframes diagramBadgeInV43 {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* quando a etapa interativa começa, o ruído some limpo */
body.diagram-live:not(.diagram-reading) #experience::before {
  animation: readingNoiseScrollV43 1.2s linear forwards;
}

/* mobile: mantém a mesma proporção do título atual, só centralizado na leitura */
@media (max-width: 430px) {
  body.diagram-reading #diagramTitle {
    width: var(--stage-size) !important;
    font-size: clamp(19px, 5.35vw, 30px) !important;
  }
}


/* v44: movimento contínuo do texto, sem sumir/reaparecer */
body.diagram-reading.diagram-moving #diagramTitle {
  top: calc(var(--stage-top) - (var(--stage-size) / 2) - clamp(74px, 10vh, 104px)) !important;
  left: 50% !important;
  width: var(--stage-size) !important;
  transform: translateX(-50%) !important;
  text-align: left !important;
  font-size: clamp(19px, 5.35vw, 30px) !important;
  line-height: .94 !important;
  letter-spacing: -0.058em !important;
  font-weight: 410 !important;
  opacity: 1 !important;
  transition:
    top .95s cubic-bezier(.2, .85, .16, 1),
    transform .95s cubic-bezier(.2, .85, .16, 1),
    width .95s cubic-bezier(.2, .85, .16, 1),
    opacity .35s ease,
    filter .45s ease !important;
}

body.diagram-reading.diagram-moving #diagramTitle span,
body.diagram-moving #diagramTitle span {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* enquanto o texto desliza, o diagrama é revelado por baixo */
body.diagram-reading.diagram-moving #stage,
body.diagram-live #stage {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0) !important;
  pointer-events: none;
}

/* mantém o ruído durante o deslizamento e apaga depois */
body.diagram-moving #experience::before {
  opacity: .16;
}

body.diagram-live:not(.diagram-reading) #experience::before {
  opacity: 0;
  transition: opacity .65s ease;
}

@media (max-width: 430px) {
  body.diagram-reading.diagram-moving #diagramTitle {
    top: max(134px, calc(72px + env(safe-area-inset-top))) !important;
    width: var(--stage-size) !important;
    font-size: clamp(19px, 5.35vw, 30px) !important;
  }
}

@media (min-width: 720px) {
  body.diagram-reading.diagram-moving #diagramTitle {
    top: clamp(118px, 16vh, 190px) !important;
  }
}

@media (min-width: 1100px) {
  body.diagram-reading.diagram-moving #diagramTitle {
    top: clamp(112px, 15vh, 180px) !important;
  }
}


/* v45: o mesmo texto desliza até a posição final, sem troca de diagramação */
:root {
  --diagram-title-final-top: clamp(128px, 18vh, 206px);
}

@media (min-width: 720px) {
  :root {
    --diagram-title-final-top: clamp(118px, 16vh, 190px);
  }
}

@media (min-width: 1100px) {
  :root {
    --diagram-title-final-top: clamp(112px, 15vh, 180px);
  }
}

@media (max-width: 430px) {
  :root {
    --diagram-title-final-top: max(134px, calc(72px + env(safe-area-inset-top)));
  }
}

@media (max-height: 720px) {
  :root {
    --diagram-title-final-top: max(102px, calc(62px + env(safe-area-inset-top)));
  }
}

/* fixa a diagramação final como a única diagramação do texto */
#diagramTitle,
body.diagram-reading #diagramTitle,
body.diagram-reading.diagram-moving #diagramTitle,
body.diagram-live #diagramTitle {
  top: var(--diagram-title-final-top) !important;
  left: 50% !important;
  width: var(--stage-size) !important;
  text-align: left !important;
  font-size: clamp(19px, 5.35vw, 30px) !important;
  line-height: .94 !important;
  letter-spacing: -0.058em !important;
  font-weight: 410 !important;
  opacity: 1 !important;
  z-index: 80 !important;
  animation: none !important;
  transition:
    transform 1.02s cubic-bezier(.2, .85, .16, 1),
    opacity .35s ease,
    filter .45s ease !important;
}

/* no início, o próprio texto final é deslocado para o centro */
body.diagram-reading #diagramTitle {
  transform: translateX(-50%) translateY(calc(50dvh - var(--diagram-title-final-top) - 50%)) !important;
}

/* depois ele desliza para a posição final sem sumir e sem trocar estilos */
body.diagram-reading.diagram-moving #diagramTitle,
body.diagram-live #diagramTitle {
  transform: translateX(-50%) translateY(0) !important;
}

/* impede que regras antigas animem/sumam as linhas na troca de fase */
body.diagram-reading.diagram-moving #diagramTitle span,
body.diagram-live #diagramTitle span,
#diagramTitle span {
  opacity: 1;
  transform: none;
}

/* durante a fase de leitura, cada linha ainda entra uma vez */
body.diagram-reading:not(.diagram-moving) #diagramTitle span {
  opacity: 0;
  transform: translateY(10px);
  animation: diagramLineReadV43 .68s cubic-bezier(.2, .85, .16, 1) forwards !important;
}

body.diagram-reading:not(.diagram-moving) #diagramTitle span:nth-child(1) { animation-delay: .28s !important; }
body.diagram-reading:not(.diagram-moving) #diagramTitle span:nth-child(2) { animation-delay: .90s !important; }
body.diagram-reading:not(.diagram-moving) #diagramTitle span:nth-child(3) { animation-delay: 1.52s !important; }
body.diagram-reading:not(.diagram-moving) #diagramTitle span:nth-child(4) { animation-delay: 2.14s !important; }

/* remove qualquer "reentrada" visual herdada de versões anteriores */
body.diagram-live #diagramTitle {
  animation: none !important;
  filter: none !important;
}


/* v46: bloqueia seleção de texto no toque longo + esconde texto após completar o diagrama */
html,
body,
body *,
#diagramTitle,
#diagramTitle *,
#dragInstruction,
#dragInstruction *,
#storyMessage,
#storyMessage *,
#message,
#message *,
#home,
#home * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* mantém o texto durante a fase de leitura/movimento */
body.diagram-reading #diagramTitle,
body.diagram-reading.diagram-moving #diagramTitle,
body.diagram-live:not(.completed) #diagramTitle {
  opacity: 1 !important;
}

/* após a montagem/fechamento do diagrama, o texto some junto da transição */
body.completed #diagramTitle,
body.completed.diagram-live #diagramTitle,
body.completed.diagram-reading #diagramTitle,
body.completed.diagram-moving #diagramTitle {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-8px) !important;
  pointer-events: none !important;
  transition: opacity .45s ease, transform .45s ease !important;
}

/* evita seleção azul também nos SVGs e textos internos */
svg,
svg *,
button,
a {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}


/* v51: texto de orientação antes do CTA, com linguagem visual do título "O que eu faço" */
.pre-cta-note {
  margin: clamp(26px, 5vh, 42px) 0 clamp(14px, 2.8vh, 22px);
  max-width: 540px;
  font-size: clamp(11px, 2.6vw, 13px);
  line-height: 1.22;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .62);
  font-weight: 520;
}

@media (max-width: 520px) {
  .pre-cta-note {
    max-width: 280px;
  }
}


/* v53: garantia do texto antes do CTA final */
.pre-cta-note {
  display: block !important;
  margin: clamp(26px, 5vh, 42px) 0 clamp(14px, 2.8vh, 22px) !important;
  max-width: 540px !important;
  font-size: clamp(11px, 2.6vw, 13px) !important;
  line-height: 1.22 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(245, 241, 232, .62) !important;
  font-weight: 520 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

@media (max-width: 520px) {
  .pre-cta-note {
    max-width: 280px !important;
  }
}


/* v54: pré-CTA em caixa normal e botão inicial padronizado */
.pre-cta-note {
  text-transform: none !important;
  letter-spacing: -0.015em !important;
  font-size: clamp(15px, 4vw, 18px) !important;
  line-height: 1.18 !important;
  color: rgba(245, 241, 232, .74) !important;
  font-weight: 430 !important;
}

/* botão Avançar com a mesma estética do CTA final */
#startBtn,
.start-btn,
button#startBtn,
button[data-start],
.intro button,
.hero button {
  background: #f5f1e8 !important;
  color: #050505 !important;
  border-color: #f5f1e8 !important;
}

#startBtn:hover,
.start-btn:hover,
button#startBtn:hover,
button[data-start]:hover,
.intro button:hover,
.hero button:hover {
  background: #ffffff !important;
  color: #050505 !important;
  border-color: #ffffff !important;
}


/* v55: CTA final revisado */
.pre-cta-note {
  text-transform: none !important;
  letter-spacing: -0.045em !important;
  font-size: clamp(42px, 12vw, 76px) !important;
  line-height: .88 !important;
  color: rgba(245, 241, 232, .92) !important;
  font-weight: 430 !important;
  max-width: 720px !important;
  margin: clamp(36px, 6vh, 58px) 0 clamp(16px, 3vh, 24px) !important;
}

/* botão do formulário em uma única linha no mobile e desktop */
a[href*="form.respondi.app"],
.final-cta,
.home-cta,
.cta-final {
  white-space: nowrap !important;
  min-width: max-content !important;
  width: auto !important;
  max-width: calc(100vw - 32px) !important;
  font-size: clamp(12px, 3.1vw, 15px) !important;
  padding-left: clamp(16px, 5vw, 28px) !important;
  padding-right: clamp(16px, 5vw, 28px) !important;
}

/* redes sociais com ícones oficiais/monocromáticos maiores */
.social-svg {
  width: clamp(25px, 6vw, 34px);
  height: clamp(25px, 6vw, 34px);
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-links a,
.socials a,
.social a,
.footer-socials a,
.footer-social a,
a[aria-label="Instagram"],
a[aria-label="LinkedIn"],
a[aria-label="YouTube"],
a[aria-label="X"] {
  width: clamp(42px, 10vw, 52px) !important;
  height: clamp(42px, 10vw, 52px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(245, 241, 232, .86) !important;
}

.social-links,
.socials,
.social,
.footer-socials,
.footer-social {
  gap: clamp(10px, 3vw, 16px) !important;
}


/* v56: orçamento alinhado e com a mesma lógica visual de "Marcas criam realidades..." */
.pre-cta-note {
  margin: clamp(28px, 5vh, 44px) 0 clamp(14px, 2.6vh, 22px) 0 !important;
  padding: 0 !important;
  max-width: 540px !important;
  width: 100% !important;
  align-self: stretch !important;
  text-align: left !important;
  transform: none !important;
  font-size: clamp(28px, 7.2vw, 58px) !important;
  line-height: .92 !important;
  letter-spacing: -0.06em !important;
  text-transform: none !important;
  color: rgba(245, 241, 232, .92) !important;
  font-weight: 410 !important;
}

/* remove qualquer deslocamento lateral no CTA do formulário */
.pre-cta-note + a[href*="form.respondi.app"],
a[href*="form.respondi.app"] {
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: none !important;
  align-self: flex-start !important;
}

/* mantém o botão em linha única sem empurrar para a direita */
a[href*="form.respondi.app"] {
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  .pre-cta-note {
    max-width: 100% !important;
    font-size: clamp(28px, 7.2vw, 42px) !important;
  }

  a[href*="form.respondi.app"] {
    font-size: clamp(11px, 3vw, 13px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* v57: orçamento menor, conjunto mais próximo e sem deslocamento lateral */
.pre-cta-note {
  margin: clamp(22px, 4vh, 34px) 0 clamp(8px, 1.2vh, 12px) 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  text-align: left !important;
  transform: translateX(0) !important;
  font-size: clamp(22px, 4.8vw, 34px) !important;
  line-height: .96 !important;
  letter-spacing: -0.045em !important;
  font-weight: 410 !important;
}

/* força frase e botão a nascerem no mesmo eixo */
.pre-cta-note + a[href*="form.respondi.app"],
a[href*="form.respondi.app"] {
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: translateX(0) !important;
  left: auto !important;
  align-self: flex-start !important;
}

/* neutraliza centralizações ou paddings herdados no bloco do CTA */
.pre-cta-note,
.pre-cta-note + a[href*="form.respondi.app"] {
  position: relative !important;
}

/* botão mais próximo e estável */
a[href*="form.respondi.app"] {
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  .pre-cta-note {
    font-size: clamp(22px, 6.2vw, 28px) !important;
    margin-bottom: 8px !important;
  }

  a[href*="form.respondi.app"] {
    font-size: clamp(10px, 2.85vw, 12px) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (min-width: 900px) {
  .pre-cta-note {
    font-size: clamp(26px, 2.35vw, 36px) !important;
  }
}


/* v58: orçamento + botão em uma linha, alinhados com a coluna dos serviços */
.budget-cta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 2.6vw, 18px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: clamp(24px, 4vh, 34px) 0 0 0 !important;
  padding: 0 !important;
  align-self: stretch !important;
  transform: none !important;
  text-align: left !important;
}

.budget-cta-row .pre-cta-note,
.pre-cta-note {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  align-self: center !important;
  text-align: left !important;
  transform: none !important;
  font-size: clamp(18px, 4.2vw, 28px) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  color: rgba(245, 241, 232, .92) !important;
  font-weight: 410 !important;
}

.budget-cta-row a[href*="form.respondi.app"],
.pre-cta-note + a[href*="form.respondi.app"],
a[href*="form.respondi.app"] {
  margin: 0 !important;
  transform: none !important;
  left: auto !important;
  align-self: center !important;
  white-space: nowrap !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  font-size: clamp(10px, 2.55vw, 13px) !important;
  padding-left: clamp(12px, 3.6vw, 18px) !important;
  padding-right: clamp(12px, 3.6vw, 18px) !important;
}

/* neutraliza deslocamentos herdados do bloco final */
.budget-cta-row,
.budget-cta-row * {
  margin-left: 0 !important;
}

@media (max-width: 390px) {
  .budget-cta-row {
    gap: 8px !important;
  }

  .budget-cta-row .pre-cta-note {
    font-size: clamp(16px, 4.55vw, 18px) !important;
  }

  .budget-cta-row a[href*="form.respondi.app"] {
    font-size: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* v59: correção do alinhamento geral da tela final no mobile
   O problema era overflow horizontal causado por textos/CTA em linha única + larguras mínimas.
   A tela ficava maior que o viewport e o conteúdo parecia deslocado/cortado. */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#home,
.home,
.final,
.final-screen,
.home-content,
.final-content,
main,
section {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* impede os títulos/serviços de criarem largura maior que a tela */
#home h1,
#home h2,
#home h3,
#home p,
#home li,
.home h1,
.home h2,
.home h3,
.home p,
.home li,
.final h1,
.final h2,
.final h3,
.final p,
.final li {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* serviços: volta para a coluna esquerda real, sem offset lateral */
.services,
.service-list,
.services-list,
.what-list,
.home-services,
#services,
#whatIDo,
#home ul,
#home ol {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  transform: none !important;
  left: auto !important;
  box-sizing: border-box !important;
}

/* itens grandes não podem forçar scroll lateral */
.services *,
.service-list *,
.services-list *,
.what-list *,
.home-services *,
#services *,
#whatIDo *,
#home ul *,
#home ol * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* conjunto orçamento + botão: fica no fluxo da mesma coluna e quebra com segurança em telas estreitas */
.budget-cta-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  transform: none !important;
  left: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.budget-cta-row .pre-cta-note {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

.budget-cta-row a[href*="form.respondi.app"] {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* mobile: para caber sem estourar largura, mantém uma linha quando possível,
   mas sem criar tela lateral/corte */
@media (max-width: 520px) {
  #home,
  .home,
  .final,
  .final-screen,
  .home-content,
  .final-content {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: clamp(22px, 7vw, 30px) !important;
    padding-right: clamp(22px, 7vw, 30px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    left: auto !important;
  }

  .budget-cta-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .budget-cta-row .pre-cta-note {
    font-size: clamp(15px, 4.2vw, 17px) !important;
    white-space: nowrap !important;
  }

  .budget-cta-row a[href*="form.respondi.app"] {
    font-size: clamp(9px, 2.55vw, 10.5px) !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
    white-space: nowrap !important;
  }
}

/* telas muito estreitas: preserva alinhamento e evita qualquer estouro */
@media (max-width: 360px) {
  .budget-cta-row {
    gap: 6px !important;
  }

  .budget-cta-row .pre-cta-note {
    font-size: 14px !important;
  }

  .budget-cta-row a[href*="form.respondi.app"] {
    font-size: 9px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* v60: ajuste de alinhamento real da coluna esquerda + botão mais fino */
.budget-cta-row {
  margin-left: 0 !important;
  padding-left: 0 !important;
  transform: none !important;
  align-self: flex-start !important;
  justify-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
}

/* remove o recuo criado pelo layout anterior no conjunto orçamento */
.budget-cta-row,
.pre-cta-note,
.budget-cta-row .pre-cta-note,
.budget-cta-row a[href*="form.respondi.app"] {
  left: 0 !important;
  right: auto !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}

/* alinha o conjunto na mesma coluna visual dos serviços, corrigindo o deslocamento */
#home .budget-cta-row,
.home .budget-cta-row,
.final .budget-cta-row,
.final-screen .budget-cta-row,
.home-content .budget-cta-row,
.final-content .budget-cta-row {
  transform: translateX(calc(-1 * clamp(0px, 1.8vw, 18px))) !important;
}

/* botão mais baixo/fino, com fonte um pouco maior */
.budget-cta-row a[href*="form.respondi.app"],
a[href*="form.respondi.app"] {
  min-height: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  padding-top: clamp(7px, 1.25vw, 10px) !important;
  padding-bottom: clamp(7px, 1.25vw, 10px) !important;
  font-size: clamp(12px, 2.85vw, 15px) !important;
}

/* mobile: correção um pouco mais direta da coluna esquerda */
@media (max-width: 520px) {
  #home .budget-cta-row,
  .home .budget-cta-row,
  .final .budget-cta-row,
  .final-screen .budget-cta-row,
  .home-content .budget-cta-row,
  .final-content .budget-cta-row {
    transform: translateX(-10px) !important;
  }

  .budget-cta-row a[href*="form.respondi.app"],
  a[href*="form.respondi.app"] {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: clamp(11px, 3.15vw, 12.5px) !important;
  }
}

@media (min-width: 900px) {
  #home .budget-cta-row,
  .home .budget-cta-row,
  .final .budget-cta-row,
  .final-screen .budget-cta-row,
  .home-content .budget-cta-row,
  .final-content .budget-cta-row {
    transform: translateX(-18px) !important;
  }
}


/* v61: novo título do diagrama com recuo na segunda linha */
#diagramTitle .diagram-title-indent {
  display: block !important;
  padding-left: clamp(28px, 8vw, 86px) !important;
}

body.diagram-reading #diagramTitle .diagram-title-indent,
body.diagram-reading.diagram-moving #diagramTitle .diagram-title-indent,
body.diagram-live #diagramTitle .diagram-title-indent {
  display: block !important;
  padding-left: clamp(28px, 8vw, 86px) !important;
}

/* ajuste fino para o novo texto do botão */
.budget-cta-row a[href*="form.respondi.app"],
a[href*="form.respondi.app"] {
  font-size: clamp(12px, 2.95vw, 15px) !important;
}


/* v62: corrige título duplicado e ajusta a composição do título do diagrama */
#diagramTitle {
  white-space: normal !important;
}

#diagramTitle span {
  display: block !important;
}

#diagramTitle .diagram-title-indent {
  display: block !important;
  padding-left: clamp(36px, 9vw, 96px) !important;
}

/* reduz um pouco para o novo texto caber limpo acima do diagrama */
body.diagram-live #diagramTitle,
body.diagram-reading #diagramTitle,
body.diagram-reading.diagram-moving #diagramTitle {
  font-size: clamp(18px, 4.8vw, 27px) !important;
  line-height: .96 !important;
  letter-spacing: -0.055em !important;
}

/* neutraliza qualquer texto antigo herdado por pseudo-elemento ou animação */
#diagramTitle::before,
#diagramTitle::after {
  content: none !important;
}

/* desktop: recuo semelhante ao pedido, mas sem invadir o diagrama */
@media (min-width: 720px) {
  #diagramTitle .diagram-title-indent {
    padding-left: clamp(54px, 7.5vw, 118px) !important;
  }

  body.diagram-live #diagramTitle,
  body.diagram-reading #diagramTitle,
  body.diagram-reading.diagram-moving #diagramTitle {
    font-size: clamp(20px, 1.95vw, 28px) !important;
  }
}

/* mobile: mantém legível e sem sobrepor o diagrama */
@media (max-width: 430px) {
  #diagramTitle .diagram-title-indent {
    padding-left: clamp(26px, 8vw, 42px) !important;
  }

  body.diagram-live #diagramTitle,
  body.diagram-reading #diagramTitle,
  body.diagram-reading.diagram-moving #diagramTitle {
    font-size: clamp(17px, 4.65vw, 22px) !important;
    line-height: .98 !important;
  }
}


/* v63: título do diagrama somente com o novo texto */
#diagramTitle {
  white-space: normal !important;
  overflow: visible !important;
}

#diagramTitle span {
  display: block !important;
}

#diagramTitle .diagram-title-indent {
  display: block !important;
  padding-left: clamp(36px, 9vw, 96px) !important;
}

#diagramTitle::before,
#diagramTitle::after {
  content: none !important;
}

body.diagram-reading #diagramTitle,
body.diagram-reading.diagram-moving #diagramTitle,
body.diagram-live #diagramTitle {
  font-size: clamp(18px, 4.8vw, 27px) !important;
  line-height: .96 !important;
  letter-spacing: -0.055em !important;
}

body.diagram-reading #diagramTitle span:nth-child(n+4),
body.diagram-live #diagramTitle span:nth-child(n+4) {
  display: none !important;
}

@media (min-width: 720px) {
  #diagramTitle .diagram-title-indent {
    padding-left: clamp(54px, 7.5vw, 118px) !important;
  }

  body.diagram-reading #diagramTitle,
  body.diagram-reading.diagram-moving #diagramTitle,
  body.diagram-live #diagramTitle {
    font-size: clamp(20px, 1.95vw, 28px) !important;
  }
}

@media (max-width: 430px) {
  #diagramTitle .diagram-title-indent {
    padding-left: clamp(26px, 8vw, 42px) !important;
  }

  body.diagram-reading #diagramTitle,
  body.diagram-reading.diagram-moving #diagramTitle,
  body.diagram-live #diagramTitle {
    font-size: clamp(17px, 4.65vw, 22px) !important;
    line-height: .98 !important;
  }
}