/* ═══════════════════ PRODUCT GRID (Archive) ═══════════════════ */
.products-section { padding: 0 0 80px; background: var(--pg-bg); }
.products-section .container { padding-top: 0; }
.product-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.product-card {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: var(--transition); cursor: pointer;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.product-card-img {
  position: relative; width: 100%;
  aspect-ratio: 4/3; overflow: hidden;
}
.product-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-card-body {
  padding: 20px 20px 16px;
  display: flex; flex-direction: column; flex: 1;
}
.product-card-body h3 {
  font-size: 18px; font-weight: 700; color: var(--pg-heading);
  margin-bottom: 8px; line-height: 1.3;
}
.product-card-body .tagline {
  font-size: 14px; color: var(--gray9);
  margin-bottom: 16px; line-height: 1.5; flex: 1;
}

/* ═══════════════════ PRODUCT OVERVIEW (Detail) ═══════════════════ */
.product-overview { padding: 20px 0 20px; }
.overview-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
}
.gallery-main {
  width: 100%; aspect-ratio: 4/3;
  border-radius: var(--radius); overflow: hidden;
  background: var(--pg-bg); margin-bottom: 12px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
/* Galeria: faixa de uma linha rolável (desktop e mobile), com setas + fade */
.gallery-thumbs-wrap { position: relative; }
.gallery-thumbs {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 clamp(72px, 22%, 110px);
  aspect-ratio: 4/3; border-radius: 8px;
  overflow: hidden; cursor: pointer;
  border: 3px solid transparent; transition: var(--transition);
  scroll-snap-align: start;
}
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--red); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Fade nas bordas indicando que há mais fotos */
.gallery-thumbs-wrap::before,
.gallery-thumbs-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 44px;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .2s;
}
.gallery-thumbs-wrap::before { left: 0; background: linear-gradient(to left, transparent, #fff); }
.gallery-thumbs-wrap::after  { right: 0; background: linear-gradient(to right, transparent, #fff); }
.gallery-thumbs-wrap.has-overflow-start::before { opacity: 1; }
.gallery-thumbs-wrap.has-overflow-end::after { opacity: 1; }

/* Setas de navegação (desktop) */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; border: 1px solid #e2e5ea;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  color: var(--pg-heading, #2b2b2b); font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.gallery-nav:hover { background: var(--red); color: #fff; border-color: var(--red); }
.gallery-nav-prev { left: -8px; }
.gallery-nav-next { right: -8px; }
.gallery-nav[hidden] { display: none; }

.quick-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; }
.spec-item {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: var(--pg-bg); border-radius: 10px;
}
.spec-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--red); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.spec-icon svg { width: 20px; height: 20px; fill: #fff !important; }
.spec-label {
  font-size: 11px; color: var(--pg-muted); text-transform: uppercase;
  letter-spacing: .5px; font-weight: 600;
}
.spec-value { font-size: 15px; font-weight: 700; color: var(--pg-heading); }

.overview-desc {
  font-size: 15px; line-height: 1.7; color: var(--pg-body); margin-bottom: 28px;
}
.prod-intro-lead {
  font-size: 14px; color: var(--pg-body); margin-bottom: 14px; line-height: 1.5;
}
.prod-stats-row {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.prod-stat {
  flex: 1; background: #f0f5fb;
  border-left: 3px solid var(--primary);
  padding: 10px 12px; border-radius: 0 6px 6px 0;
  display: flex; flex-direction: column; gap: 1px;
}
.psv {
  font-size: 1.25rem; font-weight: 700; color: var(--primary); line-height: 1.1;
}
.psu {
  font-size: 0.68rem; font-weight: 600; color: var(--primary); opacity: .75; line-height: 1; min-height: 1em;
}
.psl {
  font-size: 0.68rem; color: var(--pg-body); line-height: 1.3; margin-top: 2px;
}
.prod-models { margin-bottom: 4px; }
.prod-models-label {
  font-size: 0.72rem; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.prod-model-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid #e8edf3;
}
.prod-model-item:last-child { border-bottom: none; }
.pmt {
  background: var(--primary); color: #fff;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap; letter-spacing: .03em; flex-shrink: 0;
}
.pmd { font-size: 0.84rem; color: var(--pg-body); line-height: 1.3; }

/* Overview downloads (inline in product overview) */
.overview-downloads {
  display: flex; flex-direction: column; gap: 8px; margin-top: 24px;
}
.dl-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--gray9); margin-bottom: 4px;
}
.dl-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--pg-bg, #f5f7fa); border: 1px solid rgba(0,0,0,.06);
  text-decoration: none; color: inherit;
  transition: var(--transition);
}
.dl-card:hover {
  border-color: var(--red); background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.dl-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--red); color: var(--white); flex-shrink: 0;
}
.dl-card-info { display: flex; flex-direction: column; gap: 2px; }
.dl-card-name {
  font-size: 14px; font-weight: 600; color: var(--pg-heading);
  line-height: 1.3;
}
.dl-card-type {
  font-size: 12px; color: var(--gray9); line-height: 1.3;
}

