/* ============================================================
   STYLE.css — tokens + estilo + animações + responsivo
   Qualquer alteração de paleta/tipografia/espaçamento deve
   mexer primeiro nos tokens do :root abaixo.
   ============================================================ */

:root {
  /* Cor — paleta de marca */
  --color-primary: #7B7AF1;        /* cor primária */
  --color-secondary-purple: #9555D7; /* secundária — gradiente */
  --color-secondary-blue: #A6C4FA;   /* secundária — gradiente */
  --gradient-brand: linear-gradient(135deg, var(--color-secondary-purple) 0%, var(--color-primary) 48%, var(--color-secondary-blue) 100%);

  --color-paper: #FAFAFC;
  --color-paper-dim: #F1EFFA;
  --color-ink: #17151F;
  --color-ink-soft: #55536B;
  --color-deep: #120E1D;           /* fundo escuro — página de contato */
  --color-deep-soft: #1E1830;
  --color-accent: var(--color-secondary-purple);
  --color-accent-on-deep: var(--color-secondary-blue);
  --color-error: #E0557A;
  --color-border: #17151F1a;
  --color-border-on-deep: #FAFAFC26;

  /* Tipografia — apenas duas fontes no site inteiro */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;

  --fs-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
  --fs-h2: clamp(1.9rem, 3vw + 1rem, 3rem);
  --fs-h3: clamp(1.3rem, 1.5vw + 1rem, 1.75rem);
  --fs-body: 1.05rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Espaçamento */
  --space-section: clamp(4rem, 10vw, 8rem);
  --space-gap: clamp(1.5rem, 4vw, 3rem);
  --wrap-max: 1180px;
  --radius: 14px;
  --radius-sm: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;

  /* Header flutuante (pill com glass) — espaço reservado no topo das
     seções para o conteúdo não ficar escondido atrás dele, já que ele
     não ocupa espaço no fluxo do documento (position: fixed). */
  --header-space: clamp(6rem, 11vw, 7.5rem);

  /* Textura de papel — no fundo claro (body) usamos a mesma grade
     quadriculada do gradiente de marca, só que em linhas escuras bem
     sutis sobre quase-branco, pra ler como papel/grid, não como ruído. */
  --grid-line: #17151F06;

  /* Ruído sutil (feTurbulence), reservado pro fundo escuro da página de
     Contato — nunca deve interferir no contraste do texto. */
  --paper-noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.045 0.045 0.045 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------- Reset básico -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--color-paper);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { scroll-margin-top: var(--header-space); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--color-ink);
  max-width: 20ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
/* Regra de cor dos botões:
   - sobre fundo colorido (gradiente de marca) → outline branco (.btn--outline)
   - fora do fundo colorido → preenchido na cor primária da marca (.btn--primary) */
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(123, 122, 241, 0.45);
}
.btn--outline {
  border: 1.5px solid currentColor;
  background: transparent;
}
.btn--outline:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
}
/* Botão secundário sobre fundo claro (ex: modal) — contorno discreto */
.btn--ghost {
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-ink);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  background: var(--color-paper-dim);
  border-color: var(--color-primary);
}

/* -------------------- Reveal on scroll -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* -------------------- Linha desenhada à mão -------------------- */
/* Detalhe decorativo — um traço que "se desenha" devagar sob alguns
   títulos, reforçando o clima de esboço/processo de design. Usa
   pathLength="1" no SVG para não depender do comprimento real do
   traçado. Dispara junto com o .reveal do elemento pai (mesmo sistema
   de scroll-reveal do resto do site) e é puramente decorativo
   (aria-hidden), então não interfere em leitores de tela nem em foco. */
.sketch-underline {
  display: block;
  width: clamp(120px, 16vw, 190px);
  margin: 0.6rem auto 0;
  color: var(--color-accent-on-deep);
}
.sketch-underline path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease) 0.35s;
}
.reveal.is-visible .sketch-underline path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sketch-underline path { transition: none; stroke-dashoffset: 0; }
}

