/* ==========================================================================
   Tektron — home.css
   Primeira dobra da home: mensagem principal, CTA e cards de acionamento e
   de ambiente. A partir da seção 4, os componentes das páginas de aplicação
   (breadcrumb, seções de conteúdo, cards de especificação, FAQ), que
   carregam esta mesma folha. Mobile-first. Depende dos tokens de global.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mensagem principal + CTA
   -------------------------------------------------------------------------- */
.hero-intro {
  max-width: 46rem;
}

.hero-lead {
  font-size: 1.125rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--espaco-12) var(--espaco-24);
  margin-top: var(--espaco-8);
  background: var(--cor-marca-vermelho);
  color: var(--cor-branco);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--raio);
}

@media (hover: hover) {
  .btn-primary:hover { background: var(--cor-vermelho-escuro); }
}

/* --------------------------------------------------------------------------
   2. Hero — linhas de apoio
   A credencial ("fabricamos desde 1990") e o atalho para a documentação não
   competem com o H1 nem com o botão: ficam menores e mais suaves de
   propósito. Quem está descobrindo continua lendo a página; quem já sabe o
   que quer acha o caminho curto sem precisar procurar no menu.
   O bloco de 3 cards de linha de produto que ficava aqui saiu em 2026-08-10
   (duplicava menu e rodapé, e entregava catálogo antes de qualquer contexto);
   os três produtos voltam adiante, como resposta à pergunta do acionamento.
   -------------------------------------------------------------------------- */
.hero-support {
  margin-top: var(--espaco-16);
  font-size: 0.9375rem;
  color: var(--cor-grafite);
  opacity: 0.75;
}

.hero-shortcut {
  margin-top: var(--espaco-16);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   3. Cards de ambiente e de acionamento
   -------------------------------------------------------------------------- */
.need-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-16);
  margin-top: var(--espaco-24);
}

@media (min-width: 48rem) {
  .need-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .need-cards { grid-template-columns: repeat(3, 1fr); }
}

/* o card estica até a altura da linha da grade */
.need-cards li { display: flex; }

/* card vertical clicável: borda discreta em repouso, borda vermelha e fundo
   técnico no hover — o realce só aparece no elemento apontado, para não
   competir com o botão vermelho do hero */
.need-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  min-height: 44px;
  padding: var(--espaco-16);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-grafite);
  text-decoration: none;
  transition: border-color var(--transicao-rapida), background var(--transicao-rapida);
}

@media (hover: hover) {
  .need-card:hover {
    border-color: var(--cor-marca-vermelho);
    background: var(--cor-fundo-tecnico);
  }
}

/* sublinhado no nome do ambiente: marca o alvo clicável sem depender só de cor */
.need-card-name {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.need-card-summary {
  font-size: 0.9375rem;
  color: var(--cor-grafite);
  opacity: 0.75;
}

.need-card-caveat {
  font-size: 0.9375rem;
}

.need-card-caveat strong {
  color: var(--cor-marca-vermelho);
}

.need-card-desc {
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   3.1 Cards de acionamento (o que dispara a luz) — variante do .need-card
   O ícone codifica o gatilho: ondas (movimento), sol (luz do dia), relógio
   (tempo). Não é ornamento — é o que separa os três cards num relance, antes
   de ler o texto. Vermelho porque o card inteiro é clicável, mesma regra do
   resto do sistema: a cor de ação só aparece em algo que responde ao clique.
   Havia um rótulo do gatilho em caixa-alta acima do nome do produto
   ("ALGUÉM PASSA"); saiu em 2026-08-10, por decisão da Fernanda. O gatilho
   continua dito na pergunta que titula a seção e na primeira frase de cada
   descrição — o gap maior existe para o ícone respirar sem ele.
   -------------------------------------------------------------------------- */
.trigger-card {
  gap: var(--espaco-8);
}

.trigger-icon {
  width: 28px;
  height: 28px;
  color: var(--cor-marca-vermelho);
}

/* --------------------------------------------------------------------------
   4. Páginas de aplicação — breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  margin-bottom: var(--espaco-24);
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-8);
  font-size: 0.9375rem;
}

/* o texto continua compacto, mas o alvo do link cumpre a meta de conforto
   de 44 px da Tektron (estrutura-navegacao §6.3) */
.breadcrumb-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* separador decorativo: fora do fluxo de leitura do leitor de tela */
.breadcrumb-list li + li::before {
  content: "›";
  margin-right: var(--espaco-8);
  color: var(--cor-grafite);
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   5. Páginas de aplicação — seções de conteúdo
   -------------------------------------------------------------------------- */
.content-section {
  margin-top: var(--espaco-48);
}

.content-section h2 + p,
.content-section p + p {
  margin-top: var(--espaco-16);
}

.content-section h3 {
  margin-top: var(--espaco-32);
}

.factor-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-16);
  margin-top: var(--espaco-24);
}

@media (min-width: 48rem) {
  .factor-list { grid-template-columns: repeat(2, 1fr); }
}

.factor-list li {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  padding: var(--espaco-16);
  background: var(--cor-fundo-tecnico);
  border-radius: var(--raio);
}

.factor-name {
  font-weight: 700;
}

/* quando o nome do fator é um link (home §"O que dá para conferir", hub
   §"Escolha por situação de instalação"), ele vira o alvo de toque do card e
   cumpre a meta de 44 px da Tektron — mesma solução já usada em
   .breadcrumb-list a e .spec-card-name a */
.factor-name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.factor-desc {
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   6. Páginas de aplicação — cards de especificação
   -------------------------------------------------------------------------- */
.spec-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-16);
  margin-top: var(--espaco-24);
  margin-bottom: var(--espaco-24);
}