/* Cross-sell callout — bloco inteiro clicável, sem setas */
.cross-sell-callout {
  display: flex; align-items: center; gap: 12px;
  background: #f0f4f8;
  padding: 16px 20px; font-size: 14px; border-radius: 4px;
  margin-top: 20px; margin-bottom: 28px;
  color: var(--pg-body); line-height: 1.5;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  cursor: pointer;
}
.cross-sell-callout:hover {
  background: #e6edf4;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  color: var(--pg-body);
}
.cross-sell-callout .cross-sell-icon {
  flex-shrink: 0; font-size: 16px; line-height: 1;
  align-self: flex-start; margin-top: 2px;
}
.cross-sell-callout .cross-sell-text {
  flex: 1; min-width: 0;
  line-height: 1.5;
}
.cross-sell-callout .cross-sell-cta {
  color: var(--red); font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
  white-space: normal;
}
.cross-sell-callout:hover .cross-sell-cta { color: var(--red-dark); }
.cross-sell-callout--static { cursor: default; }
.cross-sell-callout--static:hover {
  background: #f0f4f8; transform: none; box-shadow: none;
}
.cross-sell-callout--static .cross-sell-cta {
  border-bottom: none;
}

/* ═══════════════════ PAS SECTION ═══════════════════ */
.pas-section { padding: 44px 0; background: var(--pg-bg); }
.pas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pas-card { padding: 36px; border-radius: var(--radius); background: var(--white); position: relative; }
.pas-card::before { content: ""; position: absolute; top: 0; left: 36px; width: 44px; height: 4px; }
.pas-problem::before { background: var(--red); }
.pas-solution::before { background: var(--green); }
.pas-card h3 {
  font-size: 20px; font-weight: 700; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.pas-problem h3 { color: var(--red); }
.pas-solution h3 { color: var(--green); }
.pas-card p, .pas-card-content p { font-size: 15px; line-height: 1.7; color: var(--pg-body); }
.pas-card ul, .pas-card-content ul { margin-top: 12px; list-style: none; padding: 0; }
.pas-card ul li, .pas-card-content ul li {
  font-size: 14px; line-height: 1.7; color: var(--pg-body);
  padding: 4px 0 4px 20px; position: relative;
}
.pas-card ul li::before, .pas-card-content ul li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
}
.pas-problem ul li::before, .pas-problem .pas-card-content ul li::before { background: var(--red); opacity: .3; }
.pas-solution ul li::before, .pas-solution .pas-card-content ul li::before { background: var(--green); opacity: .4; }

/* ═══════════════════ METHOD SECTION (passos numerados) ═══════════════════ */
.method-section { padding: 44px 0; }
.method-grid { display: grid; gap: 32px; }
.method-card { position: relative; padding-top: 20px; }
.method-card::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; background: var(--red); }
.method-num { display: block; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; color: var(--red); margin-bottom: 10px; }
.method-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--gray11); text-align: left; }
.method-card p { font-size: 14px; line-height: 1.7; color: var(--gray9); text-align: left; }

/* ═══════════════════ SPEC TABLE ═══════════════════ */
.specs-section { padding: 44px 0; }
.specs-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.specs-section .subtitle { color: var(--gray9); margin-bottom: 32px; font-size: 15px; }

/* ═══════════════════ CONTEÚDO EXTRA (_produto_conteudo_extra) ═══════════════════
   07/08/2026: mesma cadência de h2 das outras seções desta página — o .prose
   genérico (page.php/single-case_study.php) usa h2 24px/700, menor que o
   padrão 28px/800 usado em specs/vantagens/aplicações/faq desta página.
   Padding-top reduzido pela metade (achado do André: a seção anterior já
   fecha com 44px de padding-bottom — 44+44 lia como buraco vazio, já que
   as duas seções são brancas, sem quebra de cor entre elas). Conteúdo típico
   agora é h2+subtitle+grid (reaproveita .dif-grid/.dif-card, já estilizados),
   não mais parágrafo corrido — por isso a seção ficou mais enxuta também em
   altura. Escopado só dentro de .extra-content-section pra não alterar o
   .prose global. */
.extra-content-section { padding: 16px 0 44px; }
/* 11/08/2026: a página pode empilhar várias .extra-content-section seguidas
   (seções de texto/decisão/rolo, variantes, storytelling, acessórios) —
   cada uma fecha com 44px de padding-bottom e a próxima abre com 16px de
   padding-top, então a junção lia 60px de vazio (André: "tinha que ser
   metade do que há"). Puxa a seção seguinte pra cima só nesse encontro
   específico — não mexe no espaçamento contra outras seções (specs,
   diferenciais etc.), que já foi ajustado à parte. */
