/* =========================================================
   Componentes
   1. Botão Dymo        5. Hero
   2. Materiais         6. Card de case
   3. Cabeçalho e menu  7. Pilares
   4. Copiar e-mail     8. Rodapé
   ========================================================= */


/* ---------- 1. Botão Dymo ---------- */
.dymo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 2px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* Mesmo material nas variantes: brilho em cima, sombra embaixo e ranhuras da fita.
     Só a intensidade muda, para o efeito parecer igual no preto e no branco. */
  --dymo-luz: rgba(255,255,255,.28);
  --dymo-sombra: rgba(0,0,0,.22);
  --dymo-ranhura: rgba(255,255,255,.045);
  --dymo-aresta-luz: rgba(255,255,255,.32);   /* reflexo na borda de cima */
  --dymo-aresta-sombra: rgba(0,0,0,.45);      /* filete escuro na borda de baixo */
  background-image:
    linear-gradient(180deg, var(--dymo-luz), rgba(255,255,255,0) 38%, var(--dymo-sombra)),
    repeating-linear-gradient(0deg, var(--dymo-ranhura) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 var(--dymo-aresta-luz), inset 0 -1px 0 var(--dymo-aresta-sombra), 0 1px 0 rgba(0,0,0,.25), 0 2px 4px rgba(27,24,22,.14);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.dymo:hover {
  transform: translateY(-2px) rotate(-.6deg);
  box-shadow: inset 0 1px 0 var(--dymo-aresta-luz), inset 0 -1px 0 var(--dymo-aresta-sombra), 0 1px 0 rgba(0,0,0,.2), 0 6px 10px rgba(27,24,22,.18);
}
.dymo:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 var(--dymo-aresta-luz), inset 0 -1px 0 var(--dymo-aresta-sombra), 0 1px 1px rgba(27,24,22,.18);
}

.dymo-p { min-height: 44px; padding: 0 var(--esp-2); font-size: var(--rotulo-m); }
.dymo-m { min-height: 52px; padding: 0 var(--esp-3); font-size: var(--rotulo-g); }

/* Cor do texto travada por variante: o hover de link não pode trocá-la. */
.dymo-primario,
.dymo-primario:link, .dymo-primario:visited,
.dymo-primario:hover, .dymo-primario:active {
  background-color: var(--tinta);
  color: var(--creme-dymo);
  text-shadow: 0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.18);
}
.dymo-secundario,
.dymo-secundario:link, .dymo-secundario:visited,
.dymo-secundario:hover, .dymo-secundario:active {
  --dymo-luz: rgba(255,255,255,0);
  --dymo-sombra: rgba(0,0,0,.06);
  --dymo-ranhura: rgba(0,0,0,.03);
  --dymo-aresta-luz: rgba(255,255,255,1);
  --dymo-aresta-sombra: rgba(0,0,0,.10);
  background-color: var(--branco);
  color: var(--tinta);
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.28);
}
.dymo-destrutivo,
.dymo-destrutivo:hover, .dymo-destrutivo:active {
  background-color: var(--caneta);
  color: var(--creme-dymo);
}

/* Rótulo com troca de texto: as duas versões ocupam a mesma célula,
   então a largura do botão não muda no feedback. */
.rotulo-troca { display: inline-grid; justify-items: start; }
.rotulo-troca > span { grid-area: 1 / 1; }
.rotulo-troca > span:last-child { visibility: hidden; }
[data-copiado] .rotulo-troca > span:first-child { visibility: hidden; }
[data-copiado] .rotulo-troca > span:last-child { visibility: visible; }


/* ---------- 2. Materiais (decoração, sempre aria-hidden) ---------- */

/* Fita transparente: um rolo só, 20px de altura. */
.fita {
  position: absolute;
  height: var(--fita-altura);
  filter: drop-shadow(0 .5px .6px rgba(27,24,22,.28));
  pointer-events: none;
}
.fita::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,.2);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.85) 0, rgba(255,255,255,0) 1.5px, rgba(255,255,255,0) calc(100% - 1.5px), rgba(255,255,255,.7) 100%),
    linear-gradient(104deg, transparent 20%, rgba(255,255,255,.6) 24%, transparent 29%),
    linear-gradient(72deg, transparent 60%, rgba(255,255,255,.5) 63%, transparent 67%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(180,175,165,.12));
  clip-path: polygon(0 4%, 100% 0, 98% 48%, 100% 100%, 1% 96%, 2% 52%);
}

