/* ==========================================================================
   VALENTEC — pages/cases.css
   Estilos exclusivos da página Cases (pages/cases.html).
   Carregado DEPOIS do main.css: usa os tokens de lá (--navy, --pad, --hh,
   --ease…) e as animações @keyframes chxLoop, chxIn e dlgIn.

   SUMÁRIO
    1. Ajustes de componentes globais
    2. Telas ilustrativas (mockups)
    3. Hero com faixa contínua de projetos
    4. Projeto em destaque
    5. Lista de cases
    6. Explorador por setor
    7. Detalhe do case (diálogo)

   CONVENÇÕES
   - As seções seguem a ordem em que aparecem na página. Cada uma tem primeiro
     as regras gerais e, no fim, os ajustes por tamanho de tela (@media),
     do maior para o menor.
   - Classes de estado aplicadas pelo cases.js: .is-out (filtro), .on e .cur
     (prévia da lista), .swap (troca de setor), .is-run e .is-off (faixa do hero)
     e o atributo [hidden] (campos vazios do detalhe).
   - A ORDEM IMPORTA: quando duas regras têm o mesmo peso, vale a que vem depois.
     Ao mover regras entre seções, confira o resultado na página.
   ========================================================================== */


/* ==========================================================================
   1. AJUSTES DE COMPONENTES GLOBAIS
   Mudanças nos componentes do main.css que valem só nesta página.
   ========================================================================== */

/* Botão de contorno: o preenchimento do hover fica marinho nesta página. */
.btn-line::before {
  background: var(--navy);
}


/* ==========================================================================
   2. TELAS ILUSTRATIVAS (MOCKUPS)
   Complementos das mini-interfaces geradas por mock-screens.js (moldura, escala e peças).
   ========================================================================== */

.shot-in {
  position: absolute;
  inset: 10px;
}

/* A mini-interface é desenhada em 640x400 e o JS aplica a escala para caber na moldura. */
.shot .ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 640px;
  height: 400px;
  transform-origin: 0 0;
}

.ui-body {
  flex: 1;
  min-height: 0;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.u-h {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.u-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.u-sb {
  justify-content: space-between;
}

.u-price {
  font-weight: 700;
  font-size: 12px;
}

.u-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.u-cal {
  display: grid;
  grid-template-columns: 34px repeat(5,1fr);
  grid-auto-rows: 34px;
  gap: 4px;
  font-size: 10px;
}

.u-kpi {
  padding: 10px;
}

.u-kpi b {
  display: block;
  font-size: 18px;
  letter-spacing: -.02em;
  margin-top: 4px;
}

.u-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 28px;
}

.sh-grid {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}


/* ==========================================================================
   3. HERO COM FAIXA CONTÍNUA DE PROJETOS
   Título, chamada e a faixa de projetos que corre sozinha (animação chxLoop do main.css).
   ========================================================================== */

.chx {
  position: relative;
  background: #fff;
  color: #081226;
  min-height: clamp(760px,92svh,850px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--hh) + 64px) 0 56px;
  overflow: hidden;
}

.chx-head {
  position: relative;
}

.chx-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2878f0;
}

.chx h1 {
  margin-top: 18px;
  font-size: clamp(64px,5.7vw,82px);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 700;
  color: #081226;
  max-width: 12em;
}

.chx-lead {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.6;
  color: #64748b;
  max-width: 33em;
}

.chx-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 15.5px;
  font-weight: 600;
  color: #081226;
  padding-bottom: 4px;
  border-bottom: 1px solid #d8dee8;
  transition: color .25s ease, border-color .25s ease;
}

.chx-cta span {
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}

.chx-cta:hover {
  color: #2878f0;
  border-color: #2878f0;
}

.chx-cta:hover span {
  transform: translateX(4px);
}

.chx-cta:focus-visible {
  outline: 2px solid #2878f0;
  outline-offset: 4px;
  border-radius: 2px;
}

.chx-marquee {
  position: relative;
  margin-top: clamp(40px,5vw,64px);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.chx-viewport {
  position: relative;
  overflow: hidden;
  padding: 14px 0 22px;
}

/* Esmaecimento nas bordas da faixa. */
.chx-viewport::before, .chx-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: clamp(24px,6vw,96px);
}

.chx-viewport::before {
  left: 0;
  background: linear-gradient(90deg,#fff,rgba(255,255,255,0));
}

.chx-viewport::after {
  right: 0;
  background: linear-gradient(270deg,#fff,rgba(255,255,255,0));
}

.chx-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-left: var(--pad);
  will-change: transform;
  backface-visibility: hidden;
}

/* A faixa só corre depois que o JS duplica os itens (.is-run); fora da tela ela pausa (.is-off). */
.chx-track.is-run {
  animation: chxLoop var(--chx-t,60s) linear infinite;
}

.chx-marquee.is-off .chx-track {
  animation-play-state: paused;
}

.chx-item {
  flex: none;
  width: clamp(300px,29vw,460px);
}

.chx-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(8,18,38,.04), 0 12px 32px -18px rgba(8,18,38,.18);
}