.extra-content-section + .extra-content-section { margin-top: -30px; }
/* 08/08/2026 (5ª correção): achado real por trás do "espaço vazio" apontado
   desde o início — .prose é 800px (medida de artigo/texto corrido), mas
   .container desta página é 1200px, igual ao specs-section/vantagens/etc.
   Mesmo com o divisor entre colunas, a seção inteira ainda ficava mais
   estreita que as vizinhas. Alarga pra bater com o container — cada coluna
   do grid passa a ter ~550px em vez de ~380px, medida mais confortável de
   leitura (referência: 60-75 caracteres por linha em desktop) e a seção
   finalmente ocupa a mesma largura das seções acima/abaixo dela. */
.extra-content-section .prose { max-width: 100%; }
.extra-content-section .prose h2 { font-size: 28px; font-weight: 800; color: var(--pg-heading); margin-top: 0; margin-bottom: 8px; }
.extra-content-section .prose p.subtitle { color: var(--gray9); font-size: 15px; margin-bottom: 24px; }
.extra-content-section .prose .dif-grid:last-child { margin-bottom: 0; }
/* 07/08/2026 (2ª correção): o card-grid resumido demais tirava profundidade de
   texto — ruim pra SEO, que é o objetivo inteiro do projeto. Volta o texto
   completo, mas em 2 colunas (critério de decisão à esquerda, as 3 aplicações
   nomeadas à direita) — preenche a largura do container sem cortar conteúdo. */
.extra-content-section .prose .decision-columns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 16px;
  position: relative;
}
.extra-content-section .prose .decision-col h3:first-child { margin-top: 0; }
.extra-content-section .prose .decision-col ul { margin: 0; }
/* 08/08/2026 (4ª correção): André apontou que os pares de coluna (aqui e em
   .content-pair) têm altura desigual por natureza — texto corrido de um lado,
   lista curta do outro — e isso lia como "quebrado", não como as colunas
   preenchendo a largura que ele pediu antes. Em vez de forçar altura igual
   (que exigiria inventar texto de enchimento ou cortar conteúdo, as duas
   coisas que ele já pediu pra não fazer), a resposta editorial padrão pra
   colunas de tamanho diferente lado a lado é um FIO divisório vertical —
   deixa de ler como grid quebrado e passa a ler como duas colunas de
   comprimento natural diferente, o que é normal em qualquer editorial de
   duas colunas. Pseudo-elemento no container (não nos filhos) acompanha
   automaticamente a altura do mais alto dos dois, sem JS. */
.extra-content-section .prose .decision-columns::before,
.extra-content-section .prose .content-pair::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%;
  width: 1px; background: var(--pg-divider); transform: translateX(-50%);
}
@media (max-width: 900px) {
  .extra-content-section .prose .decision-columns::before,
  .extra-content-section .prose .content-pair::before { content: none; }
}
/* 07/08/2026 (3ª correção): André apontou que as 2 colunas exigiam ficar
   cruzando uma com a outra pra saber qual linha (1L/2L/2L-F) cabe em cada
   aplicação nomeada — o "vazio" que ele via era menos a coluna curta e mais
   a falta de uma resposta direta ali. O selo .sku-tag junto do h3 responde
   isso sem reler a lista; a .decision-legend condensa a mesma correspondência
   num quadro de referência rápida, ocupando o espaço da coluna esquerda com
   conteúdo útil (não decorativo) em vez de espaço morto. */
.extra-content-section .prose .decision-columns .sku-tag {
  display: inline-block; font-size: 12px; font-weight: 800; color: var(--white);
  background: var(--red); border-radius: 6px; padding: 2px 9px; margin-left: 8px;
  vertical-align: middle; letter-spacing: .3px;
}
.extra-content-section .prose .decision-legend {
  margin-top: 24px; padding: 4px 18px; background: var(--pg-bg); border-radius: var(--radius);
}
.extra-content-section .prose .decision-legend-row {
  display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--pg-body); padding: 10px 0;
}
.extra-content-section .prose .decision-legend-row:not(:last-child) { border-bottom: 1px solid var(--pg-divider); }
.extra-content-section .prose .decision-legend .sku-tag { margin-left: 0; min-width: 46px; text-align: center; flex-shrink: 0; }
@media (max-width: 900px) {
  .extra-content-section .prose .decision-columns { grid-template-columns: 1fr; gap: 8px; }
}
/* 07/08/2026: par de blocos independentes (cada um com seu próprio h2), pro
   mesmo problema do .decision-columns mas sem cabeçalho compartilhado — ex:
   "sistema completo" ao lado de "o que vem no rolo" no Techdreno. Reaproveita
   .prose h2 (28px/800, margin-top:0 já herdado) sem precisar de CSS novo pro
   heading — só o grid em volta. */
.extra-content-section .prose .content-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 24px 0;
  position: relative;
}
@media (max-width: 900px) {
  .extra-content-section .prose .content-pair { grid-template-columns: 1fr; gap: 8px; margin: 16px 0; }
}
/* 11/08/2026: apoio visual pra listas de decisão/checklist dentro do
   conteúdo extra — ícone linear (SVG inline, sem dependência) + texto,
   sem cor decorativa (cinza = info neutra, vermelho = "sim/recomendado").
   Reaproveitável em qualquer produto/solução que usar .decision-columns
   ou .content-pair. */