/* Marca-texto: no máximo uma palavra por tela. */
.marca-texto {
  position: absolute;
  inset: 36% -14px 2px -10px;
  background-color: var(--marca-texto);
  background-image:
    linear-gradient(90deg, rgba(245,200,0,.45), rgba(245,200,0,0) 6%, rgba(245,200,0,0) 93%, rgba(245,200,0,.5)),
    repeating-linear-gradient(0deg, rgba(230,190,0,.14) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  transform: rotate(-1.2deg) skewX(-14deg);
  filter: url(#marca-texto) blur(.3px);
  pointer-events: none;
}
.marca-texto + .marca-texto {
  inset: 46% -18px -3px 38%;
  background: var(--marca-texto-2);
  transform: rotate(-2.4deg) skewX(-14deg);
}

.destaque { position: relative; font-style: italic; font-weight: 600; }

/* Caneta vermelha: risca o que sai. */
.caneta {
  position: relative;
  color: var(--tinta-2);
  text-decoration: none;
}
.caneta svg {
  position: absolute;
  left: -10px;
  top: 38%;
  width: calc(100% + 20px);
  height: 24px;
  overflow: visible;
  filter: url(#tinta);
  pointer-events: none;
}


/* ---------- 3. Cabeçalho e menu ---------- */
.cabecalho {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--esp-3);
}
.cabecalho::before {               /* faixa de fita crepe */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--crepe);
  background-image: repeating-linear-gradient(90deg, rgba(150,120,60,.035) 0 1px, transparent 1px 6px);
  filter: url(#crepe-h) drop-shadow(0 .5px .6px rgba(27,24,22,.14));
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--header-altura);
  font-family: var(--serifa);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
}
.logo em { position: relative; font-style: italic; font-weight: 600; }
.logo .marca-texto { inset: 40% -8px 2px -4px; transform: rotate(-1.5deg) skewX(-14deg); background-image: none; filter: url(#marca-texto); }

.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-6);
}
.menu-principal ul,
.idioma {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.menu-principal ul { gap: var(--esp-4); }
.idioma { gap: var(--esp-1); }

.menu-link,
.idioma a,
.copiar-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-0-5);
  padding: var(--esp-1) 0;
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: var(--rotulo-m);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tinta);
  cursor: pointer;
}
.idioma a { color: var(--tinta-2); }
.menu-link:hover,
.idioma a:hover,
.copiar-menu:hover .rotulo-troca > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
[aria-current] {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.idioma-atual,
.idioma-sep {
  font-family: var(--mono);
  font-size: var(--rotulo-m);
  letter-spacing: var(--tracking-rotulo);
}
.idioma-sep { color: var(--tinta-2); }

/* Botão "Menu" e painel: só existem com JavaScript ativo. */
.menu-btn { display: none; }
.menu-painel { flex-basis: 100%; padding-bottom: var(--esp-1); }

.menu-btn {
  align-items: center;
  gap: var(--esp-1);
  min-height: 44px;
  margin-right: calc(var(--esp-0-5) * -1);
  padding: 0 var(--esp-0-5);
  background: none;
  border: 0;
  font-family: var(--mono);
  font-size: var(--rotulo-m);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
}
.menu-btn .ico-fechar,
.menu-btn[aria-expanded="true"] .ico-abrir { display: none; }
.menu-btn[aria-expanded="true"] .ico-fechar { display: block; }

.menu-painel ul { display: flex; flex-direction: column; }
.menu-painel a,
.menu-painel .copiar-menu,
.menu-painel .idioma {
  width: 100%;
  min-height: 48px;
  padding: 0;
  border-top: var(--filete-fino);
  font-size: var(--rotulo-g);
}
.menu-painel .idioma a,
.menu-painel .idioma span { display: inline-flex; align-items: center; border: 0; width: auto; min-height: 44px; }

@media (max-width: 767px) {
  .js .menu { display: none; }
  .js .menu-btn { display: inline-flex; }
}
@media (min-width: 768px) {
  .menu-painel { display: none; }
}


/* ---------- 4. Copiar e-mail ---------- */
[data-copiar][hidden] { display: none; }


/* ---------- 5. Hero ---------- */
.hero {
  --hero-gap: var(--esp-2);
  --hero-fim: var(--esp-3);
  --hero-etiqueta: var(--esp-4);
  --desenho-altura: clamp(200px, 34svh, 280px);

  min-height: calc(min(90svh, 900px) - var(--header-altura));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: var(--hero-gap);
  padding-bottom: var(--hero-fim);
  text-align: center;
}
@media (min-height: 780px) {
  .hero { --hero-gap: var(--esp-3); --hero-fim: var(--esp-4); --hero-etiqueta: var(--esp-6); }
}
@media (min-height: 951px) {
  .hero { --hero-gap: var(--esp-4); --hero-fim: var(--esp-6); }
}

/* Etiqueta de papel rasgado */
.etiqueta {
  position: relative;
  display: inline-block;
  transform: rotate(-2deg);
  filter: drop-shadow(0 1px 1px rgba(27,24,22,.2));
}
.etiqueta::before {
  content: "";
  position: absolute;
  inset: -1px -4px;
  background: var(--branco);
  filter: url(#rasgo-etiqueta);
}
.etiqueta-texto {
  position: relative;
  display: inline-block;
  padding: 6px var(--esp-3);
  font-family: var(--mono);
  font-size: var(--rotulo-g);
  line-height: var(--rotulo-g-lh);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.etiqueta .fita { top: -9px; left: -14px; width: 48px; transform: rotate(-28deg); }

/* Frase com o desenho no meio */
.hero-frase-area {
  width: 100%;
  margin-top: var(--hero-etiqueta);
  container-type: inline-size;
}
.hero-frase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--desenho-largura) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  min-height: var(--desenho-altura);
  font-family: var(--serifa);
  font-weight: 400;
  /* A frase cresce com a largura até o Display e sempre cabe dos dois lados
     do desenho. Corte óptico de display (opsz 144): letras mais estreitas e
     contraste maior, como título de revista. */
  font-size: clamp(40px, (100cqi - 220px) / 13.4, var(--display));
  font-variation-settings: "opsz" 144;
  line-height: var(--display-lh);
  letter-spacing: var(--tracking-display);
}
.hero-linha-1 { text-align: right; }
.hero-linha-2 { text-align: left; }
.nowrap { white-space: nowrap; }

.hero-desenho {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: var(--desenho-largura);
  height: var(--desenho-altura);
  transform: rotate(1deg);
  font-family: var(--mono);
  font-size: var(--rotulo-p);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--tinta-2);
}
/* Pilha de papéis: nunca passa da área do desenho. */
.papeis {
  position: absolute;
  left: 4px;
  top: 0;
  width: 164px;
  height: calc(100% - 32px);
}
.papeis span {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.42);
  box-shadow: 0 0 0 .5px rgba(160,150,135,.35), 0 2px 4px rgba(60,45,30,.06);
}
.papeis span:nth-child(1) { transform: translate(-10px, 15px) rotate(-8deg); }
.papeis span:nth-child(2) { transform: translate(-4px, 5px) rotate(-4deg); }
.papeis span:nth-child(3) { background: rgba(255,255,255,.5); top: 3px; }
.hero-desenho .fita { top: -12px; left: 50%; width: 96px; margin-left: -48px; transform: rotate(-3deg); }
.desenho-legenda { position: relative; }

