/* Pomar · páginas de CASE — fonte única dos ajustes visuais das páginas de
   case (TEEE, Garen, Spaal, Ráwve, Invisalign). A partir daqui, toda nova
   formatação dessas páginas entra neste arquivo, não no HTML.

   Os componentes vieram de assets/pomar-abm.css, onde nasceram na página de
   Account-Based Marketing. Aqui eles deixam de ser exclusivos daquela página:
   a cor de acento passa a ser um token por página (--pm-case-acento), de modo
   que o mesmo desenho sirva a cases de setores diferentes sem duplicar CSS.

   Cada página declara sua cor no <body>:
       <body data-case="teee">  ->  coral    (#FD6141)
   e o bloco :root abaixo resolve o resto. */

:root {
  --pm-case-acento:        #FD6141;   /* padrão: coral pomar.abm */
  --pm-case-acento-ink:    #BC4830;   /* variante legível como TEXTO sobre #F2F1F0 */
  --pm-case-acento-forte:  #FDA03C;
  --pm-case-destaque: linear-gradient(100deg, #FD6141 0%, #FDA03C 52%, #00C9AC 100%);
}

/* Destaques tipográficos: um único gradiente, aplicado somente aos glifos —
   sem preenchimento retangular atrás do texto. */
main .pm-hero-destaque {
  background-color: transparent !important;
  background-image: var(--pm-case-destaque) !important;
  background-repeat: no-repeat;
  /* Folga ótica para o antialiasing da última letra não encostar no limite
     vertical da imagem de fundo. */
  background-size: calc(100% + 2px) 100%;
  background-position: left center;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

main #hero-title .pm-hero-destaque {
  padding-inline-end: .1em;
  margin-inline-end: -.1em;
  background-image: linear-gradient(90deg, var(--pm-case-acento) 0%, var(--pm-case-acento-forte) 100%) !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Segundo menu: mesma linguagem do título de Account-Based Marketing no menu
   de Especialidades — Montserrat light, 18px e coral da página ABM. */
#pm-subnav .pm-subnav-marca {
  display: flex;
  flex: none;
  align-items: center;
}

/* O desenho das listras vem de .pm-faixa, no design system. No desktop ele
   ocupa um único quadrado na borda da tela, sem avançar até o container. */
#pm-subnav .pm-subnav-faixa {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pm-subnav-h);
  height: var(--pm-subnav-h);
  color: var(--pm-case-acento);
  opacity: .88;
}

#pm-subnav .pm-subnav-titulo {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  line-height: 1.375 !important;
  color: var(--pm-case-acento) !important;
  transform: none;
}

@media (min-width: 1024px) {
  #pm-subnav .pm-subnav-marca {
    padding-left: var(--fib-2, 13px);
  }

  #pm-subnav .pm-subnav-faixa {
    display: block;
  }
}

/* O fundo da hero rola junto com o resto da abertura: a camada é absoluta
   dentro de #top (que tem overflow oculto), e não fixa na janela. O recuo do
   topo é a altura do cabeçalho fixo, para a imagem começar exatamente na base
   dele — e continuar alinhada com o vão reservado no celular. */
#top #hero-bg-wrapper {
  position: absolute !important;
  background-color: #0C1D27;
  contain: paint;
}

/* A foto sangra pela direita e termina no meio da tela. Sem dissolver essa
   borda, ela encosta no petróleo chapado e desenha uma linha vertical visível
   — o degradê do véu não a apaga, porque ali ele já não é opaco. */
@media (min-width: 1024px) {
  #top #hero-bg-wrapper > img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 100%);
  }
}

/* A coluna usa o mesmo padrão .pm-faixa do design system e toma a altura
   completa da hero. A largura deriva da barra secundária para manter a mesma
   proporção nos dois gestos gráficos. As listras turquesa vazadas ocupam os
   80% superiores; o coral chapado cobre os 20% finais sem alterar a geometria. */
#top .pm-hero-faixa {
  display: none;
  position: absolute;
  top: 0;
  right: var(--pm-subnav-h);
  bottom: 0;
  z-index: 8;
  width: var(--pm-subnav-h);
  color: var(--pm-case-faixa, #00C9AC);
  background-color: transparent;
  opacity: 1;
  pointer-events: none;
}

