/* =========================================================
   lygia pradō · style.css
   Um CSS só para o site inteiro. Mudou aqui, muda em todas
   as páginas. Ordem dos blocos:

    0. Fontes          6. Footer
    1. Tokens          7. Home
    2. Base            8. Trabalhos
    3. Idiomas         9. Sobre
    4. Componentes    10. Página de case
    5. Header         11. Movimento reduzido
   ========================================================= */


/* ---------- 0. FONTES ----------
   DM Sans e DM Mono vêm do Google Fonts (link no <head> de cada
   página). A Mefta é um arquivo nosso, então registramos com
   @font-face. "font-weight: 100 900" evita negrito falso, porque
   a Mefta só tem o peso Regular. */
@font-face {
  font-family: "Mefta";
  src: url("../fonts/Mefta.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ---------- 1. TOKENS ----------
   Variáveis com as cores, fontes e espaçamentos da marca. */
:root {
  /* Cores */
  --bg:     #FDE9E8;  /* fundo do site */
  --peach:  #FBDED8;  /* texto sobre o verde */
  --pink:   #FBC2FE;
  --blue:   #B8D0EA;
  --olive:  #8B9034;
  --brown:  #A8744C;
  --orange: #EE7001;
  --green:  #1D6858;  /* texto principal, header e footer */
  --line:       rgba(29, 104, 88, 0.25);   /* linhas finas sobre o fundo claro */
  --line-light: rgba(251, 222, 216, 0.25); /* linhas finas sobre o verde */

  /* Fontes: título (Mefta), texto corrido (DM Sans), apoio (DM Mono).
     A DM Sans está na lista da Mefta para os caracteres que a Mefta
     não tem, como o "ō" de pradō. */
  --font-display: "Mefta", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Courier New", monospace;

  /* Espaçamentos (base 8) */
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-section: 160px;

  /* Medidas */
  --container-max: 1280px;
  --text-max: 680px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 20px;
}

/* No celular, os espaços grandes diminuem */
@media (max-width: 760px) {
  :root {
    --space-section: 96px;
    --space-96: 64px;
    --space-64: 40px;
    --space-48: 32px;
  }
}


/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--green);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; }  /* a Mefta só tem Regular */

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* .container centraliza o conteúdo e limita a largura em 1280px.
   max() garante que o padding nunca fique menor que a área segura
   de celulares com "notch". */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* Etiqueta pequena acima dos títulos */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  margin: 0;
}

.section { padding-bottom: var(--space-section); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: var(--space-8) 0 var(--space-64);
  text-wrap: balance;
}


/* ---------- 3. IDIOMAS ----------
   Cada texto existe duas vezes no HTML: data-lang="pt" e
   data-lang="en". O JavaScript troca o atributo lang da tag <html>,
   e estas duas regras escondem o idioma que não está ativo.
   Sem JavaScript, o site aparece em português. */
html:not([lang="en"]) [data-lang="en"],
html[lang="en"] [data-lang="pt"] {
  display: none !important;
}


/* ---------- 4. COMPONENTES ---------- */
/* .nowrap: impede a quebra de linha dentro da palavra (ex.: "e-commerce",
   que o navegador quebraria no hífen, deixando "e-" sozinho) */
.nowrap { white-space: nowrap; }


/* Pílula: botões e links arredondados */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.2;
  padding: 10px 18px;
  border: 1.5px solid currentColor;  /* a borda usa a cor do texto */
  border-radius: 999px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pill--lg {
  font-family: var(--font-mono);
  font-size: clamp(16px, 1.6vw, 20px);
  padding: 10px 24px;
}
/* Pílula sobre fundo claro: no hover, enche de verde */
a.pill:hover { background: var(--green); color: var(--bg); }
/* Pílula sobre fundo verde: no hover, enche de pêssego */
.pill--light:hover,
a.pill--light:hover { background: var(--peach); color: var(--green); }

/* Etiqueta pequena (números dos cards) */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.3;
  padding: 5px 12px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-arrow {
  font-family: var(--font-mono);
  font-size: 15px;
  text-underline-offset: 6px;
}

/* PASTA
   Uma caixa colorida com uma aba em cima. A cor vem da variável
   --c, que cada modificador (.folder--blue etc.) troca.
   A aba é o ::before: um retângulo recortado em trapézio pelo
   clip-path. Ela invade 1px a caixa para não aparecer emenda. */