.hero-posicionamento {
  width: calc((100% - 11 * var(--gutter)) / 12 * 6 + 5 * var(--gutter));
  margin-top: var(--hero-gap);
  color: var(--tinta-2);
}
.hero-cta { margin-top: var(--hero-gap); }


/* ---------- 6. Cases ---------- */
.cases { margin-top: var(--esp-2); overflow-x: clip; }   /* a luz do hover não cria rolagem lateral */
.cases-lista {
  display: grid;
  grid-auto-rows: 1fr;   /* todos os cases com a altura do mais alto */
  gap: var(--esp-1);   /* filete final de um case quase encostado no filete do próximo */
  margin-top: var(--esp-1);
}
.cases-lista > li { display: grid; }   /* o card estica até a altura da linha */

.case {
  position: relative;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  row-gap: var(--esp-3);
  padding: var(--esp-3) 0 var(--esp-2);
  border-top: var(--filete-forte);
  border-bottom: var(--filete-fino);
}
/* Luz radial no hover: segue o mouse e não fica presa às bordas do case. */
.case { isolation: isolate; }
.case::before {
  content: "";
  position: absolute;
  inset: -240px;
  z-index: -1;
  background: radial-gradient(
    circle var(--luz-hover-raio) at calc(var(--mx, 50%) + 240px) calc(var(--my, 50%) + 240px),
    var(--luz-hover-centro) 0, var(--luz-hover) 35%, rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity var(--transicao);
  pointer-events: none;
}
@media (hover: hover) {
  .case:hover::before { opacity: 1; }
}
.case-titulo { grid-column: 1 / span 9; }
.case-link { text-decoration: none; }
.case-link::after {                 /* o card inteiro vira área de clique */
  content: "";
  position: absolute;
  inset: 0;
}
.case-link:focus-visible { outline: none; }
.case-link:focus-visible::after { outline: var(--foco); outline-offset: 6px; }

.case-imagem {
  position: relative;
  grid-column: 10 / span 3;
  grid-row: 1 / span 3;   /* imagem na altura de título, ficha e linha final */
  min-height: 200px;
  background: var(--branco);
  box-shadow: var(--sombra-papel);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.case-imagem img {
  position: absolute;
  top: var(--esp-1);
  left: var(--esp-1);
  width: calc(100% - 2 * var(--esp-1));
  height: calc(100% - 2 * var(--esp-1));
  object-fit: cover;
}
/* Cada pedaço de fita diferente do vizinho */
.cases-lista > li:nth-child(1) .fita { top: -10px; left: 34%; width: 72px; transform: rotate(-4deg); }
.cases-lista > li:nth-child(2) .fita { top: -6px; right: -14px; width: 60px; transform: rotate(38deg); }
.cases-lista > li:nth-child(3) .fita { top: -10px; left: 10%; width: 68px; transform: rotate(2.5deg); }

.ficha {
  grid-column: 1 / span 9;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.ficha > div { grid-column: span 3; }
.ficha dt { margin-bottom: var(--esp-0-5); }   /* rótulo colado ao seu texto (proximidade) */

.case-meta {
  grid-column: 1 / span 9;   /* "Ver case" alinha ao fim do título */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  align-self: end;   /* a sobra fica entre a ficha e esta linha */
}
.case-meta .tag { color: var(--tinta-2); }
.seta { display: inline-block; transition: transform var(--transicao); }

.case:hover .case-link,
.case:hover .ver {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.case:hover .seta { transform: translateX(4px); }
.case:hover .case-imagem { transform: translateY(-2px); box-shadow: var(--sombra-papel-hover); }


/* ---------- 7. Pilares ---------- */
.pilares { margin-top: var(--esp-12); }
.pilares-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--esp-1);
}
.pilar { padding-top: var(--esp-2); border-top: var(--filete-forte); }
.pilar .titulo-item { margin: var(--esp-1) 0 var(--esp-1-5); }


/* ---------- 8. Rodapé ---------- */
.rodape {
  margin-top: var(--esp-20);
  padding-top: var(--esp-4);
  padding-bottom: var(--esp-4);
  row-gap: var(--esp-8);
  border-top: var(--filete-forte);
}
.rodape-chamada {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.rodape-chamada p { color: var(--tinta-2); }
.rodape-acoes {
  grid-column: 8 / span 5;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-2);
}
.rodape-base {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-2);
  padding-top: var(--esp-3);
  border-top: var(--filete-fino);
  color: var(--tinta-2);
}
.assinatura { display: flex; flex-direction: column; gap: var(--esp-0-5); }
.rodape-menu ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-1) var(--esp-3); }
.rodape-base a { text-decoration: none; }
.rodape-base a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}


