/* =========================================================
   Érick Jesus — Portfólio
   Tokens extraídos do Figma (Tokens — Referência, 18:47)
   Mobile-first. Breakpoints: 768px, 1200px (README do Figma).
   ========================================================= */

:root {
  /* Cor — semantic */
  --primary: #17352a;
  --primary-hover: #2f6b4f;
  --foreground: #17352a;
  --foreground-muted: #3d5449;
  --surface-muted: #e8efea;
  --background: #ffffff;
  --background-subtle: #f7f3ea;
  --accent: #c9a227;
  --accent-subtle: #f0e4be;
  --border: #dce3dd;
  --error: #b3261e;

  /* Case tiles */
  --case-slate: #d6e2e6;

  /* Marca Prudential (case 02) */
  --prudential-blue: #0b4ea2;
  --prudential-sky: #eef5ff;

  /* Tags (cores dos chips do case Tele Sena) */
  --tag-sun: #ffd84d;
  --tag-lilac: #c9b3ff;
  --tag-mint: #7de2a6;
  --tag-sky: #8ed2ff;
  --tag-amber: #ffc24d;
  --tag-lime: #c6f26b;
  --tag-peach: #ffb870;
  --tag-lemon: #f5e663;
  --tag-aqua: #9ee7f2;
  --tag-coral: #ffae94;
  --tag-a11y: #d9c2ff;
  --star-border: #0e332b;

  /* Espaçamento — grade de 8pt */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Raio */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* Foco visível sempre — AAA */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -48px;
  background: var(--primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 100;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-4); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-weight: 600; margin: 0; color: var(--foreground); }

.section-title {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: -0.25px;
  margin: 0 0 var(--space-5);
}
@media (min-width: 768px) {
  .section-title { font-size: 32px; line-height: 40px; }
}

/* ---------- Layout base ---------- */
.nav-wrap, .hero, .trabalhos, .depoimentos, .contato, .rodape {
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .nav-wrap, .hero, .trabalhos, .depoimentos, .contato, .rodape {
    padding-inline: var(--space-7);
  }
}
@media (min-width: 1200px) {
  .nav-wrap, .hero, .trabalhos, .depoimentos, .contato, .rodape {
    padding-inline: var(--space-8);
  }
}

