/* Camada própria do site: substitui o runtime da Framer.
   Loader, revelação de texto, paralaxe, cursor, menu mobile e seletor de idioma. */

/* Paleta da marca (inspirada no mapa mental Python: verde-petróleo, creme, rosa, amarelo, azul e vermelho) */
:root {
  --c-teal: #0f7b7b; /* #118888 da referência, escurecido para dar contraste ao texto creme */
  --c-cream: #ffffee;
  --c-pink: #ee66cc;
  --c-yellow: #eeee66;
  --c-blue: #2255dd;
  --c-red: #dd3344;
  --c-ink: #222222;
  --c-mustard: #e6c229;
  --c-mint: #4fc4b4;
  --c-mint-soft: #bfe8e0;

  --ink: var(--c-ink);
  --paper: var(--c-cream);
  --accent: var(--c-blue);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

/* Cores do template: sobrescritas com a paleta acima (os tokens são lidos pelo HTML exportado).
   "*" porque alguns componentes redefinem os tokens localmente. */
/* Fundo da página: html[data-theme="teal" | "cream"] (a tecla T alterna no navegador) */
:root {
  --page-bg: var(--c-teal);
}

html[data-theme="cream"] {
  --page-bg: var(--c-cream);
}

html,
body {
  background: var(--page-bg) !important;
}

/* a grade decorativa do template é um bloco cheio que também usa o token de fundo,
   e os wrappers da página pintam o mesmo fundo por baixo dela */
[data-framer-root],
[data-layout-template="true"],
[data-layout-template="true"] > div:first-child > div {
  background-color: var(--page-bg) !important;
}

html[data-theme="teal"] * {
  --token-eee4728f-06ef-4d99-9d02-ac8944e7f6dd: rgba(255, 255, 238, 0.14) !important; /* linhas da grade */
}

html[data-theme="teal"] [data-framer-name="Loader"],
html[data-theme="teal"] [data-framer-name="Loader"] * {
  --token-eee4728f-06ef-4d99-9d02-ac8944e7f6dd: rgba(15, 123, 123, 0.18) !important;
}

:root,
* {
  --token-341b58e0-d728-43ce-a1dc-e77a522cab4f: var(--c-cream) !important; /* fundo e cards */
  --token-4f4ed186-9023-4858-830a-5202d69249c1: var(--c-ink) !important; /* texto */
  --token-94d217a4-b19e-496f-a9f0-41c83f611b07: var(--c-ink) !important; /* texto secundário */
  --token-0aa568ec-3cf9-436c-a43a-7190c1309ca5: var(--c-ink) !important; /* linhas */
  --token-1892785e-8581-4826-b411-015017430ad3: var(--c-blue) !important; /* destaque */
  --token-e22e0fe6-83a6-4381-a625-c6f173619c49: var(--c-red) !important;
  --token-a40bc7b7-fed8-4930-b9f7-5dc39bc097a2: var(--c-cream) !important;
  --token-221f5458-30ad-42f0-b005-7c3d9fe30e8d: var(--c-pink) !important;
  --token-cd9da077-16e0-46f3-9a80-6bf4c2a79928: var(--c-yellow) !important;
  /* o verde do template viraria teal sobre teal (some no fundo): vira rosa / amarelo */
  --token-3b25897c-a78c-4fb0-9a93-831975a769c1: var(--c-mint-soft) !important;
  --token-5572d352-4df4-4ec3-ad7e-a66a084483f0: var(--c-mint) !important;
  --token-8291df36-c774-4ed2-bdd0-1fd1c4052c15: var(--c-mint) !important;
  --token-35988afc-fafd-4260-9962-57ff14cb1fea: var(--c-pink) !important; /* card do rodapé (era marrom) */
  --token-fa089843-fdba-4c1d-bb63-da28628cfb04: var(--c-ink) !important;
  --token-0d003bc7-9280-457f-98cd-b90723198654: var(--c-ink) !important;
  --token-a4e8c659-6b08-4369-b15a-6ca33a1bd743: var(--c-cream) !important;
  --token-29f9695a-09e2-4c55-ace7-e9873233e207: var(--c-mustard) !important;
  --token-eee4728f-06ef-4d99-9d02-ac8944e7f6dd: rgba(17, 136, 136, 0.18) !important; /* grade de fundo */
  --token-f3fe21e3-0094-4480-b0bd-3d122b4528c2: var(--c-cream) !important;
  --token-6c533178-25e1-464e-9d1a-150db514e9e0: var(--c-cream) !important;
}

html.is-loading,
html.is-loading body,
html.menu-open,
html.menu-open body {
  overflow: hidden;
}

/* ---------- Loader (balão que digita; sai em fade) ---------- */

[data-framer-name="Loader"] {
  z-index: 1000 !important;
  pointer-events: auto !important;
  transition: opacity 0.7s ease, visibility 0s 0.7s;
}

[data-framer-name="Loader"].is-done {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
}

[data-framer-name="Loader"] [data-framer-name="Container"] > div:nth-child(1) {
  animation: bubble-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

[data-framer-name="Loader"] [data-loader-text] {
  color: var(--c-cream) !important;
  min-height: 1.1em;
  min-width: 0.6em;
}

[data-framer-name="Loader"] [data-loader-text]::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--c-cream);
  animation: caret 0.7s steps(1) infinite;
}