.extra-content-section .prose ul.icon-list { list-style: none; padding-left: 0; margin: 0; }
.extra-content-section .prose ul.icon-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.extra-content-section .prose ul.icon-list li:last-child { margin-bottom: 0; }
.extra-content-section .prose ul.icon-list svg { flex-shrink: 0; margin-top: 3px; }
/* Card com fundo leve pra separar "explicação"/"checklist" de prosa corrida —
   mesmo token --pg-bg de outras seções, sem inventar cor nova. */
.extra-content-section .prose .decision-card { background: var(--pg-bg); border-radius: var(--radius); padding: 24px 28px; }
.extra-content-section .prose .decision-card .prose-h3:first-child,
.extra-content-section .prose .decision-card h3:first-child { margin-top: 0; }
@media (max-width: 900px) {
  .extra-content-section .prose .decision-card { padding: 20px; }
}

/* 11/08/2026 (v2): índice "sigla → função" no espírito de ficha técnica —
   1ª versão era um grid de card com ícone em selo vermelho preenchido, e
   esse padrão específico já está registrado neste mesmo arquivo (perto de
   .advantages-section) como rejeitado antes por "cara de IA". Sem card, sem
   sombra, sem ícone: a sigla funciona como o código de peça — tipografia
   grande, tabular, cor sólida — puxando o olho pra fila certa, com regra
   fina separando cada entrada. Mais perto de como uma tabela de compatibi-
   lidade de fabricante é lida do que de uma grade de "vantagens". */
.extra-content-section .prose .spec-index {
  margin-top: 24px; border-top: 2px solid var(--pg-heading);
}
.extra-content-section .prose .spec-index-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 28px;
  padding: 20px 0; border-bottom: 1px solid var(--pg-divider);
}
.extra-content-section .prose .spec-index-sku {
  font-size: 21px; font-weight: 800; color: var(--red);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  line-height: 1.3; padding-top: 1px;
}
.extra-content-section .prose .spec-index-body h3 {
  font-size: 16px; font-weight: 800; color: var(--pg-heading); margin: 0 0 5px;
}
.extra-content-section .prose .spec-index-body p {
  font-size: 14px; color: var(--gray9); line-height: 1.55; margin: 0;
}
@media (max-width: 640px) {
  .extra-content-section .prose .spec-index-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .extra-content-section .prose .spec-index-sku { font-size: 15px; }
}

/* Acessórios exclusivos — grid de peças reais com recorte (PNG com alpha),
   vinheta radial CSS (sem asset externo) atrás pra separar produto de fundo.
   Reaproveita .related-card/.related-card-body já testados em "Produtos
   Relacionados", mas sem o cartão branco + sombra deles: a seção já é
   branca (fundo do body é branco também), então o card ficava "flutuando"
   só por causa da sombra — sem propósito aqui, onde não há foto de capa
   full-bleed pra justificar um cartão (11/08/2026, André: "acho que era
   melhor não terem fundo neles").
   Imagem: 11/08/2026 (correção) — a caixa fixa 16:9 forçava fotos com
   proporção bem diferente (peça quase quadrada, ex: Tampão 800×801) a
   encolher demais pra caber, ficando minúscula/ilegível ("cortada" no
   sentido de não dar pra entender a peça, mesmo sem recorte de pixel de
   fato). Troca pra altura fixa + centralização flex: a imagem usa o
   tamanho natural dela (respeitando a proporção real), até o teto de
   altura da caixa — sem espremer em proporção que não é a dela. */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.acc-grid .related-card,