.folder {
  --c: var(--blue);
  position: relative;
  padding-top: 24px;
}
.folder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  width: 56%;
  height: 25px;
  background: var(--c);
  clip-path: polygon(0 100%, 7% 0, 93% 0, 100% 100%);
}
.folder__body {
  background: var(--c);
  border-radius: var(--radius-lg);
  padding: clamp(14px, 1.8vw, 22px);
}

/* MOLDURA: borda colorida em volta de uma imagem */
.frame {
  --c: var(--pink);
  background: var(--c);
  border-radius: var(--radius-lg);
  padding: clamp(10px, 1.6vw, 20px);
}

/* Cores disponíveis para pasta e moldura */
.c-blue   { --c: var(--blue); }
.c-pink   { --c: var(--pink); }
.c-orange { --c: var(--orange); }
.c-olive  { --c: var(--olive); }
.c-green  { --c: var(--green); }
.c-brown  { --c: var(--brown); }

/* ESPAÇO DE IMAGEM
   Enquanto não tem imagem, mostra o xadrez de "transparente" (feito
   com conic-gradient) e uma etiqueta com o tamanho ideal.
   Para inserir a imagem: coloque um <img> dentro do .slot e apague
   o <span class="slot__label">. O object-fit: cover recorta a imagem
   para preencher o espaço sem distorcer. */
.slot {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #F7F7F7;
  background-image: conic-gradient(#E9E9E9 25%, transparent 0 50%, #E9E9E9 0 75%, transparent 0);
  background-size: 28px 28px;
  display: grid;
  place-items: center;
}
.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot__label {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--green);
  padding: 4px 10px;
  border-radius: 999px;
  margin: var(--space-8);
}
/* Proporções */
.r-16x9  { --ratio: 16 / 9; }
.r-16x10 { --ratio: 16 / 10; }
.r-4x3   { --ratio: 4 / 3; }
.r-4x5   { --ratio: 4 / 5; }
.r-9x16  { --ratio: 9 / 16; }
.r-3x2   { --ratio: 3 / 2; }

/* slot--natural: sem proporção fixa; a imagem aparece inteira,
   com a altura que ela tem. Bom para prints de tela longos. */
.slot--natural { aspect-ratio: auto; display: block; background: none; }
.slot--natural img { position: static; height: auto; }


/* ---------- 5. HEADER ---------- */
.site-header {
  background: var(--green);
  color: var(--peach);
}
.site-header__inner {
  display: grid;
  /* 3 colunas: logo | menu (centro) | idiomas */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-24);
  padding-block: var(--space-16);
}
.logo {
  justify-self: start;
  display: block;
  color: var(--peach);   /* o SVG usa currentColor, então pega esta cor */
}
/* height fixa e width: auto mantêm a proporção do logo */
.logo__svg { display: block; height: 26px; width: auto; }
.site-nav {
  display: flex;
  gap: var(--space-32);
  font-size: 16px;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}
.lang-switch {
  justify-self: end;
  display: flex;
  gap: var(--space-8);
}
/* aria-pressed="true" marca o idioma ativo: ele fica preenchido */
.lang-btn[aria-pressed="true"] {
  background: var(--peach);
  color: var(--green);
}
.lang-btn:hover { background: rgba(251, 222, 216, 0.15); }
.lang-btn[aria-pressed="true"]:hover { background: var(--peach); }
.lang-short { display: none; }
/* Itens do menu com nome curto no celular ("thinking about design" → "thinking") */
.nav-short { display: none; }

/* Celular: logo e idiomas na 1ª linha, menu na 2ª */
@media (max-width: 760px) {
  .site-header__inner {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-16);
  }
  .site-nav {
    grid-column: 1 / -1;   /* ocupa as duas colunas */
    grid-row: 2;
    justify-content: space-between;
    padding-top: var(--space-16);
    border-top: 1px solid var(--line-light);
  }
  .logo__svg { height: 21px; }
  .lang-long { display: none; }
  .lang-short { display: inline; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
  .lang-btn { padding: 8px 14px; font-size: 14px; }
}