/* ==================== HEADER ==================== */
/* Header flutuante: um "pill" com vidro fosco (glass/blur), sempre claro
   com texto escuro — inclusive sobre o gradiente — pra manter contraste.
   Fica fora do fluxo do documento (fixed), por isso .hero/.page-header/
   .contact-page somam --header-space no padding-top delas. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(0.85rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem) 0;
  pointer-events: none;
}
.site-header__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--wrap-max);
  height: 72px;
  padding: 0 clamp(1rem, 3vw, 2rem);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 32px -14px rgba(23, 21, 31, 0.28);
  color: var(--color-ink);
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}
.nav__list {
  display: flex;
  gap: clamp(1.25rem, 2vw, 2.25rem);
  align-items: center;
}
.nav__list a {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__list a:hover {
  color: var(--color-accent);
}
.nav__list a.is-active {
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 700;
}
.nav__list a.is-active:hover {
  color: #fff;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.menu-toggle span {
  width: 22px; height: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.mobile-menu {
  pointer-events: auto;
  display: none;
  overflow: hidden;
  max-height: 0;
  width: 100%;
  max-width: var(--wrap-max);
  margin-top: 0.6rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 0 solid rgba(255, 255, 255, 0.55);
  color: var(--color-ink);
  transition: max-height 0.35s var(--ease);
}
.mobile-menu.is-open {
  max-height: 320px;
  border-width: 1px;
  box-shadow: 0 12px 32px -14px rgba(23, 21, 31, 0.28);
}
.mobile-menu__list { padding: 0.5rem clamp(1.25rem, 4vw, 3rem) 1.5rem; }
.mobile-menu__list li + li { margin-top: 0.25rem; }
.mobile-menu__list a {
  display: block;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 500;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.mobile-menu__list a.is-active {
  background: var(--gradient-brand);
  color: #fff;
  font-weight: 700;
}

@media (max-width: 760px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: block; }
}

/* ==================== GRADIENTE DE MARCA (hero + cabeçalhos internos) ==================== */
.gradient-panel {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-image:
    var(--paper-noise-light),
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    var(--gradient-brand);
  background-size: 160px 160px, 42px 42px, 42px 42px, 100% 100%;
}
.curve-divider {
  display: block;
  width: 100%;
  height: clamp(60px, 10vw, 140px);
  color: var(--color-paper);
}

/* Rastro do mouse — só existe dentro do painel de gradiente (a "parte
   roxa"), desenhado por JS num canvas. Fica atrás do conteúdo (o
   __inner de cada painel tem z-index:1). */
.trail-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ==================== HERO (home) ==================== */
/* padding-bottom fica no __inner (não na section) para a curva ficar
   sempre encostada na borda de baixo do painel gradiente. */
.hero { padding-top: calc(var(--header-space) + clamp(2.5rem, 6vw, 4.5rem)); }
.hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding-top: clamp(2rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
}
.hero .eyebrow { color: var(--color-accent-on-deep); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.08;
  margin-bottom: 1rem;
  white-space: nowrap;
}
.hero__subtitle {
  font-size: 1.15rem;
  color: #FFFFFFE0;
  max-width: 78ch;
  margin: 0 auto 2rem;
}

/* ==================== CABEÇALHO DE PÁGINA INTERNA (sobre / projetos) ==================== */
.page-header { padding-top: calc(var(--header-space) + clamp(3rem, 7vw, 5rem)); }
.page-header__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.page-header .eyebrow { color: var(--color-accent-on-deep); }
.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  color: #fff;
}
/* ==================== SOBRE — foto + texto (topo) ==================== */
/* Foto à esquerda (na proporção original, sem cortar nada — largura
   100%, altura automática) e texto à direita. A janelinha de contato
   fica encostada atrás da foto (mesma largura, escondida com
   translateY) e desce ao passar o mouse/focar um link dela, revelando
   o conteúdo por inteiro logo abaixo da foto. */
.about-hero {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1fr;
  gap: var(--space-gap);
  align-items: start;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1rem, 3vw, 2rem);
}
@media (max-width: 860px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero__photo { max-width: 340px; margin: 0 auto; }
}

/* Wrapper externo: é ele que recebe o :hover. No desktop ganha um
   respiro extra embaixo (espaço reservado de verdade, não só visual)
   para que passar o mouse por toda a região — inclusive já dentro da
   janelinha revelada — mantenha o hover ativo até o fim. */
.about-hero__photo { position: relative; }
@media (min-width: 861px) {
  .about-hero__photo { padding-bottom: 8.5rem; }
}

/* Wrap interno com o tamanho exato da foto (a janelinha e o cursor não
   contam pra altura dele) — é a referência de posição de ambos. */
.about-hero-cluster__frame-wrap { position: relative; }

.about-hero-cluster__photo-frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 48px -16px rgba(23, 21, 31, 0.28);
  transform: rotate(-2deg);
  background: var(--color-paper-dim);
}
.about-hero-cluster__photo-frame img {
  width: 100%;
  height: auto;
  display: block;
  animation: photo-frame-reveal 0.75s var(--ease) 2.42s both;
}
.about-hero-cluster__photo-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-brand);
  transform-origin: left;
  opacity: 0;
  animation: photo-loadbar-sweep 0.65s ease-out 2.42s both;
}

/* Só uma tirinha da janelinha aparece por baixo da foto em repouso —
   o resto dela some "atrás". Passando o mouse pela região (foto, a
   tirinha ou a folga reservada embaixo), ela desce e revela todo o
   conteúdo. Abre rápido, mas espera um pouco antes de fechar de novo,
   pra dar tempo de clicar nos links sem o componente sumir no caminho. */
.about-hero-cluster__card {
  position: absolute;
  z-index: 0;
  top: 100%;
  left: 0;
  width: 100%;
  transform: rotate(-5deg) translateY(calc(-100% + 1.35rem));
  transition: transform 0.6s var(--ease) 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .about-hero-cluster__card { transition: none; }
}
.about-hero__photo:hover .about-hero-cluster__card,
.about-hero__photo:focus-within .about-hero-cluster__card {
  transform: rotate(-5deg) translateY(0);
  transition: transform 0.35s var(--ease);
}

@media (max-width: 860px) {
  .about-hero-cluster__photo-frame { transform: none; }
  .about-hero-cluster__card {
    position: static;
    z-index: auto;
    transform: none;
    margin-top: 1.25rem;
  }
}

/* Animação de entrada: um cursor "chega" e clica na região da foto,
   que então entra como se fosse uma página de navegador carregando —
   revela de cima pra baixo + uma barrinha de progresso no topo. */
.photo-cursor {
  position: absolute;
  top: 42%;
  left: 46%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform-origin: 18% 8%;
  animation: photo-cursor-arrive 1.875s var(--ease) 1.3s both;
}
.photo-cursor__ripple {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
  transform: scale(0);
  animation: photo-cursor-ripple 0.55s ease-out 2.36s both;
}
@keyframes photo-cursor-arrive {
  0%   { opacity: 0; transform: translate(130px, -110px) scale(0.9); }
  12%  { opacity: 1; }
  55%  { opacity: 1; transform: translate(0, 0) scale(1); }
  66%  { transform: translate(0, 0) scale(0.8); }
  76%  { transform: translate(0, 0) scale(1.02); }
  88%  { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.9); }
}
@keyframes photo-cursor-ripple {
  0%   { opacity: 0.55; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes photo-frame-reveal {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0.5; }
  100% { clip-path: inset(0 0 0% 0); opacity: 1; }
}
@keyframes photo-loadbar-sweep {
  0%   { opacity: 1; transform: scaleX(0); }
  70%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-cursor { display: none; }
  .about-hero-cluster__photo-frame img { animation: none; }
  .about-hero-cluster__photo-frame::after { display: none; }
}

/* "Janela" reutilizável no estilo app/navegador — barra com título +
   pontinhos, conteúdo em vidro claro (mesma receita do header). */
.window-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 40px -20px rgba(23, 21, 31, 0.4);
  overflow: hidden;
}
.window-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--color-border);
}
.window-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
}
.window-card__dots { display: flex; gap: 0.3rem; }
.window-card__dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-border);
}
.window-card__list { display: flex; flex-direction: column; padding: 0.4rem; }
.window-card__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.window-card__list a:hover {
  background: var(--color-paper-dim);
  color: var(--color-accent);
}
.window-card__arrow { color: var(--color-ink-soft); }