@keyframes bubble-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* ---------- Texto dividido por letra ---------- */

.split {
  display: inline;
}

.split .w {
  display: inline-block;
  white-space: nowrap;
}

html.js .split .c {
  display: inline-block;
  opacity: 0.001;
  transform: translateY(40px);
}

html.js .split[data-split="right"] .c {
  transform: translateX(40px) scale(0.9);
}

html.js .split.in .c {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 28ms);
}

/* ---------- Interações de hover ---------- */

[data-framer-name="Name"] {
  transition: transform 0.4s var(--ease-out);
}

[data-framer-name="Comment"] {
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

[data-framer-name="Comment"].is-on {
  opacity: 1 !important;
  transform: none !important;
}

a[data-framer-name^="desktop--"],
[data-framer-name="Dark Button"],
[data-framer-name="White Button"],
a[data-framer-name="Default"][href] {
  transition: background-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

@media (hover: hover) {
  a[data-framer-name="desktop--inactive"]:hover {
    background-color: var(--c-yellow) !important;
  }

  [data-framer-name="Dark Button"]:hover,
  [data-framer-name="White Button"]:hover {
    transform: translate(-3px, -3px);
    box-shadow: 4px 4px 0 var(--ink);
  }
}

[data-framer-name^="Project "] a,
[data-framer-name^="Project "] [data-framer-name="Img"] img {
  transition: transform 0.6s var(--ease-out);
}

[data-draggable] {
  cursor: grab;
  touch-action: none;
}

[data-draggable].is-dragging {
  cursor: grabbing;
  z-index: 20 !important;
}

[data-draggable].is-dragging img {
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.25));
}

/* ---------- Cursor global (ponto + etiqueta) ---------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cursor.is-visible {
  opacity: 1;
}

.cursor__dot {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-ink);
  box-shadow: 0 0 0 2px var(--c-cream);
  transition: transform 0.25s var(--ease-out), background-color 0.2s ease;
}

.cursor__tag {
  position: absolute;
  left: 8px;
  top: 10px;
  padding: 3px 9px;
  border-radius: 0 12px 12px 12px;
  background: var(--c-ink);
  color: var(--c-cream);
  font: 500 12px "DM Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out);
}

.cursor.is-active .cursor__dot {
  transform: scale(2);
  background: var(--c-yellow);
  box-shadow: 0 0 0 2px var(--c-ink);
}

.cursor.is-active .cursor__tag {
  transform: translate(10px, 10px);
}

/* sobre os botões com moldura: ponto e etiqueta invertem as cores por baixo */
.cursor.is-select {
  mix-blend-mode: difference;
}

.cursor.is-active.is-select .cursor__dot {
  transform: scale(1);
  background: #fff;
  box-shadow: none;
}

.cursor.is-select .cursor__tag {
  background: #fff;
  color: #222;
}

.cursor.is-active.is-select .cursor__tag {
  transform: none;
}

.cursor.is-down .cursor__dot {
  transform: scale(0.7);
}

html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ---------- Idioma ---------- */

[data-lang-btn] {
  cursor: pointer;
  user-select: none;
}

[data-lang-btn][aria-pressed="true"] > div,
[data-lang-btn][aria-pressed="true"] {
  background-color: var(--ink) !important;
}