@media (min-width: 48rem) {
  .spec-cards { grid-template-columns: repeat(2, 1fr); }
}

/* mesmo enquadramento do .need-card, porém estático: o card agrupa dados e
   a ação fica no título, um link explícito */
.spec-card {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-8);
  padding: var(--espaco-16);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.spec-card-name {
  font-size: 1.125rem;
}

/* alvo de toque confortável para o link do modelo dentro do card */
.spec-card-name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cor-marca-vermelho);
  font-weight: 700;
}

.spec-card-desc {
  font-size: 0.9375rem;
}

/* nota complementar fora de um .spec-card (ex.: linha compacta de uma
   situação) — mesmo tratamento tipográfico do .spec-card-desc, mas sem
   implicar que o texto pertence a um card */
.solution-note {
  font-size: 0.9375rem;
}

/* nota que fecha uma grade de cards precisa de respiro próprio: sem isto ela
   encosta na borda do último card e é lida como parte dele */
.need-cards + .solution-note {
  margin-top: var(--espaco-16);
}

.spec-list {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
  font-size: 0.9375rem;
}

.spec-label {
  font-weight: 600;
}

.spec-label::after {
  content: ":";
}

/* link da ficha técnica no rodapé do card (página Todos os produtos).
   margin-top:auto encosta o link na base mesmo com cards de alturas
   diferentes na mesma linha do grid; min-height dá o alvo de toque de
   44px sem virar botão — 19 botões vermelhos numa página só competiriam
   com o link do modelo, que é o alvo principal do card. */
.spec-card-ficha {
  margin-top: auto;
  padding-top: var(--espaco-8);
  font-size: 0.875rem;
}

.spec-card-ficha a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   6.1 Tabela de comparação (ex.: tecnologias de detecção)
   Wrapper com scroll próprio: a página inteira não pode rolar
   horizontalmente em 320 CSS px (estrutura-navegacao.md §6.3), mas uma
   tabela larga pode rolar dentro do próprio contêiner.
   -------------------------------------------------------------------------- */
.comparison-table-wrap {
  margin-top: var(--espaco-24);
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

/* tabela de poucas colunas e texto curto (ex.: comparação de 3 modelos) —
   sem isso ela estica até a largura total da seção e sobra vazio em cada
   célula, destoando da largura de leitura (70ch) do resto do texto. As
   tabelas largas (fichas técnicas, comparação de tecnologias) não usam
   esse modificador e continuam de largura total. */
.comparison-table-wrap--compacta {
  max-width: 46rem;
}

/* o piso de 32rem da tabela padrão existe pras tabelas largas (fichas
   técnicas, comparação de tecnologias) não espremerem colunas demais —
   numa tabela compacta (poucas colunas, texto curto) esse piso só força
   scroll lateral no celular sem necessidade. */
.comparison-table-wrap--compacta .comparison-table {
  min-width: 0;
}

.comparison-table-wrap--compacta .comparison-table tbody th {
  white-space: normal;
}

.comparison-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.comparison-table caption {
  text-align: left;
  padding: var(--espaco-16) var(--espaco-16) 0;
  font-size: 0.9375rem;
  color: var(--cor-grafite);
}

.comparison-table th,
.comparison-table td {
  padding: var(--espaco-12) var(--espaco-16);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cor-borda);
}

.comparison-table thead th {
  font-weight: 700;
  background: var(--cor-fundo-tecnico);
}

/* cabeçalho com foto de produto (ex.: comparação BS-40/MI-400/SR-03) —
   link do th empilha a miniatura acima do nome do modelo */