.acc-grid .related-card:hover { background: transparent; box-shadow: none; }
.acc-img {
  height: 160px; display: flex; align-items: center; justify-content: center;
  padding: 14px; border-radius: var(--radius);
  background: radial-gradient(ellipse at center, #e9ecef 0%, #ffffff 72%);
}
.acc-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 900px) { .acc-grid { grid-template-columns: repeat(2, 1fr); } .acc-img { height: 120px; } }
.spec-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.spec-table thead th {
  background: var(--pg-heading); color: var(--white);
  padding: 14px 20px; font-size: 13px; font-weight: 700;
  text-align: left; text-transform: uppercase; letter-spacing: .5px;
}
.spec-table tbody td {
  padding: 14px 20px; font-size: 14px;
  border-bottom: 1px solid var(--pg-border);
}
.spec-table tbody tr:nth-child(even) { background: var(--pg-bg); }
.spec-table tbody tr:hover { background: #fef2f2; }

/* ═══════════════════ DIFERENCIAIS TÉCNICOS ═══════════════════ */
.dif-section { padding: 52px 0; background: linear-gradient(180deg, #fff, var(--pg-bg)); }
.dif-linha-tag {
  display: block; width: fit-content; margin: 0 auto 12px;
  padding: 5px 14px; background: #fef2f2; color: var(--red);
  border: 1px solid rgba(238,49,36,.25); border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.dif-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; text-align: center; }
.dif-section .subtitle { color: var(--gray9); margin-bottom: 36px; font-size: 15px; text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.dif-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dif-card {
  background: var(--white); border: 1px solid var(--pg-border);
  border-top: 3px solid var(--red); border-radius: 14px;
  padding: 26px 22px; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.dif-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dif-numero {
  font-size: 40px; font-weight: 900; line-height: 1; color: var(--red);
  letter-spacing: -.02em; margin-bottom: 14px;
}
.dif-icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
  background: var(--red); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.dif-icon svg { width: 24px; height: 24px; }
.dif-titulo { font-size: 17px; font-weight: 800; color: var(--pg-heading); margin: 0 0 8px; }
/* .dif-desc removida 03/08/2026 — o <p class="dif-desc"> deixou de ser renderizado em
   02/08 (a seção virou bloco com ícone/número + título) e nenhum template do tema o
   emite. O dado continua no post meta e no metabox. */

.dif-validacao {
  display: flex; align-items: center; gap: 18px;
  margin-top: 28px; padding: 22px 26px;
  background: var(--pg-heading); color: var(--white); border-radius: 14px;
}
.dif-validacao-selo {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: #ffd86b;
  display: flex; align-items: center; justify-content: center;
}
.dif-validacao-txt { display: flex; flex-direction: column; gap: 3px; }
.dif-validacao-txt strong { font-size: 16px; font-weight: 800; }
.dif-validacao-txt span { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.45; }
.dif-validacao-txt cite { font-size: 12.5px; font-style: normal; color: rgba(255,255,255,.5); margin-top: 2px; }

@media (max-width: 768px) {
  .dif-section { padding: 28px 0; }
  .dif-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dif-card { padding: 20px 16px; }
  .dif-numero { font-size: 30px; }
  .dif-validacao { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ═══════════════════ ADVANTAGES ═══════════════════ */
.advantages-section { padding: 44px 0; background: var(--pg-bg); }
.advantages-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; text-align: center; }
.advantages-section .subtitle { color: var(--gray9); margin-bottom: 40px; font-size: 15px; text-align: center; }
.advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Cartão base — usado por /segmento/ e pelos editoriais de /solucoes/.
   Ajustado 03/08/2026 (decisão do André): saíram o border-top-sobre-canto-arredondado
   (virava um arco) e o gradiente de dois vermelhos quase iguais no badge do ícone.
   Ajustado de novo em 08/08/2026: o badge do ícone (quadrado vermelho preenchido,
   centralizado) continuava com a mesma "cara de IA" que motivou o ajuste anterior —
   só tinha sido corrigido dentro de .single-produto, não na base. Troquei pelo mesmo
   padrão já usado em .pas-card h3 (ícone "nu", cor sólida, sem caixa) e texto alinhado
   à esquerda em vez de centralizado. O border-radius do cartão e o traço superior
   PERMANECEM — só o ícone e o alinhamento do texto mudaram. */
.advantage-card {
  background: var(--white); border-radius: var(--radius);
  padding: 28px 20px 24px; text-align: left;
  box-shadow: var(--shadow-sm); transition: var(--transition);
  position: relative;
}
/* traço reto e curto no lugar do arco — mesmo padrão de .pas-card::before */
.advantage-card::before {
  content: ""; position: absolute; top: 0; left: 20px;
  width: 30px; height: 3px; background: var(--red); border-radius: 0 0 3px 3px;
}
.advantage-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.advantage-icon {
  width: 22px; height: 22px; margin: 0 0 14px;
  background: none; border-radius: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
/* helper e fallback gravam fill="#fff" direto no elemento/path (atributo de apresentação,
   não herda de CSS no pai) — mesma técnica de override já usada em .single-produto .dif-icon. */
.advantage-icon svg,
.advantage-icon svg path { fill: var(--red) !important; }
/* h3 e h4: a página de produto passou a usar h3 (03/08/2026, corrige salto de nível na
   árvore de headings); segmento e editoriais seguem com h4. Os dois seletores cobrem
   ambos sem mudar nada visualmente. */
.advantage-card h3,
.advantage-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--pg-heading); text-align: left; }
.advantage-card p { font-size: 13px; color: var(--gray9); line-height: 1.55; text-align: left; }

/* ═══════════════════ PRODUTO — Diferenciais: blocos grafite ═══════════════════
   Decisão do André 02/08/2026 (direção C do mockup "Diferenciais — direções de
   redesenho"): mesma redução de texto já aplicada em Vantagens — só ícone/número
   + título, sem descrição — mas em bloco GRAFITE, não vermelho, "pra não ficar
   com vermelho demais" (as Vantagens vermelhas ficam logo abaixo, na mesma página).

   Substitui o patch de 01/08 (cartão branco com traço vermelho curto). O ::before
   daquele patch — o traço vermelho de 30px no topo — sai junto: não sobrou nenhuma
   outra regra definindo ::before para .dif-card (a regra base da linha 289 nunca teve),
   então não é preciso anulá-lo, basta não redeclará-lo.

   Escopado a .single-produto por disciplina, embora estas classes .dif-* hoje só
   existam em single-produto.php (grep exaustivo 02/08/2026 — o comentário anterior
   afirmando reúso em segmento/editorial/hub/blog estava errado, foi copiado do
   bloco de .advantage-*, que ESSE sim é compartilhado).

   4 itens → 2 colunas (2×2). Não 3, que deixaria o 4º item órfão numa linha só. */
.single-produto .dif-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 820px; margin: 0 auto;
}
.single-produto .dif-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--pg-heading); border: none; border-radius: 14px;
  box-shadow: 0 8px 18px rgba(42,42,42,.22);
  padding: 18px 20px; transition: transform .2s, box-shadow .2s;
}
.single-produto .dif-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(42,42,42,.30); }
.single-produto .dif-icon {
  width: 28px; height: 28px; margin: 0; flex-shrink: 0;
  background: none; border-radius: 0;
}
.single-produto .dif-icon svg { width: 100%; height: 100%; }
/* achado dos revisores 01/08/2026: techduto_get_spec_icon() grava fill="white" DIRETO
   no <path> (não currentColor) — atributo de apresentação no filho não é sobrescrito
   por CSS aplicado ao <svg> pai, então o seletor PRECISA mirar o <path> (mesmo padrão
   de page-segment.css:33 .problem-icon). Aqui o alvo é branco, que por coincidência é
   o valor do atributo — mas manter a regra explícita evita depender dessa coincidência
   se o helper mudar de cor um dia. */
.single-produto .dif-icon svg,
.single-produto .dif-icon svg path { fill: #fff !important; }
/* número/sigla ocupa o MESMO slot do ícone (não vira irmão solto do título): sem isto,
   os 3 cards com "numero" (Techdreno "+200%", Techduto NBR "UV" e "AC") ficariam
   texto+texto enquanto os vizinhos da mesma linha ficam ícone+texto. */
.single-produto .dif-numero {
  /* min-width igual à largura do .dif-icon (28px): cards com número e cards com ícone
     passam a ter o mesmo slot à esquerda, então os títulos alinham na mesma linha do
     grid. Antes eram 34px vs 28px e a diferença aparecia lado a lado (03/08/2026). */
  flex-shrink: 0; min-width: 28px; margin: 0;
  font-size: 19px; font-weight: 900; line-height: 1;
  color: #ff7a6d; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.single-produto .dif-titulo {
  font-size: 14.5px; font-weight: 800; margin: 0; color: #fff; line-height: 1.3;
}
/* A faixa de validação é IRMÃ do grid dentro da mesma <section>, então herda a largura
   cheia do .container. Alinhada ao grid (mesmo max-width) a pedido do André 03/08/2026 —
   antes ela "vazava" para os lados dos blocos e quebrava o eixo vertical da seção. */
.single-produto .dif-validacao { max-width: 820px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .single-produto .dif-grid { grid-template-columns: 1fr; max-width: 480px; }
  .single-produto .dif-validacao { max-width: 480px; }
}

/* ═══════════════════ PRODUTO — Vantagens: blocos sólidos ═══════════════════
   Decisão final 01/08/2026 (Opção D do mockup "Techdreno — A vs D"): título só
   (sem subtítulo), sem descrição por item, blocos vermelhos sólidos flutuantes
   com ícone e texto na MESMA LINHA (não empilhado — 2ª correção pedida sobre a
   1ª versão de blocos, que tinha ícone em cima/texto embaixo). 3 colunas no
   desktop. Reusa os NOMES de classe existentes (.advantages-grid/.advantage-card/
   .advantage-icon) — só a seção de produto (.single-produto) muda de layout;
   segmento/editorial/hub/blog mantêm o grid de cartões original, intocado. */
.single-produto .advantages-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 980px; margin: 0 auto;
}
.single-produto .advantage-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--red); border: none; border-radius: 14px; box-shadow: 0 8px 18px rgba(238,49,36,.24);
  padding: 18px 20px; transition: transform .2s, box-shadow .2s;
  position: static;
}
/* A regra base ganhou um ::before em 03/08 (traço vermelho, para /segmento/ e
   /solucoes/). Aqui o bloco já é vermelho sólido: sem cancelar, o traço ficaria
   vermelho sobre vermelho — invisível apenas por coincidência de cor, que é
   exatamente o tipo de dependência frágil que este arquivo evita em outros pontos. */