/* ---------- 6. FOOTER ---------- */
.site-footer {
  background: var(--green);
  color: var(--peach);
}
.site-footer__main {
  padding-block: var(--space-section) var(--space-96);
}
.footer-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 7.6vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: var(--space-24) 0 var(--space-48);
  text-wrap: balance;
}
.footer-title em { font-style: normal; color: var(--pink); }
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
}
.copy-status {
  font-family: var(--font-mono);
  font-size: 15px;
  user-select: all;
}
.site-footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--space-16);
  padding-block: var(--space-32);
  border-top: 1px solid var(--line-light);
  font-family: var(--font-mono);
  font-size: 13px;
}
/* Logo empilhado em rosa */
.footer-logo { justify-self: end; color: var(--pink); }
.footer-logo__svg { display: block; width: clamp(96px, 10vw, 128px); height: auto; }

@media (max-width: 560px) {
  .site-footer__bar { grid-template-columns: 1fr 1fr; }
  .site-footer__bar > :nth-child(2) { display: none; }  /* esconde o ano */
}


/* ---------- 7. HOME ---------- */

/* Hero: selo | título | pasta com as áreas de atuação */
.hero__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 380px);
  align-items: start;
  gap: var(--space-32);
  padding-block: var(--space-64) var(--space-section);
}
.badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--pink);
  display: grid;
  place-items: center;
}
/* O SVG "ly" já tem o anel; ocupa 64% do círculo rosa */
.badge__svg { width: 64%; height: auto; color: var(--green); }
.hero__title {
  font-family: var(--font-display);
  margin: 0;
  line-height: 0.8;
  letter-spacing: -0.04em;
}
.hero__title span { display: block; }
.hero__title .small { font-size: clamp(40px, 4.6vw, 64px); margin-left: 0.6em; }
.hero__title .big   { font-size: clamp(76px, 10.4vw, 150px); }
.hero__title .big + .big { margin-left: 0.2em; }

.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  list-style: none;
  margin: 0;
  padding: 0;
}
.chip {
  min-height: 90px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-8);
  background: var(--bg);
  border: 1px solid var(--green);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.35;
  transition: transform 0.25s ease;
}
.chip:hover { transform: rotate(-3deg); }

/* RESUMO DO CHIP (balão)
   Fica escondido (opacity 0) acima do chip e aparece quando:
   - o mouse passa por cima (só em telas com mouse: hover: hover)
   - o chip recebe foco pelo teclado (:focus-visible)
   - o dedo segura o chip no celular (classe .is-open, colocada pelo JS) */
.chip {
  position: relative;
  cursor: default;
  -webkit-touch-callout: none;   /* sem o menu de "copiar" ao segurar no iPhone */
  user-select: none;
  -webkit-user-select: none;
}
.chip__tip {
  position: absolute;
  bottom: calc(100% + 10px);     /* logo acima do chip, com 10px de folga */
  left: 50%;
  z-index: 10;
  width: max-content;
  max-width: 240px;
  padding: 12px 14px;
  background: var(--green);
  color: var(--peach);
  border: 1.5px solid var(--pink);   /* moldura rosa, na espessura das linhas do site */
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;             /* o navegador evita deixar uma palavra sozinha na última linha */
  pointer-events: none;          /* o balão não "rouba" o mouse do chip */
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* O chip gira -3deg no hover; o rotate(3deg) abaixo desfaz o giro
   no balão, para o texto ficar reto e fácil de ler */
/* Coluna da esquerda e da direita: alinha o balão pela borda,
   para ele não sair da tela no celular */
.chip:nth-child(3n + 1) .chip__tip { left: 0; transform: translate(0, 6px); }
.chip:nth-child(3n) .chip__tip { left: auto; right: 0; transform: translate(0, 6px); }

@media (hover: hover) {
  .chip:hover .chip__tip { opacity: 1; transform: translate(-50%, 0) rotate(3deg); }
  .chip:nth-child(3n + 1):hover .chip__tip,
  .chip:nth-child(3n):hover .chip__tip { transform: translate(0, 0) rotate(3deg); }
}
.chip:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.chip:focus-visible .chip__tip,
.chip.is-open .chip__tip { opacity: 1; transform: translate(-50%, 0) rotate(3deg); }
.chip:nth-child(3n + 1):focus-visible .chip__tip, .chip:nth-child(3n + 1).is-open .chip__tip,
.chip:nth-child(3n):focus-visible .chip__tip, .chip:nth-child(3n).is-open .chip__tip { transform: translate(0, 0) rotate(3deg); }
.chip.is-open { transform: rotate(-3deg); }
/* No teclado o chip não gira, então o balão também fica sem o rotate */
.chip:focus-visible:not(:hover) .chip__tip { rotate: -3deg; }

@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: auto minmax(0, 1fr); }
  .hero .folder { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 560px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .badge { width: 72px; height: 72px; }
  .hero__title .small { margin-left: 0.1em; }
}