/* ==================== SOBRE MIM — prévia (home) ==================== */
.about-teaser { position: relative; padding: clamp(3rem, 6vw, 5rem) 0; }
.about-teaser__inner {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: var(--space-gap);
  align-items: center;
}
/* A foto fica sobre uma forma orgânica (blob) na cor de marca, que espia
   por trás — o mesmo espírito das formas que "cortam" fotos no site
   original, só que sem depender de um fundo colorido na seção. */
.about-teaser__media {
  position: relative;
  max-width: 320px;
}
.about-teaser__media::before {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -10%;
  width: 78%;
  height: 78%;
  background: var(--gradient-brand);
  border-radius: 63% 37% 54% 46% / 43% 51% 49% 57%;
  z-index: 0;
}
.about-teaser__media__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-paper-dim);
}
.about-teaser__media img { width: 100%; height: 100%; object-fit: cover; }
.about-teaser__body p {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
  margin-top: 1.1rem;
  max-width: 56ch;
}
.about-teaser__body p:first-child { margin-top: 1rem; }
.about-teaser__link { margin-top: 1.75rem; }

@media (max-width: 900px) {
  .about-teaser__inner { grid-template-columns: 1fr; }
  .about-teaser__media { margin: 0 auto; }
}

/* ==================== TRABALHO EM DESTAQUE (home) ==================== */
.latest-work { padding: var(--space-section) 0; }
.latest-work__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.latest-work__link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: transform 0.25s var(--ease);
  display: inline-block;
}
.latest-work__link:hover { transform: translateX(4px); }

/* Cards modernos, no espírito "paper" do site: imagem inteira (sem
   cortar — são banners horizontais), texto embaixo, não sobreposto. */
.project-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 700px) {
  .project-cards { grid-template-columns: 1fr; }
}
.project-card {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 45px -32px rgba(23, 21, 31, 0.35);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .project-card:hover,
  .project-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 30px 55px -30px rgba(23, 21, 31, 0.4);
  }
}
.project-card__media { position: relative; background: var(--color-paper-dim); }
.project-card__media img {
  width: 100%;
  height: auto;
  display: block;
}
.project-card__lock {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(23, 21, 31, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem 1.5rem;
}
.project-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 600;
  color: var(--color-ink);
  max-width: 24ch;
}
.project-card__meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.project-card__arrow {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  font-size: 1.05rem;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .project-card:hover .project-card__arrow,
  .project-card:focus-visible .project-card__arrow {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translate(3px, -3px);
  }
}

/* ==================== PÁGINA PROJETOS — cards empilhados ==================== */
/* Cada card é a própria imagem que a Caroline já desenha pronta (banner
   bem alongado horizontalmente, título/tags/mockup já dentro do PNG) —
   aqui só empilhamos com espaço generoso e damos uma micro-interação
   no hover. Nada de texto extra sobreposto. */