.chx-shot {
  display: block;
  aspect-ratio: 1596/760;
  overflow: hidden;
  background: #f5f7fa;
  border-bottom: 1px solid #eef1f6;
}

.chx-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.chx-info {
  display: block;
  padding: 15px 18px 16px;
}

.chx-info b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #081226;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chx-info small {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entrada escalonada do hero: o atraso vem de --i, definido no HTML. */
[data-page]:not([hidden]) .chx-a {
  animation: chxIn .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i,0) * 100ms + 120ms);
}

@media (max-width: 1024px) {
  .chx {
    min-height: 0;
    padding-top: calc(var(--hh) + 56px);
  }

  .chx h1 {
    font-size: clamp(48px,6.6vw,60px);
  }

  .chx-item {
    width: clamp(280px,44vw,420px);
  }

  .chx-track {
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .chx {
    min-height: clamp(700px,100svh,800px);
    padding: calc(var(--hh) + 40px) 0 40px;
  }

  .chx h1 {
    font-size: clamp(40px,11.4vw,48px);
    letter-spacing: -.04em;
  }

  .chx-lead {
    font-size: 16px;
    margin-top: 18px;
  }

  .chx-cta {
    font-size: 15px;
  }

  .chx-marquee {
    margin-top: 36px;
  }

  .chx-item {
    width: 74vw;
  }

  .chx-track {
    gap: 14px;
  }

  .chx-card {
    border-radius: 16px;
  }

  .chx-info {
    padding: 12px 14px 13px;
  }

  .chx-info b {
    font-size: 14.5px;
  }

  .chx-info small {
    font-size: 12.5px;
  }
}


/* ==========================================================================
   4. PROJETO EM DESTAQUE
   Foto grande do case em destaque com o passo a passo ao lado.
   ========================================================================== */

.spot-in {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  column-gap: clamp(16px,2vw,32px);
  align-items: center;
}

.spot-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spot-badge {
  text-transform: none;
  letter-spacing: 0;
}

.spot-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6aa8ff;
}

.spot-body {
  grid-column: 9/-1;
}

.spot-seg {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 600;
}

.spot-steps span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 500;
}

.spot-body .btn {
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .spot-media, .spot-body {
    grid-column: 1/-1;
  }

  .spot-body {
    margin-top: 40px;
  }
}

@media (max-width: 720px) {
  .spot {
    padding-block: 72px;
  }

  .spot-body .btn {
    width: 100%;
    justify-content: space-between;
  }

  .spot-steps li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* ==========================================================================
   5. LISTA DE CASES
   Filtros, grupos por tipo de projeto, linhas da lista e prévia flutuante que segue o mouse.
   ========================================================================== */

.cx-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: clamp(32px,3.5vw,48px);
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.cx-head h2 {
  font-size: clamp(34px,3.6vw,58px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 500;
}

.cx-head .filters {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Título de cada grupo (tipo de projeto) na lista. */
.cx-group {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 44px 8px 14px;
  border-bottom: 1px solid var(--line-2);
}

.cx-group:first-child {
  padding-top: 28px;
}

.cx-group span {
  font-size: clamp(20px,1.8vw,24px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--navy);
}

.cx-group small {
  font-family: var(--fm);
  font-size: 12.5px;
  color: var(--tx-3);
}

/* Itens e grupos escondidos pelo filtro. */
.cx-item.is-out, .cx-group.is-out {
  display: none;
}

.cx-row {
  grid-template-columns: minmax(0,1.7fr) minmax(0,.8fr) 140px 50px;
}

.cx-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-2);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--ease);
}

.cx-go svg {
  width: 17px;
  height: 17px;
}

/* Selo "no ar" para cases com site publicado. */
.cx-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: #e9f7ef;
  color: #12733f;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  vertical-align: 1px;
}

.cx-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1f9d57;
}

/* Miniatura com imagem real (sites publicados). */
.cx-thumb--img {
  overflow: hidden;
  background: #eef3fb;
  border: 1px solid rgba(2,11,28,.08);
}

.cx-thumb--img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Prévia flutuante que segue o mouse sobre a lista (.on quando visível, .cur na tela da linha atual). */
.cx-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 45;
  width: 380px;
  aspect-ratio: 16/10;
  margin: -118px 0 0 40px;
  pointer-events: none;
}

.cx-preview .shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .3s, transform .6s var(--ease);
}

.cx-preview.on .shot.cur {
  opacity: 1;
  transform: none;
}

.cx-preview .pv-img {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.cx-preview .pv-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (hover: hover) {
  .cx-row:hover {
    padding-left: 22px;
  }

  .cx-row:hover::before {
    transform: scaleY(1);
    transform-origin: top;
  }
}

@media (max-width: 1100px) {
  .cx-seg {
    display: none;
  }

  .cx-row {
    grid-template-columns: minmax(0,1fr) 120px 48px;
  }
}

@media (max-width: 820px) {
  .cx-head .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    width: calc(100% + var(--pad) * 2);
  }

  .cx-head .filters::-webkit-scrollbar {
    display: none;
  }

  .cx-head .filter {
    flex: none;
  }

  .cx-group {
    padding: 36px 0 12px;
  }

  .cx-group:first-child {
    padding-top: 22px;
  }
}

