/* Overrides — Kauê Siqueira (Tebe DS: Noto Sans no corpo) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
:root {
  --font-primary: 'Noto Sans', 'Roboto', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;
  --accent-color: #e3c98f;
}
html {
  font-size: var(--base-font-size, 16px);
  /* Reserva espaço fixo para a scrollbar vertical mesmo quando ela não está
     visível — elimina o layout shift de largura que ocorre quando a página
     passa de sem-scroll para com-scroll. "stable" faz o browser tratar a
     gutter como parte do viewport desde o início, então elementos em
     width:100%/grid/flex nunca são recalculados ao aparecer ou sumir a
     barra. Suporte: Chrome 94+, Safari 15.4+, Firefox 97+. */
  scrollbar-gutter: stable;
}
/* Sobrescreve o display font hardcoded do template (h1–h6) com a variável
   controlada pelo CMS. Precisa vir depois de ms-main.css para ganhar em
   especificidade sem !important. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
.case-meta { display:flex; flex-wrap:wrap; gap:2.5rem; margin:2rem 0 3rem; padding:1.5rem 0; border-top:1px solid rgba(128,128,128,.25); border-bottom:1px solid rgba(128,128,128,.25); }
.case-meta__item span { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; opacity:.6; margin-bottom:.35rem; }
.case-meta__item strong { font-weight:700; }
.case-findings li { margin-bottom:.75rem; }

/* ---- CMS: layout do corpo do case com sumário lateral ---- */
.case-body-layout { display:flex; gap:3.5rem; align-items:flex-start; }
.case-toc { position:sticky; top:calc(var(--main-header-height-md, 60px) + 2rem); flex:0 0 200px; padding-top:.5rem; max-height: calc(100vh - var(--main-header-height-md, 60px) - 4rem); overflow-y: auto; }
.case-toc ul { list-style:none; margin:0; padding:0; border-left:2px solid rgba(128,128,128,.25); }
.case-toc a { display:block; padding:.4rem 0 .4rem 1rem; font-size:.85rem; opacity:.65; text-decoration:none; transition:opacity .15s, border-color .15s; border-left:2px solid transparent; margin-left:-2px; }
.case-toc a:hover { opacity:1; }
.case-body { flex:1 1 auto; min-width:0; }

/* O tema define .ms-page.text-component { font-size: var(--text-sm) } —
   0.833em — encolhendo o corpo de todo o case. Restaura para 1em (herda
   do --base-font-size configurado pelo usuário no admin). */
.case-body,
[data-case-root] .case-body { font-size: 1em; }

/* p, li e blockquote dentro do case-body herdam --text-sm duplamente
   empilhado (.ms-page.text-component já reduz o container, depois
   .text-component p/li aplica --text-sm de novo). Fixa em 1rem para
   corresponder ao base-font-size sem depender de herança em cascata. */
[data-case-root] .case-body p,
[data-case-root] .case-body li,
[data-case-root] .case-body blockquote { font-size: 1rem; }

/* Dentro de .text-component (o wrapper do case-root), o template original
   sobrescreve font-family dos headings para --font-primary (corpo). Resgata
   --font-display (Bebas Neue ou o que estiver configurado) e define tamanhos
   em rem para não depender de cascata de em aninhados. */
.case-body h2,
.case-body h3,
.case-body h4,
[data-case-root] .case-body h2,
[data-case-root] .case-body h3,
[data-case-root] .case-body h4 {
  font-family: var(--font-display) !important;
  font-weight: normal !important;
  letter-spacing: .5pt;
}
[data-case-root] .case-body h2 { font-size: 2rem; margin-bottom: 1rem; }
[data-case-root] .case-body h3 { font-size: 1.5rem; margin-bottom: .75rem; }
[data-case-root] .case-body h4 { font-size: 1.2rem; margin-bottom: .6rem; }
@media (max-width: 900px) { .case-body-layout { flex-direction:column; } .case-toc { position:static; flex:none; width:100%; } }

/* ---- CMS: estatísticas em destaque ---- */
.stat-group { display:flex; flex-wrap:wrap; gap:2rem; margin:1.5rem 0; }
.stat-item { flex:1 1 160px; min-width:140px; }
.stat-number { display:block; font-family:var(--font-display); font-size:3.2rem; line-height:1; letter-spacing:.02em; color:var(--accent-color); }
.stat-label { display:block; margin-top:.4rem; font-size:.85rem; opacity:.75; line-height:1.4; }
.stat-footnote { margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(128,128,128,.25); font-size:.9rem; opacity:.8; }