/* =========================================================
   Responsivo
   ========================================================= */

/* Tablet: abaixo de 950px */
@media (max-width: 949px) {
  .hero { min-height: 0; padding-top: var(--esp-6); padding-bottom: 0; }
  .hero-frase-area { margin-top: var(--esp-4); }
  .hero-frase {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    font-size: 44px;
  }
  .hero-linha-1, .hero-linha-2 { text-align: center; }
  .quebra { display: none; }
  .hero-desenho { order: -1; height: 200px; margin-bottom: var(--esp-4); }
  .hero-posicionamento { width: auto; max-width: 520px; margin-top: var(--esp-4); }
  .hero-cta { margin-top: var(--esp-4); }

  .cases { margin-top: var(--esp-12); }
  .case { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .case-titulo { grid-column: 1 / -1; }
  .case-imagem {
    grid-column: 1 / span 3;
    grid-row: 2;
    align-self: start;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .ficha {
    grid-column: 4 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
  }
  .case-meta { grid-column: 1 / -1; grid-row: 3; }

  .pilares-lista { grid-template-columns: minmax(0, 1fr); row-gap: var(--esp-4); }
  .pilar {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .pilar-num { grid-column: 1 / span 3; }
  .pilar .titulo-item { grid-column: 1 / span 3; grid-row: 2; margin-bottom: 0; }
  .pilar p { grid-column: 4 / -1; grid-row: 1 / span 2; }

  .rodape-chamada, .rodape-acoes { grid-column: 1 / -1; }
  .rodape-acoes { justify-content: flex-start; margin-top: calc(var(--esp-4) * -1); }
}

/* Celular: abaixo de 600px */
@media (max-width: 599px) {
  .hero { padding-top: var(--esp-4); }
  .hero-frase { font-size: 40px; }
  .quebra { display: inline; }
  .hero-desenho { margin-bottom: var(--esp-3); }
  .hero-posicionamento { max-width: none; margin-top: var(--esp-3); }

  .cases { margin-top: var(--esp-8); }
  .cases-lista { margin-top: var(--esp-1); grid-auto-rows: auto; }
  .case { display: flex; flex-direction: column; gap: var(--esp-3); }
  .case-imagem { width: 100%; aspect-ratio: 3 / 2; }
  .case-meta { flex-direction: column; align-items: flex-start; }

  .pilares { margin-top: var(--esp-8); }
  .pilar { display: block; }
  .pilar .titulo-item { margin-bottom: var(--esp-1-5); }

  .rodape { margin-top: var(--esp-16); padding-top: var(--esp-3); row-gap: var(--esp-6); }
  .rodape-acoes { flex-direction: column; align-items: flex-start; margin-top: calc(var(--esp-3) * -1); }
  .rodape-base { flex-direction: column; }
  .rodape-menu ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .rodape-menu li > a,
  .rodape-menu .idioma { min-height: 48px; }
}

/* Telas muito estreitas: única exceção à escala (WCAG 1.4.10) */
@media (max-width: 399px) {
  .hero-frase { font-size: clamp(32px, (100vw - 40px) / 8, 40px); }
}

/* Telas baixas: celular deitado, janela reduzida */
@media (max-height: 500px) {
  .hero { --desenho-altura: 140px; }
  .hero-desenho { height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .dymo:hover, .dymo:active, .case:hover .case-imagem, .case:hover .seta { transform: none; }
}


/* =========================================================
   9. Página de case
   ========================================================= */
.case-pagina { padding-top: var(--esp-6); }

.voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: 44px;
  text-decoration: none;
}
.voltar:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.case-abertura { row-gap: var(--esp-3); }
.case-abertura > * { grid-column: 1 / span 10; }
.case-abertura .voltar { grid-column: 1 / -1; margin-bottom: var(--esp-3); }
.case-abertura .tag { color: var(--tinta-2); }
.case-h1 {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, var(--display));
  font-variation-settings: "opsz" 144;
  line-height: var(--display-lh);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.case-lead { grid-column: 1 / span 8; color: var(--tinta-2); }

/* Ficha-resumo */
.case-resumo { margin-top: var(--esp-8); }
.case-resumo .ficha {
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  padding-top: var(--esp-2);
  border-top: var(--filete-forte);
}
.case-resumo .ficha > div { grid-column: span 4; }

/* Texto do case: 8 colunas centrais */
.case-corpo { margin-top: var(--esp-12); }
.case-corpo > * { grid-column: 3 / span 8; }
.case-corpo > h2 {
  margin-top: var(--esp-12);
  padding-top: var(--esp-2);
  border-top: var(--filete-forte);
}
.case-corpo > h2:first-child { margin-top: 0; }
.case-corpo > h3 { margin-top: var(--esp-6); }
.case-corpo > h2 + p,
.case-corpo > h3 + p,
.case-corpo > h2 + ul { margin-top: var(--esp-2); }
.case-corpo > p + p,
.case-corpo > ul + p,
.case-corpo > p + ul { margin-top: var(--esp-2); }
.case-corpo ul { display: flex; flex-direction: column; gap: var(--esp-2); }
.case-corpo ul > li { position: relative; padding-left: var(--esp-3); }
.case-corpo ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 8px;
  height: 1.5px;
  background: var(--tinta);
}
.case-corpo strong { font-weight: 600; }
.case-corpo a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.case-corpo a:hover { text-decoration-thickness: 2px; }

/* Referências: menores, em Texto de apoio */
.case-corpo .refs { gap: var(--esp-1); }
.case-corpo .refs > li { font-size: var(--apoio); line-height: var(--apoio-lh); color: var(--tinta-2); }
.case-corpo .refs > li::before { top: 11px; }

/* Números de resultado */
.numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--esp-4);
}
.numeros > div { display: flex; flex-direction: column-reverse; gap: var(--esp-0-5); }
.numeros dd {
  font-family: var(--serifa);
  font-size: var(--h2);
  line-height: var(--h2-lh);
  letter-spacing: var(--tracking-titulo);
}
.numeros + p { margin-top: var(--esp-4); }