#top .pm-hero-faixa::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  bottom: 0;
  height: 20%;
  background-color: var(--pm-case-acento);
}

/* A página ABM usa o submenu para comunicar a posição de leitura. O trilho
   linear do header compartilhado seria um segundo indicador concorrente; ele
   é removido apenas nesta página, sem tocar na lógica de estado do submenu. */
body[data-case] #pm-progress-track {
  display: none !important;
}

@media (min-width: 1024px) {
  #top .pm-hero-faixa {
    display: block;
  }
}

#hero-mobile-bg {
  display: none;
}

@media (max-width: 1023px) {
  #hero-mobile-bg {
    display: block;
    position: absolute;
    inset: 0;
  }

  #hero-mobile-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
  }

  #hero-mobile-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgba(12, 29, 39, .40) 0%,
      rgba(12, 29, 39, .55) 42%,
      #0C1D27 74%,
      #0C1D27 100%);
    pointer-events: none;
  }

  #top #hero-overlay {
    display: none;
  }
}
/* Caixa branca reutilizável para blocos editoriais sobre fundos off-white.
   As variantes acrescentam apenas um sopro de cor no canto inferior direito,
   sem linhas de categoria ou perda da predominância branca. */
main .pm-white-box {
  position: relative;
  background-color: #FFFFFF;
  border: 1px solid rgba(18, 41, 55, .10);
  border-radius: .125rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: box-shadow .25s ease;
}

main .pm-white-box:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, .10),
    0 2px 4px -2px rgba(0, 0, 0, .10);
}

main .pm-white-box--turquoise {
  background-image: radial-gradient(circle at 100% 100%,
    rgba(0, 201, 172, .09) 0%,
    rgba(0, 201, 172, .035) 34%,
    rgba(0, 201, 172, 0) 66%);
}

main .pm-white-box--orange {
  background-image: radial-gradient(circle at 100% 100%,
    rgba(253, 160, 60, .09) 0%,
    rgba(253, 160, 60, .035) 34%,
    rgba(253, 160, 60, 0) 66%);
}


/* GALERIA DE CRIATIVOS · baralho manual (compartilhada por todos os cases)
   Sete de quatorze cartas compartilham o mesmo centro; o JS troca data-position para
   que o destaque e as três abas de cada lado transitem sem rotação. */
main .pm-case-galeria {
  --pm-gallery-ink: #122937;
  --pm-gallery-turquoise: #00A88F;
  --pm-gallery-bright: #00C9AC;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #F2F1F0;
}

main .pm-case-galeria .pm-case-gallery-heading {
  transform: translateY(-40px);
}

main .pm-case-galeria .pm-case-gallery-stage {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  column-gap: .5rem;
  width: calc(100% + 3rem);
  margin: clamp(2rem, 4vw, 4rem) 0 0 -1.5rem;
}

main .pm-case-galeria .pm-case-deck {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  height: clamp(20rem, 34.4vw, 31.2rem);
  min-width: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

main .pm-case-galeria .pm-case-card {
  position: absolute;
  isolation: isolate;
  top: 0;
  left: 50%;
  display: block;
  width: min(36.8vw, 36rem);
  aspect-ratio: 16 / 10;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(18, 41, 55, .28);
  border-radius: 0;
  /* Sem chapa branca: as artes com canal alpha assentam direto sobre o fundo
     da secao, no carrossel e no zoom. */
  background: transparent;
  box-shadow: 0 1.5rem 3.5rem rgba(12, 29, 39, .24);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform-origin: 50% 100%;
  transition:
    transform 760ms cubic-bezier(.22, .72, .18, 1),
    filter 520ms ease,
    opacity 520ms ease,
    border-color 300ms ease,
    box-shadow 520ms ease;
  will-change: transform;
}

main .pm-case-galeria .pm-case-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 900ms cubic-bezier(.22, .72, .18, 1), filter 520ms ease;
}

main .pm-case-galeria .pm-case-card::after {
  content: none;
}

/* Camada visual real sobre a imagem. O véu branco preserva a mesma curva de
   opacidade e a mesma transição usadas anteriormente no azul-petróleo. */
