/* ==============================================================
   HOME — index.html apenas: hero, sobre, clientes, projetos em
   destaque, depoimento, FAQ, últimos conteúdos e "vamos conversar".
   ============================================================== */

/* ===== Hero ===== */
.hero {
  position: relative;
  background: #f5f5f5;
  padding: 0px 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.hero-inner {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  align-items: center;
  gap: var(--grid-gutter);
}

/* Subgrid local de 8 colunas (mesmo número que .hero-content ocupa no
   grid pai) para que h1 e p tenham a largura das colunas do site, em
   vez de frações da largura do próprio .hero-content. z-index acima do
   .hero-media pra ficar por cima do 3D onde as duas áreas se sobrepõem. */
.hero-content {
  grid-column: span 7;
  z-index: 2;
  align-self: start;
  margin-top: 300px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 16px;
  column-gap: var(--grid-gutter);
  min-width: 0;
}

.hero-content h1 {
  grid-column: span 7;
  line-height: 1.1;
}

/* Caixa laranja atrás de cada palavra do título no hover — ::before
   posicionado (não padding, pra não empurrar o texto ao redor) com
   z-index negativo contido pela própria stacking context da palavra
   (position:relative + z-index:0), então fica atrás do texto sem
   arriscar ficar atrás de outra coisa na página. */
.hero-word {
  position: relative;
  z-index: 0;
  display: inline-block;
  transition: color 0.2s ease;
}

.hero-word:hover {
  color: var(--gray-01);
}

.hero-word::before {
  content: '';
  position: absolute;
  inset: -6px -8px 0px -8px;
  z-index: -1;
  background: var(--orange-accent);
  border-radius: 4px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-word:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* .hero-info é o item de grid (não o <p>, que agora fica dois níveis mais
   fundo dentro de .rise-inner pro reveal-rise funcionar — ver .word-fade/
   .rise-inner em base.css e a inicialização em script.js). */
.hero-info {
  grid-column: span 5;
  min-width: 0;
}

.hero-info p {
  font-size: 20px;
}

/* Começa na coluna 5 (sobrepõe as colunas 5-8 do título, ficando por
   trás dele) e vai até a borda direita (coluna 12). margin-top negativo
   empurra o modelo pra cima até a diagonal cruzar por trás do texto. */
.hero-media {
  grid-column: 6 / 13;
  z-index: 1;
  min-width: 0;
  margin-top: -500px;
}

/* Cena 3D (Blender > glTF, via hero-3d.js). Não existe imagem de fallback
   no carregamento normal da página — só o 3D. #hero-3d nasce com opacity:0
   e ganha .is-ready quando o glTF termina de carregar, pra não piscar um
   canvas vazio antes do modelo aparecer. A imagem (.hero-media-fallback) só
   é criada via JS, substituindo o próprio #hero-3d, se o WebGL falhar ou o
   modelo não carregar — nesses casos raros ela usa o reset global de img
   (max-width:100%), sem precisar de regra própria aqui. */
#hero-3d {
  width: 100%;
  aspect-ratio: 1 / 0.75;
  opacity: 0;
  transition: opacity .6s ease;
}

#hero-3d.is-ready { opacity: 1; }

#hero-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  #hero-3d { aspect-ratio: 1 / 1; }
}

/* ===== About =====
   Duas seções separadas, por Figma: o vídeo não tem padding próprio e
   fica sobre #f5f5f5 (explícito aqui — o body do site é branco, não
   #f5f5f5, então "transparent" mostraria a cor errada por trás) e o
   texto tem 160px de padding vertical com um gradiente branco → #f5f5f5. */
.about-media-section {
  background: #f5f5f5;
}

/* .about-media é o próprio container do vídeo agora (sem capa/imagem
   estática por cima) — o iframe do YouTube e o shield .video-toggle,
   criados via JS em script.js assim que a página carrega, só preenchem
   essa caixa (ver .about-media iframe/.video-toggle mais abaixo). */
.about-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-width: 0;
}

