/*
Theme Name: Juxlab Portfolio
Theme URI: https://juxlab.com.br
Author: Juxlab
Author URI: https://juxlab.com.br
Description: Tema WordPress customizado para portfólio de design, codificado a partir do layout Figma de Jeniffer (Juxlab). Compatível com o Elementor: páginas internas usam the_content() e um template "Página em Branco" para montagem livre no editor; a home vem codificada 1:1 com o design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: juxlab
*/

/* =========================================================
   0. DESIGN TOKENS
   Ajuste estas variáveis (ou use Aparência > Personalizar >
   Cores da Marca) para adequar ao seu manual de marca real.
========================================================= */
:root{
  --jx-blue: #2A4CF2;
  --jx-blue-dark: #1B33B8;
  --jx-blue-darker: #12143A;
  --jx-navy: #12142B;
  --jx-green: #8CFFC0;
  --jx-orange: #FF6A3D;
  --jx-purple: #4B2A86;
  --jx-black: #0B0B0F;

  --jx-text: #16172E;
  --jx-text-muted: #5B5F73;
  --jx-bg: #FFFFFF;
  --jx-bg-alt: #F4F5FA;
  --jx-border: #E5E7F0;

  --jx-font-heading: 'Kelly Slab', 'Segoe UI', sans-serif;
  --jx-font-body: 'Open Sans', 'Segoe UI', sans-serif;
  --jx-font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --jx-radius: 20px;
  --jx-radius-lg: 32px;
  --jx-radius-pill: 999px;
  --jx-container: 1200px;
  --jx-gutter: clamp(20px, 5vw, 64px);
  --jx-header-h: 89px; /* valor de referência — assets/js/portfolio-story.js
                           ajusta pro tamanho REAL do menu assim que a página
                           carrega (a altura muda um pouco com a fonte
                           carregada, zoom etc.), pra nunca sobrar nem faltar
                           1px entre o menu e a seção de projetos (sticky). */
  --jx-story-inset: clamp(28px, 3vw, 40px); /* mesmo recuo à esquerda pro
                           título, o título de cada projeto e as bolinhas
                           de progresso da seção "Projetos selecionados",
                           pra ficarem alinhados numa única coluna. */
}

/* =========================================================
   1. RESET / BASE
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--jx-font-body);
  color: var(--jx-text);
  background: var(--jx-bg);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,h5{
  font-family: var(--jx-font-heading);
  color: var(--jx-navy);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 400; /* Kelly Slab só existe no peso 400 no Google Fonts — já é uma fonte "cheia" por natureza */
}
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.container{
  max-width: var(--jx-container);
  margin: 0 auto;
  padding: 0 var(--jx-gutter);
}

/* =========================================================
   2. UTILITIES
========================================================= */
.eyebrow{
  display: inline-block;
  font-family: var(--jx-font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--jx-blue);
  margin-bottom: .75em;
}
.text-accent{ color: var(--jx-blue); }
.badge{
  display: inline-block;
  font-family: var(--jx-font-mono);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  font-weight: 700;
  padding: .5em 1em;
  border-radius: var(--jx-radius-pill);
}
.badge--green{ background: var(--jx-green); color: var(--jx-navy); }
.badge--navy{ background: var(--jx-navy); color: #fff; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--jx-font-body);
  font-weight: 600;
  font-size: .95rem;
  padding: .9em 1.6em;
  border-radius: var(--jx-radius-pill);
  border: 2px solid transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--jx-blue); color: #fff; }