[data-lang-btn][aria-pressed="true"] p {
  color: var(--paper) !important;
}

/* ---------- Menu mobile ---------- */

.m-menu {
  position: fixed;
  inset: 49px 0 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 24px;
  background: var(--paper);
  background-image: linear-gradient(#e2e2e2 1px, transparent 1px), linear-gradient(90deg, #e2e2e2 1px, transparent 1px);
  background-size: 80px 80px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.6s var(--ease-in-out), visibility 0s 0.6s;
}

html.menu-open .m-menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.6s var(--ease-in-out);
}

.m-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-menu__link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px solid var(--ink);
  font-family: "Flux Variable", "DM Mono", monospace;
  font-weight: 1000;
  font-size: clamp(40px, 12vw, 64px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
}

.m-menu__link small {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
}

.m-menu__link[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
  padding-left: 8px;
}

html.menu-open .m-menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.15s + var(--i) * 60ms);
}

.m-menu__foot {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.m-menu__lang {
  min-width: 56px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font: 500 14px "DM Mono", monospace;
  color: var(--ink);
  cursor: pointer;
}

.m-menu__lang[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

[data-framer-name="Menu"] {
  cursor: pointer;
  position: relative;
  z-index: 600;
}

@media (prefers-reduced-motion: reduce) {
  html.js .split .c {
    opacity: 1;
    transform: none;
  }

  [data-framer-name="Loader"] {
    display: none !important;
  }
}

/* Acentos desenhados sobre a fonte display (Flux não possui esses glifos) */
.split .c[data-acc] {
  position: relative;
}

.split .c[data-acc]::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 0.5em;
  height: 0.2em;
  background: currentColor;
  transform: translateX(-50%);
  pointer-events: none;
}

.split .c[data-acc="circ"]::before {
  top: -0.14em;
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 76% 100%, 50% 42%, 24% 100%);
}

.split .c[data-acc="acute"]::before {
  top: -0.14em;
  clip-path: polygon(30% 100%, 100% 0, 100% 36%, 60% 100%);
}

.split .c[data-acc="tilde"]::before {
  top: -0.12em;
  height: 0.14em;
  clip-path: polygon(0 100%, 25% 15%, 50% 55%, 75% 0, 100% 85%, 75% 100%, 50% 62%, 25% 100%);
}

.split .c[data-acc="cedil"]::before {
  top: auto;
  bottom: -0.09em;
  width: 0.14em;
  height: 0.12em;
}

/* ---------- Ticker ---------- */

/* faixa inclinada que atravessa a página, logo antes do rodapé */
.marquee {
  position: relative;
  z-index: 2;
  width: 104%;
  margin: 72px -2% 56px;
  overflow: hidden;
  background: var(--c-yellow);
  border-block: 3px solid var(--c-ink);
  box-shadow: 0 8px 0 var(--c-ink);
  transform: rotate(-1.6deg);
}

html,
body {
  overflow-x: clip;
}

.is-offscreen .ticker__track,
.is-offscreen i {
  animation-play-state: paused !important;
}

.ticker__track {
  display: flex;
  align-items: center;
  padding: 14px 0;
  white-space: nowrap;
  width: max-content;
  animation: ticker 50s linear infinite;
}

.marquee:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  font: 500 18px "DM Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink) !important;
}

.ticker__sep {
  margin: 0 28px;
  font-size: 18px;
  color: var(--c-pink);
  -webkit-text-stroke: 1px var(--c-ink);
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Playground ---------- */

[data-image] {
  transition: scale 0.3s var(--ease-out);
}

[data-image].is-dragging {
  cursor: grabbing !important;
  scale: 1.05;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.25));
}

[data-image]:hover {
  scale: 1.03;
}

/* ---------- Formulário ---------- */

form[data-framer-form].is-step-2 label[data-framer-name="Message"] {
  display: none;
}

form[data-framer-form].is-step-2 label[data-framer-name="Email"] {
  position: relative;
  top: 0;
  opacity: 1 !important;
  pointer-events: auto;
}

form[data-framer-form] [data-framer-name="Next"][data-highlight] {
  cursor: pointer;
}