main .pm-case-galeria .pm-case-card-overlay {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 30%;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #DCE0E2 24%,
    #8C979D 60%,
    #46565F 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}

/* Tratamento inspirado nas capas dos artigos: o texto pertence à carta e fica
   em uma camada independente, sempre acima do gradiente. */
main .pm-case-galeria .pm-case-card-caption {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 30%;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  padding: 1px clamp(.75rem, 1.8vw, 1.5rem);
  overflow: hidden;
  background: transparent;
  color: #FFFFFF;
  opacity: 0;
  text-align: left;
  text-shadow: 0 1px 3px rgba(12, 29, 39, .45);
  pointer-events: none;
  transition: opacity 420ms ease;
}

main .pm-case-galeria .pm-case-card[data-position="0"] .pm-case-card-overlay,
main .pm-case-galeria .pm-case-card[data-position="0"] .pm-case-card-caption {
  opacity: 1;
}

main .pm-case-galeria .pm-case-card-caption strong {
  display: block;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

main .pm-case-galeria .pm-case-card-caption > span {
  display: block;
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.05;
}

main .pm-case-galeria .pm-case-card[data-position="0"] {
  z-index: 10;
  border-color: rgba(18, 41, 55, .22);
  box-shadow: 0 2rem 5rem rgba(12, 29, 39, .3);
  filter: none;
  transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
}

main .pm-case-galeria .pm-case-card[data-position="0"] img {
  transform: scale(1.012);
}

main .pm-case-galeria .pm-case-card[data-position="-1"] {
  z-index: 9;
  filter: saturate(.96) brightness(.94);
  transform: translateX(-77.5%) translateY(1.6rem) scale(.91) rotate(-10deg);
}

main .pm-case-galeria .pm-case-card[data-position="1"] {
  z-index: 9;
  filter: saturate(.96) brightness(.94);
  transform: translateX(-22.5%) translateY(1.6rem) scale(.91) rotate(10deg);
}

main .pm-case-galeria .pm-case-card[data-position="-2"] {
  z-index: 8;
  filter: saturate(.92) brightness(.89);
  transform: translateX(-100%) translateY(-.1rem) scale(.82) rotate(-20deg);
}

main .pm-case-galeria .pm-case-card[data-position="2"] {
  z-index: 8;
  filter: saturate(.92) brightness(.89);
  transform: translateX(0) translateY(-.1rem) scale(.82) rotate(20deg);
}

main .pm-case-galeria .pm-case-card[data-position="-3"] {
  z-index: 7;
  filter: saturate(.88) brightness(.84);
  transform: translateX(-120%) translateY(4.8rem) scale(.73) rotate(-30deg);
}

main .pm-case-galeria .pm-case-card[data-position="3"] {
  z-index: 7;
  filter: saturate(.88) brightness(.84);
  transform: translateX(20%) translateY(4.8rem) scale(.73) rotate(30deg);
}

main .pm-case-galeria .pm-case-card[data-position="hidden"] {
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) scale(.68);
  pointer-events: none;
}

main .pm-case-galeria .pm-case-card:focus-visible,
main .pm-case-galeria .pm-case-gallery-arrow:focus-visible,
main .pm-case-galeria .pm-case-gallery-dot:focus-visible {
  outline: 2px solid var(--pm-gallery-bright);
  outline-offset: 4px;
}

main .pm-case-galeria .pm-case-gallery-arrow {
  position: relative;
  z-index: 20;
  display: inline-flex;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(18, 41, 55, .2);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--pm-gallery-ink);
  justify-self: center;
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

main .pm-case-galeria [data-galeria-prev] {
  grid-column: 1;
  grid-row: 1;
}

main .pm-case-galeria [data-galeria-next] {
  grid-column: 3;
  grid-row: 1;
}

main .pm-case-galeria .pm-case-gallery-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 2;
  gap: clamp(.28rem, .7vw, .625rem);
  flex-wrap: wrap;
  max-width: min(100%, 34rem);
  justify-self: center;
  margin: .75rem 0 0;
  transform: translateY(-30px);
}

@media (max-width: 767px) {
  main .pm-case-galeria .pm-case-gallery-dots {
    max-width: 17rem;
  }
}