/* ---- CMS: texto com imagem ancorada ---- */
.text-with-image { display:flex; gap:2rem; align-items:flex-start; margin-top:1rem; }
.text-with-image__text { flex:1 1 55%; }
.text-with-image__figure { flex:1 1 45%; margin:0; }
.text-with-image__figure img { width:100%; height:auto; display:block; border-radius:4px; }
.text-with-image__figure.img-missing { display:flex; align-items:center; justify-content:center; min-height:200px; background:rgba(128,128,128,.08); border:1px dashed rgba(128,128,128,.35); }
.text-with-image__figure.img-missing img { display:none; }
.text-with-image__figure.img-missing::after { content:"Imagem pendente — ver admin.html"; font-size:.75rem; opacity:.6; }
.post_feautured.img-missing { display:flex; align-items:center; justify-content:center; background:rgba(128,128,128,.08); border:1px dashed rgba(128,128,128,.35); }
.post_feautured.img-missing img { display:none; }
.post_feautured.img-missing::after { content:"Imagem de destaque pendente — envie pelo admin.html (card.png / hero.png)"; font-size:.8rem; opacity:.6; padding:2rem; text-align:center; }
@media (max-width: 700px) { .text-with-image { flex-direction:column; } }


/* O template só pinta o ícone do menu mobile de branco nos modificadores
   .transparent-bg / .full-slider (usados só na home) — nas páginas internas,
   sem esses modificadores, o ícone cai no padrão do tema claro do template.
   Como este site é 100% tema escuro, força-se branco sempre. */
.main-header__nav-trigger { color:#fff; }

/* O template esconde as setas de navegação do Parallax em mobile (assumindo
   que o toque resolveria), mas a configuração do Swiper também desativa o
   toque (simulateTouch: false) — sem isso, ninguém navega em touch. Mantém
   as setas visíveis também em mobile para não deixar a navegação sem saída. */
.swiper-full-parallax .slide-title-container .slide-info-left .slider-nav {
  display: flex !important;
}

/* O template deixa o cabeçalho da home (full-slider) sem nenhum véu de fundo,
   apostando que a foto de fundo será sempre escura o bastante para o texto
   branco ter contraste. Como o CMS permite qualquer imagem (inclusive claras,
   como um retrato), o menu pode ficar ilegível sem isso. Gradiente sutil
   garante contraste sempre, sem voltar ao véu opaco das páginas internas. */
/* O template remove padding e borda do botão de menu em telas <1024px,
   deixando só ícone+texto soltos (sem a "pílula" que a demo do template
   mostra). Restaura a aparência de botão em qualquer largura de tela. */
@media only screen and (max-width: 1024px) {
  .main-header__nav-trigger {
    padding: calc(var(--space-xs) + 2pt) var(--space-md) !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    background-color: transparent !important;
  }
}

/* Gradiente do topo removido a pedido — o menu volta a depender só da cor
   branca do texto/ícone para contraste, sem véu de fundo garantido. */
/* Setas do Parallax no rodapé, em qualquer largura de tela (antes só em
   mobile) — no desktop elas ficavam do lado do título (margin-right:50px),
   empurrando "Setup Industrial" pra mais perto do centro/direita da imagem
   sem necessidade. Mesmo tratamento visual que o mobile já usava (e o Fade
   também usa, ainda que lá com rotação de 90°, que não se aplica aqui: as
   setas do Parallax já são cima/baixo). */
.swiper-full-parallax .slide-title-container .slide-info-left .slider-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 99;
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 2rem 0 4.5rem;
  margin-right: 0;
}

/* O template zera margens de h1/p (reset global) e usa um espaçamento genérico
   grande (--space-xxl) depois do hero, pensado para quando ele é seguido por
   texto comum — não por uma imagem de destaque logo abaixo, como nos nossos
   cases. Sem ajuste, título/subtítulo ficam colados e o hero fica longe
   demais da imagem. */
.hero__content p[data-hero-sub] { margin-top: .6rem; }
.hero-default:has(+ .ms-content--portfolio) { margin-bottom: var(--space-lg); }

/* O rodapé "pulando" durante a transição de filtro do Isotope: o wrapper
   (não o container do Isotope em si, que tem o `style` reescrito inteiro a
   cada filtro) segura a altura antiga via min-height, e a suavização é toda
   calculada quadro a quadro em JS (ver app.js, ms_portfolio_fiter) — uma
   transição de CSS aqui causava um solavanco perto do frame final quando o
   min-height cruzava a altura real do conteúdo, então de propósito não usamos
   `transition` nessa propriedade. */

/* Caixa do "Próximo case" (.s-p-next) menor que o padrão do template
   (max-height:25vw) — metade disso, 12.5vw. */
.single-portfolio-nav .s-p-next { max-height: 12.5vw; }

/* Hover/clique pra selecionar um case no slider da home (Fade/Parallax)
   funcionava só em cima do texto pequeno "Ver case" — o resto do bloco
   (categoria, título grande) não reagia nem navegava. .slide-hit-area é uma
   camada invisível (ver render.js) cobrindo o bloco inteiro: cliques em
   qualquer ponto navegam, e o hover nela também dispara a mesma animação do
   link pequeno (linha/seta), dando feedback visual mesmo longe do texto.
   .slide-link continua do tamanho original de propósito — a animação
   (::before/::after) é posicionada relativa a ELE, alargar o link quebraria
   esse posicionamento. */