.about-content-section {
  background: linear-gradient(to top, var(--white), #f5f5f5);
  padding: 160px 0;
}

.about-content-row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

/* Per Figma: o bloco inteiro (h2 + p + link) ocupa 7 colunas do site,
   não só o parágrafo — por isso .about-content em si é span 7, e h2/p/
   link só precisam ser 100% da própria largura (sem subgrid). */
.about-content {
  grid-column: span 6;
  min-width: 0;
}

.about-content p {
  width: 100%;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--gray-06);
}

/* Títulos ao lado do texto, empilhados numa coluna só — encostados nas
   4 últimas colunas do grid de 12 (posição fixa, não span auto-flow). */
.about-content-topics {
  grid-column: 9 / 13;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-content-topics h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--gray-07);
}

.about-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --video-hover-scale calculado via JS (script.js) — cresce até faltar
   120px pra cada borda da viewport, mesmo respiro lateral do
   .header-inner (componentes.css), em vez de uma % fixa. */
.about-media:hover video {
  transform: scale(var(--video-hover-scale, 1.04));
}

/* Botão transparente por cima do vídeo — sem ícone visível (o play/pause
   da prévia já é 100% automático pelo hover, ver script.js). Clicar abre
   o .video-lightbox (mais abaixo) em vez de tocar/pausar essa prévia.
   Continua clicável/focável (aria-label) pra touch e teclado, que não
   têm hover de verdade. */
.video-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1;
}

/* Cursor nativo some sobre o vídeo — o box .cursor-tag ("Assistir
   Showreel", ver CURSOR_CARD_GROUPS em script.js) assume o lugar, igual
   já acontece nos cards de projeto/conteúdo. Só com mouse de verdade. */
@media (pointer: fine) {
  .about-media { cursor: none; }
}

/* Lightbox do vídeo — clique no .video-toggle abre o showreel em tela
   cheia, tocando do início e com áudio (ao contrário da prévia muda do
   hover). Mesmo padrão visual/estrutural do .project-lightbox
   (projetos.css/script.js): overlay escuro, X pra fechar, Esc/clique
   fora fecha, reaproveita o body.lightbox-open genérico (trava o scroll).
   Controls nativos aqui são só a UI do próprio navegador — sem marca de
   terceiro nenhuma. */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 16, 0.94);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-lightbox:not([hidden]) {
  display: flex;
}

.video-lightbox.is-open { opacity: 1; }

.video-lightbox-figure {
  width: 88vw;
  height: 82vh;
  display: flex;
  transform: scale(0.97);
  transition: transform 0.25s ease;
}

.video-lightbox.is-open .video-lightbox-figure { transform: scale(1); }

.video-lightbox-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.video-lightbox-close {
  position: absolute;
  top: 28px;
  right: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease;
}

.video-lightbox-close:hover,
.video-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.video-lightbox-close svg {
  width: 13px;
  height: 13px;
}

/* ===== Clients ===== */
.clients {
  background: #f5f5f5;
  padding: 80px 0;
}

.clients-heading {
  margin-bottom: 80px;
}

/* Grid de verdade (não flex com largura fixa): span 2 sempre encaixa
   exatas 6 por linha (12/2) em qualquer largura de viewport, já que é
   uma fração do grid, não um px fixo — 220px só bate exato na largura
   de referência (1920px), mas a proporção 2/12 nunca quebra. */
.clients-row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  row-gap: 40px;
  column-gap: var(--grid-gutter);
}

.client-logo {
  grid-column: span 2;
  aspect-ratio: 1 / 1;
  padding: 32px;
  background: var(--white);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sobrescreve o transition de .reveal (opacity/transform em 0.8s): mesma
     curva, mas transform e box-shadow em 0.4s pra levantar no hover sem
     herdar a cadência lenta da entrada por scroll. Opacity continua 0.8s
     pra não mudar o fade-in. */
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-logo:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 32px rgba(35, 36, 40, 0.12);
}

/* Cada marca no seu tamanho natural (sem forçar todas ao mesmo tamanho),
   só limitado pra não estourar a box. */
.client-logo img { max-height: 100%; max-width: 100%; width: auto; }

/* Box reservada pra marca ainda sem arquivo de logo — trocar o texto pelo
   <img> assim que o SVG chegar. */