@media (max-width: 720px) {
  .cx-head h2 {
    font-size: clamp(30px,8.6vw,38px);
  }

  .cx-row {
    gap: 12px 14px;
    padding: 22px 0;
    grid-template-columns: 1fr 44px;
  }

  .cx-thumb .shot-in {
    inset: 6px;
  }

  .cx-t {
    grid-column: 1;
  }

  .cx-cat {
    grid-column: 1;
    grid-row: 3;
  }

  .cx-go {
    grid-column: 2;
    grid-row: 2;
    width: 44px;
    height: 44px;
  }
}


/* ==========================================================================
   6. EXPLORADOR POR SETOR
   Abas de setores com a tela ilustrativa e as dores/soluções de cada um.
   ========================================================================== */

.sect-head {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  column-gap: clamp(16px,2vw,32px);
  align-items: end;
}

.sect-head > div {
  grid-column: 1/span 7;
}

.sect-head h2 {
  font-size: clamp(34px,3.6vw,58px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 500;
  margin-top: 0;
}

.sx2 {
  display: grid;
  grid-template-columns: repeat(12,minmax(0,1fr));
  column-gap: clamp(16px,2vw,32px);
  margin-top: clamp(40px,4.5vw,64px);
  align-items: start;
}

.sx2-list {
  grid-column: 1/span 4;
  display: grid;
  gap: 6px;
}

.sx2-list span {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Troca de setor: a tela sai e volta (classe .swap aplicada pelo JS). */
.sx2-screen .shot.swap {
  opacity: 0;
  transform: translateY(12px) scale(.98);
}

.sx2-body {
  padding: 6px 4px 4px;
}

.sx2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sx2-top h3 {
  font-size: clamp(22px,2vw,30px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.sx2-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

.sx2-cols {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.sx2-cols h4 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 500;
}

.sx2-pains {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.sx2-pains li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: #f59e0b;
  flex: none;
}

.sx2-build {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx2-foot {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* Link de texto: sublinhado simples. */
.sx2-link {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (max-width: 1200px) {
  .sx2-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .sect-head > div, .sect-head > p {
    grid-column: 1/-1;
  }

  .sect-head > p {
    margin-top: 16px;
  }

  .sx2-list {
    grid-column: 1/-1;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    gap: 8px;
  }

  .sx2-list::-webkit-scrollbar {
    display: none;
  }

  .sx2-panel {
    grid-column: 1/-1;
    position: static;
    margin-top: 16px;
  }
}

@media (max-width: 720px) {
  .sect {
    padding-block: 80px;
  }

  .sect-head h2 {
    font-size: clamp(30px,8.6vw,38px);
  }

  .sx2-list button {
    width: 220px;
    padding: 12px;
  }

  .sx2-list small {
    font-size: 12px;
  }

  .sx2-screen .shot {
    width: 94%;
    padding: 6px;
  }

  .sx2-screen .shot .shot-in {
    inset: 6px;
  }

  .sx2-foot .btn {
    width: 100%;
    justify-content: space-between;
  }
}


/* ==========================================================================
   7. DETALHE DO CASE (DIÁLOGO)
   Janela aberta ao clicar em um case: imagem, textos, site no ar e chamada para contato.
   ========================================================================== */

/* Fundo escurecido atrás da janela. */
.dlg::backdrop {
  background: rgba(3,4,8,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dlg[open] {
  animation: dlgIn .6s var(--ease);
}

.dlg-close svg {
  width: 18px;
  height: 18px;
}

.dlg-media .shot {
  max-width: 760px;
  margin: 0 auto;
}

.dlg-body {
  padding: clamp(28px,4vw,56px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px,4vw,64px);
}

.dlg-body h2 {
  font-size: clamp(28px,3vw,44px);
  letter-spacing: -.04em;
  line-height: 1.05;
  font-weight: 500;
  margin-top: 18px;
}

.dlg-body h3 {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 500;
}

.dlg-body .dlg-first {
  margin-top: 0;
}

.dlg-body ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--grad);
  flex: none;
}

.dlg-out b {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
  font-weight: 600;
}

/* Link para o site no ar (só aparece em cases com link). */
.dlg-live {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 600;
  color: #fff;
  transition: border-color .2s ease, background .2s ease;
}

.dlg-live small {
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 400;
  color: rgba(222,233,255,.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dlg-live:hover {
  border-color: #2878f0;
  background: rgba(40,120,240,.14);
}

/* Campos sem conteúdo ficam escondidos pelo JS. */
.dlg-live[hidden], #dlgStack[hidden], #dlgStackH[hidden] {
  display: none;
}

/* Link do detalhe do case para a página do serviço. */
.dlg-svc {
  display: block;
  width: fit-content;
  margin: 18px 0 0;
  font-size: 14.5px;
  opacity: .85;
}

.dlg-svc:hover {
  opacity: 1;
}

#dlgCta {
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .dlg-body {
    grid-template-columns: 1fr;
  }
}