/* Nome do hero quebra em duas linhas quando a tela não comporta uma só */
@media (max-width: 1199.98px) {
  [data-framer-name="Name"] [data-framer-component-type="RichTextContainer"],
  [data-framer-name="Name"] h1 {
    white-space: normal !important;
    text-align: center;
  }

  [data-framer-name="Name"] > [data-framer-component-type="RichTextContainer"] {
    flex: 0 1 auto !important;
    min-width: 0;
    max-width: 100%;
  }

  [data-framer-name="Name"] h1 {
    line-height: 0.95 !important;
  }
}

/* Adesivos do hero: largura pelo conteúdo (o texto em português é mais longo) */
[data-framer-name="Name"] > [data-framer-name="Tag"] {
  width: max-content !important;
  max-width: none !important;
}

[data-framer-name="Name"] > [data-framer-name="Tag"] [data-framer-component-type="RichTextContainer"] {
  white-space: nowrap !important;
}

/* ---------- Lente do hero ---------- */

.lens,
.lens-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 336px;
  height: 336px;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
}

.lens {
  z-index: 900;
  background: #fff;
  mix-blend-mode: difference;
}

.lens-ui {
  z-index: 901;
}

.lens.is-on,
.lens-ui.is-on {
  opacity: 1;
}

.lens-ui i {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #000;
}

.lens-ui i:nth-child(1) { top: -8px; left: -8px; }
.lens-ui i:nth-child(2) { top: -8px; right: -8px; }
.lens-ui i:nth-child(3) { bottom: -8px; left: -8px; }
.lens-ui i:nth-child(4) { bottom: -8px; right: -8px; }

.lens-ui__tag {
  position: absolute;
  right: -34px;
  bottom: -34px;
  padding: 4px 10px;
  border-radius: 0 0 12px 12px;
  background: #000;
  color: #fff;
  font: 500 12px "DM Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html.lens-active [data-framer-name="Hero Section"],
html.lens-active [data-framer-name="Hero Section"] * {
  cursor: none !important;
}

html.lens-active .cursor {
  opacity: 0 !important;
}


/* ---------- Entrada em "pop" (depois do loader) ---------- */

html.js .pop {
  opacity: 0;
  scale: 0.4;
}

html.js.ready .pop {
  opacity: 1;
  scale: 1;
  transition: opacity 0.35s ease var(--d, 0s), scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s);
}

/* ---------- Régua (topo e fim da página) ---------- */

:root {
  --ruler: rgba(34, 34, 34, 0.38);
}

html[data-theme="teal"] {
  --ruler: rgba(255, 255, 238, 0.5);
}

.ruler__track {
  position: absolute;
  top: 0;
  left: -40px;
  width: calc(100% + 80px);
  height: 40px;
  background-image: linear-gradient(90deg, var(--ruler) 1px, transparent 1px), linear-gradient(90deg, var(--ruler) 1px, transparent 1px);
  background-size: 100px 14px, 50px 8px;
  background-repeat: repeat-x;
  background-position: 40px 0, 40px 0;
}

.ruler__track[data-tone="light"] {
  --ruler: rgba(34, 34, 34, 0.45);
}

.ruler__track[data-tone="dark"] {
  --ruler: rgba(255, 255, 238, 0.55);
}

.ruler__track span {
  position: absolute;
  top: 19px;
  transform: translateX(-50%);
  font: 500 10px "DM Mono", monospace;
  letter-spacing: 0.02em;
  color: var(--ruler);
}

/* ---------- Botão do hero: estado "selecionado" no hover ---------- */

/* botão claro (hero / menu): fundo creme; moldura e alças ficam no overlay .sel */
[data-framer-name="Text + button"] a.is-selected,
[data-framer-name="Text + button"] a.is-selected > [data-border],
[data-framer-name="Text + button"] a.is-selected [data-framer-name="Fill Color"] {
  background-color: var(--c-cream) !important;
}

/* selo escuro (rodapé): o fundo vira preto no hover */
a[data-sel="dark"] [data-framer-name="Fill Color"] {
  transition: background-color 0.15s ease;
}

a[data-sel="dark"].is-selected [data-framer-name="Fill Color"] {
  background-color: var(--c-ink) !important;
}

/* moldura de seleção com alças nos cantos */
.sel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sel.on {
  opacity: 1;
}

.sel::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--c-ink);
}

.sel i {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--c-cream);
  border: 1px solid var(--c-ink);
}