.client-logo--placeholder {
  background: var(--gray-01);
  border: 1px dashed var(--gray-04);
  color: var(--gray-05);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  line-height: 1.3;
}

/* ===== Depoimento ===== */
.home-testimonial {
  background: #f5f5f5;
  padding: 120px 0;
}

.home-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.home-testimonial-content {
  grid-column: span 9;
  min-width: 0;
  position: relative;
}

.home-testimonial-slide {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.home-testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.home-testimonial-nav {
  grid-column: span 3;
  align-self: start;
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}

/* Mesma duração/curva da transição da bola (.site-cursor-dot em
   componentes.css) — ela some exatamente enquanto a seta esquenta pra
   laranja, lendo como uma transição só, não duas animações soltas. */
.home-testimonial-arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--gray-07);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 4px;
}

.home-testimonial-arrow:hover,
.home-testimonial-arrow:focus-visible {
  color: var(--orange-accent);
}

.home-testimonial-arrow svg {
  width: 28px;
  height: 24px;
}

.home-testimonial-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  font-size: 32px;
  line-height: 1.3;
  color: var(--gray-07);
}

.home-testimonial-author {
  display: flex;
  flex-direction: column;
  font-size: 32px;
}

.home-testimonial-name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--gray-07);
}

.home-testimonial-company {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--gray-07);
}

/* ===== FAQ ===== */
.home-faq {
  background: #f5f5f5;
  padding: 80px 0;
}

.home-faq-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.home-faq-heading {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-faq-heading p {
  color: var(--gray-06);
}

.home-faq-heading p {
  font-size: 20px;
  max-width: 538px;
}

.home-faq-list {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-faq-item {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0);
  transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-faq-item:hover,
.home-faq-item:has(:focus-visible) {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.home-faq-item:hover .home-faq-arrow,
.home-faq-item:has(:focus-visible) .home-faq-arrow {
  color: var(--orange);
}

.home-faq-question {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 40px;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  color: var(--gray-07);
}

.home-faq-question span {
  flex: 1 0 0;
}

.home-faq-arrow {
  flex: none;
  width: 14px;
  height: auto;
  color: var(--gray-04);
  transition: transform 0.3s ease, color 0.2s ease;
}

.home-faq-question[aria-expanded="true"] .home-faq-arrow {
  transform: rotate(180deg);
}

/* Fechada por padrão: some via grid-template-rows (0fr -> 1fr), mesmo
   truque do accordion de Serviços — a altura acompanha o texto real em
   qualquer tamanho de resposta. O <p> interno precisa do overflow:hidden
   pra clipar durante a animação. */
.home-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 40px;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease, padding-bottom 0.4s ease;
}

.home-faq-item.is-open .home-faq-answer {
  grid-template-rows: 1fr;
  padding-bottom: 24px;
  opacity: 1;
}

.home-faq-answer p {
  overflow: hidden;
  font-size: 16px;
  font-weight: 300;
  color: var(--gray-06);
}

/* ===== Vamos conversar ===== */
.home-talk {
  background: var(--gray-07);
}

/* Grid de 12 colunas: conteúdo (5) + coluna vazia (1) + formulário (5)
   + coluna vazia (1) — por pedido explícito, não auto-flow. */
.home-talk-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
  align-items: flex-start;
  padding: 120px 0;
  border-bottom: 2px solid var(--gray-06);
}

.home-talk-content {
  grid-column: 1 / span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
}

.home-talk-content h2 {
  font-size: 40px;
  line-height: 1.1;
  color: var(--gray-01);
}

.home-talk-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 32px;
}

.home-talk-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray-01);
}

.home-talk-sub {
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray-05);
  max-width: 578px;
}

.home-talk-whatsapp {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 16px;
  padding: 0;
  border-bottom: 2px solid var(--gray-06);
  font-size: 20px;
  color: var(--gray-01);
}

.home-talk-whatsapp:hover {
  border-bottom: 2px solid var(--gray-01);
}

.home-talk-whatsapp:hover .seta-svg-link {
  color: var(--gray-01);
  transform: translateX(4px);
}

