/* ============================================================
   JENNIFER MATTOS
   Preto, tipografia grande e fechada, vermelho como acento.
   ============================================================ */

:root {
  --preto:   #0A0A0A;
  --claro:   #F4F4F4;
  --mudo:    #8C8C8C;
  --linha:   rgba(244, 244, 244, .12);
  --vermelho:#E01B32;
  --vermelho-claro:#FF5A6E;   /* o mesmo acento, legível em texto pequeno */
  --verde:   #46D160;

  --fonte: "Geist", "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: "Anton", "Geist", sans-serif;   /* o nome, no hero e na abertura */
  /* o ponteiro do site: seta vermelha, e branca quando passa sobre vermelho */
  --seta: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M5%202.2%205%2020.4%209.6%2016.1%2012.5%2022.6%2015.9%2021.1%2013%2014.8%2019.6%2014.3Z%22%20fill%3D%22%23E01B32%22%20stroke%3D%22%230A0A0A%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 4 2, auto;
  --seta-branca: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20viewBox%3D%220%200%2026%2026%22%3E%3Cpath%20d%3D%22M5%202.2%205%2020.4%209.6%2016.1%2012.5%2022.6%2015.9%2021.1%2013%2014.8%2019.6%2014.3Z%22%20fill%3D%22%23FFFFFF%22%20stroke%3D%22rgba%2810%2C10%2C10%2C.45%29%22%20stroke-width%3D%221.1%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 4 2, auto;

  --pad: clamp(20px, 5vw, 64px);
  --container: 1140px;
  --topo-h: calc(44px + clamp(10px, 1.3vw, 15px) * 2);

  /* respiro vertical: TODA seção usa estes dois valores, nada de número solto */
  --secao-y: clamp(72px, 12vh, 140px);        /* topo e base padrão */
  --secao-y-g: clamp(110px, 20vh, 240px);     /* quando precisa de mais ar */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; cursor: var(--seta); }
/* sobre qualquer superfície vermelha a seta vira branca */
.abertura,
.pilula, .cta-fixo,
.botao-ig,
.exp__rotulo, .plano__tag,
.lista__item:hover,
.plano:hover,
.passo.ativo .passo__corpo,
.passo.ativo .passo__icone { cursor: var(--seta-branca); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--fonte);
  background: var(--preto);
  color: var(--claro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.travado { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 4px; border-radius: 4px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ============================================================
   ABERTURA (pré-carregamento)
   ============================================================ */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--vermelho);
  color: #000;
  display: grid;
  place-content: center;
  gap: clamp(30px, 5vh, 56px);
  justify-items: center;
  transition: transform .9s cubic-bezier(.76,0,.24,1);
}
.abertura.saiu { transform: translateY(-101%); }
.abertura__nome {
  font-family: var(--display);
  font-size: clamp(2.9rem, 10.5vw, 7.4rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.01em;
  text-align: center;
  text-transform: uppercase;
}
.abertura__barra {
  width: min(220px, 52vw);
  height: 2px;
  background: rgba(0,0,0,.22);
  overflow: hidden;
}
.abertura__barra span {
  display: block;
  height: 100%;
  width: 100%;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  animation: carregar 1.25s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes carregar { to { transform: scaleX(1); } }

/* ============================================================
   TOPO
   ============================================================ */
.topo {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: clamp(10px, 1.3vw, 15px) var(--pad);
  transition: background-color .35s, backdrop-filter .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.topo.vidro {
  background: rgba(10, 10, 10, .72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linha);
}
.topo__in {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.marca {
  position: relative;
  z-index: 90;              /* fica acima do painel do menu */
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* menu do celular: desce do topo, ocupa quase toda a tela e deixa
   uma faixa do site aparecendo embaixo */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  width: 100%;
  min-height: 76svh;
  /* o mesmo ar em cima da primeira opção, em volta do botão e no rodapé do painel */
  --menu-ar: clamp(30px, 5vh, 46px);
  padding: calc(var(--topo-h) + var(--menu-ar)) var(--pad) var(--menu-ar);
  background: #0E0E10;
  border-bottom: 1px solid var(--linha);
  display: flex;
  flex-direction: column;
  counter-reset: item;
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform .55s cubic-bezier(.76,0,.24,1), visibility .55s;
}
.nav[data-aberto="true"] { transform: none; visibility: visible; }

.nav a:not(.pilula) {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: clamp(16px, 2.6vh, 22px);
  border-bottom: 1px solid var(--linha);
  font-size: clamp(1.32rem, 5.4vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--claro);
}
.nav a:not(.pilula)::before {
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  font-size: .42em;
  font-weight: 400;
  color: var(--vermelho);
}
.nav .pilula {
  margin-top: calc(var(--menu-ar) * 1.7);   /* afasta bem da última opção */
  justify-content: center;
  gap: 14px;
  height: 58px;
  padding: 0 8px 0 24px;
  font-size: 1rem;
}

/* ações da direita: instagram + orçamento (só no desktop) */
.topo__acoes { display: none; }
.botao-ig {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  transition: box-shadow .35s ease;
}
.botao-ig svg { width: 19px; height: 19px; }
.botao-ig:hover { box-shadow: 0 0 26px -2px rgba(224, 27, 50, .95); }

/* hambúrguer */
.burger {
  position: relative;
  z-index: 90;              /* fica acima do painel do menu */
  display: flex;
  width: 42px; height: 42px; flex: none;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 0;
}
.burger span {
  display: block; width: 22px; height: 1.6px;
  background: var(--claro); border-radius: 2px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.8px) rotate(-45deg); }

.disponivel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
  font-weight: 400;
  color: var(--mudo);
  white-space: nowrap;
}
.ponto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 0 rgba(70, 209, 96, .55);
  animation: pulsar 2.4s ease-out infinite;
}
@keyframes pulsar {
  0%   { box-shadow: 0 0 0 0 rgba(70,209,96,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(70,209,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,209,96,0); }
}

/* ---------- pílula ---------- */
.pilula {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 6px 0 20px;
  border-radius: 1000px;
  background: var(--vermelho);
  color: #fff;
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.pilula:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(224,27,50,.8); }
.pilula__seta {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--vermelho);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.pilula__seta svg { width: 14px; height: 14px; }
.pilula:hover .pilula__seta { transform: rotate(45deg); }
/* reflexo atravessando */
.pilula::after {
  content: "";
  position: absolute; bottom: 0; left: -10%;
  width: 70px; height: 160%;
  background: linear-gradient(10deg, rgba(255,255,255,.5) 13%, rgba(255,255,255,0) 67%);
  transform: translateX(-50%) skew(-25deg);
  pointer-events: none; opacity: 0;
  animation: brilho 6s ease-in-out infinite 2s;
}
@keyframes brilho {
  0%, 100% { left: -10%; opacity: 0; }
  20%      { opacity: 1; }
  48%      { left: 140%; opacity: 1; }
  51%      { opacity: 0; }
}
.pilula--grande { height: 60px; padding: 0 8px 0 28px; font-size: 1rem; }
.pilula--grande .pilula__seta { width: 44px; height: 44px; }
.pilula--grande .pilula__seta svg { width: 17px; height: 17px; }

/* ---------- botão fixo no rodapé (a partir da segunda seção) ---------- */
.cta-fixo {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 90;
  transform: translate(-50%, 130%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 18px;
  border-radius: 1000px;
  background: var(--vermelho);
  color: #fff;
  font-size: .84rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.9);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s;
}
.cta-fixo.aparece { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.cta-fixo span {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--vermelho);
}
.cta-fixo span svg { width: 12px; height: 12px; }
.cta-fixo:hover { transform: translate(-50%, -3px); }
@media (min-width: 1041px) { .cta-fixo { display: none; } }

/* ============================================================
   HERO — foto de fundo, nome no alto à esquerda,
   funções à direita e a frase embaixo (conforme o Figma)
   ============================================================ */
.hero {
  position: sticky;      /* a seção seguinte sobe por cima do hero */
  top: 0;
  z-index: 0;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  /* o respiro lateral fica aqui, igual ao do topo: assim o nome, as funções
     e a frase nascem exatamente na mesma linha vertical do menu */
  padding-inline: var(--pad);
}
.hero__foto, .hero__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -2;
}
/* no desktop a foto é um pouco mais alta que a tela e fica ancorada embaixo,
   então a sobra sai por cima e a Jennifer sobe no enquadramento */
@media (min-width: 861px) {
  .hero__foto {
    inset: auto 0 0 0;
    height: 108%;
  }
  .hero__foto img { inset: 0; height: 100%; object-position: center; }
}
/* véu para o texto branco ficar legível sobre a foto */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.45) 42%, rgba(10,10,10,.28) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.65) 0%, transparent 28%, transparent 58%, rgba(10,10,10,.75) 100%);
}