.projects-page { position: relative; padding: clamp(2.5rem, 6vw, 4rem) 0 var(--space-section); }
.project-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.project-showcase__item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(23, 21, 31, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.project-showcase__item img {
  width: 100%;
  height: auto;
  display: block;
}
.project-showcase__lock {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #17151Fcc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .project-showcase__item:hover,
  .project-showcase__item:focus-visible {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 28px 56px -24px rgba(23, 21, 31, 0.45);
  }
}

/* Cursor customizado — só em telas com mouse de verdade (não touch).
   O cursor nativo some sobre o card e essa "pill" (mesmo vidro do
   header) segue o mouse com o texto "Explorar". */
@media (hover: hover) and (pointer: fine) {
  .project-showcase__item { cursor: none; }
}
.cursor-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 32px -14px rgba(23, 21, 31, 0.28);
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.cursor-label.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ==================== PÁGINA SOBRE — texto + timeline ==================== */
.about-body { position: relative; padding: clamp(2.5rem, 6vw, 4rem) 0 var(--space-section); }
.about-body__intro {
  max-width: 68ch;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}
.about-body__intro p {
  color: var(--color-ink-soft);
  font-size: 1.1rem;
  margin-top: 1.1rem;
}
.about-body__intro p:first-child { margin-top: 0; }
.about-body__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* ==================== WHAT I WORK WITH — faixa contínua (vidro) ==================== */
.skills { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.skills__heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  text-align: center;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.skills-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.skills-track {
  display: flex;
  width: max-content;
}
@media (prefers-reduced-motion: no-preference) {
  .skills-track {
    animation: skills-scroll 36s linear infinite;
  }
  .skills-marquee:hover .skills-track {
    animation-play-state: paused;
  }
}
@keyframes skills-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.skills-group {
  display: flex;
  flex-shrink: 0;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  padding-right: clamp(1rem, 2.5vw, 1.5rem);
}
.skill-card {
  flex-shrink: 0;
  width: clamp(240px, 26vw, 290px);
  padding: 1.3rem 1.5rem 1.2rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 30px -18px rgba(23, 21, 31, 0.28);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .skill-card:hover {
    transform: scale(1.03);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px -18px rgba(23, 21, 31, 0.4);
  }
}
.skill-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--color-accent);
}
.skill-card__items {
  margin-top: 0.6rem;
  color: var(--color-ink-soft);
  font-size: 0.82rem;
  line-height: 1.55;
}
.skill-card__list {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.skill-card__list li {
  color: var(--color-ink-soft);
  font-size: 0.82rem;
}
@media (prefers-reduced-motion: reduce) {
  .skills-group[aria-hidden="true"] { display: none; }
}

.timeline-group { max-width: 780px; margin: 0 auto; }
.timeline-group + .timeline-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.timeline-group__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}
.timeline-item {
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
}
.timeline-group ol li:last-child .timeline-item { border-bottom: 1px solid var(--color-border); }
.timeline-item__role {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
}
.timeline-item__org {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-accent);
  margin-top: 0.15rem;
}
.timeline-item__period {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.timeline-item__text {
  grid-column: 1 / -1;
  color: var(--color-ink-soft);
  margin-top: 0.5rem;
  max-width: 62ch;
}

/* -------------------- Cursos: "caderno" com switch Design / Idiomas -------------------- */
/* Cartão com textura de papel + espiral desenhada na lateral, pra dar
   um clima de página de caderno anotada — em vez da timeline padrão
   usada por Experiências/Educação. */
.courses-notebook {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 20px 45px -32px rgba(23, 21, 31, 0.3);
  padding: 1.6rem 1.75rem 1.75rem 3.1rem;
  overflow: hidden;
  min-height: 30rem;
}
@media (max-width: 640px) {
  .courses-notebook { min-height: 0; }
}
.courses-notebook::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='26' viewBox='0 0 18 26'%3E%3Cellipse cx='9' cy='13' rx='6' ry='8.5' fill='none' stroke='%2355536B' stroke-width='1.4' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 18px 26px;
  pointer-events: none;
}

/* Abas como texto escrito, com uma "marca-texto" roxa (grifo) atrás
   da selecionada — em vez de um switch/pill tradicional. */
.courses-switch {
  display: flex;
  gap: 1.6rem;
  margin-bottom: 1.3rem;
}
.courses-switch__btn {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  padding: 0.1rem 0.05rem;
  transition: color 0.3s var(--ease);
}
.courses-switch__btn span { position: relative; z-index: 1; }
.courses-switch__btn::before {
  content: "";
  position: absolute;
  left: -0.35rem;
  right: -0.35rem;
  bottom: 0.02rem;
  height: 0.6em;
  background: var(--color-primary);
  opacity: 0.32;
  border-radius: 4px 7px 5px 8px / 6px 4px 7px 5px;
  transform: scaleX(0) rotate(-1.2deg);
  transform-origin: left center;
  transition: transform 0.4s var(--ease);
}
.courses-switch__btn.is-active { color: var(--color-ink); }
.courses-switch__btn.is-active::before { transform: scaleX(1) rotate(-1.2deg); }
@media (prefers-reduced-motion: reduce) {
  .courses-switch__btn::before { transition: none; }
}

.courses-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 2rem;
}
@media (max-width: 640px) {
  .courses-list { grid-template-columns: 1fr; }
}
.courses-list__item {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--color-border);
  transform: rotate(var(--r, 0deg));
}
.courses-list__item:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 640px) {
  .courses-list__item:nth-last-child(-n+2) { border-bottom: 1px dashed var(--color-border); }
  .courses-list__item:last-child { border-bottom: none; }
}
.courses-list__mark {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  flex-shrink: 0;
}
.courses-list__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-ink);
  position: relative;
  display: inline-block;
}
.courses-list__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.courses-list__item:hover .courses-list__name::after,
.courses-list__item:focus-within .courses-list__name::after {
  transform: scaleX(1);
}
.courses-list__meta {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  margin-top: 0.15rem;
}
@media (prefers-reduced-motion: reduce) {
  .courses-list__name::after { transition: none; }
}

/* Ícones de ferramentas de design, no canto inferior direito do
   caderno — só decorativos, aparecem quando sobra espaço (ex.: aba
   Idiomas, com menos linhas que Design). */
.courses-notebook__deco {
  position: absolute;
  right: 1.5rem;
  bottom: 1.3rem;
  display: flex;
  gap: 1.1rem;
  align-items: flex-end;
  pointer-events: none;
  z-index: 0;
}
.courses-notebook__deco svg {
  width: clamp(22px, 2.6vw, 30px);
  height: auto;
  color: var(--color-ink-soft);
  opacity: 0.16;
}
.courses-notebook__deco svg path { fill: currentColor; }
.courses-notebook__deco svg:nth-child(2) { transform: rotate(-6deg) translateY(-4px); }
.courses-notebook__deco svg:nth-child(3) { transform: rotate(5deg); }
@media (max-width: 640px) {
  .courses-notebook__deco { display: none; }
}

/* ==================== GALERIA DE HISTÓRIAS — mood board (fim da página Sobre) ==================== */
.story-gallery { padding: clamp(2rem, 5vw, 3rem) 0 var(--space-section); }
.story-gallery__head {
  max-width: 620px;
  margin: 0 auto clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
}
.story-gallery__intro {
  color: var(--color-ink-soft);
  margin-top: 0.75rem;
}

.story-gallery__board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  align-items: start;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2.5vw, 1.75rem);
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 860px) {
  .story-gallery__board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .story-gallery__board { grid-template-columns: 1fr; }
}

/* Cada foto é um "polaroid" preso no mural — leve rotação própria (--r),
   alternando fita ou pin (definido pela classe --tape/--pin no JS). Em
   telas de desktop (3 por linha), a 2ª e 3ª coluna ficam levemente
   escalonadas verticalmente pra fugir da cara de grade alinhada. */
.story-card {
  position: relative;
  width: clamp(180px, 21vw, 240px);
  background: #fff;
  padding: 0.85rem 0.85rem 1.3rem;
  border-radius: 3px;
  box-shadow: 0 14px 30px -16px rgba(23, 21, 31, 0.4);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
@media (min-width: 860px) {
  .story-card:nth-child(3n+2) { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
  .story-card:nth-child(3n) { margin-top: clamp(0.75rem, 1.5vw, 1.25rem); }
}

.story-card__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1px;
  background: var(--color-paper-dim);
}
.story-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story-card__caption {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--color-ink-soft);
  text-align: center;
  transform: rotate(-1deg);
}