.slide-title { position: relative; }
.slide-title .slide-hit-area {
  position: absolute; inset: 0; z-index: 2;
  outline: none;
}
/* Desktop (acima de 48rem/768px): hover em qualquer ponto do bloco dispara
   exatamente a MESMA animação que o tema já tinha (linha encolhe, vira
   círculo+seta) — nenhum reposicionamento customizado, nenhum fade de
   texto. É só espelhar `.slide-link:hover` (que só reage hovering o link
   pequeno) para `.slide-title:hover` (área inteira, via .slide-hit-area). */
@media (min-width: 48.0625rem) {
  .slide-title:hover .slide-link span {
    transform: translate(-50%, -50%) scale(.01, 1);
  }
  .slide-title:hover .slide-link::before {
    transform: translate(-100%, -50%) scale(1, 1);
    background: #fff;
  }
  .slide-title:hover .slide-link::after {
    transform: translate(-100%, -50%) scale(.5, .5);
  }
}

/* Mobile/tablet (48rem/768px pra baixo): sem animação de hover nenhuma —
   igual o comportamento original do tema nesse breakpoint. O ícone
   (::before/::after) já fica sempre visível ali (regra própria do tema,
   translate(120%) fixo, não depende de hover) — o problema é que ele tem
   z-index mais alto que o .slide-hit-area, então passar o mouse bem em
   cima dos pixels do ícone ainda acerta o `.slide-link` de verdade e
   dispara o `.slide-link:hover` do tema, calibrado pro ícone de 48px do
   desktop (aqui já é 32px) — sobrepondo o texto de forma inconsistente
   (só acontece bem em cima do ícone, nada no resto do bloco). pointer-
   events:none nos pseudo-elementos garante que o mouse sempre "atravessa"
   pro hit-area por baixo, então nunca aciona esse hover — nenhuma
   animação em lugar nenhum do bloco, como no tema original. */
@media (max-width: 48rem) {
  .slide-link::before,
  .slide-link::after {
    pointer-events: none;
  }
}



/* ---- CMS: vídeo/GIF no slider da home ---- */
/* Espelha as regras que ms-main.css dá ao <img> de .slide-image nos três
   layouts (fade, parallax e carousel). Uma regra só cobre os três porque
   .slide-image é comum a todos; o object-position aqui é apenas o padrão —
   o ponto focal do case chega por style inline e ganha por especificidade. */
.slide-image video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- CMS: embeds externos (YouTube, Spline) no slider da home ---- */
/* O slot já nasce com o poster como fundo: é ele que aparece enquanto o
   embed carrega, e é ele que FICA quando o visitante pediu menos movimento
   (ou, no Spline, quando não há WebGL) — nesses casos nada é baixado, ver
   setupSlideEmbeds. */
.slide-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}
.slide-embed canvas,
.slide-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* O player do YouTube é sempre 16:9 e não aceita object-fit (é um iframe,
   não uma mídia). Largura, altura e âncora do ponto focal são calculadas em
   fitEmbedCover() a partir do tamanho REAL do slot — não dá pra fazer aqui
   porque o slot muda de proporção por layout (no carrossel, .slide-image tem
   120% de largura) e a cada resize. O que sobra é cortado pelo overflow.

   Nasce transparente: enquanto o player carrega ele mostra a própria UI
   (play/pause, título), e controls=0 não cobre esse intervalo. Quem acende
   é revealWhenPlaying(), quando o vídeo de fato começa — até lá fica o
   poster, que já é o fundo do slot. */
.slide-embed .slide-embed__cover {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  pointer-events: none; /* pano de fundo: não rouba clique do slider */
  opacity: 0;
  transition: opacity .45s ease;
}
.slide-embed .slide-embed__cover.is-ready { opacity: 1; }

/* ---- CMS: logo sobreposto ao card da grade ---- */
/* Camada sobre o quadro do card, não parte da imagem — por isso não é
   afetado pelo object-fit:cover que recorta a imagem por baixo. width vem
   inline (% da largura do quadro) e a altura sai por proporção; left/top são
   o CENTRO do logo, daí o translate de -50%. */
.work-card__logo {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
/* img.work-card__logo (0,1,1), não .work-card__logo (0,1,0): o tema define
   `.media-wrapper img { height:100% }` com especificidade (0,1,1) e venceria
   o height:auto daqui, esticando o logo até o rodapé do card. Empatando a
   especificidade, este arquivo ganha por vir depois de ms-main.css. Só se
   aplica ao modo "Original" (<img>) — o modo "Cor sólida" usa <span> (ver
   .work-card__logo--solid), que não é afetado por essa regra do tema. */
img.work-card__logo {
  height: auto;
  max-width: none;
  object-fit: contain;
}
/* "Cor sólida": o SVG vira uma máscara — o navegador usa o canal alfa dele
   como estêncil e pinta por baixo com background-color. Funciona com
   qualquer SVG (múltiplos paths, gradientes) sem reescrever o arquivo.
   aspect-ratio vem inline (capturado do viewBox no upload, ver admin.html)
   porque um <span> vazio não tem proporção própria como um <img> tem. */
.work-card__logo--solid {
  display: block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}