/* =====================================================================
   PÁGINAS DE PRODUTO — loja (produtos/<categoria>.html) e detalhe
   (produtos/<categoria>/<item>.html). Soluções e representantes também
   usam .produto-hero e .produto-voltar daqui.
   Depende dos tokens e classes base de css/style.css.
   ===================================================================== */

.produto-hero{
  padding: calc(var(--nav-h) + var(--s-3)) 0 0;   /* topo das páginas internas mais curto (out/2026) */
  background: var(--aluminio);
}

.produto-voltar{
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 6px 0;
  margin-bottom: var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
  border-radius: var(--r-xs);
  transition: color var(--t-rapido) var(--ease), gap var(--t-medio) var(--ease);
}
.produto-voltar:hover,
.produto-voltar:focus-visible{ color: var(--tinta); gap: 12px; }
.produto-voltar svg{ width: 16px; height: 16px; stroke: currentColor; flex-shrink: 0; }

/* nas páginas de produto o "Voltar" é uma etiqueta no canto da foto */
.produto-voltar.is-foto{
  margin: 0;
  padding: 7px 14px 7px 11px;
  font-size: 13.5px;
  color: var(--tinta);
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px rgba(20,35,32,.07), 0 2px 8px rgba(20,35,32,.12);
  transition: background var(--t-rapido) var(--ease), gap var(--t-medio) var(--ease);
}
.produto-voltar.is-foto:hover,
.produto-voltar.is-foto:focus-visible{ background: var(--papel); color: var(--tinta); }

.kicker-link{ text-decoration: none; }
.kicker-link:hover,
.kicker-link:focus-visible{ text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   FOTO EM FAIXA — fitas: produto comprido e fino, a foto corre de ponta
   a ponta colada na nav e fica PRESA no topo; o conteúdo (.produto-sobe)
   sobe por cima dela no scroll, entrando com um degradê.
   ===================================================================== */
.produto-banner{
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: clamp(120px, 18vw, 260px);
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--verde);
  box-sizing: content-box;
}
.produto-banner img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.produto-banner-topo{
  position: absolute;
  top: calc(var(--nav-h) + var(--s-2));
  left: 0;
  right: 0;
}
/* no celular a faixa é baixa: etiqueta mais perto do topo, longe da fita */
@media (max-width: 640px){ .produto-banner-topo{ top: calc(var(--nav-h) + var(--s-1)); } }

.produto-sobe{
  position: relative;
  z-index: 1;
  background: var(--aluminio);
}
/* borda de entrada: a foto se desfaz na cor da página. Curta o bastante
   pra não encostar na fita, que fica no meio da faixa. */
.produto-sobe::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(40px, 5vw, 72px);
  background: linear-gradient(to bottom, rgba(243,242,237,0), var(--aluminio));
  pointer-events: none;
}

.produto-detalhe{
  padding: var(--s-6) 0 var(--s-8);
  background: var(--aluminio);
}
.produto-sobe .produto-detalhe{ padding-top: var(--s-3); }

.produto-detalhe-info{ max-width: 640px; }
.produto-detalhe-info .kicker{ margin-bottom: var(--s-1); }
.produto-detalhe-info h1{
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin-bottom: var(--s-3);
}
.produto-detalhe-info .lead{
  font-size: 18px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--tinta);
  max-width: 52ch;
  margin: 0 0 var(--s-4);
}

.produto-detalhe-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* =====================================================================
   FOTO QUADRADA — produtos pequenos fotografados em fundo branco
   (fontes, sensores, acessórios): a foto fica inteira ao lado do texto
   e dos dados técnicos.
   ===================================================================== */
.produto-detalhe-quadrada{
  padding: calc(var(--nav-h) + var(--s-5)) 0 var(--s-10);
  background: var(--aluminio);
}

.produto-detalhe-split{
  display: grid;
  gap: var(--s-5);
}

.produto-foto-quadrada{
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-2);
}
.produto-foto-quadrada img{ width: 100%; height: 100%; object-fit: contain; display: block; }
/* fotos de ambiente/estúdio (perfis) preenchem o quadro inteiro */
.produto-foto-quadrada.is-cover img{ object-fit: cover; }

.produto-foto-quadrada .produto-voltar.is-foto{
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 1;
}

/* celular: a foto fica presa em cima e o texto sobe por cima dela,
   igual à faixa das fitas */
@media (max-width: 859px){
  .produto-detalhe-quadrada{ padding-top: calc(var(--nav-h) + var(--s-2)); }
  .produto-detalhe-split{ gap: var(--s-3); }
  .produto-foto-quadrada{
    position: sticky;
    top: calc(var(--nav-h) + var(--s-2));
    z-index: 0;
  }
  /* o fundo vai até a borda da tela (cobre a margem lateral), senão a
     borda e a sombra da foto aparecem dos lados do texto */
  .produto-detalhe-quadrada .produto-detalhe-info{
    position: relative;
    z-index: 1;
    background: var(--aluminio);
    margin-inline: calc(-1 * clamp(20px, 5vw, 56px));
    padding-inline: clamp(20px, 5vw, 56px);
  }
  .produto-detalhe-quadrada .produto-detalhe-info::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 56px;
    background: linear-gradient(to bottom, rgba(243,242,237,0), var(--aluminio));
    pointer-events: none;
  }
}

.produto-specs-stack{
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}
.produto-specs-stack .attrs-col{ padding: var(--s-3); }
.produto-detalhe-quadrada .produto-specs-note{ margin-top: var(--s-3); }

@media (min-width: 860px){
  .produto-detalhe-quadrada{ padding-top: calc(var(--nav-h) + var(--s-8)); }
  .produto-detalhe-split{
    grid-template-columns: minmax(280px, 440px) minmax(0, 540px);
    gap: var(--s-8);
    align-items: start;
  }
  .produto-foto-quadrada{
    position: sticky;
    top: calc(var(--nav-h) + var(--s-4));
  }
}

/* =====================================================================
   DADOS TÉCNICOS E ATRIBUTOS
   ===================================================================== */
.produto-attrs{
  padding: 0 0 var(--s-12);
  background: var(--aluminio);
}

.attrs-grid{
  display: grid;
  gap: var(--s-3);
  align-items: start;
}
@media (min-width: 640px){ .attrs-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px){ .attrs-grid{ grid-template-columns: repeat(3, 1fr); } }

.attrs-col,
.produto-specs{
  background: var(--papel);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-1);
}

.attrs-col h2,
.produto-specs h2{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--tinta);
  margin: 0 0 var(--s-1);
}

.attrs-col dl,
.produto-specs dl{ margin: 0; }

.attr-row,
.spec-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14.5px;
}
.attr-row:last-of-type,
.spec-row:last-of-type{ border-bottom: none; padding-bottom: 0; }
.attr-row dt,
.spec-row dt{ color: var(--tinta-2); }
.attr-row dd,
.spec-row dd{
  margin: 0;
  color: var(--tinta);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.attr-todo,
.spec-todo{ color: var(--ouro); font-weight: 500; }

.attr-list{ list-style: none; margin: 0; padding: 0; }
.attr-list li{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14.5px;
  color: var(--tinta);
}
.attr-list li:last-child{ border-bottom: none; padding-bottom: 0; }

.attr-swatch{
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(20,35,32,.16), inset 0 1px 1px rgba(255,255,255,.5);
}

/* =====================================================================
   DESENHO TÉCNICO (perfis) — corte do perfil em verde da marca sobre
   grade de 5 mm, cotas em milímetros. Todos na mesma escala.
   ===================================================================== */
.desenho-tecnico figure{ margin: var(--s-2) 0 0; }
.dt-folha{
  display: block;
  width: 100%;
  height: auto;
  background: var(--papel);
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--linha);
}
.dt-grade line{ stroke: rgba(24,60,50,.08); stroke-width: 1; }
.dt-perfil{ fill: var(--verde); }
/* partes de material flexível (ex.: aletas do difusor para MDF) */
.dt-perfil .dt-macio{ fill: #8DB3A2; }
.dt-serrilha{
  fill: none;
  stroke: var(--verde);
  stroke-width: .3;
  stroke-dasharray: 0 .5;
  stroke-linecap: round;
}
/* fita vista de cima: placa verde clara, LEDs/linha COB na cor da luz */
.dt-fita{
  fill: rgba(24,60,50,.1);
  stroke: var(--verde);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.dt-led,
.dt-cob{
  fill: var(--luz);
  stroke: var(--ouro);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.dt-cob{ stroke: none; }
.dt-linha{ stroke: var(--tinta-2); stroke-width: 1; }
.dt-seta{ fill: var(--tinta-2); }
.dt-texto{
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  fill: var(--tinta);
}
/* quando o quadro do desenho é estreito (celular, coluna das fitas) a
   folha encolhe; a cota cresce pra continuar legível */
.desenho-tecnico{ container-type: inline-size; }
@container (max-width: 420px){ .dt-texto{ font-size: 19px; } }
/* celular: quadro do desenho com borda interna menor, folha maior */
@media (max-width: 560px){ .attrs-col.desenho-tecnico{ padding-inline: var(--s-2); } }
/* quadro largo (fitas, duas colunas): a folha amplia ~45%, a cota diminui */
@container (min-width: 600px){ .dt-texto{ font-size: 10.5px; } }

/* fitas: o desenho ocupa duas colunas da grade de dados técnicos */
@media (min-width: 640px){
  .attrs-grid{ grid-auto-flow: row dense; }
  .attrs-grid .desenho-tecnico{ grid-column: span 2; }
}
.desenho-tecnico figcaption{
  margin-top: var(--s-1);
  font-size: 13px;
  line-height: 1.55;
  color: var(--tinta-2);
}

.produto-specs-note{
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-2);
  margin: var(--s-4) 0 0;
}

/* =====================================================================
   DETALHE ANTIGO (produtos/difusores.html, escrito à mão) — mesma cara
   do layout de foto ao lado.
   ===================================================================== */
.produto-hero + .produto-detalhe{ padding-top: 0; }

.produto-detalhe-grid{
  display: grid;
  gap: var(--s-5);
}
.produto-detalhe-media{
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--linha), var(--sombra-2);
}
.produto-detalhe-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.produto-specs{ margin-top: var(--s-5); }

@media (min-width: 860px){
  .produto-detalhe-grid{
    grid-template-columns: minmax(280px, 520px) minmax(0, 560px);
    gap: var(--s-8);
    align-items: start;
  }
}

/* =====================================================================
   LOJA — grid de opções dentro de uma categoria. Usa .produtos-grid e
   .produto-card de style.css.
   ===================================================================== */
.loja-page-head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding: 0 0 var(--s-4);
}
/* link discreto pro catálogo em PDF, no topo de cada lista */
.loja-catalogo{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta-2);
  text-decoration: none;
  transition: color var(--t-rapido) var(--ease);
}
.loja-catalogo svg{ width: 17px; height: 17px; stroke: var(--verde); flex-shrink: 0; }
.loja-catalogo:hover,
.loja-catalogo:focus-visible{ color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.loja-page-head .kicker{ margin-bottom: var(--s-1); }
.loja-page-head h1{
  font-size: var(--fs-h2);
  font-weight: 380;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.loja-section{
  padding: 0 0 var(--s-12);
  background: var(--aluminio);
}

/* loja em grupos (fitas por densidade de LED): título + uma linha que diz
   o que muda naquele grupo, depois a grade */
.loja-grupo + .loja-grupo{
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--linha);
}
.loja-grupo-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--s-3);
  margin-bottom: var(--s-3);
}
.loja-grupo-head h2{
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
}
.loja-grupo-head p{
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-2);
}
@media (min-width: 861px){
  .produto-hero{ padding-top: calc(var(--nav-h) + var(--s-5)); }
}