.seta-svg-link {
  fill: var(--gray-06);
  width: 18px;
  height: 14px;
  color: var(--gray-06);
  transition: color 0.3s ease, transform 0.3s ease;
}

.home-talk-form {
  grid-column: 7 / span 5;
  min-width: 0;
}

.home-talk-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Reaproveita .form-field (modulos/componentes.css) — os campos em si
   já são escuros por padrão (ver componentes.css), então só falta o
   label (escuro por padrão, mas essa seção tem fundo escuro) e o
   layout/feedback específicos daqui. */
.home-talk .form-field { margin-bottom: 0; max-width: 570px; }
.home-talk .form-field label { color: var(--gray-01); }
.home-talk .form-submit { max-width: 570px; }
.home-talk .form-feedback { text-align: left; color: var(--gray-04); }
.home-talk .form-feedback.is-success { color: var(--orange); }

/* ===== Projects (home) =====
   Sem padding vertical próprio, por Figma — o respiro antes/depois vem
   do padding das seções vizinhas (texto do Sobre e o link "Explore"). */
.home-projects {
  background: var(--white);
}

.home-projects-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 80px;
}

.home-projects-heading p {
  font-size: 20px;
}

.home-projects-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter) var(--grid-gutter);
  row-gap: 80px;
  margin-bottom: 80px;
}

.home-project-card {
  grid-column: span 4;
  display: block;
  position: relative;
  /* Mesmo bug do .content-row: sem isolation, o ::before de z-index:-1
     escapa pra trás do background próprio de .home-projects (var(--white)),
     que pinta por cima e engole o halo inteiro — não só a cor, a sombra
     também sumia. Isolation prende o halo acima desse fundo. */
  isolation: isolate;
}

/* Mesma receita de .content-card (modulos/conteudo.css): halo branco +
   sombra no hover. .home-projects já é branco, então o background em si
   não gera contraste aqui — a sombra é quem carrega o efeito, de propósito
   (mesmo valor de background das outras páginas, não uma cor alternativa). */
.home-project-card::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0);
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-project-card:hover::before,
.home-project-card:focus-visible::before {
  background: var(--white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

@media (pointer: fine) {
  .home-project-card { cursor: none; }
}

.home-project-card-image {
  aspect-ratio: 421 / 329;
  overflow: hidden;
  margin-bottom: 40px;
}

/* Projeto ainda sem capa real (ver data/projects.json): bloco cinza no
   lugar do <img>, fácil de trocar depois quando a foto chegar. */
.home-project-card-image.is-placeholder {
  background: var(--gray-04);
}

.home-project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.home-project-card:hover .home-project-card-image img,
.home-project-card:focus-visible .home-project-card-image img {
  transform: scale(1.04);
  filter: blur(5px);
}

.home-project-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-project-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-variation-settings: "wdth" 100;
  font-size: 32px;
  line-height: 1;
  color: var(--gray-07);
}

.home-project-card-excerpt {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.4;
  color: var(--gray-07);
}

.home-project-card-tags {
  font-weight: 300;
  font-size: 16px;
  color: var(--gray-06);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.home-project-card:hover .home-project-card-tags,
.home-project-card:focus-visible .home-project-card-tags {
  opacity: 1;
}

/* Link centralizado, com borda, usado ao fim de várias seções da home
   (projetos, conteúdos) — mesmo tratamento visual do Figma nos dois
   lugares. */
.section-more-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 16px;
  padding: 0;
  margin: 0 auto;
  border-bottom: 2px solid var(--gray-04);
  font-size: 20px;
  color: var(--gray-07);
  transition: border-color 0.3s ease;
}

.section-more-link .seta-svg-link {
  color: var(--gray-04);
}

.section-more-link:hover {
  border-bottom-color: var(--gray-07);
}

.section-more-link:hover .seta-svg-link {
  color: var(--gray-07);
  transform: translateX(4px);
}

/* .home-projects não tem padding-bottom próprio (ver acima) — esse
   respiro extra representa o pb-80 que, no Figma, é da seção dedicada
   só pro link "Explore todos os Projetos" (o pt-80 dela já vem do
   margin-bottom de .home-projects-grid). */
.home-projects .section-more-link {
  margin-bottom: 80px;
}

/* ===== Últimos conteúdos (preview) ===== */
.content-section {
  background: #f5f5f5;
  padding: 80px 0;
}

.home-content-heading {
  display: flex;
  gap: var(--grid-gutter);
  align-items: flex-start;
  margin-bottom: 40px;
}

.home-content-heading h2 { flex: 0 0 756px; }
.home-content-heading p { flex: 0 0 418px; font-size: 20px; color: var(--gray-06); }

.content-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 80px;
}