/* Página Cases: a mesma lista da home, abaixo da abertura */
.cases-indice { margin-top: var(--esp-12); }

/* Próximo case */
.case-proximo { margin-top: var(--esp-12); }
.proximo {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: var(--esp-3) 0 var(--esp-2);
  border-top: var(--filete-forte);
  border-bottom: var(--filete-fino);
}
.proximo a { text-decoration: none; }
.proximo a::after { content: ""; position: absolute; inset: 0; }
.proximo a:focus-visible { outline: none; }
.proximo a:focus-visible::after { outline: var(--foco); outline-offset: 6px; }
.proximo:hover a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.proximo:hover .seta { transform: translateX(4px); }

@media (max-width: 949px) {
  .case-abertura > *, .case-lead { grid-column: 1 / -1; }
  .case-h1 { font-size: 44px; }
  .case-resumo .ficha { display: flex; flex-direction: column; gap: var(--esp-3); }
  .case-corpo > * { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  .case-pagina { padding-top: var(--esp-4); }
  .case-h1 { font-size: clamp(32px, (100vw - 40px) / 8, 40px); }
  .case-resumo { margin-top: var(--esp-6); }
  .case-corpo, .case-proximo, .cases-indice { margin-top: var(--esp-8); }
  .case-corpo > h2 { margin-top: var(--esp-8); }
  .numeros { grid-template-columns: minmax(0, 1fr); row-gap: var(--esp-3); }
}


/* =========================================================
   10. Página Sobre: listas de trajetória e formação
   ========================================================= */
.sobre-lista { margin-top: var(--esp-12); }
.sobre-lista > * { grid-column: 3 / span 8; }
.linhas { margin-top: var(--esp-1); border-top: var(--filete-forte); }
.linha {
  display: grid;
  grid-template-columns: calc((100% - 7 * var(--gutter)) / 8 * 2 + var(--gutter)) minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--esp-0-5);
  padding: var(--esp-2) 0;
  border-bottom: var(--filete-fino);
}
.linha-periodo { grid-row: 1 / span 2; color: var(--tinta-2); padding-top: 4px; }
.linha-cargo { font-weight: 600; }
.linha-onde { color: var(--tinta-2); }