.hero__in {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--topo-h) + clamp(34px, 7.5vh, 86px)) 0 clamp(36px, 7vh, 72px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 8vh, 90px);
}

.hero__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
}

.hero__nome {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 6.6rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  overflow: hidden;
}
.hero__nome span { display: block; transform: translateY(105%); }
.pronto .hero__nome span {
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1) .15s;
  transform: none;
}

.funcoes {
  display: grid;
  gap: 2px;
  text-align: right;
  font-size: clamp(1rem, .82rem + .85vw, 1.7rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: #fff;
}

.hero__frase {
  font-size: clamp(1.05rem, .9rem + .75vw, 1.6rem);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: #fff;
}

/* entrada escalonada */
.hero .funcoes, .hero__frase { opacity: 0; transform: translateY(16px); }
.pronto .hero .funcoes, .pronto .hero__frase {
  transition: opacity .8s ease .6s, transform .8s cubic-bezier(.2,.8,.2,1) .6s;
  opacity: 1;
  transform: none;
}
.pronto .hero__frase { transition-delay: .78s; }

@media (max-width: 620px) {
  .hero__topo { flex-direction: column; gap: 26px; }
  .funcoes { text-align: left; }
}

/* ============================================================
   SOBRE
   ============================================================ */
.sobre {
  position: relative;
  z-index: 1;                /* passa por cima do hero */
  background: var(--preto);
  padding: var(--secao-y-g) var(--pad) var(--secao-y-g);
}
.sobre__in {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: 14px clamp(28px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 861px) {
  .sobre__in { grid-template-columns: minmax(84px, 10%) minmax(0, 1fr); }
}
.rotulo {
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--claro);
  padding-top: .7em;          /* acerta a linha de base com a primeira linha do texto */
}
.sobre__texto {
  font-size: clamp(1.45rem, 1rem + 2.1vw, 3rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.035em;
  max-width: 26ch;
}
/* cada palavra começa cinza e vai virando branca conforme a rolagem */
.sobre__texto .palavra { color: rgba(244, 244, 244, .2); transition: color .15s linear; }

/* ============================================================
   MEUS TRABALHOS
   ============================================================ */
.trabalhos {
  position: relative;
  z-index: 1;
  background: var(--preto);
  padding: var(--secao-y) var(--pad) 0;
}
.trabalhos__in {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  text-align: center;
}
.trabalhos__titulo {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 10vw, 9.4rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #C8C8C8;
}
/* o contador pequeno, encostado no alto da última letra */
.trabalhos__titulo sup {
  font-family: var(--fonte);
  font-size: clamp(.62rem, .2rem + .55vw, .9rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #C8C8C8;
  vertical-align: super;
  margin-left: .12em;
  top: 0;
}

/* ---------- fichário: as pastas sobem e vão encaixando as guias ----------
   Todas grudam na MESMA altura. Como cada guia fica numa posição horizontal
   diferente, a pasta que sobe cobre o corpo da anterior mas deixa a guia dela
   à mostra — a fileira vai se formando conforme a rolagem.                  */
.fichario {
  --guia-h: 52px;
  width: 100%;
  max-width: var(--container);
  margin: clamp(34px, 6vh, 64px) auto 0;
  /* folga no fim: sem ela a última pasta não teria rolagem para subir
     e encaixar a guia na fileira */
  /* espaço exato para a última pasta subir até o encaixe, mais o respiro padrão */
  --pasta-h: 572px;
  padding-bottom: max(var(--secao-y), calc(100svh - var(--topo-h) - 16px - var(--pasta-h) + var(--secao-y)));
}
.pasta {
  scroll-margin-top: calc(var(--topo-h) + 16px);
  position: sticky;
  top: calc(var(--topo-h) + 16px);
  background: none;          /* o artigo não pinta nada */
}
.pasta__guia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: calc(100% / 6 - 6px);
  height: var(--guia-h);
  margin-left: calc(var(--i) * (100% / 6) + 3px);
  padding: 0 10px;
  background: var(--cor);
  color: inherit;
  font-size: clamp(.74rem, .68rem + .22vw, .88rem);
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  /* guia de fichário: cantos de cima chanfrados */
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.pasta__guia i { font-style: normal; font-size: .82em; opacity: .6; }

.pasta__corpo {
  background: var(--cor);
  min-height: clamp(360px, 62vh, 520px);
  padding: clamp(26px, 3.6vw, 52px);
  display: grid;
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
}
@media (min-width: 861px) { .pasta__corpo { grid-template-columns: 1fr 1fr; } }

.pasta__titulo {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.035em;
  max-width: 17ch;
}
.pasta__cliente {
  margin-bottom: clamp(22px, 3.2vw, 34px);
  font-size: 1rem;
  font-weight: 500;
}
.pasta__cliente span { opacity: .64; font-weight: 400; }
.pasta__desc { margin-top: clamp(20px, 2.8vw, 30px); font-size: .95rem; line-height: 1.55; max-width: 34ch; opacity: .8; }

.pasta__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(24px, 3.4vw, 38px);
  padding: 9px 16px;
  border: 1px solid currentColor;
  border-radius: 1000px;
  font-size: .82rem;
  font-weight: 500;
  color: inherit;
  transition: background-color .25s, color .25s, gap .25s;
}
.pasta__link svg { width: 13px; height: 13px; }
.pasta__link:hover { gap: 13px; }
/* nos cards claros o hover enche de escuro; nos escuros, de claro */
.pasta--oliva .pasta__link:hover,
.pasta--rosa .pasta__link:hover,
.pasta--creme .pasta__link:hover,
.pasta--rosa-escuro .pasta__link:hover { background: #1C1B0E; color: #fff; }
.pasta--vinho .pasta__link:hover,
.pasta--vinho-escuro .pasta__link:hover { background: #FFF1EE; color: #8C1F1B; }

.pasta__midia {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1.5px dashed currentColor;
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(0,0,0,.05) 10px 11px);
}
/* quando o case já tem capa: quadrada, sem moldura tracejada */
.pasta__midia--cheia {
  aspect-ratio: 1 / 1;
  display: block;
  overflow: hidden;
  border: 0;
  background-image: none;
  background-color: #fff;
}
.pasta__midia--cheia img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.pasta__midia--cheia:hover img { transform: scale(1.04); }
/* quando a capa é foto, ela preenche o quadrado em vez de caber dentro */
.pasta__midia--corte { background-color: #121214; }
.pasta__midia--corte img { object-fit: cover; }

.pasta__midia span {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}

/* as cores do anexo */
/* a cor vive numa variável: quem pinta é a guia e o corpo, nunca o artigo
   (se o artigo pintasse, a faixa larga dele cobriria as guias anteriores) */
.pasta--oliva        { --cor: #C5C862; color: #1C1B0E; }
.pasta--rosa         { --cor: #E3BCC6; color: #2A1319; }
.pasta--vinho        { --cor: #A32B22; color: #FFF1EE; }
.pasta--creme        { --cor: #D7D98A; color: #1C1B0E; }
.pasta--rosa-escuro  { --cor: #C98A97; color: #2A1319; }
.pasta--vinho-escuro { --cor: #8C1F1B; color: #FFF1EE; }
.pasta--vinho .pasta__midia,
.pasta--vinho-escuro .pasta__midia {
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(255,255,255,.08) 10px 11px);
}

/* em tela estreita as guias ficariam finas demais: viram lista */
@media (max-width: 860px) {
  .pasta { position: relative; top: auto; margin-bottom: 10px; }
  .pasta__guia { width: auto; max-width: 78%; margin-left: 0; padding: 0 22px; justify-content: flex-start; }
}

/* ============================================================
   EXPERIÊNCIA
   Ano à esquerda, cargo à direita. No hover a linha inteira
   clareia e desliza um pouco para dentro.
   ============================================================ */
.exp {
  position: relative;
  z-index: 1;
  background: var(--preto);
  padding: var(--secao-y) var(--pad) var(--secao-y-g);
}
.exp__in {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.exp__titulo {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(2.6rem, 10vw, 9.4rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #C8C8C8;
}
.exp__titulo sup {
  font-family: var(--fonte);
  font-size: clamp(.62rem, .2rem + .55vw, .9rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #C8C8C8;
  vertical-align: super;
  margin-left: .12em;
  top: 0;
}
.exp__bloco { margin-top: clamp(40px, 7vh, 80px); }
.exp__bloco + .exp__bloco { margin-top: clamp(52px, 9vh, 104px); }
/* etiqueta vermelha fixa, sem hover */
.exp__rotulo {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 15px;
  border-radius: 1000px;
  background: var(--vermelho);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------- a lista: ano | cargo | empresa ---------- */
.lista {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--linha);
  --linha-h: 140px;           /* altura fixa de cada linha */
}
.lista__item {
  position: relative;
  display: grid;
  gap: 6px;
  padding: clamp(18px, 2.4vh, 24px) 0;
  border-bottom: 1px solid var(--linha);
}
/* a faixa vermelha do hover: transborda um pouco para os lados,
   sem deslocar o texto, que continua na grade */
.lista__item::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * clamp(12px, 1.5vw, 22px));
  background: var(--vermelho);
  opacity: 0;
  transition: opacity .3s ease;
}
.lista__item > * { position: relative; }
.lista__ano {
  font-size: .86rem;
  line-height: 1.45;          /* respira quando a coluna tem duas linhas */
  font-variant-numeric: tabular-nums;
  color: var(--mudo);
  transition: color .3s ease;
}
.lista__corpo { display: grid; gap: 7px; }
.lista__cargo {
  font-size: clamp(1.08rem, .95rem + .5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--claro);
  transition: color .3s ease;
}
.lista__onde {
  font-size: .95rem;
  color: var(--mudo);
  transition: color .3s ease;
}
.lista__nota {
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.55;
  color: #6F6F6F;
  transition: color .3s ease;
}
/* na lista de cursos o nome não é um cargo, então pesa menos */
.lista--cursos .lista__cargo { font-weight: 400; }

/* a partir do tablet abrem as três colunas.
   As duas laterais têm a MESMA largura, para o miolo ficar centrado. */
@media (min-width: 761px) {
  .lista__item {
    grid-template-columns: minmax(130px, 18%) minmax(0, 1fr) minmax(130px, 18%);
    gap: 0 clamp(20px, 3vw, 44px);
    /* toda linha tem a mesma altura e o conteúdo fica centrado nela */
    min-height: var(--linha-h);
    align-items: center;
  }
  .lista__onde { text-align: right; }
}

/* ---------- hover: fundo vermelho, texto branco ---------- */
@media (hover: hover) {
  .lista__item:hover::before { opacity: 1; }
  .lista__item:hover .lista__cargo,
  .lista__item:hover .lista__ano,
  .lista__item:hover .lista__onde,
  .lista__item:hover .lista__nota { color: #fff; }
}

.exp__baixar {
  display: flex;              /* inline-flex não centraliza com margin auto */
  width: fit-content;
  margin: clamp(44px, 7vh, 80px) auto 0;
}
.exp__baixar .pilula__seta svg { width: 15px; height: 15px; }

/* ============================================================
   BLOCOS DE CONTEÚDO — serviço, como funciona e FAQ
   Mesma moldura da seção de experiência.
   ============================================================ */
.bloco {
  position: relative;
  z-index: 1;
  background: var(--preto);
  padding: var(--secao-y) var(--pad);
}
.bloco:last-of-type { padding-bottom: var(--secao-y-g); }
.bloco__in {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.bloco__titulo {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(2.6rem, 10vw, 9.4rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #C8C8C8;
}
.bloco__titulo sup {
  font-family: var(--fonte);
  font-size: clamp(.62rem, .2rem + .55vw, .9rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #C8C8C8;
  vertical-align: super;
  margin-left: .12em;
  top: 0;
}
/* quando o título tem duas linhas ele precisa de um corpo menor */
.bloco__titulo--duplo {
  font-size: clamp(2.15rem, 10.4vw, 7.5rem);
  line-height: .98;
}
/* cada linha é um bloco, então o título fica sempre em duas linhas */
.bloco__titulo--duplo span { display: block; }
.bloco__titulo--duplo + .bloco__texto { margin-top: clamp(24px, 4.5vh, 46px); }

.bloco__lead {
  max-width: 22ch;
  margin: clamp(26px, 5vh, 52px) auto 0;
  text-align: center;
  font-size: clamp(1.4rem, 1rem + 1.7vw, 2.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.03em;
}
.bloco__texto {
  max-width: 62ch;
  margin: clamp(18px, 3vh, 28px) auto 0;
  text-align: center;
  font-size: clamp(.98rem, .92rem + .25vw, 1.1rem);
  line-height: 1.62;
  color: var(--mudo);
}
.bloco__cta {
  display: flex;
  width: fit-content;
  margin: clamp(40px, 6vh, 72px) auto 0;
}

/* ---------- os dois planos ---------- */
.planos {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(40px, 7vh, 80px);
}
@media (min-width: 861px) { .planos { grid-template-columns: 1fr 1fr; } }
.plano {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 44px);
  background: #121214;
  border: 1px solid var(--linha);
  transition: background-color .35s ease, border-color .35s ease;
}
.plano__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 30px;
  padding: 0 15px;
  border-radius: 1000px;
  background: var(--vermelho);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color .35s ease, color .35s ease;
}
.plano__nome {
  margin-top: clamp(30px, 4.2vh, 46px);
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.plano__desc {
  margin-top: clamp(20px, 2.9vh, 30px);
  font-size: .97rem;
  line-height: 1.72;
  color: var(--mudo);
  transition: color .35s ease;
}
.plano__itens {
  margin-top: auto;
  padding: clamp(34px, 4.6vh, 50px) 0 0;
  list-style: none;
  counter-reset: incluso;
}
.plano__itens li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 16px;
  align-items: baseline;
  padding: clamp(14px, 1.9vh, 18px) 0;
  border-top: 1px solid var(--linha);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color .35s ease;
}
.plano__itens li:last-child { border-bottom: 1px solid var(--linha); }
.plano__itens li::before {
  counter-increment: incluso;
  content: counter(incluso, decimal-leading-zero);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--vermelho);
  transition: color .35s ease;
}

/* o card inteiro fica vermelho no hover */
@media (hover: hover) {
  .plano:hover {
    background: var(--vermelho);
    border-color: var(--vermelho);
  }
  .plano:hover .plano__desc { color: rgba(255, 255, 255, .82); }
  .plano:hover .plano__tag { background: #fff; color: var(--vermelho); }
  .plano:hover .plano__itens li { border-color: rgba(255, 255, 255, .3); }
  .plano:hover .plano__itens li::before { color: #fff; }
}

/* ---------- como funciona: título à esquerda, passos à direita ---------- */
.fluxo__grade { display: grid; gap: clamp(40px, 6vh, 64px) clamp(40px, 5.5vw, 80px); }
@media (min-width: 981px) {
  .fluxo__grade { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); align-items: start; }
  /* o bloco da esquerda acompanha a rolagem dos passos */
  .fluxo__cabeca { position: sticky; top: calc(var(--topo-h) + clamp(24px, 4vh, 48px)); }
}
.fluxo__titulo {
  font-family: var(--display);
  font-size: clamp(2.9rem, 8.6vw, 6.9rem);
  font-weight: 400;
  line-height: .94;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #C8C8C8;
}
.fluxo__lead {
  margin-top: clamp(18px, 3vh, 28px);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.03em;
}
.fluxo__cta { display: inline-flex; margin-top: clamp(26px, 4vh, 40px); }

/* ---------- a fila de passos ---------- */
.passos {
  --icone: 48px;
  position: relative;
}
/* o trilho vertical: fundo apagado e um preenchimento que sobe com a rolagem */
.passos__trilho {
  position: absolute;
  left: calc(var(--icone) / 2 - 1px);
  top: var(--trilho-topo, 0px);
  width: 2px;
  height: var(--trilho-alt, 0px);
  background: var(--linha);
}
.passos__trilho i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--vermelho), rgba(224, 27, 50, .65));
  transform: scaleY(var(--avanco, 0));
  transform-origin: top;
}
.passos__lista { list-style: none; padding: 0; margin: 0; }

.passo {
  position: relative;
  display: grid;
  grid-template-columns: var(--icone) minmax(0, 1fr);
  gap: 0 clamp(18px, 2.2vw, 30px);
  padding-bottom: clamp(38px, 5.6vh, 70px);
}
.passo:last-child { padding-bottom: 0; }

.passo__icone {
  display: grid;
  place-items: center;
  width: var(--icone);
  height: var(--icone);
  border-radius: 50%;
  background: var(--preto);
  box-shadow: inset 0 0 0 1px rgba(244, 244, 244, .14);
  color: #7A7A7A;
  transition: color .4s ease, box-shadow .4s ease;
}
.passo__icone svg { width: 22px; height: 22px; }

.passo__corpo {
  padding: clamp(22px, 2.6vw, 32px);
  background: #121214;
  border: 1px solid var(--linha);
  transition: background-color .45s ease, border-color .45s ease;
}
.passo__titulo {
  font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: rgba(244, 244, 244, .55);
  transition: color .4s ease;
}
.passo__desc {
  max-width: 54ch;
  margin-top: clamp(20px, 3vh, 30px);
  font-size: .97rem;
  line-height: 1.65;
  color: #6F6F6F;
  transition: color .4s ease;
}

/* quando a rolagem chega no passo, o card inteiro pinta de vermelho */
.passo.ativo .passo__corpo {
  background: var(--vermelho);
  border-color: var(--vermelho);
}
.passo.ativo .passo__icone {
  background: var(--vermelho);
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--vermelho),
              0 0 26px -8px rgba(224, 27, 50, .95);
}
.passo.ativo .passo__titulo { color: #fff; }
.passo.ativo .passo__desc { color: rgba(255, 255, 255, .85); }

/* ---------- o FAQ ---------- */
.faq {
  max-width: 780px;
  margin: clamp(40px, 7vh, 80px) auto 0;
  border-top: 1px solid var(--linha);
}
.faq__item { border-bottom: 1px solid var(--linha); }
.faq__p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vh, 28px) 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.05rem, .96rem + .4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.02em;
  transition: color .25s ease;
}
.faq__p::-webkit-details-marker { display: none; }
.faq__item:hover .faq__p { color: var(--vermelho); }
.faq__item[open] .faq__p { color: var(--vermelho); }
/* o sinal de mais que vira menos */
.faq__sinal {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
}
.faq__sinal::before,
.faq__sinal::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 1.6px;
  background: currentColor;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.faq__sinal::after { transform: rotate(90deg); }
.faq__item[open] .faq__sinal::after { transform: rotate(0deg); }
.faq__r {
  max-width: 72ch;
  padding-bottom: clamp(20px, 3vh, 28px);
  font-size: .97rem;
  line-height: 1.65;
  color: var(--mudo);
}

/* a página de currículo não tem hero, então o conteúdo desce abaixo da barra */
.exp--pagina { padding-top: calc(var(--topo-h) + var(--secao-y)); }

/* ============================================================
   RODAPÉ
   Parte de cima escura, faixa vermelha embaixo.
   ============================================================ */
.rodape {
  position: relative;
  z-index: 1;
  background: var(--preto);
}
.rodape__in {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.rodape__topo {
  display: flex;
  align-items: center;          /* o conteúdo fica no meio exato da faixa */
  padding: clamp(46px, 7vh, 80px) var(--pad);
  border-top: 1px solid var(--linha);
}
.rodape__topo .rodape__in {
  width: 100%;
  display: grid;
  gap: clamp(40px, 6vh, 64px) clamp(30px, 5vw, 80px);
}
@media (min-width: 761px) {
  .rodape__topo .rodape__in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .rodape__contato { text-align: right; }
}

.rodape__nome {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  font-weight: 400;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.rodape__frase {
  max-width: 34ch;
  text-wrap: balance;        /* não deixa uma palavra sozinha na última linha */
  margin-top: clamp(14px, 2.2vh, 20px);
  font-size: clamp(.98rem, .92rem + .25vw, 1.1rem);
  line-height: 1.6;
  color: var(--mudo);
}

/* as bolinhas das redes */
.redes {
  display: flex;
  gap: 12px;
  margin-top: clamp(26px, 4vh, 38px);
  list-style: none;
  padding: 0;
}
.redes a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  cursor: var(--seta-branca);
  transition: box-shadow .35s ease;
}
.redes svg { width: 19px; height: 19px; }
.redes a:hover { box-shadow: 0 0 26px -2px rgba(224, 27, 50, .95); }

.rodape__rotulo {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mudo);
}
.rodape__lista {
  display: grid;
  gap: clamp(12px, 1.8vh, 18px);
  margin-top: clamp(22px, 3.4vh, 32px);
  list-style: none;
  padding: 0;
  font-size: clamp(1rem, .94rem + .3vw, 1.18rem);
}
.rodape__lista a { transition: color .3s ease; }
.rodape__lista a:hover { color: var(--vermelho-claro); }

/* ---------- a faixa vermelha ---------- */
.rodape__faixa {
  display: flex;
  align-items: center;
  overflow: hidden;          /* o Anton com entrelinha curta vazava 8px pra fora */
  background: var(--vermelho);
  color: #0A0A0A;
  padding: clamp(24px, 3.6vh, 34px) var(--pad);
  cursor: var(--seta-branca);
}
.rodape__faixa .rodape__in {
  display: flex;
  align-items: center;         /* o nome fica no meio da altura dos cargos */
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
}
.rodape__assinatura {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.6vw, 5rem);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.funcoes--rodape {
  color: #0A0A0A;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: clamp(.82rem, .5rem + .85vw, 1.3rem);
  font-weight: 600;
  line-height: 1.22;
}

/* no celular a faixa empilha, igual ao hero, e cada parte tem a sua altura */
@media (max-width: 760px) {
  .rodape__faixa { padding: clamp(18px, 2.6vh, 26px) var(--pad); }
  .rodape__faixa .rodape__in { gap: clamp(14px, 4vw, 24px); }
  .rodape__assinatura { font-size: clamp(1.9rem, 8.4vw, 3rem); }
  /* a regra do hero alinha .funcoes à esquerda no celular; aqui é à direita */
  .funcoes--rodape {
    text-align: right;
    font-size: clamp(.85rem, 3.8vw, 1.15rem);
  }
}

/* ============================================================
   PÁGINA DE CASE
   ============================================================ */
.case {
  position: relative;
  z-index: 1;
  background: var(--preto);
  padding: calc(var(--topo-h) + var(--secao-y)) var(--pad) var(--secao-y-g);
}
.case__in {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* ---------- cabeçalho do case ---------- */
.case__rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vermelho-claro);
}
.case__rotulo a { transition: color .25s ease; }
.case__rotulo a:hover { color: var(--claro); }
.case__rotulo span { color: var(--mudo); }

.case__titulo {
  text-wrap: balance;        /* linhas equilibradas: nada de palavra solta na última */
  margin-top: clamp(20px, 3.4vh, 32px);
  font-family: var(--display);
  font-size: clamp(2.3rem, 1.4rem + 4vw, 5.4rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.case__sub {
  text-wrap: balance;
  margin-top: clamp(20px, 3vh, 30px);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--mudo);
}

/* a fichinha de cliente / segmento / entrega */
.case__ficha {
  display: grid;
  gap: clamp(18px, 2.6vh, 26px) clamp(24px, 4vw, 60px);
  margin: clamp(34px, 5.5vh, 60px) 0 0;
  padding-top: clamp(26px, 4vh, 36px);
  border-top: 1px solid var(--linha);
}
@media (min-width: 681px) { .case__ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case__ficha dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mudo);
}
.case__ficha dd {
  margin: 8px 0 0;
  font-size: clamp(1rem, .94rem + .3vw, 1.15rem);
  font-weight: 500;
  letter-spacing: -.015em;
}

/* ---------- blocos de texto ---------- */
.case__bloco {
  display: grid;
  gap: clamp(16px, 2.4vh, 24px) clamp(24px, 4vw, 60px);
  margin-top: clamp(88px, 16vh, 176px);
}
@media (min-width: 861px) {
  .case__bloco { grid-template-columns: minmax(130px, 18%) minmax(0, 1fr); align-items: start; }
}
.case__etiqueta {
  display: inline-flex;
  align-self: start;
  align-items: center;
  height: 30px;
  padding: 0 15px;
  border-radius: 1000px;
  background: var(--vermelho);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
}
@media (max-width: 860px) {
  .case__etiqueta {
    height: 36px;
    padding: 0 18px;
    font-size: .86rem;
    letter-spacing: .04em;
  }
}

.case__texto {
  max-width: 62ch;
  display: grid;
  gap: clamp(14px, 2vh, 20px);
  font-size: clamp(1rem, .94rem + .3vw, 1.12rem);
  line-height: 1.68;
  color: var(--claro);
}
.case__itens { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.case__itens li { position: relative; padding-left: 26px; }
.case__itens li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 14px; height: 1.5px;
  background: var(--vermelho);
}

/* ============================================================
   GRADE DE MATERIAIS
   Vídeos em pé (9:16). O print ocupa a largura de dois vídeos,
   então a grade fecha certinho em 4 colunas.
   ============================================================ */
.pecas {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(40px, 6.5vh, 72px);
}
@media (min-width: 861px) {
  .pecas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .peca--print { grid-column: span 2; }
  .peca--larga { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .pecas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peca--print { grid-column: span 2; }
}
.peca {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #121214;
  border: 1px solid var(--linha);
}
.peca--video { aspect-ratio: 9 / 16; }
.peca--foto { aspect-ratio: 4 / 5; }
.peca--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.peca--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* o print do comentário: mesma altura de um vídeo, imagem centrada */
.peca--print {
  display: flex;     /* sem aspect-ratio: estica até a altura da linha dos vídeos */
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 2vh, 22px);
  padding: clamp(18px, 2.2vw, 30px);
}
.peca--print figcaption {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vermelho-claro);
}
/* os dois prints dividem a altura do card na proporção de cada um */
.peca__prints {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
  min-height: 0;
  flex: 1 1 auto;
  justify-content: center;
}
.peca__print { position: relative; min-height: 0; }
.peca__ampliar { display: block; min-height: 0; pointer-events: none; }
.peca__prints img {
  width: 100%;
  height: auto;              /* no celular o card não tem altura imposta */
  border-radius: 10px;
}
/* no desktop o card herda a altura da linha dos vídeos: aí as duas dividem
   essa altura na proporção de cada print (464/842 e 278/780) */
@media (min-width: 861px) {
  .peca__prints > * { min-height: 0; }
  .peca__print, .peca__ampliar { height: 100%; }
  .peca__prints img { height: 100%; min-height: 0; object-fit: contain; }
  .peca__prints > :first-child { flex: 551 1 0; }   /* a legenda */
  .peca__prints > :last-child  { flex: 356 1 0; }   /* o comentário */
  /* mas quando o print ocupa a linha inteira sozinho, a altura é a dele mesmo */
  .peca--larga .peca__prints { flex: none; }
  .peca--larga .peca__prints > * { flex: none; }
  .peca--larga .peca__prints img { height: auto; flex: none; }
}

/* o vídeo começa parado na capa; o play solta a imagem e o som juntos */
.peca__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: var(--seta-branca);
  transition: opacity .3s ease;
}
.peca__play::before {
  content: "";
  position: absolute;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: rgba(10, 10, 10, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.peca__play svg {
  position: relative;
  width: 22px; height: 22px;
}
.peca__play .peca__i-play { margin-left: 3px; }  /* o triângulo fica óptico no centro */
.peca__play .peca__i-pausa { display: none; }
.peca[data-tocando] .peca__i-play { display: none; }
.peca[data-tocando] .peca__i-pausa { display: block; }
.peca:not([data-tocando]) .peca__play:hover::before { background: var(--vermelho); transform: scale(1.08); }
/* tocando: nada por cima do vídeo. A camada continua clicável em toda a
   área, então um clique em qualquer ponto pausa; o ícone só insinua no hover,
   sem a bolota, para não tampar a imagem */
.peca[data-tocando] .peca__play { opacity: 0; }
.peca[data-tocando] .peca__play::before { opacity: 0; }
.peca[data-tocando] .peca__play:hover,
.peca[data-tocando] .peca__play:focus-visible { opacity: 1; }
.peca[data-tocando] .peca__i-pausa {
  width: 26px; height: 26px;
  color: rgba(255, 255, 255, .92);
  filter: drop-shadow(0 2px 10px rgba(10, 10, 10, .75));
}

/* lupa: no celular o print fica pequeno demais para ler */
.peca__lupa { display: none; }
@media (max-width: 860px) {
  /* sem moldura em volta: a imagem encosta nas bordas do card e para de
     parecer um slide com margem escura sobrando */
  .peca--print { padding: 0 0 clamp(12px, 3.5vw, 16px); gap: 0; }
  .peca--print figcaption { padding: clamp(14px, 4vw, 18px); }
  .peca__prints { gap: clamp(12px, 3.5vw, 16px); }
  .peca__prints img { border-radius: 0; }
  .peca__lupa { right: 10px; bottom: 10px; }
  .peca__ampliar { pointer-events: auto; cursor: var(--seta); }
  .peca__lupa {
    position: absolute;
    right: 12px; bottom: 12px;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--vermelho);
    color: #fff;
    cursor: var(--seta-branca);
  }
  .peca__lupa svg { width: 18px; height: 18px; }
}

/* a sobreposição que mostra o print inteiro */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 28px);
  background: rgba(10, 10, 10, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.lupa[data-aberta="true"] { opacity: 1; visibility: visible; }
/* a captura é mais larga que a tela: mostramos num tamanho legível e
   deixamos arrastar para o lado, em vez de encolher até sumir o texto */
.lupa__quadro {
  max-width: 100%;
  max-height: 84svh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
.lupa__quadro img {
  display: block;
  max-width: 100%;
  max-height: 84svh;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* captura muito larga: gira para caber inteira, grande, sem rolagem */
.lupa--deitada .lupa__quadro {
  position: relative;
  width: 100%;
  height: 88svh;
  overflow: hidden;   /* a caixa girada transborda a própria caixa de layout */
}
.lupa--deitada .lupa__quadro img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  max-width: none;
  max-height: none;
  height: auto;
  border-radius: 10px;
}
.lupa__fechar {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  cursor: var(--seta-branca);
}
.lupa__fechar svg { width: 18px; height: 18px; }

/* ---------- rodapé do case ---------- */
.case__pe {
  margin-top: clamp(44px, 7vh, 80px);
  padding-top: clamp(26px, 4vh, 40px);
  border-top: 1px solid var(--linha);
}
.case__voltar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.015em;
  transition: color .25s ease, gap .25s ease;
}
.case__voltar svg { width: 18px; height: 18px; }
.case__voltar:hover { color: var(--vermelho-claro); gap: 16px; }

/* anterior / próximo, como num blog */
.case__pular {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(26px, 4vh, 40px);
}
@media (min-width: 681px) { .case__pular { grid-template-columns: 1fr 1fr; } }
.case__salto {
  display: grid;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
  background: #121214;
  border: 1px solid var(--linha);
  transition: background-color .3s ease, border-color .3s ease;
}
.case__salto__rotulo {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vermelho-claro);
}
.case__salto__nome {
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: -.02em;
}
.case__salto--frente { text-align: right; }
.case__salto:hover { background: var(--vermelho); border-color: var(--vermelho); }
.case__salto:hover .case__salto__rotulo { color: rgba(255, 255, 255, .85); }
/* quando não existe case daquele lado */
.case__salto--vazio { opacity: .32; }
.case__salto--vazio:hover { background: #121214; border-color: var(--linha); }
.case__salto--vazio .case__salto__rotulo { color: var(--mudo); }

/* ============================================================
   REVELAÇÃO NO SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.dentro {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
  opacity: 1;
  transform: none;
}

/* ---------- no desktop o menu volta para a barra ---------- */
@media (min-width: 1041px) {
  .burger { display: none; }
  /* o espaço vago se divide igualmente: nome | links | ações */
  .topo__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(18px, 2.5vw, 40px);
  }
  .topo__acoes { display: flex; align-items: center; gap: 12px; }
  .nav .pilula { display: none; }   /* no desktop o botão vive nas ações */
  .nav {
    position: static;
    height: auto;
    min-height: 0;
    z-index: auto;
    counter-reset: none;
    border-bottom: 0;
    flex-direction: row;
    transform: none;
    visibility: visible;
    width: auto;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 34px);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav a:not(.pilula) {
    position: relative;
    display: inline-block;
    padding-block: 4px;
    border-bottom: 0;
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--mudo);
  }
  .nav a:not(.pilula)::before { content: none; }
  .nav a:not(.pilula)::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--vermelho);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .nav a:not(.pilula):hover::after { transform: scaleX(1); transform-origin: left; }
  .topo__acoes .pilula {
    justify-content: flex-start;
    height: 44px;
    padding: 0 6px 0 20px;
    font-size: .92rem;
  }
}

/* ============================================================
   TELAS MENORES
   ============================================================ */
/* até 1040px o menu é o painel de largura cheia definido lá em cima */
@media (max-width: 1040px) {
  .burger { display: flex; }
}

@media (max-width: 860px) {
  .pasta { position: relative; top: auto; margin-bottom: 10px; }
  .pasta__guia { width: auto; max-width: 78%; margin-left: 0; padding: 0 22px; justify-content: flex-start; }
}

@media (max-width: 860px) {
  .hero__nome { line-height: .9; }
  /* no celular a distância entre as seções encolhe */
  .sobre { padding-bottom: var(--secao-y); }
  /* no celular as pastas não grudam, então não precisa da rolagem extra */
  .fichario { padding-bottom: var(--secao-y); }
}

@media (max-width: 520px) {
  .pilula { height: 42px; padding: 0 5px 0 15px; font-size: .82rem; gap: 9px; }
  .pilula__seta { width: 32px; height: 32px; }
  .marca { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .abertura, .abertura__barra span, .ponto, .pilula, .pilula__seta, .pilula::after,
  .hero__nome span, .hero__base > *, .reveal { transition: none !important; animation: none !important; }
  .hero__nome span, .hero__base > *, .reveal { opacity: 1; transform: none; }
  .pilula:hover { transform: none; }
}