.content-row {
  display: grid;
  grid-template-columns: minmax(280px, 630px) 1fr;
  column-gap: 182px;
  padding: 40px 0;
  border-bottom: 1px solid var(--gray-04);
  position: relative;
  /* Sem isolation a row não forma contexto de empilhamento próprio (só
     position:relative + z-index:auto não conta), então o ::before de
     z-index:-1 abaixo escapa pra trás do background sólido de
     .content-section — a sombra nunca aparecia. Isolation prende o halo
     dentro da própria row, acima do fundo da seção. */
  isolation: isolate;
}

/* Halo menor que o de .content-card (16px, não 24px): a row já tem 40px de
   padding vertical próprio, então um inset de -24px vazaria pro padding da
   próxima row (empilhadas sem gap, só a borda entre elas). -16px fica
   contido dentro do próprio padding da row.
   Em cima/embaixo o inset parte do padding-box da row (que já inclui os
   40px de padding vertical), então -16px ali somaria 40+16=56px até a
   imagem — bem mais que os 16px nas laterais (sem padding horizontal).
   +24px em vez de -16px puxa o halo 24px pra dentro do padding, pousando
   a 16px da imagem/texto — mesma distância dos quatro lados. */
.content-row::before {
  content: "";
  position: absolute;
  inset: 16px -24px;
  z-index: -1;
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0);
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-row:hover::before,
.content-row:focus-visible::before {
  background: var(--white);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

@media (pointer: fine) {
  .content-row { cursor: none; }
}

.content-list .content-row:last-child {
  border-bottom: 1px solid var(--gray-04);
}

.content-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 630 / 320;
  align-self: start;
}

.content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.content-row:hover .content-image img,
.content-row:focus-visible .content-image img {
  transform: scale(1.04);
  filter: blur(5px);
}

/* Escala maior que o card compacto do hub de Conteúdos (mesmas classes,
   .news-card-*, ver modulos/conteudo.css) — só aqui dentro do preview
   da home, por Figma. */
.content-row .news-card-content {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.content-row .news-card-content::after { display: none; }
.content-row .news-card-category {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  color: var(--gray-06);
}
.content-row .news-card-title { margin-bottom: 16px; }
.content-row .news-card-title h3 { font-size: 32px; }
/* Escopado em .news-card-excerpt (não um "p" genérico) — um seletor de
   tag pegaria .news-card-category também, já que os dois são <p> dentro
   de .news-card-content. */
.content-row .news-card-excerpt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  color: var(--gray-06);
}

.content-row .content-row-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding-top: 40px;
  font-weight: 400;
  font-size: 16px;
  color: var(--gray-06);
}

@media (max-width: 1100px) {
  .hero-content h1,
  .about-content h2 {
    font-size: 30px;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-content,
  .hero-media {
    grid-column: 1 / -1;
  }
  .hero-content {
    grid-template-columns: 1fr;
  }
  .hero-content h1,
  .hero-info {
    grid-column: 1 / -1;
  }

  .hero-media, .about-media { width: 100%; max-width: none; }

  .content-row {
    grid-template-columns: 1fr;
  }

  /* 12 colunas com gutter de 48px não cabe em telas estreitas (o gutter
     sozinho já passa da largura disponível) — reduz a contagem de
     colunas aqui, o span:2 do .client-logo continua valendo (3/linha). */
  .clients-row { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 640px) {
  .hero { padding: 60px 0; }
  .hero-content h1 { font-size: 28px; }
  .about-content h2 { font-size: 24px; }

  .clients-row { grid-template-columns: repeat(4, 1fr); }
}