/* Cards de case (home) */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-32);
  list-style: none;
  margin: 0;
  padding: 0;
}
.card a {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  text-decoration: none;
}
.card .folder { margin-bottom: var(--space-8); transition: transform 0.3s ease; }
.card a:hover .folder { transform: translateY(-6px) rotate(-1deg); }
.card__meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin: 0;
}
.card__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 30px);
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.card__desc { margin: 0; font-size: 16px; line-height: 1.55; }

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr; gap: var(--space-64); }
}

/* Resumo do "sobre" na home */
.about-teaser {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-64);
}
.about-teaser .section-title { margin-bottom: 0; }
.about-teaser__lead { margin: 0 0 var(--space-32); max-width: var(--text-max); }
.mini-timeline {
  list-style: none;
  margin: 0 0 var(--space-32);
  padding: 0;
  border-top: 1.5px solid var(--green);
}
.mini-timeline li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-16);
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
.mini-timeline .role {
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: right;
}
@media (max-width: 900px) {
  .about-teaser { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
}


/* ---------- 8. TRABALHOS ---------- */
.page-head { padding-block: var(--space-96) var(--space-96); }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(64px, 11vw, 160px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  margin: var(--space-16) 0 var(--space-32);
}
.page-lead {
  font-size: clamp(19px, 2vw, 22px);
  line-height: 1.5;
  max-width: var(--text-max);
  margin: 0;
}

.work-list { list-style: none; margin: 0; padding: 0; }
.work {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--space-64);
  align-items: center;
  padding-block: var(--space-64);
  border-top: 1.5px solid var(--green);
}
.work:last-child { border-bottom: 1.5px solid var(--green); }
.work .folder { transition: transform 0.3s ease; }
.work:hover .folder { transform: rotate(-1deg); }
.work__text { display: grid; gap: var(--space-16); justify-items: start; }
.work__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
  margin: 0;
}
.work__title a { text-decoration: none; }
.work__desc { margin: 0; }

@media (max-width: 900px) {
  .work { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
}


/* ---------- 9. SOBRE ---------- */
.intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-64);
  align-items: start;
  padding-block: var(--space-96) var(--space-section);
}
.intro__title {
  font-family: var(--font-display);
  font-size: clamp(60px, 9vw, 128px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: var(--space-16) 0 var(--space-48);
}
.intro__title em { font-style: normal; color: var(--orange); }
.intro__lead {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  margin: 0 0 var(--space-24);
  max-width: var(--text-max);
}
.intro__text p:not(.eyebrow):not(.intro__lead) { margin: 0 0 var(--space-16); max-width: var(--text-max); }

.quick { margin: var(--space-32) 0 0; display: grid; gap: var(--space-16); }
.quick div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--line);
}
.quick dt { font-family: var(--font-mono); font-size: 13px; padding-top: 3px; }
.quick dd { margin: 0; font-size: 16px; line-height: 1.45; }

@media (max-width: 900px) {
  .intro__inner { grid-template-columns: minmax(0, 1fr); }
  .intro aside { max-width: 460px; }
}