.story-card--tape::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: 64px;
  height: 24px;
  background: linear-gradient(180deg, rgba(166, 196, 250, 0.85), rgba(166, 196, 250, 0.55));
  box-shadow: 0 2px 4px rgba(23, 21, 31, 0.15);
  transform: translateX(-50%) rotate(-3deg);
}
.story-card--pin::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 3px 6px rgba(23, 21, 31, 0.4), inset 0 -2px 2px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: no-preference) {
  .story-card:hover,
  .story-card:focus-visible {
    transition-delay: 0s;
    transform: rotate(0deg) translateY(-6px) scale(1.04);
    box-shadow: 0 22px 40px -16px rgba(23, 21, 31, 0.5);
    z-index: 2;
  }
}

/* Entrada: escala + gira até a rotação final conforme cada card aparece
   na tela, com um pequeno atraso em cascata (--i = índice do card). */
.story-card.reveal {
  opacity: 0;
  transform: scale(0.85) translateY(24px) rotate(0deg);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.story-card.reveal.is-visible {
  opacity: 1;
  transform: rotate(var(--r, 0deg)) scale(1) translateY(0);
}


/* ==================== CTA FINAL (Sobre) — fecha com o gradiente de marca ==================== */
.closing-cta { padding-top: clamp(3.5rem, 8vw, 5.5rem); }
.closing-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
}
.closing-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.2;
}
.closing-cta__text {
  margin-top: 1rem;
  font-size: 1.05rem;
  opacity: 0.9;
}
.closing-cta .btn { margin-top: 2rem; }

/* ==================== CTA FINAL (Projetos) — pergunta pequena + "grito"
   tipográfico em outline, mesmo espírito de traço/esboço da marca ==================== */
.projects-cta { padding-top: clamp(3.5rem, 8vw, 5.5rem); }
.projects-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
}
.projects-cta__question {
  font-size: 1.15rem;
  font-weight: 500;
  max-width: 56ch;
  margin: 0 auto;
  opacity: 0.9;
}
.projects-cta__shout {
  margin-top: 0.5rem;
  font-size: 1.15rem;
  font-weight: 500;
  opacity: 0.9;
}
.projects-cta .btn { margin-top: 2.5rem; }

/* ==================== PÁGINA 404 ==================== */
.not-found {
  display: flex;
  align-items: center;
  min-height: 100vh;
}
.not-found__inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: calc(var(--header-space) + 2rem) 0 clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.not-found__illustration {
  width: clamp(96px, 14vw, 140px);
  margin: 0 auto;
}
.not-found__code {
  margin-top: 1.25rem;
  font-family: var(--font-body);
  font-size: clamp(5rem, 18vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
}
@supports not (-webkit-text-stroke: 1px #fff) {
  .not-found__code { color: #fff; }
}
.not-found__heading {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.2;
}
.not-found__text {
  margin-top: 1rem;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}
.not-found .btn { margin-top: 2rem; }

/* ==================== PÁGINA CONTATO ==================== */
.contact-page {
  position: relative;
  padding: clamp(2.5rem, 6vw, 4rem) 0 var(--space-section);
}
.contact-page__heading {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 500;
  max-width: 18ch;
  margin-bottom: 2.5rem;
}
.contact-page__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-gap);
  align-items: start;
}
.social-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.social-row a {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.social-row a:hover {
  background: var(--color-paper-dim);
  transform: translateY(-3px);
}
.contact-page__direct {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.contact-page__direct a:hover { color: var(--color-accent); }

.contact-form {
  background: var(--color-paper-dim);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}
.field input, .field textarea {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  background: #fff;
  color: var(--color-ink);
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-ink-soft); opacity: 0.7; }
.field input:focus, .field textarea:focus { border-color: var(--color-primary); }
.contact-form .btn { align-self: flex-start; margin-top: 0.25rem; }
.contact-page__cv { margin-top: 2.5rem; }
.contact-page__cv a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

@media (max-width: 860px) {
  .contact-page__inner { grid-template-columns: 1fr; }
}

/* "Alguns projetos" + "Áreas de atuação" reaproveitados aqui — mesmas
   cores padrão (fundo claro) do resto do site, sem overrides. */
.contact-projects { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
.contact-projects__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--color-ink);
  max-width: 20ch;
}
.contact-projects__link {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: transform 0.25s var(--ease);
  display: inline-block;
}
.contact-projects__link:hover { transform: translateX(4px); }