.comparison-table thead th a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-4);
  color: var(--cor-marca-vermelho);
  text-align: center;
  white-space: nowrap;
}

/* as fotos de origem têm margem branca interna diferente entre si — sem
   isso, o produto visível dentro da miniatura fica desalinhado do texto
   abaixo, mesmo com a caixa da imagem alinhada corretamente. Recorta o
   excesso via zoom, sem tocar no arquivo original (usado inteiro em
   outras páginas). */
.thumb-recorte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--cor-fundo);
}

.comparison-table thead th img {
  object-fit: contain;
}

.comparison-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--cor-fundo-tecnico);
}

/* Tabela de fichas técnicas (Suporte): botão secundário, não primário — são
   19 linhas, e 19 botões vermelhos disputariam com o CTA do WhatsApp, que é
   a única ação urgente da página. Compacto na horizontal para o rótulo não
   quebrar em duas linhas dentro da célula. */
.tabela-fichas td .btn-secondary {
  padding: var(--espaco-8) var(--espaco-16);
  white-space: nowrap;
}

.tabela-fichas tbody th a { font-weight: 700; }

/* Sem o min-width de 32rem da tabela de comparação: aqui a coluna que
   interessa é a última, o botão. Com rolagem lateral ele nasce fora da
   tela em 360 px — o alvo da tabela exigindo um gesto para aparecer.
   Cabendo na largura, as três colunas ficam visíveis de uma vez. */
.tabela-fichas { min-width: 0; }

@media (max-width: 30rem) {
  .tabela-fichas th,
  .tabela-fichas td {
    padding: var(--espaco-8);
  }

  .tabela-fichas td .btn-secondary {
    padding: var(--espaco-8) var(--espaco-12);
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   7. Páginas de aplicação — dúvidas frequentes
   -------------------------------------------------------------------------- */
.faq-list {
  margin-top: var(--espaco-24);
}

.faq-list dt {
  margin-top: var(--espaco-24);
  font-weight: 700;
}

.faq-list dt:first-child {
  margin-top: 0;
}

.faq-list dd {
  margin-top: var(--espaco-8);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   8. Páginas de aplicação — princípio de marca
   -------------------------------------------------------------------------- */
.brand-principle {
  margin-top: var(--espaco-48);
  padding: var(--espaco-24);
  background: var(--cor-grafite);
  border-radius: var(--raio);
  border-left: 4px solid var(--cor-marca-vermelho);
}

.brand-slogan {
  color: var(--cor-marca-amarelo);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--espaco-8);
}

.brand-principle-text {
  color: var(--cor-texto-suave-escuro);
  font-size: 0.9375rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Páginas de aplicação — CTA secundário e seção de chamada final
   -------------------------------------------------------------------------- */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-16);
  align-items: center;
  margin-top: var(--espaco-16);
  margin-bottom: 0;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--espaco-12) var(--espaco-24);
  border: 1px solid var(--cor-grafite);
  color: var(--cor-grafite);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--raio);
  transition: background var(--transicao-rapida), border-color var(--transicao-rapida);
}

@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--cor-fundo-tecnico);
    border-color: var(--cor-marca-vermelho);
  }
}

/* --------------------------------------------------------------------------
   10. Páginas de aplicação — mídia de produto (hero, comparação, diagramas)
   Preparado para a integração dos ativos visuais do manifesto
   (documentacao/manifesto-ativos-visuais.md). `.hero-layout` já organiza o
   conteúdo textual em algumas páginas (ex.: aplicacoes/externo.html), mas
   sem nenhum efeito visual novo, porque nenhum `.hero-media`/`.hero-panels`
   real foi inserido ao lado. `.hero-media`, `.hero-panels`, `.hero-panel`,
   `.spec-card-photo` e `.diagram-figure` só produzem mídia visível quando o
   `<figure>`/`<img>` real for inserido na etapa de integração — até lá, os
   `<img>` continuam comentados no HTML, e nenhuma dessas classes tem
   elemento algum para estilizar.
   -------------------------------------------------------------------------- */

/* layout do hero: texto + imagem lado a lado no desktop, empilhados no
   mobile (texto sempre primeiro no DOM, por leitura e SEO) */
.hero-layout {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-32);
}

@media (min-width: 64rem) {
  .hero-layout {
    flex-direction: row;
    align-items: center;
    gap: var(--espaco-48);
  }

  .hero-layout .hero-intro {
    flex: 1 1 55%;
    max-width: none;
  }

  .hero-layout .hero-media {
    flex: 1 1 45%;
  }

  .hero-layout .hero-panels {
    flex: 1 1 45%;
  }
}

/* imagem principal do hero (CX01) */
.hero-media {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .hero-media { max-width: none; margin-inline: 0; }
}