.single-produto .advantage-card::before { content: none; }
.single-produto .advantage-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(238,49,36,.32); }
.single-produto .advantage-icon {
  width: 28px; height: 28px; margin: 0; flex-shrink: 0; background: none; border-radius: 0;
}
.single-produto .advantage-icon svg { width: 100%; height: 100%; }
.single-produto .advantage-icon svg,
.single-produto .advantage-icon svg path { fill: #fff !important; }
.single-produto .advantage-card h3,
.single-produto .advantage-card h4 {
  font-size: 14.5px; font-weight: 800; margin: 0; color: #fff; line-height: 1.3;
}
@media (max-width: 900px) {
  .single-produto .advantages-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .single-produto .advantages-grid { grid-template-columns: 1fr; max-width: 480px; }
}

/* ═══════════════════ FERRAMENTAS AUXILIARES (banners) ═══════════════════
   Achado 31/07/2026: seção própria pra calculadoras relacionadas ao produto —
   antes viviam misturadas no grid de Aplicações (semanticamente errado).
   Redesenhado 31/07/2026 (achado do André: 1ª versão reaproveitando
   .cross-sell-callout ficou "sem destaque, pouco profissional"). Cartão
   próprio (.tools-banner-card), NÃO reaproveita .cross-sell-callout — evita
   qualquer regressão nos outros usos dele. Ícone em badge segue o MESMO
   padrão já usado em .calc-icon (page-ferramenta.css) e .elt-reason-icon
   (calc-eletroduto.css): quadrado arredondado, fundo vermelho 8% opacidade,
   ícone vermelho — linguagem visual já estabelecida no tema, não inventada. */
.tools-banner-section { padding: 44px 0 0; background: var(--white); }
.tools-banner-header { padding-bottom: 24px; }
.tools-banner-header h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.tools-banner-header .subtitle { color: var(--gray9); font-size: 15px; }
.tools-banner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-bottom: 36px;
}
@media (min-width: 769px) {
  /* Mobile-first explícito (não auto-fit/minmax sozinho) — achado do CodeRabbit
     31/07/2026: com .container em 320px de viewport (272px úteis após padding)
     um piso de minmax(280px,…) estourava a largura do card. */
  .tools-banner-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
.tools-banner-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  height: 100%; padding: 20px 22px;
  background: var(--white); border: 1px solid var(--pg-border, #eaebed);
  border-radius: 14px; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tools-banner-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--red); transform: scaleY(0); transform-origin: bottom;
  transition: transform .25s ease;
}
.tools-banner-card:hover {
  border-color: rgba(238,49,36,.35);
  box-shadow: 0 10px 28px rgba(0,0,0,.09);
  transform: translateY(-3px);
}
.tools-banner-card:hover::before { transform: scaleY(1); }
.tools-banner-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: rgba(238,49,36,.08); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.tools-banner-icon svg { width: 24px; height: 24px; }
.tools-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tools-banner-title {
  font-size: 16px; font-weight: 700; color: var(--pg-heading, #2a2a2a);
  line-height: 1.3;
}
.tools-banner-desc {
  font-size: 13.5px; line-height: 1.5; color: var(--pg-body, #555);
}
.tools-banner-arrow {
  flex-shrink: 0; color: var(--red); font-size: 18px; font-weight: 700;
  transition: transform .25s ease;
}
.tools-banner-card:hover .tools-banner-arrow { transform: translateX(4px); }

/* ═══════════════════ APPLICATIONS ═══════════════════ */
.applications-section { padding: 44px 0 0; background: var(--white); }
.applications-header { padding-bottom: 40px; }
.applications-header h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.applications-header .subtitle { color: var(--gray9); font-size: 15px; }
.applications-section .segments-grid {
  background: transparent; max-width: 1200px; margin: 0 auto;
}
.applications-section { padding-bottom: 48px; }

/* ═══════════════════ FAQ ACCORDION ═══════════════════ */
.faq-section { padding: 44px 0; }
.faq-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.faq-section .subtitle { color: var(--gray9); margin-bottom: 32px; font-size: 15px; }
.faq-list { max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--pg-border); }
.faq-question {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; /* toggle continua centralizado no bloco inteiro (padrão comum
    de accordion); o quadrado NÃO participa mais do flex — vira position:absolute abaixo, ancorado
    ao centro vertical do BOTÃO via `top:50%` + transform, pra acompanhar a altura real do botão
    em vez de um valor fixo em px. 3ª tentativa 08/08/2026 — a 2ª (`top:28px` fixo) ficava correta
    com pergunta de 1 linha (produto/segmento, coluna larga), mas descolava do texto quando a
    pergunta quebra em 2 linhas (achado do André em /recurso/, coluna mais estreita por causa da
    barra lateral de índice — o botão fica mais alto, o texto recentraliza pelo flex, o quadrado
    fixo em 28px não acompanha). `top:50%` acompanha a altura real do botão nos dois casos: no de
    1 linha o resultado é ~33px, imperceptivelmente diferente do 28px anterior; no de 2 linhas
    centraliza no meio do bloco de texto, que é o comportamento esperado. A 1ª tentativa (31/07/2026,
    flex align-items:flex-start + margin-top no ::before) ficava alta demais no caso de 1 linha —
    não é o mesmo problema desta correção, que preserva align-items:center no flex do texto. */
  position: relative;
  padding: 20px 0 20px 23px; font-size: 16px; font-weight: 600;
  color: var(--pg-heading); font-family: var(--font);
  text-align: left; gap: 14px;
  transition: color .2s;
}
.faq-question::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; background: var(--red);
}
.faq-question:hover { color: var(--red); }
.faq-toggle {
  margin-left: auto;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 2px; background: var(--pg-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--pg-body);
  transition: var(--transition);
}
.faq-item.open .faq-toggle { background: var(--red); color: var(--white); transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s ease; }
.faq-answer-inner {
  padding: 0 20px 20px 24px;
  background: var(--pg-bg); border-radius: 0 0 8px 8px;
  margin-bottom: 8px;
  font-size: 15px; line-height: 1.7; color: var(--pg-body);
}
.faq-item.open .faq-answer { max-height: 500px; }

