/* ============================================================
   Portfólio Maria Fernanda — fiel ao Figma (frame de 1920 px)
   --k = 1 pixel do Figma convertido para a tela atual
   ============================================================ */
:root {
  --roxo: #5642bb;
  --lima: #e2f633;
  --lilas: #e5e0ff;
  --escuro: #373737;
  --branco: #ffffff;
  --fundo: #ededed;
  --k: min(1px, calc(100vw / 1920));
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url(fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Manrope", system-ui, sans-serif;
  background: var(--fundo);
  color: var(--escuro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul { list-style: none; }

/* ---------- tipografia (tamanhos do Figma) ---------- */
.t96 { font-size: calc(96 * var(--k)); font-weight: 800; line-height: 1.37; }
.t48 { font-size: calc(48 * var(--k)); font-weight: 800; }
.t32 { font-size: calc(32 * var(--k)); line-height: 1.37; }
.t24 { font-size: calc(24 * var(--k)); line-height: 1.37; }
.t20 { font-size: calc(20 * var(--k)); line-height: 1.37; }
.leve { font-weight: 300; margin-left: calc(26 * var(--k)); }
.medio { font-weight: 500; color: #000; }
.negrito { font-weight: 700; }
.escuro { color: var(--escuro); }
.cinza { color: var(--escuro); }
.lima { color: var(--lima); }
.titulo-roxo { color: var(--roxo); }
strong { font-weight: 700; }

/* ---------- posicionamento em unidades do Figma ---------- */
.a {
  position: absolute;
  left: calc(var(--x, 0) * var(--k));
  top: calc(var(--y, 0) * var(--k));
}
.a[style*="--w"] { width: calc(var(--w) * var(--k)); }
.a[style*="--h"] { height: calc(var(--h) * var(--k)); }

/* ---------- cabeçalho ---------- */
.cabecalho {
  height: calc(124 * var(--k));
  min-height: 56px;
  background: #f6f6f6;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 5;
}
.logo img { width: calc(222 * var(--k)); min-width: 110px; height: auto; transition: transform .5s var(--ease); }
.logo:hover img { transform: scale(1.06) rotate(-2deg); }

/* ---------- mesa + pasta ---------- */
.mesa { padding: calc(110 * var(--k)) 0; display: flex; justify-content: center; }
.pasta { position: relative; width: calc(1594 * var(--k)); isolation: isolate; filter: drop-shadow(0 calc(18 * var(--k)) calc(28 * var(--k)) rgba(0, 0, 0, .1)); }

.abas { position: relative; height: calc(105 * var(--k)); }
.aba {
  position: absolute; top: 0;
  width: calc(476.5 * var(--k)); height: calc(136 * var(--k));
  z-index: 0;
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
.aba svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.aba span {
  position: relative; display: block;
  font-size: calc(40 * var(--k)); font-weight: 600;
  padding-top: calc(19 * var(--k));
  transition: transform .45s var(--ease);
}
.aba--sobre { left: calc(104.5 * var(--k)); }
.aba--trabalhos { left: calc(559 * var(--k)); }
.aba--contato { left: calc(1017 * var(--k)); }
.aba--sobre path { fill: var(--roxo); }
.aba--sobre span { color: var(--lima); }
.aba--trabalhos path { fill: var(--branco); }
.aba--trabalhos span { color: var(--roxo); }
.aba--contato path { fill: var(--lima); }
.aba--contato span { color: var(--roxo); }

/* aba inativa: um pouco "para trás"; sobe quando passa o mouse */
/* aba ativa: na frente da pasta, com a mesma cor, como uma aba de verdade */
.pasta[data-ativa="sobre"] .aba--sobre,
.pasta[data-ativa="trabalhos"] .aba--trabalhos,
.pasta[data-ativa="contato"] .aba--contato { z-index: 2; cursor: default; }
/* abas de trás ficam encaixadas atrás da pasta e sobem um pouco no hover */
@media (hover: hover) {
  .pasta:not([data-ativa="sobre"]) .aba--sobre:hover,
  .pasta:not([data-ativa="trabalhos"]) .aba--trabalhos:hover,
  .pasta:not([data-ativa="contato"]) .aba--contato:hover { transform: translateY(calc(-10 * var(--k))); }
  .aba:hover span { transform: scale(1.04); }
}
.aba.puxada { animation: puxar .6s var(--ease); }
@keyframes puxar { from { transform: translateY(calc(-22 * var(--k))); } }
.aba:focus-visible { outline: 3px solid var(--roxo); outline-offset: 4px; border-radius: 12px; }

.corpo {
  position: relative; z-index: 1;
  border-radius: calc(80 * var(--k));
  background: var(--roxo);
  transition: background-color .55s var(--ease), height .7s var(--ease);
  overflow: hidden;
}
.pasta[data-ativa="sobre"] .corpo { background: var(--roxo); }
.pasta[data-ativa="trabalhos"] .corpo { background: var(--branco); }
.pasta[data-ativa="contato"] .corpo { background: var(--lima); }

.painel { position: relative; }
.painel--sobre { height: calc(2131 * var(--k)); }
.painel--trabalhos { height: calc(8410 * var(--k)); }
.painel--contato { height: calc(877 * var(--k)); }
.painel[hidden] { display: none; }

/* troca de pasta estilo baralho (o movimento fica no script.js) */
.pasta-saindo { position: absolute; left: 0; top: 0; pointer-events: none; }
.pasta-saindo { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .16)); }
.pasta-saindo video { visibility: hidden; }
.painel.entrando { animation: entrar .7s var(--ease) .35s both; }
@keyframes entrar {
  from { opacity: 0; transform: translateY(calc(40 * var(--k))); }
  to { opacity: 1; transform: none; }
}

/* ---------- SOBRE MIM ---------- */
.painel--sobre { color: var(--branco); }
.foto { perspective: 900px; }
.foto__img { width: 100%; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.foto__chip {
  position: absolute; width: calc(403 * var(--k));
  left: calc(132 * var(--k)); top: calc(589 * var(--k));
  animation: flutuar 5s ease-in-out infinite;
}
.apresentacao { display: flex; flex-direction: column; }
.apresentacao .t24:nth-of-type(1) { margin-bottom: calc(33 * var(--k)); }
.apresentacao .t24:nth-of-type(2) { margin-bottom: calc(0 * var(--k)); min-height: calc(132 * var(--k)); }
.apresentacao .t24 strong { font-weight: 800; }
.nome { color: var(--branco); line-height: 1; height: calc(226 * var(--k)); }
.nome .linha { display: block; }
.sorriso { display: inline-block; transform-origin: 30% 60%; }
.nome:hover .sorriso { animation: piscar .9s var(--ease); }
@keyframes piscar { 30% { transform: rotate(18deg) scale(1.15); } 60% { transform: rotate(-8deg); } }

.cartao { background: var(--lilas); border-radius: calc(47 * var(--k)); color: var(--escuro); }
.bloco { white-space: nowrap; }
.bloco h2 { position: relative; z-index: 1; }
.brilho { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); width: calc(var(--w) * var(--k)); max-width: none; pointer-events: none; }
.bloco:hover .brilho, .bloco.visivel .brilho { animation: balançar 2.6s ease-in-out infinite; }
@keyframes balançar { 50% { transform: translateY(calc(-6 * var(--k))) rotate(-4deg); } }

.softwares { height: calc(72 * var(--k)); }
.sw {
  position: absolute; top: 0;
  left: calc((var(--i) * 86.4) * var(--k));
  width: calc(74 * var(--k)); height: calc(72 * var(--k));
  background: url(assets/softwares.png) no-repeat;
  background-size: calc(506 * var(--k)) calc(72 * var(--k));
  background-position: calc(var(--i) * -86.4 * var(--k)) 0;
  transition: transform .4s var(--ease);
}
.sw:hover { transform: translateY(calc(-10 * var(--k))) rotate(-6deg) scale(1.08); }
.mais { position: absolute; width: calc(25 * var(--k)); left: calc(409.9 * var(--k)); top: calc(25.7 * var(--k)); z-index: 1; }
.dupla { height: calc(163 * var(--k)); }
.dupla .seta-dupla { position: absolute; width: calc(88 * var(--k)); left: 0; top: calc(90 * var(--k)); }
.dupla .nota:not(.seta-dupla) { position: absolute; width: calc(378 * var(--k)); left: calc(116 * var(--k)); top: 0; }

.botoes { display: flex; gap: calc(26 * var(--k)); }
.botao {
  width: calc(360 * var(--k)); height: calc(109 * var(--k));
  border-radius: calc(18 * var(--k));
  background: var(--roxo); color: var(--lilas); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s;
}
.botao:hover { transform: translateY(calc(-6 * var(--k))); box-shadow: 0 12px 22px rgba(86, 66, 187, .35); }
.botao:active { transform: translateY(0) scale(.98); }

.subir img { width: 100%; transition: transform .4s var(--ease); }
.subir:hover img { animation: pular .8s var(--ease) infinite; }
@keyframes pular { 50% { transform: translateY(calc(-10 * var(--k))); } }

/* ---------- TRABALHOS ---------- */
.projeto { white-space: nowrap; color: var(--escuro); font-size: calc(96 * var(--k)); line-height: normal; font-weight: 800; }
.img { transition: transform .5s var(--ease), box-shadow .5s var(--ease); border-radius: calc(44 * var(--k)); }
.img:hover { transform: translateY(calc(-8 * var(--k))) scale(1.012); box-shadow: 0 calc(20 * var(--k)) calc(40 * var(--k)) rgba(0, 0, 0, .12); }

.mascotes img { width: 100%; animation: flutuar 4.5s ease-in-out infinite; transform-origin: bottom center; }
.pilares { position: relative; height: calc(66 * var(--k)); margin-top: calc(-2 * var(--k)); }
.pilares li {
  position: absolute; left: calc(var(--px) * var(--k)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-size: calc(24 * var(--k)); color: #000;
}
.pilares b { font-weight: 500; }
.pilares span { font-weight: 300; }
.tiana-logo { transition: transform .6s var(--ease); }
.tiana-logo:hover { transform: rotate(-3deg) scale(1.03); }
.faixa { display: flex; height: calc(22 * var(--k)); }
.faixa i { flex: 1; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.faixa.visivel i { transform: scaleX(1); }
.faixa.visivel i:nth-child(2) { transition-delay: .15s; }
.faixa.visivel i:nth-child(3) { transition-delay: .3s; }
.faixa.visivel i:nth-child(4) { transition-delay: .45s; }

.audiovisual {
  background: #fcfcfc;
  border-radius: calc(80 * var(--k)) calc(80 * var(--k)) 0 0;
  box-shadow: 0 calc(-59 * var(--k)) calc(70 * var(--k)) calc(-55 * var(--k)) rgba(0, 0, 0, .17);
}
.videos {
  display: grid; grid-template-columns: repeat(3, calc(368 * var(--k)));
  column-gap: calc(69 * var(--k)); row-gap: calc(71 * var(--k));
}
.video {
  height: calc(670 * var(--k)); border-radius: calc(46 * var(--k));
  background: #d9d9d9; overflow: hidden;
  transition: transform .5s var(--ease);
}
.video:hover { transform: translateY(calc(-8 * var(--k))); }
.video video, .video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }

.contexto { background: rgba(217, 217, 217, .2); }
.nota--contexto { z-index: 1; }
.ilustracao { animation: flutuar 6s ease-in-out infinite; }

/* ---------- CONTATO ---------- */
.contato { display: flex; flex-direction: column; color: var(--escuro); }
.contato .t96 { line-height: 1.36; white-space: nowrap; }
.contato .t32 { margin-bottom: calc(31 * var(--k)); }
.contato__dados a { position: relative; transition: color .3s; }
.contato__dados a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--roxo); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.contato__dados a:hover { color: var(--roxo); }
.contato__dados a:hover::after { transform: scaleX(1); }
.marca-dagua {
  display: block; margin-top: calc(26 * var(--k));
  width: calc(350 * var(--k)); height: calc(50 * var(--k));
  background: rgba(55, 55, 55, .06);
  -webkit-mask: url(assets/logo.png) no-repeat left center / contain;
          mask: url(assets/logo.png) no-repeat left center / contain;
}

/* ---------- animações gerais ---------- */
@keyframes flutuar { 50% { transform: translateY(calc(-10 * var(--k))); } }

.js .r { opacity: 0; transform: translateY(calc(40 * var(--k))); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .r.visivel { opacity: 1; transform: none; }
.js .img.r.visivel:hover { transform: translateY(calc(-8 * var(--k))) scale(1.012); }

/* anotações à mão: aparecem como se estivessem sendo escritas */
.js .nota {
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.6s cubic-bezier(.45, .05, .35, 1), mask-position 1.6s cubic-bezier(.45, .05, .35, 1);
}
.js .nota.visivel { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* nome entrando letra a letra */
.js .nome .letra { display: inline-block; opacity: 0; transform: translateY(.35em) rotate(6deg); animation: letra .7s var(--ease) forwards; animation-delay: calc(var(--n) * 35ms + .2s); }
@keyframes letra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .r, .js .nome .letra { opacity: 1 !important; transform: none !important; }
  .js .nota { -webkit-mask-image: none !important; mask-image: none !important; }
  .faixa i { transform: none; }
}

@media (hover: none) {
  .img:hover, .js .img.r.visivel:hover, .video:hover, .botao:hover, .sw:hover, .tiana-logo:hover, .logo:hover img { transform: none; box-shadow: none; }
  .botao:hover { box-shadow: 0 4px 4px rgba(0, 0, 0, .25); }
}

/* ============================================================
   MOBILE — o mesmo design, reorganizado em uma coluna
   ============================================================ */
@media (max-width: 860px) {
  :root { --k: 0.5px; }
  .t96 { font-size: 40px; line-height: 1.1; }
  .t48 { font-size: 24px; }
  .t32 { font-size: 16px; line-height: 1.45; }
  .t24 { font-size: 15px; line-height: 1.5; }
  .t20 { font-size: 13px; }
  .leve { margin-left: 8px; font-size: 13px; }

  .mesa { padding: 24px 10px 40px; }
  .pasta { width: 100%; }
  .abas { height: 46px; }
  .aba { width: 31%; height: 60px; }
  .aba span { font-size: 15px; padding-top: 12px; }
  .aba--sobre { left: 7%; }
  .aba--trabalhos { left: 34.5%; }
  .aba--contato { left: 62%; }
  .corpo { border-radius: 28px; }

  .painel { height: auto !important; padding: 28px 20px 40px; display: flex; flex-direction: column; }
  .painel[hidden] { display: none; }
  .a { position: relative; left: auto; top: auto; width: auto !important; height: auto !important; }

  /* sobre mim */
  .painel--sobre > .nota { width: 190px !important; align-self: center; margin-bottom: 6px; order: 1; }
  .foto { order: 0; width: 88% !important; max-width: 340px; align-self: center; margin: 0 0 6px; }
  .foto__chip { width: 61%; left: 20%; top: 74.5%; }
  .painel--sobre > .nota { order: 1; }
  .apresentacao { order: 2; margin-bottom: 28px; }
  .nome { font-size: 46px; height: auto; margin-bottom: 18px; }
  .apresentacao .t24:nth-of-type(1) { margin-bottom: 16px; }
  .apresentacao .t24:nth-of-type(2) { min-height: 0; margin-bottom: 16px; }
  .cartao { order: 3; padding: 32px 22px 30px; border-radius: 24px; display: flex; flex-direction: column; }
  .cartao .bloco { margin-top: 30px; }
  .cartao .bloco:first-child { margin-top: 0; }
  .cartao > .t32, .cartao > .cinza { margin-top: 4px; }
  .softwares { margin-top: 16px; width: 253px !important; height: 36px !important; }
  .dupla { width: 100% !important; height: 84px !important; margin: 4px 0 0; }
  .dupla .seta-dupla { left: 184px; top: 8px; width: 44px; transform: rotate(-90deg); }
  .dupla .nota:not(.seta-dupla) { left: 0; top: 30px; width: 178px; }
  .botoes { margin-top: 18px; gap: 12px; }
  .botao { flex: 1; width: auto; height: 54px; border-radius: 12px; }
  .subir { order: 4; width: 44px !important; align-self: center; margin-top: 28px; }

  /* trabalhos */
  .painel--trabalhos { padding-top: 34px; }
  .painel--trabalhos .projeto { margin: 34px 0 14px; white-space: normal; font-size: 24px; line-height: 1.2; }
  /* galerias: o mesmo mosaico do desktop, em escala */
  .galeria { position: relative; width: 100%; aspect-ratio: var(--gw) / var(--gh); }
  .galeria .img {
    position: absolute;
    left: calc((var(--x) - var(--gx)) / var(--gw) * 100%);
    top: calc((var(--y) - var(--gy)) / var(--gh) * 100%);
    width: calc(var(--w) / var(--gw) * 100%) !important;
    border-radius: 12px;
  }
  .tiana { display: flex; flex-direction: column; }
  .mascotes { margin-top: 10px; }
  .pilares { height: 46px; }
  .pilares li { font-size: 13px; }
  .tiana .nota { width: 170px !important; align-self: flex-end; margin-top: 18px; order: 3; }
  .tiana-logo { width: 72% !important; align-self: center; order: 4; }
  .faixa { order: 5; margin-top: 22px; height: 11px !important; }
  .tiana-frase, .tiana > .nota:last-child { order: 6; width: 90% !important; align-self: center; margin-top: 12px; }
  .painel--trabalhos > .img { border-radius: 18px; }
  .audiovisual { margin: 44px -20px 0; padding: 36px 20px 44px; border-radius: 32px 32px 0 0; }
  .audiovisual .projeto { margin-top: 30px; }
  .videos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .video { height: auto; aspect-ratio: 368 / 670; border-radius: 18px; }
  .painel--trabalhos > .r:has(h2) { margin-top: 30px; }
  .nota--contexto { width: 140px !important; align-self: flex-end; margin-top: -6px; }
  .contexto { margin: 0 -20px; padding: 26px 20px; }
  .contexto p + p { margin-top: 16px; }
  .trevo { display: flex; flex-direction: column; margin-top: 26px; }
  .trevo-logo { width: 72% !important; }
  .trevo .nota { width: 200px !important; align-self: flex-end; margin: 6px 0 14px; }
  .trevo .t32 + .t32 { margin-top: 16px; }
  .ilustracao { width: 62% !important; align-self: center; margin: 20px 0; }
  .trevo .t20 { order: 10; }

  /* contato */
  .painel--contato { padding: 48px 22px 56px; }
  .contato .t96 { white-space: normal; margin-bottom: 14px; }
  .contato .t32 { margin-bottom: 20px; max-width: none !important; }
  .marca-dagua { width: 175px; height: 25px; }
}

@media (max-width: 380px) {
  .nome { font-size: 40px; }
  .aba span { font-size: 13px; }
}

/* a cópia que sai na troca de pasta fica congelada como estava */
.pasta-saindo *, .pasta-saindo *::before, .pasta-saindo *::after { animation: none !important; transition: none !important; }
.pasta-saindo .letra, .pasta-saindo .r, .pasta-saindo .nota { opacity: 1 !important; }