main .pm-case-galeria .pm-case-gallery-dot {
  display: block;
  width: .8125rem;
  height: .8125rem;
  padding: 0;
  border: 1px solid rgba(18, 41, 55, .25);
  border-radius: 0;
  background: transparent;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

main .pm-case-galeria .pm-case-gallery-dot[aria-selected="true"] {
  border-color: var(--pm-gallery-turquoise);
  background: var(--pm-gallery-turquoise);
}

body.pm-case-lightbox-open {
  overflow: hidden;
}

main .pm-case-galeria .pm-case-lightbox[hidden] {
  display: none;
}

main .pm-case-galeria .pm-case-lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 3rem);
  background: rgba(255, 255, 255, .92);
  cursor: zoom-out;
}

main .pm-case-galeria .pm-case-lightbox img {
  display: block;
  background: transparent;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - clamp(2rem, 6vw, 6rem));
  object-fit: contain;
  border: 0;
  cursor: zoom-out;
}

main .pm-case-galeria .pm-case-lightbox-media {
  isolation: isolate;
  position: relative;
  background: transparent;
  display: grid;
  max-width: 100%;
  max-height: calc(100svh - clamp(2rem, 6vw, 6rem));
  place-items: center;
}

main .pm-case-galeria .pm-case-lightbox-media img,
main .pm-case-galeria .pm-case-lightbox-caption {
  grid-area: 1 / 1;
}

main .pm-case-galeria .pm-case-lightbox-caption {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: stretch;
  min-height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .25rem;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: none;
  color: #FFFFFF;
  pointer-events: none;
}

main .pm-case-galeria .pm-case-lightbox-caption::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #DCE0E2 24%,
    #8C979D 62%,
    #46565F 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

main .pm-case-galeria .pm-case-lightbox-caption > * {
  position: relative;
}

main .pm-case-galeria .pm-case-lightbox-caption strong,
main .pm-case-galeria .pm-case-lightbox-caption span {
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
}

main .pm-case-galeria .pm-case-lightbox-caption strong {
  font-size: 18px;
  font-weight: 700;
}

main .pm-case-galeria .pm-case-lightbox-caption span {
  font-size: 15px;
  font-weight: 400;
}