.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--cor-fundo-tecnico); /* some ao carregar a imagem real; não usar em elemento vazio */
}

.hero-media figcaption {
  margin-top: var(--espaco-8);
  font-size: 0.875rem;
  color: var(--cor-grafite);
  opacity: 0.75;
  text-align: center;
}

/* hero em dois painéis editoriais (EX01, aplicacoes/externo.html) — usado
   em vez de .hero-media quando o hero precisa apresentar 2 produtos em
   painéis claramente separados, sem sugerir comparação de tamanho físico
   entre eles (ver manifesto-ativos-visuais.md, seção EX01) */
.hero-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-24);
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

@media (min-width: 40rem) {
  .hero-panels {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }
}

@media (min-width: 64rem) {
  .hero-panels { margin-inline: 0; }
}

.hero-panel img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio);
  background: var(--cor-fundo-tecnico); /* some ao carregar a imagem real; não usar em elemento vazio */
}

.hero-panel figcaption {
  margin-top: var(--espaco-8);
  font-size: 0.875rem;
  color: var(--cor-grafite);
  opacity: 0.75;
  text-align: center;
}

/* foto de produto nos cards de comparação (CX02/CX03/CX04) */
.spec-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--espaco-8);
}

.spec-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--raio);
  background: var(--cor-fundo-tecnico);
}

/* Grade densa estilo Mercado Livre — páginas com foto de produto no
   .spec-card: catálogo, as 3 páginas-resumo de categoria e as 5 de
   aplicações. NÃO usar nas 19 páginas de produto individual: lá o mesmo
   .spec-card agrupa especificações em tabela (sem foto) na seção
   "Características técnicas" — outro uso da mesma classe, que essa grade
   quebraria. Reaproveita as mesmas classes, sem duplicar o HTML dos cards:
   4 por linha, foto em caixa com fundo técnico e sombra em vez de borda. */
.pagina-vitrine .spec-cards {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 40rem) {
  .pagina-vitrine .spec-cards { grid-template-columns: repeat(4, 1fr); }
}

.pagina-vitrine .spec-card {
  gap: var(--espaco-4);
  padding: 0 0 var(--espaco-16);
  border: none;
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(30 34 41 / 6%), 0 8px 24px rgb(30 34 41 / 8%);
}

.pagina-vitrine .spec-card-photo {
  width: auto;
  margin: 0;
  padding: var(--espaco-16);
  background: var(--cor-fundo-tecnico);
}

.pagina-vitrine .spec-card-photo img {
  background: transparent;
  border-radius: 0;
}

/* escopado dentro de .spec-card — sem isso, essas regras vazam pra
   qualquer .spec-list solto na página (ex.: fase/neutro/retorno em
   "Instalação e ligação elétrica"), encolhendo texto que não tem nada a
   ver com o card de produto. */
.pagina-vitrine .spec-card .spec-card-name,
.pagina-vitrine .spec-card .spec-card-desc,
.pagina-vitrine .spec-card .spec-list,
.pagina-vitrine .spec-card .spec-card-ficha {
  padding-inline: var(--espaco-16);
}

.pagina-vitrine .spec-card .spec-card-name {
  /* .content-section h3 (linha ~193) soma 32px de margin-top pensado pra
     subtítulo de texto corrido; aqui o h3/h4 é o título do card, então zera. */
  margin-top: 0;
  padding-top: var(--espaco-8);
  font-size: 0.9375rem;
}

.pagina-vitrine .spec-card .spec-card-desc {
  font-size: 0.75rem;
}

.pagina-vitrine .spec-card .spec-list {
  font-size: 0.6875rem;
}

.pagina-vitrine .spec-card .spec-card-ficha {
  font-size: 0.75rem;
}

/* diagramas SVG (CX05/CX06): substituição física e ligação elétrica */
.diagram-figure {
  margin-top: var(--espaco-24);
  max-width: 46rem;
}

.diagram-figure img {
  width: 100%;
  height: auto;
  display: block;
}

.diagram-figure figcaption,
.diagram-caption {
  margin-top: var(--espaco-8);
  font-size: 0.875rem;
  color: var(--cor-grafite);
  opacity: 0.75;
}

/* foto de ambiente dentro de uma seção (não o hero da página) */
.situation-photo {
  margin-top: var(--espaco-24);
  max-width: 28rem;
  margin-inline: auto;
}

.situation-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--raio);
  display: block;
}

.situation-photo figcaption {
  margin-top: var(--espaco-8);
  font-size: 0.875rem;
  color: var(--cor-grafite);
  opacity: 0.75;
  text-align: center;
}