.btn--primary:hover{ background: var(--jx-blue-dark); color: #fff; }
.btn--outline{ border-color: var(--jx-blue); color: var(--jx-blue); background: transparent; }
.btn--outline:hover{ background: var(--jx-blue); color: #fff; }
.btn--white{ background: #fff; color: var(--jx-blue); }
.btn--white:hover{ background: var(--jx-navy); color: #fff; }
.btn--link{ padding: 0; border-radius: 0; text-decoration: underline; color: var(--jx-blue); font-weight: 600; }
.btn--link:hover{ transform: none; opacity: .75; }

.section{ padding: clamp(56px, 8vw, 120px) 0; position: relative; }
.section--alt{ background: var(--jx-bg-alt); }
.section--blue{ background: var(--jx-blue); color: #fff; }
.section--blue h2, .section--blue h3{ color: #fff; }
.section--navy{ background: var(--jx-navy); color: #fff; }

/* =========================================================
   3. SITE HEADER
========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  transition: background-color .4s ease;
}
/* Linha divisória mais fina que 1px real (que costuma pesar demais
   visualmente) — um pseudo-elemento de 1px encolhido pela metade com
   scaleY, técnica clássica de "hairline" que fica nítida em qualquer
   densidade de tela. */
.site-header::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--jx-border);
  transform: scaleY(.5);
  transform-origin: bottom;
  transition: background-color .4s ease;
}
/* Enquanto a seção "Projetos selecionados" está na tela, o menu
   acompanha a cor do projeto ativo (mesma cor aplicada em
   .portfolio-story__sticky) — computado em portfolio-story.js, que
   também decide (WCAG) se o menu precisa virar claro ou escuro por
   cima dessa cor. Fora da seção o menu volta pro branco padrão. */
.site-header.is-dark-bg::after{ background: rgba(255,255,255,.14); }
.site-header.is-dark-bg .site-title{ color: #fff; }
.site-header.is-dark-bg .site-description{ color: rgba(255,255,255,.65); }
.site-header.is-dark-bg .main-navigation a{ color: rgba(255,255,255,.85); }
.site-header.is-dark-bg .main-navigation .current-menu-item > a,
.site-header.is-dark-bg .main-navigation a:hover{ color: #fff; }
.site-header.is-dark-bg .main-navigation .current-menu-item > a::after{ background: #fff; }
.site-header.is-dark-bg .menu-toggle{ border-color: rgba(255,255,255,.4); }
.site-header.is-dark-bg .menu-toggle span{ background: #fff; }
.site-header.is-dark-bg .header-cta .btn--outline{
  background: #fff;
  color: var(--jx-navy);
  border-color: #fff;
}
.site-header.is-dark-bg .header-cta .btn--outline:hover{
  background: var(--jx-navy);
  color: #fff;
  border-color: var(--jx-navy);
}
.site-title, .site-description, .main-navigation a{ transition: color .3s ease; }
.menu-toggle, .menu-toggle span{ transition: border-color .3s ease, background-color .3s ease; }
.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--jx-gutter);
}
.site-branding{ display: flex; align-items: center; gap: 10px; }
.site-branding img{ max-height: 40px; width: auto; }
.site-branding__text{ line-height: 1.1; }
.site-title{
  font-family: var(--jx-font-heading);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--jx-navy);
  margin: 0;
}
.site-description{
  font-family: var(--jx-font-mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jx-text-muted);
  display: block;
}
.main-navigation ul{
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-navigation a{
  font-weight: 600;
  font-size: .95rem;
  color: var(--jx-text);
  position: relative;
  padding: 6px 0;
}
.main-navigation .current-menu-item > a,
.main-navigation a:hover{ color: var(--jx-blue); }
.main-navigation .current-menu-item > a::after{
  content: '';
  position: absolute;
  left: 50%; bottom: -4px;
  width: 5px; height: 5px;
  background: var(--jx-blue);
  border-radius: 50%;
  transform: translateX(-50%);
}
.header-cta{ display: flex; align-items: center; gap: 16px; }
.menu-toggle{
  display: none;
  background: none;
  border: 2px solid var(--jx-border);
  border-radius: 10px;
  padding: 8px 10px;
}
.menu-toggle span{
  display: block;
  width: 20px; height: 2px;
  background: var(--jx-navy);
  margin: 4px 0;
}

/* =========================================================
   4. HERO
========================================================= */
.hero{ padding-top: clamp(48px, 8vw, 96px); overflow: hidden; }
.hero__grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero h1{ font-size: clamp(2rem, 4vw, 2.75rem); max-width: 14ch; }
.hero__lead{ color: var(--jx-text-muted); max-width: 46ch; font-size: 1.05rem; }
.hero__actions{ display: flex; align-items: center; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.hero__visual{ position: relative; display: flex; justify-content: center; }
.hero__blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  z-index: 0;
}
.hero__blob--green{ width: 140px; height: 140px; background: var(--jx-green); top: 10%; left: -6%; }
.hero__blob--blue{ width: 180px; height: 180px; background: var(--jx-blue); bottom: -8%; right: -4%; opacity: .9; }
.hero__phones{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  align-items: flex-end;
}
.phone-frame{
  background: var(--jx-navy);
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 30px 60px -20px rgba(18,20,43,.45);
  width: 190px;
}
.phone-frame--sm{ width: 150px; transform: translateY(24px); }
.phone-frame img{ border-radius: 24px; }
.hero__spark{
  position: absolute;
  top: -6%; right: 10%;
  width: 46px; height: 46px;
  color: var(--jx-orange);
  z-index: 2;
}

/* =========================================================
   5. CLIENT LOGOS
========================================================= */
.clients{ padding: 40px 0; border-top: 1px solid var(--jx-border); border-bottom: 1px solid var(--jx-border); }
.clients__label{
  font-family: var(--jx-font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--jx-text-muted);
  margin-bottom: 20px;
}
.clients__row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  filter: grayscale(1);
  opacity: .55;
}
.clients__row img{ max-height: 28px; width: auto; }
.clients__row span{ font-family: var(--jx-font-heading); font-weight: 400; font-size: 1.05rem; }

/* =========================================================
   6. ABOUT / SOBRE MIM
========================================================= */
.about{
  /* cria um contexto de empilhamento local: o swirl (z-index -1)
     fica garantidamente atrás do conteúdo desta seção, e só desta
     seção — sem risco de "sumir" atrás do fundo da página. */
  position: relative;
  z-index: 0;
}
.about__grid{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.about__visual{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  overflow: visible;
}
/* Ilustração real (illustration-swirl-blue.png), sem recorte redondo.
   É filha direta da <section> (não do .container), por isso "left: 0"
   encosta no canto de verdade da página, não só da coluna. O parallax
   (assets/js/about-parallax.js) só translada esse elemento conforme o
   scroll — a forma do arquivo original nunca é redesenhada. */
.about__swirl{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: clamp(300px, 32vw, 600px);
  height: auto;
  max-width: none;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.about__photo{
  position: absolute;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  z-index: 1;
  width: 78%;
  aspect-ratio: 477 / 630;
}
.about__photo img{ width: 100%; height: 100%; object-fit: contain; }
.about h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); }
.about h2 .text-accent{ text-decoration: underline; text-underline-offset: 4px; }
.about__actions{ display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; }

/* =========================================================
   7. PILARES
========================================================= */
.pillars-intro{ text-align: center; max-width: 640px; margin: 0 auto 56px; }
.pillars-intro p{ font-family: var(--jx-font-heading); font-weight: 400; font-size: 1.5rem; color: var(--jx-navy); margin-bottom: .3em; }
.pillars-intro p:last-child{ margin-bottom: 0; }
.pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.pillar .badge{ margin-bottom: 16px; }
.pillar p{ color: var(--jx-text-muted); font-size: .95rem; }

/* =========================================================
   8. COMO POSSO AJUDAR + CASE
========================================================= */
.services__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 28px;
  margin-top: 32px;
}
.service-item__icon{
  width: 40px; height: 40px;
  margin-bottom: 16px;
  color: var(--jx-green);
}
.service-item h4{ color: #fff; font-size: 1rem; margin-bottom: 8px; }
.service-item p{ color: rgba(255,255,255,.7); font-size: .85rem; }
.services__divider{ border: none; border-top: 1px solid rgba(255,255,255,.2); margin: 56px 0; }
.case{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.case h3{ font-size: clamp(1.5rem, 3vw, 2rem); margin: 12px 0; }
.case p{ color: rgba(255,255,255,.78); max-width: 42ch; }
.case__visual img{ border-radius: var(--jx-radius); }

/* =========================================================
   9. PORTFOLIO GRID (usado no arquivo /projetos/ — archive-projeto.php)
========================================================= */
.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 4px;
}
.portfolio-tile{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.portfolio-tile.is-hidden{ display: none; }
.portfolio-tile img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portfolio-tile__label{ position: relative; z-index: 1; font-family: var(--jx-font-heading); font-weight: 400; font-size: 1.15rem; }
.portfolio-tile--wide{ grid-column: span 2; }
.portfolio-tile--tall{ grid-row: span 1; }
.portfolio-tile:hover .portfolio-tile__label{ text-decoration: underline; }
.portfolio-empty{
  text-align: center;
  padding: 60px 20px;
  border: 2px dashed var(--jx-border);
  border-radius: var(--jx-radius);
  color: var(--jx-text-muted);
}

/* =========================================================
   9B. PORTFOLIO STORY (home) — seção de 100vh, "presa" na tela,
   avançando de projeto em projeto conforme o scroll, com um índice
   (nome + data de cada projeto) fixo na lateral direita pra pular
   direto pra qualquer um. Em telas estreitas (ver media query lá
   embaixo) isso vira uma lista simples, sem scroll travado.
========================================================= */
.portfolio-story{
  position: relative;
  /* cada "slide" ocupa uma tela cheia de rolagem, dando o tempo de
     permanência de cada projeto antes de avançar pro próximo. */
  height: calc(var(--juxlab-slide-count, 6) * 100vh);
}
.portfolio-story__sticky{
  position: sticky;
  top: var(--jx-header-h);
  height: calc(100vh - var(--jx-header-h));
  display: flex;
  align-items: stretch;
  gap: 48px;
  overflow: hidden;
  padding-right: clamp(24px, 4vw, 64px);
  background-color: var(--jx-bg-alt);
  transition: background-color .4s ease;
}
.portfolio-story__main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.portfolio-story__heading{ padding-left: var(--jx-story-inset); }
/* o fundo da seção (acima) é atualizado via JS pra sempre acompanhar
   a cor do projeto ativo — por isso o texto muda de cor também
   (portfolio-story.js calcula se o fundo ficou escuro ou claro). */
.portfolio-story__sticky.is-dark-bg .portfolio-story__main .eyebrow{ color: var(--jx-green); }
.portfolio-story__sticky.is-dark-bg .portfolio-story__main h2{ color: #fff; }
.portfolio-story__main .eyebrow, .portfolio-story__main h2{ transition: color .3s ease; }
.portfolio-story__stage{
  position: relative;
  flex: 1;
  margin-top: 28px;
  overflow: hidden;
  background: transparent;
}
.portfolio-story__slide{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 36px 36px var(--jx-story-inset);
  opacity: 0;
  /* estado de descanso = "cartão" ainda dobrado: virado em 3D e com a
     quina cortada — a mesma transição que o revela também o desdobra. */
  transform: perspective(1400px) rotateY(38deg);
  transform-origin: left center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%);
  transition: opacity .7s ease, transform .7s ease, clip-path .7s ease;
  pointer-events: none;
}
.portfolio-story__slide.is-active{
  opacity: 1;
  transform: perspective(1400px) rotateY(0deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: auto;
}
.portfolio-story__slide img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* quadros/prints (ver 'no_crop' em section-portfolio.php): a imagem
   inteira importa, então ela nunca é cortada — só encolhe/cresce dentro
   do card, com a cor de fundo do tile preenchendo a sobra dos lados.
   Diferença importante pra essas: em vez de ocupar o card inteiro por
   trás do texto (como as fotos comuns, que usam a legenda por cima),
   essa imagem vira mais um item da coluna, ACIMA da legenda — assim
   ela fica delimitada à área de cima do card, sem chegar perto nem
   por trás do título/tags, com um respiro (gap) antes deles. */
.portfolio-story__slide--contain{ gap: 24px; }
.portfolio-story__slide--contain img{
  position: static;
  flex: 1 1 0%;
  min-height: 0;
  object-fit: contain;
  object-position: 50% 50%;
}
/* Título e descrição: MESMA formatação em todo projeto, sem exceção —
   nada de fundo/caixa que apareça só em alguns cards. Uma sombrinha de
   texto (não uma caixa, não um degradê) ajuda a legibilidade em cima
   de foto sem mudar o visual em nada nos cards de cor lisa. */
.portfolio-story__caption{
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
/* Tags de categoria (informativas, não clicáveis) + data do projeto —
   mesma formatação em todo card, fixas em branco (o fundo do slide,
   foto ou cor lisa, é sempre escuro o bastante pelo mesmo motivo do
   título/descrição abaixo). */
.portfolio-story__meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}
.portfolio-story__tag{
  font-family: var(--jx-font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  padding: 3px 10px;
  border-radius: 999px;
  text-shadow: none;
}
/* "Estudo de Caso" (trabalho próprio, sem cliente) ganha a mesma cor
   verde do selo "Case de Sucesso" usado no case em destaque (.badge--green)
   — assim esse selo já nasce reconhecível em qualquer card, independente
   da cor de fundo do slide. "Projeto Profissional" fica na tag padrão
   (cinza/translúcida), igual às tags de categoria. */
.portfolio-story__tag--case{
  color: var(--jx-navy);
  background: var(--jx-green);
}
.portfolio-story__date{
  font-family: var(--jx-font-mono);
  font-size: .68rem;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .7);
}
.portfolio-story__label{
  color: #fff;
  font-family: var(--jx-font-heading);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.portfolio-story__desc{
  color: rgba(255, 255, 255, .82);
  font-family: var(--jx-font-body);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 420px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
.portfolio-story__progress{ display: flex; gap: 8px; margin-top: 20px; padding-left: var(--jx-story-inset); }
.portfolio-story__progress span{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--jx-border);
  transition: width .2s ease, border-radius .2s ease, background .2s ease;
}
.portfolio-story__progress span.is-active{ width: 22px; border-radius: 4px; background: var(--jx-blue); }
/* Índice lateral: nome + data de cada projeto, pra pular direto pra
   qualquer um deles (clique = rola até o trecho certo da seção presa,
   ver jumpTo em portfolio-story.js) — substitui o antigo filtro por
   categoria (que virou tag dentro do próprio card, lá em cima). */
.portfolio-story__nav{
  flex-shrink: 0;
  width: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.portfolio-story__nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* projetos demais não estouram a tela — rola só essa lista. */
  max-height: 100%;
  overflow-y: auto;
}
.portfolio-story__nav-item{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  color: var(--jx-text-muted);
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s ease, color .2s ease;
}
.portfolio-story__nav-item:hover{ background: rgba(0, 0, 0, .05); color: var(--jx-navy); }
.portfolio-story__nav-sparkle{
  display: none;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--jx-blue);
}
.portfolio-story__nav-item.is-active{
  background: rgba(0, 0, 0, .06);
  color: var(--jx-navy);
}
.portfolio-story__nav-item.is-active .portfolio-story__nav-sparkle{ display: inline-flex; }
.portfolio-story__nav-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.portfolio-story__nav-name{
  font-family: var(--jx-font-heading);
  font-size: .85rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio-story__nav-item.is-active .portfolio-story__nav-name{ color: var(--jx-blue); }
.portfolio-story__nav-date{
  font-family: var(--jx-font-mono);
  font-size: .64rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--jx-text-muted);
}
.portfolio-story__nav-all{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  font-family: var(--jx-font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--jx-blue);
  text-decoration: none;
}
.portfolio-story__nav-all:hover{ text-decoration: underline; }
.portfolio-story__nav-all span{ display: inline-block; transition: transform .2s ease; }
.portfolio-story__nav-all:hover span{ transform: translateX(3px); }
/* fundo dinâmico escuro (mesma lógica do título): índice ainda sem
   seleção vira claro pra continuar legível em cima de qualquer cor. */
.portfolio-story__sticky.is-dark-bg .portfolio-story__nav-item{ color: rgba(255, 255, 255, .65); }
.portfolio-story__sticky.is-dark-bg .portfolio-story__nav-item:hover{ background: rgba(255, 255, 255, .1); color: #fff; }
.portfolio-story__sticky.is-dark-bg .portfolio-story__nav-item.is-active{ background: rgba(255, 255, 255, .14); color: #fff; }
.portfolio-story__sticky.is-dark-bg .portfolio-story__nav-item.is-active .portfolio-story__nav-name{ color: #fff; }
.portfolio-story__sticky.is-dark-bg .portfolio-story__nav-date{ color: rgba(255, 255, 255, .55); }
.portfolio-story__sticky.is-dark-bg .portfolio-story__nav-all{ color: var(--jx-green); }

/* Fallback pra telas estreitas: sem scroll travado, vira uma lista
   simples empilhada (o JS também desliga o scroll-jack nesse breakpoint). */
@media (max-width: 900px){
  .portfolio-story{ height: auto; }
  .portfolio-story__sticky{
    position: static;
    height: auto;
    flex-direction: column;
    overflow: visible;
    padding: 0 20px;
  }
  .portfolio-story__heading{ padding-left: 0; }
  .portfolio-story__stage{ height: auto; }
  .portfolio-story__slide{
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    pointer-events: auto;
    height: auto;
    min-height: 220px;
    padding: 24px;
    margin-bottom: 4px;
  }
  .portfolio-story__progress{ display: none; }
  .portfolio-story__nav{
    width: auto;
    margin: 24px 0 0;
  }
  .portfolio-story__nav-list{ max-height: none; overflow: visible; }
  .portfolio-story__nav-name{ white-space: normal; }
}

/* =========================================================
   10. FOOTER
========================================================= */
.site-footer{ background: var(--jx-navy); color: rgba(255,255,255,.7); padding: 64px 0 28px; }
.site-footer a:hover{ color: var(--jx-green); }
.footer__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__brand .site-title{ color: #fff; }
.footer__brand p{ margin-top: 12px; max-width: 32ch; }
.footer h5{ color: #fff; font-family: var(--jx-font-mono); text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; margin-bottom: 16px; }
.footer__col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer__bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: .85rem;
  flex-wrap: wrap;
  gap: 12px;
}
.social-links{ display: flex; gap: 14px; }

/* =========================================================
   11. GENERIC CONTENT PAGES (compatível com Elementor)
========================================================= */
.entry-content{ padding: 64px 0; max-width: 780px; margin: 0 auto; }
.entry-content img{ border-radius: var(--jx-radius); }
.page-header{ padding: 56px 0 0; text-align: center; }

/* Quando o Elementor está editando/renderizando a página,
   removemos o padding-top padrão do conteúdo para não duplicar
   o espaçamento das seções do Elementor. */
.elementor-page .entry-content{ padding: 0; max-width: none; }

/* =========================================================
   12. RESPONSIVO
========================================================= */
@media (max-width: 960px){
  .hero__grid, .about__grid, .case{ grid-template-columns: 1fr; }
  .about__visual{ order: -1; max-width: 320px; margin: 0 auto; }
  .pillars-grid{ grid-template-columns: repeat(2, 1fr); }
  .services__grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){
  .main-navigation{ display: none; }
  .menu-toggle{ display: block; }
  .header-cta .btn span{ display: none; }
}
@media (max-width: 560px){
  .pillars-grid, .services__grid, .footer__grid, .portfolio-grid{ grid-template-columns: 1fr; }
  .portfolio-tile--wide{ grid-column: span 1; }
  .hero__phones{ transform: scale(.85); transform-origin: bottom center; }
}