/* Princípios: caixas verdes com título rosa */
.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  list-style: none;
  margin: 0;
  padding: 0;
}
.principle {
  background: var(--green);
  color: var(--peach);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  gap: var(--space-16);
  align-content: start;
}
.principle h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 34px);
  line-height: 1.05;
  color: var(--pink);
  margin: 0;
}
.principle p { margin: 0; font-size: 18px; line-height: 1.75; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

/* Trajetória */
.jobs { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--green); }
.job {
  display: grid;
  /* período | empresa e cargo | descrição */
  grid-template-columns: 180px minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--space-32);
  padding-block: var(--space-32);
  border-bottom: 1px solid var(--line);
}
.job__period { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; margin: 0; }
.job__period span { display: block; opacity: 0.7; }
.job__company {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  margin: 0 0 var(--space-8);
}
.job__role { font-family: var(--font-mono); font-size: 14px; margin: 0; }
.job__desc p { margin: 0 0 var(--space-16); font-size: 16px; }
.job__desc ul { margin: 0; padding-left: 1.1em; font-size: 16px; }
.job__desc li + li { margin-top: var(--space-8); }
/* <mark> é a tag HTML para destacar: aqui vira um marca-texto rosa */
.job__desc mark {
  background: var(--pink);
  color: var(--green);
  padding: 0 4px;
  border-radius: 4px;
}
/* A etiqueta "atual" é criada pelo próprio CSS com ::after */
.job--current .job__company::after {
  content: "atual";
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  background: var(--orange);
  color: var(--peach);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: var(--space-8);
  vertical-align: middle;
}
html[lang="en"] .job--current .job__company::after { content: "current"; }
@media (max-width: 960px) {
  .job { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
}

/* Formação, marcas, ferramentas */
.extras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-48);
}
.extras h3 {
  font-family: var(--font-display);
  font-size: 30px;
  margin: 0 0 var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: 1.5px solid var(--green);
}
.edu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-24); }
.edu strong { display: block; font-weight: 500; font-size: 17px; line-height: 1.35; }
.edu span { font-family: var(--font-mono); font-size: 13px; }
.extras__sub { font-family: var(--font-mono); font-size: 13px; margin: var(--space-32) 0 var(--space-16); }
.tags--fill li { background: var(--blue); border-color: var(--blue); }
@media (max-width: 960px) { .extras { grid-template-columns: 1fr; } }


/* ---------- 10. PÁGINA DE CASE ---------- */

/* Barra laranja de progresso de leitura (largura definida pelo JS) */
.progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  height: 4px;
  width: 0;
  background: var(--orange);
  z-index: 20;
}

.case-head { padding-block: var(--space-64) var(--space-48); }
.back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  text-decoration: none;
  margin-bottom: var(--space-48);
}
.back:hover { text-decoration: underline; text-underline-offset: 6px; }
.case-title {
  font-family: var(--font-display);
  font-size: clamp(52px, 8vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: var(--space-16) 0 var(--space-32);
  max-width: 14ch;
  text-wrap: balance;
}
.case-summary {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.45;
  max-width: var(--text-max);
  margin: 0 0 var(--space-64);
}

/* Ficha técnica (<dl>: dt = rótulo, dd = valor) */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-24);
  margin: 0;
  padding-top: var(--space-24);
  border-top: 1.5px solid var(--green);
}
.facts dt { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.4; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Resultados em destaque */
.results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  list-style: none;
  margin: var(--space-48) 0 0;
  padding: 0;
}
.result {
  background: var(--pink);
  border-radius: var(--radius);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.result__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.result__label { font-size: 15px; line-height: 1.4; }
@media (max-width: 760px) { .results { grid-template-columns: 1fr; } }

/* Corpo: índice fixo à esquerda + texto */
.case-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-64);
  padding-block: var(--space-section);
}
/* position: sticky faz o índice "grudar" no topo enquanto a página rola */
.toc {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 32px);
  align-self: start;
}
.toc ol {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  font-family: var(--font-mono);
  font-size: 14px;
}
.toc a {
  display: block;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
}
.toc a:hover { opacity: 1; }
.toc a.is-active { opacity: 1; border-left-color: var(--orange); }
@media (max-width: 960px) {
  /* minmax(0, 1fr) deixa a coluna encolher abaixo do conteúdo mais largo */
  .case-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
}

.chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
.chapter + .chapter { margin-top: var(--space-96); }
.chapter__num { font-family: var(--font-mono); font-size: 14px; margin: 0; }
.chapter h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.chapter h3 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: var(--space-16) 0 0;
}
.chapter > p, .chapter > ul { margin: 0; max-width: var(--text-max); }
.chapter > ul { padding-left: 1.2em; }
.chapter > ul li + li { margin-top: var(--space-8); }

/* Imagem dentro do capítulo + legenda */
.figure { margin: var(--space-16) 0; }
.figure figcaption, .pair figcaption {
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: var(--space-8);
}
/* Duas imagens lado a lado (antes e depois, telas de app) */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
  margin: var(--space-16) 0;
  max-width: 760px;
}
.pair figure { margin: 0; }
/* Prints de tela: cada moldura "abraça" a sua imagem.
   align-items: start alinha as duas pelo topo e deixa cada uma com a
   altura da própria imagem — sem esticar a moldura para igualar a
   vizinha (antes isso criava um vão branco embaixo da tela mais curta,
   e até a legenda mais longa esticava a moldura). */