main .pm-case-galeria .pm-case-lightbox-close {
  position: fixed;
  z-index: 2;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(12, 29, 39, .28);
  border-radius: 0;
  background: rgba(12, 29, 39, .82);
  color: #FFFFFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

main .pm-case-galeria .pm-case-card[data-position="0"],
main .pm-case-galeria .pm-case-card.is-zoomable,
main .pm-case-galeria .pm-case-card.is-zoomable * {
  cursor: zoom-in !important;
}

@media (min-width: 768px) {
  main .pm-case-galeria .pm-case-card[data-position="0"] {
    width: min(44.16vw, 43.2rem);
  }

  main .pm-case-galeria .pm-case-card:not([data-position="0"]) {
    width: min(29.44vw, 28.8rem);
  }

  main .pm-case-galeria .pm-case-card[data-position="-1"] {
    transform: translateX(-98%) translateY(1.6rem) scale(.91) rotate(-10deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="1"] {
    transform: translateX(-2%) translateY(1.6rem) scale(.91) rotate(10deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="-2"] {
    transform: translateX(-128%) translateY(calc(-20% - .1rem)) scale(.82) rotate(-20deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="2"] {
    transform: translateX(28%) translateY(calc(-20% - .1rem)) scale(.82) rotate(20deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="-3"] {
    transform: translateX(-140%) translateY(4.8rem) scale(.73) rotate(-30deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="3"] {
    transform: translateX(40%) translateY(4.8rem) scale(.73) rotate(30deg);
  }
}

@media (max-width: 767px) {
  main .pm-case-galeria .pm-case-gallery-stage {
    grid-template-columns: 1fr 2.75rem .375rem 2.75rem 1fr;
    column-gap: 0;
  }

  main .pm-case-galeria .pm-case-deck {
    grid-column: 1 / -1;
    grid-row: 1;
    height: clamp(14.8rem, 73vw, 18rem);
  }

  main .pm-case-galeria .pm-case-card {
    width: 59.2vw;
    max-width: 17.6rem;
    box-shadow: 0 1rem 2.5rem rgba(12, 29, 39, .2);
  }

  main .pm-case-galeria .pm-case-card-caption {
    padding-right: .65rem;
    padding-left: .65rem;
  }

  main .pm-case-galeria .pm-case-card-caption strong {
    font-size: 12px;
  }

  main .pm-case-galeria .pm-case-card-caption > span {
    display: none;
  }

  main .pm-case-galeria .pm-case-card[data-position="0"] {
    width: 72vw;
    max-width: 21.5rem;
  }

  main .pm-case-galeria .pm-case-card[data-position="-1"] {
    transform: translateX(-62.5%) translateY(1.8rem) scale(.92) rotate(-10deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="1"] {
    transform: translateX(-37.5%) translateY(1.8rem) scale(.92) rotate(10deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="-2"] {
    transform: translateX(-75%) translateY(1.68rem) scale(.84) rotate(-20deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="2"] {
    transform: translateX(-25%) translateY(1.68rem) scale(.84) rotate(20deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="-3"] {
    transform: translateX(-87.5%) translateY(3.6rem) scale(.76) rotate(-30deg);
  }

  main .pm-case-galeria .pm-case-card[data-position="3"] {
    transform: translateX(-12.5%) translateY(3.6rem) scale(.76) rotate(30deg);
  }

  main .pm-case-galeria .pm-case-gallery-arrow {
    width: 2.75rem;
    height: 2.75rem;
    transform: translateY(-18px);
  }

  main .pm-case-galeria [data-galeria-prev] {
    grid-column: 2;
    grid-row: 3;
  }

  main .pm-case-galeria [data-galeria-next] {
    grid-column: 4;
    grid-row: 3;
  }

  main .pm-case-galeria .pm-case-gallery-dots {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 1024px) {
  main .pm-case-galeria .pm-case-gallery-stage {
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    column-gap: 1rem;
    width: calc(100% + 6rem);
    margin-left: -3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  main .pm-case-galeria .pm-case-card,
  main .pm-case-galeria .pm-case-card img,
  main .pm-case-galeria .pm-case-gallery-arrow,
  main .pm-case-galeria .pm-case-gallery-dot {
    transition-duration: 1ms !important;
  }
}

/* =========================================================================
   TÍTULO GRANDE DE SEÇÃO
   -------------------------------------------------------------------------
   Mesma regra que index.html, marketing-abm.html e marketing-industrial-b2b.html
   declaram inline. cases.html usava a classe sem nunca defini-la — sobrou assim
   quando a página foi separada da home, e o título caía no tamanho padrão do
   <h2>. Aqui ela passa a viver em folha de estilo, como manda a convenção do
   projeto; as cópias inline das outras páginas continuam idênticas.
   ========================================================================= */
.pm-equipe-titulo {
  /* Sem teto de largura: o título usa a linha inteira em vez de quebrar
     cedo dentro de 760px. */
  margin: 0;
  font-family: 'Casta', 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(3.35rem, 7vw, 7.6rem);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: .9;
}

/* =========================================================================
   TEMA POR CASE
   -------------------------------------------------------------------------
   Cada página declara data-case no <body>. O acento pinta pré-títulos, filetes
   e números; a variante -ink é a única permitida quando a cor vira TEXTO sobre
   o off-white #F2F1F0 (as cores de marca reprovam em contraste como texto —
   ver a nota das variantes -ink em design-system/colors_and_type.css).
   Conferível com: python3 contraste.py --estrito
   ========================================================================= */

body[data-case="teee"] {
  --pm-case-acento:       #FD6141;   /* coral pomar.abm */
  --pm-case-acento-ink:   #BC4830;   /* 4,53:1 sobre #F2F1F0 */
  --pm-case-acento-forte: #FDA03C;
}

body[data-case="garen"] {
  --pm-case-acento:       #00C9AC;   /* Marketing Industrial */
  --pm-case-acento-ink:   #007C6A;
  --pm-case-acento-forte: #00A88F;
}

body[data-case="spaal"] {
  --pm-case-acento:       #F755A3;   /* Branding e Design de Marcas */
  --pm-case-acento-ink:   #BA407B;
  --pm-case-acento-forte: #FDA03C;
}

body[data-case="rawve"] {
  --pm-case-acento:       #FDA03C;   /* Consultoria de Marketing e Vendas */
  --pm-case-acento-ink:   #996124;
  --pm-case-acento-forte: #FD6141;
}

body[data-case="invisalign"] {
  --pm-case-acento:       #FDA03C;   /* Consultoria de Marketing e Vendas */
  --pm-case-acento-ink:   #996124;
  --pm-case-acento-forte: #FD6141;
}

body[data-case="jb-energy"] {
  --pm-case-acento:       #FD6141;   /* Account-Based Marketing (ABM) */
  --pm-case-acento-ink:   #BC4830;
  --pm-case-acento-forte: #FDA03C;
}

/* =========================================================================
   COMPONENTES EDITORIAIS DAS PÁGINAS DE CASE
   ========================================================================= */

/* ---- Pré-título de seção ------------------------------------------------ */
main .pm-case-kicker {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  line-height: 1.6;
  color: var(--pm-case-acento-ink);
  margin-bottom: .75rem;
}

/* Sobre o petróleo a cor de marca já tem contraste de sobra: volta ao acento. */
main [data-tema="escuro"] .pm-case-kicker,
main .pm-case-escuro .pm-case-kicker {
  color: var(--pm-case-acento);
}

/* ---- Ficha executiva ---------------------------------------------------- */
/* Lista de definição em duas colunas: rótulo curto à esquerda, valor à direita.
   É <dl> de propósito — o par rótulo/valor é a semântica exata do bloco. */
main .pm-case-ficha {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11rem) minmax(0, 1fr);
  column-gap: 1.5rem;
}

main .pm-case-ficha dt,
main .pm-case-ficha dd {
  padding: .7rem 0;
  border-top: 1px solid rgba(18, 41, 55, .12);
}

/* O rótulo e o ícone usam a variante -ink do acento: a cor de marca cheia
   reprova como texto sobre o off-white (ver a nota das variantes em
   design-system/colors_and_type.css). */
main .pm-case-ficha dt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--pm-case-acento-ink);
  line-height: 1.5;
}

main .pm-case-ficha dt iconify-icon {
  flex: none;
  font-size: 16px;
}

main .pm-case-ficha dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #122937;
}

@media (max-width: 520px) {
  main .pm-case-ficha {
    grid-template-columns: minmax(0, 1fr);
  }

  main .pm-case-ficha dd {
    border-top: 0;
    padding-top: 0;
  }
}

/* ---- Conteúdo expansível ------------------------------------------------
   <details> nativo: o texto continua no HTML mesmo fechado, que é o que o
   briefing pede para acessibilidade e encontrabilidade. Sem JS. */
main .pm-case-expansivel {
  border: 1px solid rgba(18, 41, 55, .12);
  background: #FFFFFF;
}

main .pm-case-expansivel > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .95rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #122937;
  transition: background-color .2s ease;
}

main .pm-case-expansivel > summary::-webkit-details-marker { display: none; }

main .pm-case-expansivel > summary:hover {
  background-color: rgba(18, 41, 55, .035);
}

/* Sinal de abrir/fechar desenhado em CSS: um "+" que vira "−". */
main .pm-case-expansivel > summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-left: auto;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--pm-case-acento-ink);
  transition: transform .25s ease;
}

main .pm-case-expansivel[open] > summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  transform: rotate(180deg);
}

main .pm-case-expansivel .pm-case-expansivel-corpo {
  padding: 0 1.25rem 1.25rem;
  font-size: 14px;
  line-height: 1.75;
  color: #46565F;
  border-top: 1px solid rgba(18, 41, 55, .08);
  padding-top: 1rem;
}

/* ---- Cadeia de decisão / etapas em fila --------------------------------- */
main .pm-case-cadeia {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  background: rgba(18, 41, 55, .12);
  border: 1px solid rgba(18, 41, 55, .12);
}

main .pm-case-cadeia-item {
  position: relative;
  background: #FFFFFF;
  padding: 1.15rem 1rem 1.25rem;
}

main .pm-case-cadeia-item[data-atuacao] {
  background: #FFF;
  box-shadow: inset 0 3px 0 0 var(--pm-case-acento);
}

main .pm-case-cadeia-num {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(18, 41, 55, .40);
  margin-bottom: .45rem;
}

main .pm-case-cadeia-titulo {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #122937;
  margin-bottom: .35rem;
}

main .pm-case-cadeia-nota {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(18, 41, 55, .62);
}

main .pm-case-cadeia-tag {
  display: inline-block;
  margin-top: .55rem;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pm-case-acento-ink);
}

/* ---- Progressão horizontal (reconhecimento -> oportunidade) ------------- */
main .pm-case-progressao {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  counter-reset: etapa;
}

main .pm-case-progressao-item {
  position: relative;
  counter-increment: etapa;
  padding-top: 2.35rem;
}

/* Fio de continuidade + marcador redondo com o número da etapa. */
main .pm-case-progressao-item::before {
  content: counter(etapa);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background: var(--pm-case-acento);
  z-index: 1;
}

main .pm-case-progressao-item::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 26px;
  right: -1.5rem;
  height: 2px;
  background: rgba(18, 41, 55, .14);
}

main .pm-case-progressao-item:last-child::after { display: none; }

@media (max-width: 640px) {
  main .pm-case-progressao-item::after { display: none; }
}

/* ---- Linha do tempo vertical (etapas da parceria) ----------------------- */
main .pm-case-timeline {
  position: relative;
  padding-left: 2.25rem;
}

main .pm-case-timeline::before {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  left: 7px;
  width: 2px;
  background: rgba(18, 41, 55, .14);
}

main .pm-case-timeline-item {
  position: relative;
  padding-bottom: 2.75rem;
}

main .pm-case-timeline-item:last-child { padding-bottom: 0; }

main .pm-case-timeline-item::before {
  content: "";
  position: absolute;
  top: .45rem;
  left: -2.25rem;
  width: 16px;
  height: 16px;
  background: var(--pm-case-acento);
  outline: 4px solid #F2F1F0;
}

/* ---- Resultado: da presença à receita ----------------------------------- */
main .pm-case-resultado {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .35rem;
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid rgba(18, 41, 55, .12);
}

main .pm-case-resultado-num {
  font-family: 'Casta', 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1;
  color: #122937;
}

main .pm-case-resultado[data-tipo="receita"] .pm-case-resultado-num {
  color: var(--pm-case-acento-ink);
}

main .pm-case-resultado-rotulo {
  font-size: 13.5px;
  line-height: 1.6;
  color: #46565F;
  max-width: 46ch;
}

main .pm-case-resultado-faixa {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(18, 41, 55, .45);
}

/* ---- Nota metodológica -------------------------------------------------- */
main .pm-case-nota {
  border-left: 3px solid var(--pm-case-acento);
  padding: .1rem 0 .1rem 1.15rem;
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(18, 41, 55, .68);
}

/* ---- Comparação editorial antes/depois ---------------------------------- */
main .pm-case-antes-depois {
  position: relative;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  background: rgba(18, 41, 55, .12);
  border: 1px solid rgba(18, 41, 55, .12);
}

main .pm-case-antes-depois > div {
  background: #FFFFFF;
  padding: 1.6rem 1.5rem 1.75rem;
}

main .pm-case-antes-depois > div[data-lado="depois"] {
  box-shadow: inset 3px 0 0 0 var(--pm-case-acento);
}


/* Seta do "antes" para o "depois": o par só se lê como transformação se a
   direção estiver desenhada. O anel branco recorta a seta sobre o fio que
   separa os dois blocos. */
main .pm-case-antes-depois-seta {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  background: var(--pm-case-acento);
  box-shadow: 0 0 0 7px #FFFFFF;
  color: #FFFFFF;
  font-size: 24px;
  pointer-events: none;
}

/* Abaixo de 562px a grade cai para uma coluna (minmax de 16rem) e o percurso
   passa a ser de cima para baixo. */
@media (max-width: 561px) {
  main .pm-case-antes-depois-seta {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

@media (max-width: 767px) {
  main .pm-case-antes-depois > div[data-lado="depois"] {
    box-shadow: inset 0 3px 0 0 var(--pm-case-acento);
  }
}