@media (max-width: 949px) {
  .sobre-lista > * { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .sobre-lista { margin-top: var(--esp-8); }
  .linha { grid-template-columns: minmax(0, 1fr); }
  .linha-periodo { grid-row: auto; padding-top: 0; }
  .linha-periodo:empty { display: none; }
}


/* =========================================================
   11. Imagens do case: figura, imagem + texto, carrossel e ampliada
   (prancha "Componente · Imagens do case")
   ========================================================= */
.case-corpo > .fig,
.case-corpo > .img-texto,
.case-corpo > .carrossel { margin-top: var(--esp-6); }
.case-corpo > .fig + p, .case-corpo > .fig + ul,
.case-corpo > .img-texto + p, .case-corpo > .img-texto + ul, .case-corpo > .img-texto + .numeros,
.case-corpo > .carrossel + p, .case-corpo > .carrossel + ul { margin-top: var(--esp-6); }
.case-corpo > h2 + .fig, .case-corpo > h3 + .fig,
.case-corpo > h2 + .img-texto, .case-corpo > h3 + .img-texto,
.case-corpo > h2 + .carrossel, .case-corpo > h3 + .carrossel { margin-top: var(--esp-3); }
.case-corpo > .fig + .fig { margin-top: var(--esp-4); }
.case-corpo > .fig-larga, .case-corpo > .carrossel { grid-column: 2 / span 10; }
.case-corpo > .fig-cheia { grid-column: 1 / -1; }

/* Figura: papel branco, legenda colada (8px) */
.fig { display: flex; flex-direction: column; gap: var(--esp-1); margin: 0; }
.fig .papel { padding: var(--esp-1); background: var(--branco); box-shadow: var(--sombra-papel); }
.fig .papel img { display: block; width: 100%; height: auto; }
.legenda { margin: 0; max-width: 760px; font-size: var(--apoio); line-height: var(--apoio-lh); color: var(--tinta-2); }
.case-corpo .legenda { font-size: var(--apoio); line-height: var(--apoio-lh); }

/* Figura com "Ampliar": botão à direita da legenda */
.fig-ampliavel { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-3); row-gap: var(--esp-1); align-items: start; }
.fig-ampliavel .papel { grid-column: 1 / -1; }
.fig-ampliavel .legenda { grid-column: 1; grid-row: 2; }
.fig-ampliavel .ampliar { grid-column: 2; grid-row: 2; margin-top: -10px; }