.pair--screens {
  max-width: 680px;
  gap: var(--space-48);
  align-items: start;
}
@media (max-width: 600px) {
  .pair--screens { gap: var(--space-16); }
}
/* Duas imagens largas lado a lado, ocupando toda a coluna de texto */
.pair--wide { max-width: none; }
/* Par de prints com moldura (.shot), as duas do MESMO tamanho.
   - Fica mais largo que a coluna de texto: min() usa 880px, ou a tela
     menos as margens laterais se ela for menor que isso.
   - subgrid: as duas figuras dividem as mesmas 2 linhas do par
     (linha 1 = molduras, linha 2 = legendas). Assim as molduras têm
     sempre a mesma altura, mesmo com legendas de tamanhos diferentes.
   - object-fit: contain encaixa a imagem inteira na moldura; o fundo
     branco do .shot img completa a sobra (os prints já são brancos). */
.pair--shots {
  gap: var(--space-8) var(--space-16);   /* linha | coluna */
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
}
@media (min-width: 601px) {
  .pair--shots { grid-template-rows: auto auto; }
  .pair--shots figure {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
  .pair--shots .shot { display: flex; }
  .pair--shots .shot img { height: 100%; object-fit: contain; }
  .pair--shots figcaption { margin-top: 0; }
}

/* Subtítulo dentro do artigo (ex.: "Resumindo em slides") */
.article__subhead {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  padding-top: var(--space-32);
}
/* pair--fill: molduras com a mesma altura; a imagem mais baixa fica
   centralizada e o fundo do site completa o espaço */
.pair--fill { align-items: stretch; }
.pair--fill figure { display: flex; flex-direction: column; }
.pair--fill .frame { flex: 1; display: flex; }
.pair--fill .slot--natural {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg);
}
@media (max-width: 600px) {
  .pair--wide { grid-template-columns: minmax(0, 1fr); }
}

/* Cartões com borda (insights, decisões) */
/* grid-auto-rows: 1fr deixa todos os cartões com a altura do maior.
   O seletor .chapter > .cards-outline vence o ".chapter > ul" lá de cima,
   que colocava recuo e largura máxima de texto na lista. */
.chapter > .cards-outline { padding-left: 0; max-width: none; }
.chapter > .cards-outline li { margin: 0; }
.cards-outline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-16);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}
.cards-outline li {
  border: 1.5px solid var(--green);
  border-radius: var(--radius-sm);
  padding: var(--space-24);
  font-size: 16px;
  line-height: 1.55;
}
.cards-outline strong {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  margin-bottom: var(--space-8);
}

/* Cartões azuis (objetivos, amostra da pesquisa) */
.goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
}
.goals div { background: var(--blue); border-radius: var(--radius-sm); padding: var(--space-24); }
.goals dt { font-family: var(--font-mono); font-size: 13px; margin-bottom: var(--space-8); }
.goals dd { margin: 0; font-size: 17px; line-height: 1.5; }
@media (max-width: 600px) { .goals { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .cards-outline { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
}

/* Linha do tempo das fases: a borda esquerda é a linha,
   e cada ::before desenha uma bolinha em cima dela */
.phases {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-24);
  border-left: 1.5px solid var(--green);
  display: grid;
  gap: var(--space-24);
  max-width: var(--text-max);
}
.phases li { position: relative; }
.phases li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-24) - 7px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--green);
}
.phases li.is-current::before { background: var(--orange); border-color: var(--orange); }
.phases__tag { display: block; font-family: var(--font-mono); font-size: 13px; margin-bottom: 2px; }

/* Citação */
.quote {
  margin: var(--space-16) 0;
  padding-left: var(--space-24);
  border-left: 3px solid var(--orange);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  max-width: var(--text-max);
}
.quote cite {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 13px;
  margin-top: var(--space-8);
}

/* Persona */
.persona {
  background: var(--pink);
  border-radius: var(--radius);
  padding: var(--space-32);
  max-width: var(--text-max);
  display: grid;
  gap: var(--space-8);
}
.persona p { margin: 0; }