.sel i:nth-child(1) { top: -11px; left: -11px; }
.sel i:nth-child(2) { top: -11px; right: -11px; }
.sel i:nth-child(3) { bottom: -11px; left: -11px; }
.sel i:nth-child(4) { bottom: -11px; right: -11px; }

.sel[data-tone="dark"]::before {
  inset: 0;
  border: 3px solid var(--c-cream);
}

.sel[data-tone="dark"] i {
  width: 22px;
  height: 22px;
  background: var(--c-ink);
  border: 3px solid var(--c-cream);
}

.sel[data-tone="dark"] i:nth-child(1) { top: -11px; left: -11px; }
.sel[data-tone="dark"] i:nth-child(2) { top: -11px; right: -11px; }
.sel[data-tone="dark"] i:nth-child(3) { bottom: -11px; left: -11px; }
.sel[data-tone="dark"] i:nth-child(4) { bottom: -11px; right: -11px; }

/* ---------- Rodapé: listras giratórias atrás do selo ---------- */

.cta-spin {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.cta-spin i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(190%, 1500px);
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 12deg, var(--c-yellow) 0 24deg, transparent 24deg 72deg);
  will-change: transform;
  animation: cta-rotate 45s linear infinite;
}

@keyframes cta-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-spin i {
    animation: none;
  }
}

/* o nome em português é mais largo: o avatar da esquerda desce para não sobrepor as letras */
.framer-1eo2c47-container {
  top: 72% !important;
  left: 6% !important;
}

.ruler__track span {
  opacity: 0.75;
  font-weight: 400;
}

/* ---------- Mascote do Claude Code (pixel art em SVG) ---------- */

:root {
  --c-claude: #d97757;
}

.mascot-wrap {
  display: inline-block;
  cursor: pointer;
  transform-origin: 50% 100%;
}

.mascot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.mascot .m-f1 {
  animation: m-flag-a 0.8s steps(1) infinite;
}

.mascot .m-f2 {
  animation: m-flag-b 0.8s steps(1) infinite;
}

.mascot .m-la {
  animation: m-step 0.5s steps(1) infinite;
}

.mascot .m-lb {
  animation: m-step 0.5s steps(1) infinite -0.25s;
}

.mascot .m-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: m-blink 5s infinite;
}

@keyframes m-flag-a {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes m-flag-b {
  0% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes m-step {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes m-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.15); }
}

.mascot-wrap.is-hop {
  animation: m-hop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes m-hop {
  35% { transform: translateY(-18%) scale(0.95, 1.12); }
  100% { transform: none; }
}

/* loader: o mascote espia por cima do balão */
.loader-mascot {
  position: absolute;
  left: 50%;
  top: calc(50% - 150px);
  width: 112px;
  margin-left: -56px;
  animation: loader-mascot-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes loader-mascot-in {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.6);
  }
}

/* hero: cursor do Claude Code (somem e reaparecem como os outros) */
.mcursor {
  position: absolute;
  left: 46%;
  top: 22%;
  z-index: 3;
  pointer-events: none;
}

.mcursor__arrow {
  display: block;
}

.mcursor__label {
  position: absolute;
  left: 20px;
  top: 24px;
  padding: 6px 14px;
  border: 2px solid var(--c-ink);
  border-radius: 0 16px 16px 16px;
  background: var(--c-claude);
  color: var(--c-ink) !important;
  font: 500 13px "DM Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mcursor__mascot {
  position: absolute;
  left: 30px;
  top: -42px;
  width: 64px;
  pointer-events: none;
}

/* some de repente e reaparece (usa a mesma mola da entrada) */
html.js.ready .pop.is-away {
  opacity: 0;
  scale: 0.3;
  transition: opacity 0.15s ease, scale 0.22s ease-in;
}

/* rodapé: mascote sentado na borda do card, com balão de comentário */
.footer-mascot {
  position: absolute;
  right: 12%;
  top: -88px;
  z-index: 4;
}

.footer-mascot__sprite {
  width: 120px;
}