/* Imagem ao lado do texto: 3 + 5 colunas dentro das 8 do texto */
.img-texto { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.img-texto > .fig { grid-column: 1 / span 3; }
.img-texto > .texto { grid-column: 4 / span 5; display: flex; flex-direction: column; gap: var(--esp-2); }

/* Botões de texto (setas, Ampliar) */
.car-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-1);
  min-width: 44px; min-height: 44px; padding: 0 var(--esp-0-5);
  background: none; border: 0; color: var(--tinta); cursor: pointer;
  font-family: var(--mono); font-size: var(--rotulo-m); letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
}
.car-btn:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.car-btn:disabled { color: rgba(27, 24, 22, .35); cursor: default; text-decoration: none; }
.car-btn[hidden] { display: none; }

/* Carrossel. Sem JavaScript, as telas aparecem em lista. */
.car-slides { display: flex; flex-direction: column; gap: var(--esp-4); list-style: none; margin: 0; padding: 0; }
.car-slide .fig { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--esp-3); row-gap: var(--esp-1); }
.car-slide .papel { grid-column: 1 / -1; }
.car-slide .legenda { grid-column: 1; grid-row: 2; }
.car-slide .contador { grid-column: 2; grid-row: 2; padding-top: 2px; color: var(--tinta-2); white-space: nowrap; }
.palco { aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; padding: var(--esp-3); background: #F3EEE6; }
.palco img { width: auto !important; max-width: 100%; max-height: 100%; box-shadow: 0 0 0 1px rgba(27, 24, 22, .08); }
.car-slide[hidden] { display: none; }
.js .car-slides { touch-action: pan-y; }   /* o arrasto lateral troca a tela; o vertical rola a página */
.car-ctrl { display: flex; align-items: center; gap: var(--esp-1); margin-top: var(--esp-1); }
.car-ctrl[hidden] { display: none; }
.segs { flex: 1; display: flex; gap: var(--esp-0-5); }
.seg { flex: 1; min-height: 44px; display: flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.seg span { display: block; width: 100%; height: 1px; background: rgba(27, 24, 22, .3); transition: height .12s ease; }
.seg:hover span { height: 2px; background: rgba(27, 24, 22, .6); }
.seg[aria-current="true"] span { height: 2px; background: var(--tinta); }
.car-ctrl .ampliar { margin-left: var(--esp-2); }
.car-btn:focus-visible, .seg:focus-visible { outline: var(--foco); outline-offset: 2px; }

/* Imagem ampliada (dialog nativo: prende o foco e fecha com Esc) */
dialog.ampliada {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  box-sizing: border-box; padding: var(--esp-3) var(--esp-4); border: 0;
  background: rgba(27, 24, 22, .96); color: var(--creme-dymo);
}
dialog.ampliada[open] { display: flex; flex-direction: column; gap: var(--esp-2); }
dialog.ampliada::backdrop { background: transparent; }
.amp-topo, .amp-base { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); }
.amp-topo .contador { color: #E4DCCD; }
.amp-centro { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.amp-centro .papel { padding: var(--esp-1); background: var(--branco); display: flex; max-height: 100%; box-sizing: border-box; }
.amp-centro img { max-width: min(1200px, calc(100vw - 96px)); max-height: calc(100svh - 220px); width: auto; height: auto; }
.amp-base .legenda { color: #E4DCCD; text-align: center; }
dialog.ampliada .car-btn { color: var(--creme-dymo); }
dialog.ampliada .car-btn:disabled { color: rgba(244, 241, 234, .35); }
dialog.ampliada .car-btn:focus-visible { outline-color: var(--creme-dymo); }
/* Uma imagem grande (mapa): tamanho real, para percorrer com rolagem */
dialog.ampliada.grande .amp-centro { display: block; overflow: auto; }
dialog.ampliada.grande .amp-centro .papel { display: inline-block; max-height: none; }
dialog.ampliada.grande .amp-centro img { max-width: none; max-height: none; }
.fechar {
  display: inline-flex; align-items: center; gap: var(--esp-1); min-height: 44px; padding: 0 var(--esp-2);
  border: 0; border-radius: 2px; background: var(--branco); color: var(--tinta); cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: var(--rotulo-m); letter-spacing: var(--tracking-rotulo); text-transform: uppercase;
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, .10), 0 1px 0 rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .3);
}
.fechar:focus-visible { outline: 2.5px solid var(--creme-dymo); outline-offset: 3px; }

@media (max-width: 949px) {
  .case-corpo > .fig-larga, .case-corpo > .carrossel { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .case-corpo > .fig, .case-corpo > .img-texto, .case-corpo > .carrossel,
  .case-corpo > .fig + p, .case-corpo > .fig + ul, .case-corpo > .img-texto + p,
  .case-corpo > .carrossel + p { margin-top: var(--esp-4); }
  .img-texto { display: flex; flex-direction: column; gap: var(--esp-3); }
  .img-texto > .fig { width: 60%; }
  .palco { aspect-ratio: 4 / 3; padding: var(--esp-2); }
  .js .segs { display: none; }
  .car-ctrl { justify-content: space-between; }
  .car-ctrl .ampliar { margin-left: auto; }
  .fig-rolagem .papel { overflow-x: auto; }
  .fig-rolagem img { min-width: 880px; }
  dialog.ampliada { padding: var(--esp-2); }
  .amp-centro img { max-width: calc(100vw - 48px); }
}
@media (prefers-reduced-motion: reduce) { .seg span { transition: none; } }