/* Navegação entre cases: anterior (esquerda) e próximo (direita) */
.case-nav { padding-bottom: var(--space-section); }
.case-nav__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.case-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding-block: var(--space-48);
  border-top: 1.5px solid var(--green);
  border-bottom: 1.5px solid var(--green);
  text-decoration: none;
}
.case-nav__link > span:not(.case-nav__arrow) { display: grid; gap: var(--space-8); }
/* O próximo fica alinhado à direita, com uma linha separando os dois */
.case-nav__link--next {
  justify-content: flex-end;
  text-align: right;
  border-left: 1.5px solid var(--green);
  padding-left: var(--space-24);
}
.case-nav__link--prev { padding-right: var(--space-24); }
.case-nav__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 0.95;
}
.case-nav__arrow {
  flex: none;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1;
  transition: transform 0.3s ease;
}
.case-nav__link--prev:hover .case-nav__arrow { transform: translateX(-10px); }
.case-nav__link--next:hover .case-nav__arrow { transform: translateX(10px); }

/* Celular: um embaixo do outro */
@media (max-width: 760px) {
  .case-nav__inner { grid-template-columns: minmax(0, 1fr); }
  .case-nav__link { padding-block: var(--space-32); }
  .case-nav__link--next { border-left: 0; border-top: 0; padding-left: 0; }
  .case-nav__link--prev { padding-right: 0; }
}


/* ---------- 10b. ARTIGOS ----------
   A página do artigo reaproveita peças do case (.back, .eyebrow,
   .case-summary, .figure). Aqui ficam só as peças novas. */

/* Cabeçalho do artigo: mesmo respiro do topo dos cases */
.article__head { padding-block: var(--space-64) var(--space-16); }
.article__title {
  font-family: var(--font-display);
  /* clamp(mínimo, ideal, máximo): o título cresce com a tela,
     mas nunca fica menor que 40px nem maior que 80px */
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: var(--space-16) 0 var(--space-32);
  max-width: 18ch;          /* ch = largura de um caractere: ~18 por linha */
  text-wrap: balance;       /* equilibra o tamanho das linhas do título */
}

/* Corpo do texto: uma coluna só, na largura boa para leitura */
.article__body {
  max-width: var(--text-max);
  padding-bottom: var(--space-section);
  font-size: 18px;
  line-height: 1.65;
}
/* Espaço entre parágrafos. O "* + *" (coruja) pega todo elemento
   que vem logo depois de outro: não precisa de margem em cada um. */
.article__body > * { margin: 0; }
.article__body > * + * { margin-top: var(--space-24); }
.article__list { padding-left: 1.2em; }
.article__list li + li { margin-top: var(--space-8); }
.article__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.article__note { font-family: var(--font-mono); font-size: 14px; }
.article__origin {
  padding-top: var(--space-24);
  border-top: 1.5px solid var(--green);
}

/* MOLDURA DE PRINT: fundo rosa + borda verde arredondada,
   igual à moldura do print do plugin. Use: <div class="shot"><img></div> */
.shot {
  background: var(--pink);
  padding: clamp(10px, 2.4vw, 20px);
  border-radius: clamp(20px, 3vw, 32px);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: clamp(4px, 0.7vw, 7px) solid var(--green);
  border-radius: clamp(12px, 2vw, 22px);
}

/* CARROSSEL
   A faixa (.carousel__track) é uma linha de imagens que rola na
   horizontal. scroll-snap faz cada rolagem "parar" certinho no
   começo de uma imagem, como no carrossel do LinkedIn. */
.carousel { margin: var(--space-16) 0; }
.carousel__track {
  display: flex;
  gap: var(--space-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* x = horizontal; mandatory = sempre encaixa */
  scroll-behavior: smooth;
  scrollbar-width: none;           /* esconde a barra de rolagem (Firefox) */
  border-radius: var(--radius);
}
.carousel__track::-webkit-scrollbar { display: none; }  /* idem (Chrome/Safari) */
.carousel__track img {
  flex: 0 0 82%;                   /* cada slide ocupa 82%: dá pra ver a pontinha do próximo */
  width: 82%;
  height: auto;
  scroll-snap-align: start;
  border-radius: var(--radius);
}
.carousel__track:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-16);
  font-family: var(--font-mono);
  font-size: 14px;
}
.carousel__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  background: transparent;
  color: var(--green);
  font-size: 18px;
  cursor: pointer;
}
.carousel__btn:hover:not(:disabled) { background: var(--green); color: var(--peach); }
.carousel__btn:disabled { opacity: 0.3; cursor: default; }