/* ═══════════════════ DOWNLOADS ═══════════════════ */
.downloads-section { padding: 44px 0; background: var(--pg-bg); }
.downloads-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.downloads-section .subtitle { color: var(--gray9); margin-bottom: 32px; font-size: 15px; }
.downloads-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.download-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border-radius: var(--radius);
  padding: 20px 28px; box-shadow: var(--shadow-sm);
  transition: var(--transition); min-width: 280px;
  text-decoration: none; color: var(--pg-heading);
}
.download-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.download-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: #fef2f2; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.download-icon svg { width: 24px; height: 24px; fill: var(--red); }
.download-info { flex: 1; }
.download-info span { font-size: 15px; font-weight: 600; display: block; }
.download-info small { font-size: 12px; color: var(--pg-muted); }
.download-arrow { color: var(--pg-muted); transition: color .2s; }
.download-card:hover .download-arrow { color: var(--red); }

/* ═══════════════════ STORYTELLING (compat-note "por que a Techduto") ═══════════════════ */
.storytelling-section { padding: 0 0 24px; }

/* ═══════════════════ RELATED (Products/Segments) ═══════════════════ */
.related-section { padding-top: 24px; padding-bottom: 48px; }

/* ═══════════════════ CASES RELACIONADOS (reaproveita visual de page-cases.css,
   que não é enfileirado em /produto/ — duplicação mínima intencional) ═══════════════════ */