.footer-mascot__bubble {
  position: absolute;
  right: 40px;
  bottom: calc(100% + 8px);
  padding: 8px 14px;
  border: 2px solid var(--c-ink);
  border-radius: 14px 14px 0 14px;
  background: var(--c-cream);
  color: var(--c-ink) !important;
  font: 500 13px "DM Mono", monospace;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(0.85);
  transform-origin: 100% 100%;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.footer-mascot.is-talking .footer-mascot__bubble {
  opacity: 1;
  transform: none;
}

/* régua do fim da página: passeio do mascote */
.ruler-walker {
  position: absolute;
  top: 6px;
  left: 0;
  width: 44px;
  z-index: 2;
  animation: ruler-walk 70s linear infinite;
}

@keyframes ruler-walk {
  from { transform: translateX(-60px); }
  to { transform: translateX(100vw); }
}

/* playground: o mascote vira mais uma "foto" arrastável */
.mascot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8px;
}

.mascot-card__sprite {
  width: 160px;
}

.mascot-card__tag {
  margin-top: 6px;
  padding: 6px 12px;
  background: var(--c-pink);
  color: var(--c-ink);
  font: 28px "Just Me Again Down Here", cursive;
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mascot *,
  .loader-mascot,
  .ruler-walker {
    animation: none !important;
  }
}

/* ---------- Revisão: processo fixo, entradas, abas, toque e acessibilidade ---------- */

/* Serviços: título e celulares ficam fixos enquanto a linha corre na horizontal */
.is-pinned > * {
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  will-change: transform;
}

/* cartões do FAQ surgem ao entrar na tela */
.rv {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
}

.rv.rv-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.7s var(--ease-out);
}

/* Sobre: aba ativa acompanha o scroll */
a.tab-on {
  background-color: var(--c-ink) !important;
}

a.tab-off {
  background-color: transparent !important;
}

a.tab-on svg,
a.tab-on svg * {
  fill: var(--c-cream) !important;
}

a.tab-off svg,
a.tab-off svg * {
  fill: var(--c-ink) !important;
}

#mainbio,
#my-story,
#work {
  scroll-margin-top: 96px;
}

/* selo do rodapé: texto creme sobre azul (o fundo é um irmão, o ajuste automático não o enxerga) */
[data-framer-name="CTA Content"] a h2 {
  --framer-text-color: var(--c-cream) !important;
}

/* menu ativo: ícone claro sobre o azul */
a[data-framer-page-link-current] svg,
a[data-framer-page-link-current] svg * {
  fill: var(--c-cream) !important;
}

/* a Redaction não pede o espaçamento negativo pensado para a Inter */
p.framer-text,
h3.framer-text,
h4.framer-text {
  --framer-letter-spacing: 0em !important;
}

p[style*="letter-spacing"] {
  letter-spacing: -0.005em !important;
  text-wrap: balance;
}

/* foco visível para teclado (o cursor próprio não ajuda quem navega por Tab) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 3px;
}

html.has-cursor :is(a, button, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}

/* celular */
@media (max-width: 809.98px) {
  [data-framer-name="Name"] h1 {
    font-size: 17.2vw !important;
    --framer-font-size: 17.2vw !important;
  }

  .mcursor {
    scale: 0.85;
    transform-origin: 0 0;
  }

  .mcursor__mascot {
    width: 52px;
    top: -34px;
  }

  .marquee {
    margin-block: 40px 32px;
  }

  .ticker__item {
    font-size: 14px;
  }

  .footer-mascot {
    top: -58px;
    right: 8%;
  }

  .footer-mascot__sprite {
    width: 76px;
  }

  .footer-mascot__bubble {
    right: 8px;
    font-size: 11px;
  }

  .loader-mascot {
    width: 84px;
    margin-left: -42px;
    top: calc(50% - 120px);
  }

  a[href*="#my-story"] p,
  a[href*="#work"] p,
  a[href*="#mainbio"] p {
    --framer-font-size: 11px !important;
    font-size: 11px !important;
  }
}

/* telas de toque: alvo de scroll livre nos adesivos */
@media (hover: none), (pointer: coarse) {
  [data-draggable] {
    touch-action: auto;
    cursor: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track,
  .rv {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }

  html.js .pop {
    opacity: 1;
    scale: 1;
  }
}

/* telas muito estreitas (até 360px) */
@media (max-width: 360px) {
  [data-framer-name="Available"] p {
    --framer-font-size: 11px !important;
    font-size: 11px !important;
  }

  [data-framer-name="About"] [data-framer-name="Image"] > [class$="-container"] {
    scale: 0.82;
  }
}