/* Lista de artigos */
.article-list { padding-block: var(--space-64) var(--space-section); }
.article-list__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: var(--space-16) 0 var(--space-48);
  max-width: 16ch;
  text-wrap: balance;
}
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-24); }
/* O card inteiro é um link: imagem à esquerda, texto à direita */
.post__link {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-32);
  align-items: center;
  padding-top: var(--space-24);
  border-top: 1.5px solid var(--green);
  text-decoration: none;
}
/* Capas com proporções diferentes ficam do mesmo tamanho:
   aspect-ratio fixa a forma e object-fit: cover recorta o excesso */
.post__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
/* Capa que é um slide em pé (4:5): object-position escolhe qual faixa
   aparece no recorte 4:3. 42% mostra da etiqueta até a frase de baixo. */
.post__img--slide { object-position: 50% 42%; }
/* Capa que já tem moldura na própria imagem: contain mostra a imagem
   inteira (sem cortar a moldura) dentro do espaço 4:3 */
.post__img--framed { object-fit: contain; }
.post__text { display: grid; gap: var(--space-8); }
.post__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  text-wrap: balance;
}
/* Etiqueta da categoria: técnico (azul) ou opinião (rosa) */
.post__cat {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--blue);
}
.post__cat[data-cat="opiniao"] { background: var(--pink); }
.post__desc { font-size: 17px; line-height: 1.5; }
.post__link:hover .post__title { text-decoration: underline; text-underline-offset: 6px; }
/* Link "ver todos" embaixo da lista (usado na home) */
.posts__more { margin: var(--space-32) 0 0; }
/* Celular: imagem em cima, texto embaixo */
@media (max-width: 760px) {
  .post__link { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
}


/* ---------- 10c. CARROSSEL DE ARTIGOS (home) ----------
   Mesma ideia do carrossel dos artigos: uma faixa que rola na
   horizontal com scroll-snap. Diferenças: cada item é um card
   (capa + texto), os botões ficam ao lado do título e, no celular,
   eles dão lugar a pontinhos e o carrossel passa só com o dedo. */

/* Título e botões na mesma linha: o flex empurra um para cada ponta
   (space-between) e alinha os dois pela base (flex-end) */
.pcarousel__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-24);
  margin-bottom: var(--space-48);
}
.pcarousel__head .section-title { margin-bottom: 0; }
.pcarousel__btns { margin: 0 0 var(--space-8); flex: none; }

.pcarousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-32);              /* espaço entre os cards */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* a faixa "vaza" até a borda direita da tela: o card cortado
     ali é a dica de que dá para arrastar */
  margin-right: calc(-1 * var(--gutter));
  padding-right: var(--gutter);
}
.pcarousel__track::-webkit-scrollbar { display: none; }

/* clamp(mínimo, ideal, máximo): ~2,5 cards visíveis no computador */
.pcard { flex: 0 0 clamp(280px, 40%, 460px); scroll-snap-align: start; }
.pcard__link { display: grid; gap: var(--space-16); text-decoration: none; }
.pcard__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.pcard .post__title { font-size: clamp(24px, 2.4vw, 32px); }
.pcard .post__desc { font-size: 16px; }
.pcard__link:hover .post__title { text-decoration: underline; text-underline-offset: 6px; }

/* Pontinhos: escondidos no computador */
.pcarousel__dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-24);
}
.pcarousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}
/* o ponto do card que está na tela: verde e um pouco maior */
.pcarousel__dot.is-active { background: var(--green); transform: scale(1.2); }

.pcarousel__more { margin: var(--space-32) 0 0; }

/* Celular: 1 card por vez (82% mostra a pontinha do próximo),
   sem botões, com pontinhos e o link centralizado */
@media (max-width: 760px) {
  .pcard { flex-basis: 82%; }
  .pcarousel__btns { display: none; }
  .pcarousel__dots { display: flex; }
  .pcarousel__more { text-align: center; }
}


/* ---------- 11. MOVIMENTO REDUZIDO ----------
   Quem pediu menos movimento no sistema não vê as animações. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}