.related-cases-section { padding: 44px 0 24px; }
.related-cases-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.related-cases-section .subtitle { color: var(--gray9); margin-bottom: 32px; font-size: 15px; }
.case-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-related-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius, 14px); overflow: hidden;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(0,0,0,.05));
  transition: var(--transition); text-decoration: none; color: inherit;
}
.case-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.12)); }
.case-related-img { aspect-ratio: 16/10; overflow: hidden; }
.case-related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.case-related-card:hover .case-related-img img { transform: scale(1.06); }
.case-related-body { padding: 22px; }
.case-related-body h3 { font-size: 17px; font-weight: 700; color: var(--pg-heading, #1a1a1a); margin: 8px 0 14px; line-height: 1.3; }
.case-tag {
  display: inline-block;
  background: rgba(200,16,46,.08); color: var(--red);
  padding: 4px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; width: fit-content;
}
.case-related-body .case-result { font-size: 13px; color: var(--gray9); margin-bottom: 14px; }
.case-related-body .case-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--red); font-weight: 600; font-size: 14px;
  transition: gap .3s ease;
}
.case-related-card:hover .case-link { gap: 10px; }
.related-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 32px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card {
  background: var(--white); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: var(--transition); text-decoration: none; color: inherit;
  font-weight: 400; /* 11/08/2026: card virou <a> quando tem link (acessórios
  exclusivos com página própria) — sem isso herdava o font-weight:600 de
  ".prose a" (pensado pra link de texto corrido) e negritava a descrição
  inteira do card, não só o título. */
}
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.related-card-img, .related-card-image {
  aspect-ratio: 16/9; overflow: hidden;
}
.related-card-img img, .related-card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.related-card:hover .related-card-img img,
.related-card:hover .related-card-image img { transform: scale(1.06); }
.related-card-body { padding: 20px; }
.related-card-category {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--red); margin-bottom: 4px;
}
.related-card-body h3, .related-card-body h4 {
  font-size: 16px; font-weight: 700; margin-bottom: 6px;
  color: var(--pg-heading);
}
.related-card-body p { font-size: 13px; color: var(--gray9); margin-bottom: 12px; line-height: 1.5; }
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--red); font-weight: 600; font-size: 14px;
  transition: gap .3s ease;
}
.related-card:hover .card-link { gap: 10px; }

/* ═══════════════════ TABLE SCROLL ═══════════════════ */
.table-scroll { overflow-x: auto; }

/* ═══════════════════ SOLUÇÕES RELACIONADAS (Av3 — cross-link p/ taxonomia) ═══════════════════ */
.produto-solucoes-section { padding: 48px 0; background: var(--pg-bg); }
.produto-solucoes-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 6px; color: var(--pg-heading); }
.produto-solucoes-section .subtitle { color: var(--pg-muted); margin-bottom: 24px; }
.produto-solucoes-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.produto-solucao-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; border: 1px solid var(--pg-border); border-radius: var(--radius);
  background: #fff; color: var(--pg-heading); font-weight: 600; text-decoration: none;
  transition: border-color .25s ease, gap .25s ease, color .25s ease;
}
.produto-solucao-card:hover { border-color: var(--red); color: var(--red); gap: 14px; }
.produto-solucao-arrow { color: var(--red); font-weight: 700; }