.contact-page .skills { margin-top: clamp(3.5rem, 8vw, 5.5rem); }

/* ==================== FOOTER ==================== */
.site-footer { padding: 2rem 0; }
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}
.site-footer--on-deep { background: var(--color-deep); }
.site-footer--on-deep .site-footer__inner { color: #FFFFFFa0; }
.footer__back-top:hover { color: var(--color-primary); }
.site-footer--on-deep .footer__back-top:hover { color: var(--color-accent-on-deep); }

/* ==================== MODAL DE SENHA ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 14, 29, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
  z-index: 200;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--color-paper);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 400px;
  width: 100%;
  position: relative;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s var(--ease);
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
.modal h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
}
.modal p { color: var(--color-ink-soft); font-size: var(--fs-small); }
.modal__close {
  position: absolute;
  top: 0.75rem; right: 0.9rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-ink-soft);
}
#password-form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
#password-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}
#password-input:focus { border-color: var(--color-primary); }
.modal__error {
  display: none;
  color: var(--color-error) !important;
  font-size: var(--fs-small) !important;
}
.modal.has-error .modal__error { display: block; }
.modal.has-error #password-input {
  border-color: var(--color-error);
  animation: shake 0.4s var(--ease);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .modal.has-error #password-input { animation: none; }
}

/* ==================== BARRA DE PROGRESSO — traço à mão na lateral ==================== */
/* Em vez de uma barra reta, uma linha com leve ondulação (mesma ideia
   do .sketch-underline) que "se desenha" conforme a página rola. Fica
   escondida em mobile — não tem margem sobrando pra ela lá. */
.scroll-progress {
  position: fixed;
  top: 0;
  right: clamp(0.5rem, 2vw, 1.1rem);
  width: 16px;
  height: 100vh;
  z-index: 90;
  pointer-events: none;
}
.scroll-progress__track,
.scroll-progress__fill {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.scroll-progress__track { stroke: var(--color-border); }
.scroll-progress__fill {
  stroke: var(--color-primary);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-progress__fill { transition: stroke-dashoffset 0.12s linear; }
}
@media (max-width: 760px) {
  .scroll-progress { display: none; }
}

/* ==================== DOODLES decorativos ==================== */
/* Ícones-rabisco (lápis, régua, lupa...) espalhados nas margens de
   algumas seções, se desenhando (mesma técnica de stroke-dashoffset)
   conforme entram na tela — reaproveita o observer de .reveal. */
/* Ícones de ferramentas de design (pasta /icones), soltos pelos
   cantos das seções — bem discretos, só pra dar um clima de
   "processo criativo" sem chamar atenção. */
.doodle {
  position: absolute;
  width: clamp(26px, 3.4vw, 40px);
  height: auto;
  color: var(--color-ink-soft);
  opacity: 0;
  transform: scale(0.7) rotate(-8deg);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.doodle--on-deep { color: #FFFFFF; }
.doodle path { fill: currentColor; }
.doodle.is-visible {
  opacity: 0.175;
  transform: scale(1) rotate(0deg);
}
.doodle--on-deep.is-visible { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) {
  .doodle { transition: none; }
}
@media (max-width: 900px) {
  .doodle { display: none; }
}

/* ==================== TRANSIÇÃO ENTRE PÁGINAS — fade + leve encolhida ==================== */
/* Só o conteúdo (#conteudo) esmaece e encolhe um pouco antes de trocar
   de página — header/rodapé ficam parados. Bem mais discreto que um
   painel cobrindo a tela. */
#conteudo {
  transform-origin: top center;
}
@media (prefers-reduced-motion: no-preference) {
  #conteudo { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
}
#conteudo.is-transitioning {
  opacity: 0;
  transform: scale(0.98);
}