/* ---------- Nav ---------- */
.nav-wrap { padding-block: var(--space-4); background: var(--background); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.nav-name {
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  color: var(--foreground);
  display: inline-block;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ---------- Easter egg — variações do nome/avatar ---------- */
/* Fonte, cor, sombra dura (1px, sem blur) e highlight pareados ao balão "Olá!" de cada estado do avatar (Figma 86:1332) */
.nome-variacao--1 { font-family: "Archivo Black", var(--font); font-size: 15px; color: #17352a; text-shadow: 1px 1px 0px #e16ff8; background: #d7e4d6; letter-spacing: 0.8px; }
.nome-variacao--2 { font-family: "Alex Brush", cursive; font-size: 22px; color: #6155f5; text-shadow: 1px 1px 0px #f31418; background: #00c0e8; padding-inline: 8px; letter-spacing: 0.5px; }
.nome-variacao--3 { font-family: "Bitcount Grid Single", var(--font); font-size: 15px; color: #17352a; text-shadow: 1px 1px 0px #8548fe; background: #fff6dc; font-variation-settings: "CRSV" 0, "ELSH" 0, "ELXP" 0; letter-spacing: 0.8px; }
.nome-variacao--4 { font-family: "Barriecito", cursive; font-size: 17px; color: #9b1088; text-shadow: 1px 1px 0px #fffa77; background: #fbe6fa; letter-spacing: 0.6px; }
.nome-variacao--5 { font-family: "Bungee", sans-serif; font-size: 14px; color: #17352a; text-shadow: 1px 1px 0px #e11d2e; background: #ede1ce; letter-spacing: 0.8px; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
  content: "";
  display: block;
  width: 20px; height: 2px;
  background: var(--foreground);
  position: relative;
}
.nav-toggle-bar::before { position: absolute; top: -6px; }
.nav-toggle-bar::after { position: absolute; top: 6px; }

.nav-links {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0; right: 0;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  flex-direction: column;
  gap: var(--space-4);
  z-index: 50;
}
.nav-links.is-open { display: flex; }
.nav-links a {
  font-weight: 500;
  font-size: 14px;
  color: var(--foreground-muted);
  text-decoration: none;
  padding-block: var(--space-2);
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    border: none;
    padding: 0;
    background: none;
  }
  .nav-links a { padding-block: 0; min-height: auto; }
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px;
}
.lang-option {
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  border: none;
  background: none;
  color: var(--primary);
  border-radius: var(--radius-pill);
  padding: 4px var(--space-2);
  height: 30px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.lang-option.is-active { background: var(--primary); color: #fff; }
.lang-option:disabled, .lang-option[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- Hero ---------- */
.hero {
  padding-block: var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  position: relative;
}
.hero-text { max-width: none; }
.hero-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 640px;
}
.hero h1 {
  font-weight: 900;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
@media (min-width: 768px) {
  .hero h1 { font-size: 48px; line-height: 56px; letter-spacing: -1px; }
}
.hero-sub {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.25px;
  color: var(--foreground-muted);
  margin: var(--space-4) 0 0;
  max-width: none;
}
@media (min-width: 768px) {
  .hero-sub { font-size: 32px; line-height: 34px; letter-spacing: -1px; }
}

/* Avatar — também é o botão do easter egg, por isso fica junto ao título.
   Antes ficava escondido abaixo de 640px; o Érick perguntou se fazia sentido
   sumir no mobile — decidi manter visível em todas as larguras (é um toque
   pessoal/de marca), só menor no mobile pra não brigar com o título. */
.hero-avatar-btn {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 64px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  min-width: 44px;
  min-height: 44px;
}
.hero-avatar-btn:hover .hero-avatar { transform: scale(1.03); }
@media (min-width: 640px) {
  .hero-avatar-btn { width: 88px; }
}
@media (min-width: 1024px) {
  .hero-avatar-btn { width: 110px; }
}
.hero-avatar {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  transition: transform .15s ease;
}
/* Fundo do balão "Olá!/Hi there" (06/10) — no PNG original o preenchimento do
   balão E das letras usam a MESMA cor de cada variação (só o contorno é fixo,
   #17352a); por isso "apaguei a cor" dos 6 PNGs (ficou um buraco transparente
   onde era o balão) e esse elemento aqui, atrás da imagem, é quem pinta esse
   buraco. Posição em % calculada a partir da geometria real do balão no
   Figma (nó 86:1206 "Ellipse 2"), então acompanha o avatar em qualquer
   tamanho de tela. Reaproveita as MESMAS cores de .nome-variacao--N — ambos
   são trocados juntos por aplicarVariacaoTravada() no main.js, então nunca
   saem de sincronia, não importa se foi o avatar ou o nome que disparou. */
.avatar-balao-bg {
  position: absolute;
  left: 6.9%;
  top: 19.8%;
  width: 34%;
  height: 42.5%;
  border-radius: 50%;
  background: #f0e4be; /* cor neutra — igual ao estado "default" original */
  z-index: 0;
  pointer-events: none;
}
.avatar-balao-bg.balao-variacao--1 { background: #d7e4d6; }
.avatar-balao-bg.balao-variacao--2 { background: #00c0e8; }
.avatar-balao-bg.balao-variacao--3 { background: #fff6dc; }
.avatar-balao-bg.balao-variacao--4 { background: #fbe6fa; }
.avatar-balao-bg.balao-variacao--5 { background: #ede1ce; }

/* ---------- Carrossel de logos — marquee contínuo ---------- */
.logo-carousel {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--space-6), #000 calc(100% - var(--space-6)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--space-6), #000 calc(100% - var(--space-6)), transparent 100%);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-marquee 32s linear infinite;
  will-change: transform;
}
.logo-carousel:hover .logo-track { animation-play-state: paused; }
.logo-track-group {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  padding-right: var(--space-7);
  flex-shrink: 0;
}
/* Pedido do Érick, rodada 06/10: logos com peso visual bem diferente lado a lado
   (ex.: "accenture", wordmark fino, ficava minúsculo perto do selo cheio do
   "SBT PRÊMIOS") quando a regra só fixava a ALTURA (32px) e deixava a largura
   livre — cada logo tem uma proporção bem diferente (selo quase quadrado vs.
   wordmark bem alongado), então só travar a altura não garante peso visual
   parecido. Fix: cada logo ganha uma caixa de tamanho fixo e object-fit:contain
   centraliza e preserva a proporção original dentro dela — mesmo padrão usado
   em barras de "clientes/parceiros" de produtos SaaS.
   Ajuste pedido em seguida (mesma rodada): a caixa de 68×110px ficou grande
   demais no conjunto todo — reduzida pra 52×86px por padrão. Prudential,
   Avanade e Accenture ficam na caixa maior (.logo--grande): são os wordmarks/
   selos mais discretos do grupo e encolhiam demais junto com o resto. */
.logo-track img { height: 52px; width: 86px; object-fit: contain; flex-shrink: 0; }
.logo-track img.logo--grande { height: 68px; width: 110px; }
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
}

/* ---------- Trabalhos ---------- */
.trabalhos { padding-block: var(--space-8); display: flex; flex-direction: column; }
.trabalhos .section-title { margin-bottom: var(--space-5); }
.trabalhos-cards { display: flex; flex-direction: column; gap: var(--space-8); }

.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.case-card.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .case-card { opacity: 1; transform: none; transition: none; }
}
/* Card inteiro clicável (stretched link): o link real continua sendo o CTA
   "Ver o case", só ganha um ::after que se estica até cobrir o ancestral
   posicionado mais próximo. Tags e outros textos continuam selecionáveis
   normalmente, só não há outro link dentro do card.
   BUG corrigido nesta rodada: o ::after é FILHO do próprio .btn--cta — se o
   botão também ganhar position:relative, ele vira o "ancestral posicionado
   mais próximo" do próprio pseudo-elemento, e o inset:0 passa a cobrir só o
   tamanho do botão, não o card inteiro (por isso clicar na imagem não
   navegava). .btn--cta precisa ficar position:static para o inset:0
   "atravessar" até achar o .case-card (que já é position:relative, acima) —
   e mesmo sem posicionar os ancestrais intermediários, um z-index positivo
   explícito no ::after já garante que ele pinta por cima do
   .case-card-media (z-index:auto), então não precisa de mais nada. */
.case-cta-row .btn--cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.case-card:has(.case-cta-row .btn--cta:hover) { cursor: pointer; }

.case-card--tele-sena {
  background: var(--primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  color: #fff;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .case-card--tele-sena {
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-7);
    padding: var(--space-7) var(--space-7);
  }
  .case-card-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
}

.case-eyebrow {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--tag-sun);
  margin: 0 0 var(--space-3);
}
.case-headline {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 var(--space-4);
  color: #fff;
}
@media (min-width: 768px) {
  .case-headline { font-size: 34px; line-height: 1.2; }
}
@media (min-width: 1024px) {
  .case-headline { font-size: 40px; line-height: 1.18; letter-spacing: -1px; }
}
.case-headline--light { color: var(--foreground); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: 0; margin-top: var(--space-4); }

.case-body {
  font-size: 18px;
  line-height: 28px;
  color: var(--surface-muted);
  margin: 0 0 var(--space-5);
}
.case-body--muted { color: var(--foreground-muted); font-size: 16px; line-height: 24px; }

.case-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-5);
}
.case-skills {
  font-size: 13px;
  line-height: 20px;
  color: var(--surface-muted);
  opacity: 0.78;
  margin: 0 0 var(--space-5);
}
.case-card--prudential .case-skills { color: #dce9fb; }
.tag {
  font-weight: 500;
  font-size: 12px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--foreground);
}
.tag--lilac { background: var(--tag-lilac); }
.tag--mint { background: var(--tag-mint); }
.tag--sky { background: var(--tag-sky); }
.tag--amber { background: var(--tag-amber); }
.tag--lime { background: var(--tag-lime); }
.tag--outline {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.case-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 12px var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); }
.btn--secondary { background: var(--background); color: var(--foreground); border-color: var(--border); }
.btn--secondary:hover { background: var(--surface-muted); }
.btn--cta { background: var(--tag-sun); color: var(--foreground); font-weight: 600; font-size: 16px; }
/* BUG corrigido nesta rodada ("Ver o case" piscando / imagem não clicável):
   filter cria um novo stacking context no elemento — então, ao passar o
   mouse, o ::after do link-fantasma (acima) deixava de "furar" até o
   .case-card e virava órfão dentro do próprio botão, e a imagem (que vem
   depois no DOM) passava a ficar por cima durante o hover. Isso tirava o
   hover do botão, removendo o filter, trazendo o link de volta pro topo —
   um ciclo que piscava sem parar. Troquei por uma cor de fundo mais escura
   (equivalente visualmente a brightness(0.95) sobre --tag-sun), que não
   cria stacking context nenhum. */
.btn--cta:hover { background: #f2ce4a; }

/* Sangria da imagem: em vez de ficar encaixotada dentro do padding do card
   (visual "datado" de card-com-moldura), a mídia estoura até as bordas
   externas do card via margin negativo igual ao padding, e o overflow:hidden
   no próprio .case-card (acima) corta/arredonda essa sangria pela mesma
   curva do card — sem precisar repetir border-radius na imagem. No mobile
   (coluna), sangra esquerda+direita+baixo; a partir de 1024px (linha),
   sangra topo+baixo+o lado externo (direito na Tele Sena, esquerdo na
   Prudential, que usa row-reverse) — o lado interno fica com o gap normal
   entre texto e imagem. */
.case-card-media {
  position: relative;
  flex-shrink: 0;
  margin-inline: calc(var(--space-5) * -1);
  margin-bottom: calc(var(--space-6) * -1);
}
.case-image-frame {
  position: relative;
  overflow: hidden;
}
.case-image-frame img { width: 100%; height: auto; display: block; }
.case-badge-logo {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: 128px;
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
/* Selos de prêmio sobre a imagem do card (Prudential, Home) — rodada 7: Érick
   rejeitou a primeira tentativa (selos pequenos demais — "os prêmios não são
   conhecidos, tem muita coisa na imagem, por isso tem que ser um pouco
   maiores" — e a placa branca atrás, achou feia). Selos maiores (prováveis
   de reconhecer mesmo sem familiaridade prévia com a marca do prêmio) e sem
   nenhum fundo/placa — só o recorte reto do selo com sombra, igual o logo. */
.case-award-row {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  gap: 8px;
}
.case-award-row img {
  width: 76px;
  height: auto;
  border-radius: 6px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.case-stat-chip {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  margin: 0;
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--tag-lime);
  color: var(--foreground);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.case-stat-chip strong { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; }
.case-stat-chip span { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.72; margin-top: 2px; }
.case-card--prudential .case-stat-chip { background: #fff; color: var(--prudential-blue); }
/* A partir de 1024px, a mídia do card acompanha a altura total do card
   (pedido do Érick: a imagem deve "ocupar a hero toda verticalmente",
   respeitando o padding já aplicado ao card) — a linha vira align-items:stretch
   acima e aqui a imagem usa object-fit:cover para preencher essa altura sem
   distorcer. Abaixo de 1024px (cards empilhados em coluna) mantém o
   comportamento padrão (altura automática, sem cover) já definido acima. */
@media (min-width: 1024px) {
  .case-card-media {
    flex: 0 1 452px;
    margin-inline: 0;
    margin-block: calc(var(--space-7) * -1);
  }
  .case-card--tele-sena .case-card-media { margin-right: calc(var(--space-7) * -1); }
  .case-card--prudential .case-card-media { margin-left: calc(var(--space-7) * -1); flex-basis: 500px; }
  .case-image-frame { height: 100%; }
  .case-image-frame img { height: 100%; object-fit: cover; }
}

/* ---------- Card Prudential (Home) — mesmo padrão do card Tele Sena, tema azul Prudential ---------- */
.case-card--prudential {
  background: var(--prudential-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  color: #fff;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .case-card--prudential {
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space-7);
    padding: var(--space-7) var(--space-7);
  }
}
.case-card--prudential .case-eyebrow { color: var(--prudential-sky); }
.case-card--prudential .case-body { color: #dce9fb; }
/* O arquivo de logo da Prudential em uso (fornecido pelo Érick) tem resolução
   nativa modesta (177×85px) — exibindo menor (96px em vez dos 128px padrão
   do selo da Tele Sena) ficamos bem mais perto de "encolher" a imagem do que
   "esticar" ela, o que evita o borrão de upscale em tela retina. */
.case-card--prudential .case-badge-logo { width: 96px; }
.case-card--prudential .btn--cta { background: #fff; color: var(--prudential-blue); }
.case-card--prudential .btn--cta:hover { background: var(--prudential-sky); }

/* ---------- Depoimentos ---------- */
.depoimentos { padding-block: var(--space-8); }
.depoimentos-list { display: flex; flex-direction: column; gap: var(--space-6); }
.depoimento { margin: 0; padding: 0; border: none; }
.depoimento p { font-style: italic; font-size: 16px; line-height: 24px; margin: 0 0 var(--space-3); }
.depoimento footer { font-weight: 500; font-size: 14px; color: var(--foreground-muted); font-style: normal; }
.depoimentos-cta { margin-top: var(--space-6); font-weight: 500; }
.depoimentos-cta a { text-decoration: none; font-size: 15px; }
.depoimentos-cta-small { font-size: 13px; text-decoration: underline; }

/* ---------- Contato ---------- */
.contato { padding-block: var(--space-7) var(--space-8); }
.eyebrow-muted { font-weight: 500; font-size: 14px; color: var(--foreground-muted); margin: 0 0 var(--space-2); }
/* Redesenho (pedido do Érick): o painel com fundo ao lado do formulário ("bloco
   gigante com quatro botões") ficava pesado e competia com o formulário em vez
   de apoiá-lo. Solução: tudo em UMA coluna só, na ordem de prioridade real —
   os canais alternativos viram uma fileira leve e compacta de links logo
   abaixo do título (sem painel, sem fundo), e o formulário — o CTA principal —
   fica abaixo, como o bloco de maior peso visual da seção. Sem duas colunas
   pra alinhar, o problema de alturas diferentes nem existe mais. */
.contato-quick { margin: 0 0 var(--space-7); }
.contato-quick-label { font-weight: 500; font-size: 14px; color: var(--foreground-muted); margin: 0 0 var(--space-3); }
.contato-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.contato-actions .btn { font-size: 14px; padding: var(--space-2) var(--space-4); min-height: 44px; }
.contato-actions .btn--secondary:hover { background: var(--surface-muted); }

.contato-form {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-weight: 500; font-size: 14px; }
.field input, .field textarea {
  font-family: var(--font);
  font-size: 16px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 48px;
  background: var(--background);
  color: var(--foreground);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-help { font-size: 13px; color: var(--foreground-muted); margin: 0; }
.field-error { color: var(--error); font-weight: 500; font-size: 14px; }
.form-success { color: var(--primary); font-weight: 600; }
.lgpd-note { font-size: 13px; color: var(--foreground-muted); margin: 0; }

/* ---------- Rodapé ---------- */
.rodape {
  padding-block: var(--space-6);
  background: var(--surface-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background-color 0.4s ease;
}
@media (min-width: 768px) {
  .rodape { flex-direction: row; align-items: center; justify-content: space-between; }
}
.rodape p { font-weight: 500; font-size: 14px; color: var(--foreground-muted); margin: 0; transition: color 0.4s ease; }
.wcag-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 44px;
  transition: color 0.4s ease;
}
.wcag-badge:hover { color: var(--primary-hover); }
.rodape-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
}
.rodape-credit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  font-size: 12px;
  color: var(--foreground-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.4s ease;
}
.rodape-credit:hover { color: var(--foreground); }

/* Rodapé "souvenir" do easter egg do nome — mesma paleta de cada .nome-variacao--N,
   acionado via JS quando a pessoa mexe no nome "Érick Jesus". Contraste do texto
   (#141414) verificado acima de 7:1 (AAA) em todas as 5 variações. */
.rodape--variacao-1 { background: #d7e4d6; }
.rodape--variacao-2 { background: #00c0e8; }
.rodape--variacao-3 { background: #fff6dc; }
.rodape--variacao-4 { background: #fbe6fa; }
.rodape--variacao-5 { background: #ede1ce; }
.rodape--variacao-1 p, .rodape--variacao-1 .wcag-badge, .rodape--variacao-1 .rodape-credit,
.rodape--variacao-2 p, .rodape--variacao-2 .wcag-badge, .rodape--variacao-2 .rodape-credit,
.rodape--variacao-3 p, .rodape--variacao-3 .wcag-badge, .rodape--variacao-3 .rodape-credit,
.rodape--variacao-4 p, .rodape--variacao-4 .wcag-badge, .rodape--variacao-4 .rodape-credit,
.rodape--variacao-5 p, .rodape--variacao-5 .wcag-badge, .rodape--variacao-5 .rodape-credit { color: #141414; }
.wcag-badge svg { flex-shrink: 0; }

/* =========================================================
   Página de case (Tele Sena / Prudential)
   ========================================================= */
.case-detail, .case-nav { padding-inline: var(--space-4); }
@media (min-width: 768px) { .case-detail, .case-nav { padding-inline: var(--space-7); } }
@media (min-width: 1200px) { .case-detail, .case-nav { padding-inline: var(--space-8); } }
.case-nav { padding-block: var(--space-4); background: var(--background); }

/* Botão "voltar" — topo de toda página que não é a Home (pedido do Érick, 4ª
   rodada: "nas páginas que não são a Home, coloque um botão de voltar no topo
   da tela, talvez abaixo do nome Érick, talvez acima do título da página").
   Fica discreto de propósito (só o ícone, como ele sugeriu) — o nome
   acessível "Voltar para a Home"/"Back to Home" vem de aria-label, então
   quem usa teclado/leitor de tela tem um rótulo claro, e quem vê a tela
   ganha uma affordance de navegação sem outro bloco de texto/botão
   competindo com o título logo abaixo. Alvo de toque 44×44 (AAA), mesmo
   padrão do botão do avatar/easter egg e dos botões de voltar dos protótipos.
   Não é a mesma coisa que o botão "voltar" de dentro dos protótipos embutidos
   (esses navegam entre telas do produto fictício; este aqui sai da página do
   portfólio e volta pra Home). */
.back-link-wrap { padding-inline: var(--space-4); padding-block-start: var(--space-3); }
@media (min-width: 768px) { .back-link-wrap { padding-inline: var(--space-7); } }
@media (min-width: 1200px) { .back-link-wrap { padding-inline: var(--space-8); } }
.back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-start: calc(var(--space-3) * -1);
  border-radius: var(--radius-md);
  color: var(--foreground);
  transition: background-color .15s ease;
}
.back-link:hover { background: var(--surface-muted); }
.back-link svg { flex-shrink: 0; }

/* Hero do case */
.case-hero { padding-block: var(--space-6) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.case-hero-eyebrow {
  display: inline-flex; align-self: flex-start;
  background: var(--primary); color: #fff;
  font-weight: 500; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 6px var(--space-3); border-radius: var(--radius-pill);
}
.case-hero-title {
  font-weight: 900; font-size: 36px; line-height: 1.12; letter-spacing: -0.5px;
  color: var(--primary); margin: 0;
}
@media (min-width: 768px) { .case-hero-title { font-size: 64px; line-height: 68px; letter-spacing: -1.5px; } }
.case-hero-sub { font-size: 18px; line-height: 1.4; color: var(--foreground-muted); margin: 0; max-width: 66ch; }
@media (min-width: 768px) { .case-hero-sub { font-size: 20px; line-height: 30px; } }
.case-meta { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.case-meta-item p:first-child { font-size: 12px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--foreground-muted); margin: 0 0 var(--space-1); }
.case-meta-item p:last-child { font-size: 16px; color: var(--foreground); margin: 0; }
.case-hero-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
.tag--peach { background: var(--tag-peach); }
.tag--lemon { background: var(--tag-lemon); }
.tag--aqua { background: var(--tag-aqua); }
.tag--coral { background: var(--tag-coral); }
.tag--a11y { background: var(--tag-a11y); }

/* STAR */
.star-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  padding-block: 0 var(--space-7);
}
@media (min-width: 900px) { .star-grid { grid-template-columns: repeat(4, 1fr); } }
.star-card {
  background: #fff; border: 2px solid var(--star-border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);
}
.star-card p:first-child { font-weight: 700; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; margin: 0; color: var(--foreground); }
.star-card p, .star-card li { font-size: 16px; line-height: 1.5; color: var(--foreground-muted); }
.star-card ul { margin: 0; padding-left: var(--space-5); }

/* Métricas grandes (3 cards) */
.metric-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); padding-block: 0 var(--space-9); }
@media (min-width: 900px) { .metric-grid { grid-template-columns: repeat(3, 1fr); } }
.metric-card { border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.metric-card--mint { background: var(--tag-mint); }
.metric-card--sky { background: var(--tag-sky); }
.metric-card--sun { background: var(--tag-sun); }
.metric-number { font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -1.5px; color: var(--primary); margin: 0; }
@media (min-width: 768px) { .metric-number { font-size: 80px; } }
/* Números compostos/longos (ex.: "20 → ~4 min", "2 prêmios") pedem corpo menor para não quebrar linha */
.metric-number--compact { font-size: 32px; letter-spacing: -1px; }
@media (min-width: 768px) { .metric-number--compact { font-size: 44px; } }
.metric-card p.metric-lead { font-weight: 600; font-size: 18px; line-height: 24px; color: var(--foreground); margin: 0; }
.metric-card p.metric-detail { font-size: 18px; line-height: 24px; color: var(--foreground); margin: 0; }
.metric-card p.metric-note { font-size: 14px; line-height: 20px; color: var(--foreground-muted); margin: 0; }

/* Conteúdo 2 colunas.
   Pedido do Érick (rodada 38): no mobile, ninguém sabia que o protótipo
   existia lá embaixo — a pessoa só chegava nele depois de rolar o case
   inteiro. Resposta: reposicionar só no mobile, entre os blocos de texto,
   em vez de só no fim.
   Solução: o HTML passa a ter .case-narrative--top, .case-sticky-col (o
   protótipo) e .case-narrative--bottom NESSA ORDEM no DOM. No mobile
   (abaixo), isso já é suficiente — é um flex-column simples que segue a
   ordem do DOM, então o protótipo cai naturalmente no meio. No desktop
   (≥1100px), viramos CSS Grid com grid-area pra reorganizar visualmente em
   2 colunas (texto completo à esquerda, protótipo fixo/sticky à direita)
   SEM mudar a ordem do DOM — o que também mantém a ordem de tab/teclado
   sensata (topo → protótipo → resto do texto). */
.case-content { display: flex; flex-direction: column; gap: var(--space-9); padding-block: 0 var(--space-9); }
/* Pedido do Érick, rodada seguinte: mesmo com o protótipo vindo ANTES de
   case-narrative--bottom no DOM (fix da rodada 38, acima), no mobile ele
   ainda ficava "escondido" de fato — pra chegar nele a pessoa precisava
   rolar as 3 seções inteiras de case-narrative--top primeiro (texto +
   imagens), o que não parecia "logo ali" por mais que tecnicamente não
   fosse o fim do case. Fix: no mobile, `order` reposiciona visualmente o
   protótipo pra logo após os cards de métrica, ANTES de qualquer texto —
   sem tocar a ordem real do DOM (mantém tab/leitor de tela na ordem
   lógica: métricas → texto → protótipo → resto do texto). A partir de
   1100px o layout vira CSS Grid com grid-area (abaixo), que ignora
   `order` — o protótipo volta a ficar ao lado do texto, sticky, como já
   estava. */
.case-sticky-col { order: -1; }
@media (min-width: 1100px) {
  .case-content {
    display: grid;
    grid-template-columns: 1fr 380px;
    grid-template-areas: "top proto" "bottom proto";
    align-items: start;
    gap: var(--space-8);
  }
  .case-narrative--top { grid-area: top; }
  .case-narrative--bottom { grid-area: bottom; }
  .case-sticky-col { grid-area: proto; position: sticky; top: var(--space-6); }
  /* Mancha de cor atrás do protótipo, pedido do Érick: "chamar atenção pra pessoa
     tentar" — o protótipo estava "meio parado" visualmente. Cor neutra (accent
     dourado do design system) pra funcionar tanto no case Tele Sena (fundo verde)
     quanto no Prudential (fundo azul), sem brigar com nenhum dos dois temas. */
  .case-sticky-col::before {
    content: "";
    position: absolute;
    inset: -24px -28px auto -28px;
    height: calc(100% + 48px);
    background: radial-gradient(60% 55% at 50% 38%, var(--accent-subtle) 0%, transparent 72%);
    border-radius: var(--radius-lg);
    z-index: -1;
  }
}

/* Espaçamento entre blocos de conteúdo dos cases aumentado (pedido do Érick,
   rodada 06/10): um nível acima na escala de espaçamento, mantendo a mesma
   proporção 2:1 entre topo/base que já existia (64/32 → 96/48), e o respiro
   interno de cada bloco (eyebrow/título/corpo/imagem) também um nível acima
   (16px → 24px), em vez de mudar só um dos dois e desequilibrar o ritmo. */
.case-section { display: flex; flex-direction: column; gap: var(--space-5); padding-block: var(--space-9) var(--space-7); border-top: 1px solid var(--border); }
.case-section:first-child { padding-top: 0; border-top: none; }
.case-section-eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--foreground-muted); margin: 0; }
.case-section-title { font-weight: 600; font-size: 26px; line-height: 1.25; color: var(--primary); margin: 0; }
@media (min-width: 768px) { .case-section-title { font-size: 32px; line-height: 40px; } }
.case-section-body { font-size: 17px; line-height: 1.55; color: var(--foreground-muted); margin: 0; }
@media (min-width: 768px) { .case-section-body { font-size: 18px; line-height: 28px; } }
.case-section img.case-figure { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }

.case-pill-stat {
  display: inline-flex; align-self: flex-start; align-items: center; gap: var(--space-2);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
}
.case-pill-stat--mint { background: var(--tag-mint); }
.case-pill-stat--sky { background: var(--tag-sky); }
.case-pill-stat strong { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: var(--primary); }
.case-pill-stat span { font-weight: 500; font-size: 14px; color: var(--foreground); }

.case-mini-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.case-mini-stat { flex: 1 1 180px; border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.case-mini-stat--mint { background: var(--tag-mint); }
.case-mini-stat--sky { background: var(--tag-sky); }
.case-mini-stat strong { font-weight: 900; font-size: 40px; letter-spacing: -1px; color: var(--primary); line-height: 1.1; }
.case-mini-stat span { font-weight: 500; font-size: 14px; color: var(--foreground); }

/* =========================================================
   Gráficos de dados dos cases — HTML/CSS real, não imagem
   (pedido do Érick, 4ª rodada: "a qualidade dos gráficos tá
   ruim, refaz em HTML, quero vetor, qualidade máxima, nada
   de imagem pixelada"). Os valores reais ficam em texto de
   verdade (inclusive pra leitor de tela via lista .sr-only),
   nunca só no desenho — então também é upgrade de
   acessibilidade, não só de nitidez.
   ========================================================= */

/* Gráfico de barras (ex.: nota de usabilidade por momento) */
.chart-bars { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.chart-bars-title { font-weight: 600; font-size: 15px; color: var(--primary); margin: 0 0 var(--space-5); }
.chart-bars-plot {
  display: flex; align-items: flex-end; gap: var(--space-3);
  height: 160px; padding-top: var(--space-6);
}
.chart-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bar-value { font-weight: 700; font-size: 15px; color: var(--primary); margin-bottom: var(--space-2); }
.chart-bar-col {
  width: 100%; max-width: 44px;
  height: calc(var(--v) / var(--scale, 5) * 100%);
  background: var(--primary); border-radius: 6px 6px 0 0;
  margin-top: auto;
}
.chart-bar--highlight .chart-bar-col { background: var(--tag-mint); }
.chart-bar-label { margin-top: var(--space-2); font-size: 13px; color: var(--foreground-muted); text-align: center; }
.chart-bars-note { margin: var(--space-5) 0 0; font-size: 14px; line-height: 1.5; color: var(--foreground-muted); }

/* Linha do tempo de ondas de lançamento (ex.: "Como o acesso foi ampliado") */
.launch-waves { margin: 0; background: var(--surface-muted); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); }
.launch-waves-title { font-weight: 700; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--foreground-muted); margin: 0 0 var(--space-5); }
.launch-waves-list { list-style: none; margin: 0; padding: 0; }
.launch-waves-step { position: relative; padding-left: 48px; padding-bottom: var(--space-5); }
.launch-waves-step:last-of-type { padding-bottom: 0; }
.launch-waves-step:not(:last-of-type)::before {
  content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px;
  background: rgba(23, 53, 42, 0.18);
}
.launch-waves-num {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.launch-waves-amount { font-weight: 900; font-size: 26px; letter-spacing: -0.5px; color: var(--primary); }
.launch-waves-amount span { font-weight: 500; font-size: 15px; letter-spacing: normal; margin-left: var(--space-1); }
.launch-waves-desc { margin: var(--space-1) 0 0; font-size: 15px; line-height: 1.5; color: var(--foreground); }
.launch-waves-feedback {
  display: inline-block; margin: var(--space-3) 0 0; background: var(--background);
  border-radius: var(--radius-pill); padding: var(--space-2) var(--space-4);
  font-size: 13px; color: var(--foreground-muted);
}
.launch-waves-total { margin-top: var(--space-5); background: var(--background); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.launch-waves-total strong { display: block; font-weight: 700; font-size: 16px; color: var(--primary); }
.launch-waves-total p { margin: var(--space-1) 0 0; font-size: 14px; line-height: 1.5; color: var(--foreground-muted); }

/* Gráfico de linha (ex.: participação da Tele Sena Semanal nas vendas) */
.chart-line { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.chart-line-head { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.chart-line-title { font-weight: 600; font-size: 15px; color: var(--primary); margin: 0; }
.chart-line-sub { font-size: 13px; color: var(--foreground-muted); margin: 0; }
.chart-line-stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.chart-line-stat { flex: 1 1 160px; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.chart-line-stat--before { background: var(--tag-coral); }
.chart-line-stat--after { background: var(--primary); }
.chart-line-stat strong { display: block; font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }
.chart-line-stat--before strong { color: var(--primary); }
.chart-line-stat--after strong { color: #fff; }
.chart-line-stat span { font-size: 12px; font-weight: 500; }
.chart-line-stat--before span { color: var(--primary); }
.chart-line-stat--after span { color: var(--surface-muted); }
.chart-line svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-line-note { margin: var(--space-4) 0 0; font-size: 14px; line-height: 1.5; color: var(--foreground-muted); }

/* Elementos internos do SVG do gráfico de linha */
.cl-band-before { fill: var(--tag-coral); opacity: 0.55; }
.cl-band-after { fill: var(--tag-mint); opacity: 0.45; }
.cl-grid { stroke: var(--border); stroke-width: 1; }
.cl-gridlabel { fill: var(--foreground-muted); font-size: 11px; font-weight: 500; }
.cl-avgline { stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.55; fill: none; }
.cl-launchline { stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.8; }
.cl-launchlabel { fill: var(--primary); font-size: 11px; font-weight: 700; }
.cl-line { fill: none; stroke: var(--primary); stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.cl-dot { fill: var(--background); stroke: var(--primary); stroke-width: 2; }
.cl-dot--peak { fill: var(--primary); stroke: var(--background); stroke-width: 2; }
.cl-pointlabel { fill: var(--primary); font-size: 12px; font-weight: 700; }
.cl-monthlabel { fill: var(--foreground-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

/* Corpo do gráfico de linha: eixo Y + área do plot (texto real em HTML, não dentro do SVG, pra nunca encolher em telas pequenas) */
.chart-line-body { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.cl-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 0 0 auto; padding-block: 2px; text-align: right;
  font-size: 11px; font-weight: 600; color: var(--foreground-muted);
}
.cl-plot { position: relative; flex: 1 1 auto; aspect-ratio: 580 / 160; min-width: 0; }
.cl-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cl-launch-badge {
  position: absolute; top: 4px; transform: translate(-50%, 0);
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1.3; text-align: center; white-space: nowrap;
  border-radius: var(--radius-pill); padding: 3px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.cl-point-callout {
  position: absolute; transform: translate(-50%, -135%);
  background: var(--background); color: var(--primary); font-size: 12px; font-weight: 800;
  border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px 8px;
  white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.cl-point-callout--first { transform: translate(0, -135%); }
.cl-xaxis { position: relative; height: 16px; margin-top: var(--space-2); margin-left: calc(28px + var(--space-2)); }
.cl-xaxis span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--foreground-muted);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.cl-xaxis span:first-child { transform: translateX(0); }
.cl-xaxis span:last-child { transform: translateX(-100%); }
@media (max-width: 420px) {
  .cl-yaxis { font-size: 10px; }
  .cl-xaxis { margin-left: calc(24px + var(--space-1)); }
  .cl-xaxis span, .cl-launch-badge, .cl-point-callout { font-size: 10px; }
}

.case-principles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.case-principles li { display: flex; align-items: center; gap: var(--space-3); font-weight: 500; font-size: 17px; color: var(--foreground); }
.case-principles li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.case-pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.case-pill-row .tag { font-size: 13px; }

/* Sticky — protótipo. O toggle "Acompanhar enquanto eu rolo" foi removido a
   pedido do Érick: a coluna agora é sempre sticky (.case-sticky-col, acima),
   sem opção de desligar — ele não via cenário real de alguém querer isso.
   Rodada 39, mudança de arquitetura pedida pelo Érick: antes o portfólio desenhava
   sua PRÓPRIA moldura de celular aqui (fundo + padding) por fora do <iframe>, e o
   protótipo desenhava outra por dentro — duas molduras brigando, com uma emenda malfeita
   entre as duas (cantos arredondados fora, quadrados dentro) e barra de rolagem sobrando.
   Agora a moldura mora só no protótipo (ver .device-frame em is-embed, no arquivo de
   cada protótipo) — aqui no portfólio sobra só um recorte simples, sem padding e sem
   fundo próprio, só pra arredondar o buraco onde o iframe entra. O iframe preenche
   100% desse recorte; a moldura que a pessoa vê é inteiramente desenhada pelo protótipo. */
/* Pedido do Érick: o protótipo ficava "pequenininho", porque quem mandava no
   tamanho era a ALTURA (height: min(85vh,860px)) — a largura só seguia como
   consequência da proporção de celular (388/828). Em qualquer tela mais
   baixa que larga (a maioria dos celulares em retrato), isso sobrava muito
   espaço vazio nas laterais. Fix: a LARGURA passa a mandar — no mobile,
   quase 100% do espaço disponível (seguindo o pedido de "ocupar quase toda
   a horizontalidade"), com um teto de 460px pra não distorcer a proporção
   de celular virando algo gigante e esquisito. No desktop (≥1100px), a
   coluna sticky já tem largura fixa (380px, no grid abaixo) — então
   width:100% ali preenche exatamente essa coluna, sem mudar o visual que já
   existia lá (a altura, calculada pela mesma proporção, dá ~810px — bem
   parecida com o limite antigo de 860px, então nada quebra). */
.proto-frame {
  border-radius: 32px; overflow: hidden;
  aspect-ratio: 388 / 828; width: min(100%, 460px); height: auto; margin: 0 auto;
}
.proto-screen {
  width: 100%; height: 100%; border: none; display: block; background: #0a0a0c;
}
/* Pedido do Érick: a moldura de celular (.device-frame, dentro de cada arquivo de protótipo)
   virou o padrão pra TODO protótipo novo do portfólio — mesma proporção de tela aqui no
   .proto-frame (recorte do portfólio) pra todos, Prudential incluso. Antes a Prudential tinha
   um .proto-frame--wide próprio (removido) pensando nela como "app de negócio" em vez de
   celular — o Érick pediu que parecesse um celular como a Telecena, com as mesmas
   especificações, então não existe mais variação de formato entre protótipos.
   IMPORTANTE: este border-radius precisa ser EXATAMENTE igual ao border-radius do
   ".device-frame" em modo is-embed, dentro de cada arquivo de protótipo (hoje 32px nos dois).
   Se os dois raios não baterem, a sombra/brilho do bezel (desenhado com o raio do
   .device-frame) fica cortada num raio diferente do recorte, e sobra um arco/curva visível a
   mais no canto — foi um bug relatado pelo Érick (rodada de 04/10) em ambos os protótipos. */
.proto-caption { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); font-size: 14px; }
.proto-caption p { margin: 0; font-weight: 500; color: var(--foreground); flex: 1 1 100%; }
.proto-caption a { font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.proto-reset {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: 600; font-size: 14px; color: var(--primary);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* Em resumo */
.case-resumo { background: var(--primary); color: #fff; padding-block: var(--space-9); display: flex; flex-direction: column; gap: var(--space-5); }
.case-resumo-eyebrow { font-weight: 500; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--tag-mint); margin: 0; }
.case-resumo-title { font-weight: 900; font-size: 32px; line-height: 1.1; margin: 0; color: #fff; }
@media (min-width: 768px) { .case-resumo-title { font-size: 48px; } }
.case-resumo-closing { font-size: 19px; line-height: 1.4; color: #c9e8d6; margin: 0; max-width: 72ch; }
@media (min-width: 768px) { .case-resumo-closing { font-size: 22px; } }
.case-resumo-source { font-size: 13px; color: #fff; opacity: 0.8; margin: 0; }

/* Próximo trabalho */
.case-next { border-top: 1px solid var(--border); padding-block: var(--space-6); display: flex; align-items: center; justify-content: space-between; }
.case-next-eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--foreground-muted); margin: 0 0 var(--space-1); }
.case-next-title { font-weight: 600; font-size: 20px; color: var(--foreground); margin: 0; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
@media (min-width: 768px) { .case-next-title { font-size: 22px; } }
.case-next-title:hover { color: var(--primary-hover); }

/* Galeria — imagens lado a lado com legenda (ex.: prêmios, recorte de fonte) */
.case-gallery { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; }
@media (min-width: 640px) { .case-gallery { flex-direction: row; align-items: flex-end; } }
.case-gallery-item { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 0; min-width: 0; }
.case-gallery-item img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: 0 10px 24px rgba(23, 51, 41, 0.14); display: block; }
.case-gallery-item p { font-size: 14px; line-height: 1.4; color: var(--foreground-muted); margin: 0; }
.case-gallery-item--wide { flex: 1.4 1 0; }

/* Lista de fontes/links dentro de uma seção de case */
.case-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.case-sources a { font-size: 16px; color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.case-sources a:hover { color: var(--primary); }

/* Vídeo de bastidores — discreto, fim do case Prudential */
.case-video { max-width: 720px; }
.case-video-eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--foreground-muted); margin: 0 0 var(--space-2); }
.case-video-intro { font-size: 16px; line-height: 1.5; color: var(--foreground-muted); margin: 0 0 var(--space-4); }
.case-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #191919; }
.case-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-video-fallback { margin-top: var(--space-3); font-size: 14px; }
.case-video-fallback a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   Página Sobre
   ========================================================= */
.sobre-hero { padding-block: var(--space-6) 0; }
.sobre-hero-eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.72px; text-transform: uppercase; color: var(--foreground-muted); margin: 0 0 var(--space-3); }
.sobre-hero-title { font-weight: 600; font-size: 28px; line-height: 1.25; color: var(--foreground); margin: 0; }
@media (min-width: 768px) { .sobre-hero-title { font-size: 32px; line-height: 40px; } }

.sobre-content { display: flex; flex-direction: column; gap: var(--space-7); padding-block: var(--space-7) var(--space-8); }
@media (min-width: 900px) { .sobre-content { flex-direction: row; align-items: flex-start; gap: var(--space-8); } }

.sobre-photo { flex: 0 0 auto; width: 220px; margin-inline: auto; }
@media (min-width: 640px) { .sobre-photo { width: 280px; margin-inline: 0; } }
@media (min-width: 900px) { .sobre-photo { width: 340px; } }
.sobre-photo img { width: 100%; height: auto; display: block; }

.sobre-bio { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.sobre-bio-text { font-size: 16px; line-height: 26px; color: var(--foreground); margin: 0 0 var(--space-4); }
.sobre-bio-text:last-child { margin-bottom: 0; }
.sobre-formacao { font-weight: 500; font-size: 14px; color: var(--foreground-muted); margin: 0; }
.sobre-site-nota { padding-block: 0 var(--space-7); }
.sobre-site-nota .sobre-formacao { font-weight: 400; line-height: 22px; max-width: 640px; }
.sobre-cursos-label { font-weight: 500; font-size: 14px; color: var(--foreground-muted); margin: 0 0 var(--space-2); }
/* Pedido do Érick (rodada 38): variar a cor dos chips "Outros lugares onde já
   estudei", em vez do cinza único. Em vez de cor aleatória de verdade (o que
   mudaria a cada reload/print, sem motivo), cicla pelas 5 cores de tag que já
   existem no design system (as mesmas usadas nos cases — .tag--lilac etc.),
   por nth-child — reaproveita a paleta já aprovada em vez de inventar uma
   nova, e o resultado fica estável e repetível. */
.sobre-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.sobre-chips li { color: var(--foreground); font-weight: 500; font-size: 14px; padding: 6px var(--space-3); border-radius: var(--radius-pill); }
.sobre-chips li:nth-child(5n+1) { background: var(--tag-lilac); }
.sobre-chips li:nth-child(5n+2) { background: var(--tag-mint); }
.sobre-chips li:nth-child(5n+3) { background: var(--tag-sky); }
.sobre-chips li:nth-child(5n+4) { background: var(--tag-amber); }
.sobre-chips li:nth-child(5n+5) { background: var(--tag-lime); }

/* =========================================================
   Página Acessibilidade (declaração autoavaliada)
   ========================================================= */
.a11y-hero { padding-block: var(--space-6) var(--space-5); }
.a11y-hero-eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.72px; text-transform: uppercase; color: var(--foreground-muted); margin: 0 0 var(--space-3); }
.a11y-hero-title { font-weight: 600; font-size: 28px; line-height: 1.25; color: var(--foreground); margin: 0 0 var(--space-4); max-width: 46ch; }
@media (min-width: 768px) { .a11y-hero-title { font-size: 32px; line-height: 40px; } }
.a11y-hero-sub { font-size: 16px; line-height: 1.5; color: var(--foreground-muted); margin: 0; max-width: 66ch; }
.a11y-content { display: flex; flex-direction: column; gap: var(--space-7); padding-block: var(--space-4) var(--space-8); max-width: 72ch; }
.a11y-block-title { font-weight: 600; font-size: 20px; color: var(--primary); margin: 0 0 var(--space-3); }
.a11y-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.a11y-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 16px; line-height: 1.5; color: var(--foreground-muted); }
.a11y-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 8px; }
.a11y-note { background: var(--surface-muted); border-radius: var(--radius-lg); padding: var(--space-5); font-size: 15px; line-height: 1.5; color: var(--foreground); margin: 0; }
.a11y-note a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }