/* ============================================================
   UDOW TECNOLOGIA · pages.css
   Estilos das páginas internas: cabeçalho de página, catálogo,
   ficha de produto, sobre, contato, erro e faixa final.
   Depende dos tokens de base.css.
   ============================================================ */

/* ---------- Utilitários ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* honeypot: fora da tela, mas não display:none (bots ignoram isso) */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.lnk{
  display:inline-block;
  font-weight:800;color:var(--accent);
  border-bottom:1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding-bottom:1px;
  transition:border-color .3s var(--ease), color .3s;
}
.lnk:hover{border-color:var(--accent)}

.vazio{
  padding:3rem 0;color:var(--fg-2);font-size:var(--t-lead);
}

/* ---------- Cabeçalho de página ---------- */
.phead{
  position:relative;
  padding-top:calc(var(--hdr-h) + clamp(3.5rem,8vw,7rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  overflow:hidden;
}
.phead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 110% at 88% 0%, color-mix(in srgb, var(--green) 26%, transparent), transparent 60%),
    linear-gradient(var(--line-dk-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dk-2) 1px,transparent 1px);
  background-size:auto, 72px 72px, 72px 72px;
  -webkit-mask-image:radial-gradient(120% 100% at 60% 0%,#000,transparent 78%);
          mask-image:radial-gradient(120% 100% at 60% 0%,#000,transparent 78%);
}
.phead__in{position:relative}
.phead--curto{padding-bottom:clamp(2.2rem,5vw,4rem)}

.phead__title{
  margin-top:1.1rem;
  font-size:clamp(2.6rem,7.4vw,7rem);
}
.phead__title .l{display:block}
.phead__lead{
  margin-top:1.4rem;
  max-width:60ch;
  font-size:var(--t-lead);
  color:var(--fg-2);
  line-height:1.62;
}
.phead__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* ---------- Migalhas ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.79rem;font-weight:700;letter-spacing:.02em;
  color:var(--fg-2);
}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.4}
.crumbs b{color:var(--fg);font-weight:800}

/* ---------- Catálogo ---------- */
.catalogo{padding-block:clamp(3rem,7vw,5.5rem)}

/* Filtro discreto, como nas vitrines: linha de links, o ativo sublinhado.
   Sem pastilha e sem caixa, para não competir com as fotos. */
.filtros{
  display:flex;flex-wrap:wrap;gap:.35rem clamp(1.1rem,2.4vw,2rem);
  padding-bottom:clamp(1.6rem,3vw,2.4rem);
}
.filtro{
  position:relative;
  display:inline-flex;align-items:baseline;gap:.42rem;
  padding-bottom:.3rem;
  font-size:.9rem;font-weight:600;
  color:var(--fg-2);
  transition:color .3s var(--ease);
}
.filtro b{
  font-family:var(--mono);
  font-size:.7rem;font-weight:700;letter-spacing:.05em;
  color:var(--ink-4);
}
.filtro:hover{color:var(--fg)}
.filtro.is-on{color:var(--fg);font-weight:800}
.filtro.is-on b{color:var(--accent)}
.filtro.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--fg);
}

.grupo{padding-top:clamp(2.6rem,6vw,4.5rem)}
.grupo__head{
  display:grid;gap:.6rem;
  max-width:62ch;
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
.grupo__head h2{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  font-weight:850;letter-spacing:-.03em;line-height:1.1;
}
.grupo__sigla{
  font-size:.68rem;font-weight:900;letter-spacing:.18em;
  padding:.34rem .6rem;border-radius:6px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  color:var(--accent);
}
.grupo__head p{color:var(--fg-2);font-size:.98rem}

/* ---------- Vitrine ----------
   Sem moldura, sem grade e sem sombra. A peça ocupa quase toda a altura
   sobre um fundo liso, e embaixo fica só o necessário para escolher.
   É o que as vitrines de referência fazem: a foto é o argumento. */
.pranchas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  column-gap:clamp(1.2rem,2.6vw,2.6rem);
  row-gap:clamp(2.4rem,4.5vw,4rem);
}
.prancha__link{display:grid;align-content:start}

/* A linha do grid precisa ser explícita. Com `aspect-ratio` e linha
   `auto`, o contêiner cresce até a altura natural da imagem e a peça
   estoura a caixa. Só apareceu quando o recorte deixou vários renders
   altos: antes eram todos largos e o `max-width` já segurava. */
.prancha__palco{
  display:grid;place-items:center;
  grid-template-rows:minmax(0,1fr);
  aspect-ratio:1;
  padding:clamp(1.2rem,2.4vw,2rem);
  background:var(--paper-3);
  overflow:hidden;
  transition:background-color .45s var(--ease);
}
.prancha__palco img{
  min-height:0;min-width:0;
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply;
  transition:transform .6s var(--ease-out);
}
.prancha__link:hover .prancha__palco{background:color-mix(in srgb,var(--green) 9%,var(--paper-3))}
.prancha__link:hover .prancha__palco img{transform:scale(1.03)}

/* Amostras de acabamento logo abaixo da foto, como nas vitrines. */
.prancha__cores{display:flex;gap:.3rem;margin-top:.9rem}
.prancha__cores i{
  width:12px;height:12px;border-radius:50%;
  background:var(--amostra);
  box-shadow:inset 0 0 0 1px rgba(20,23,26,.2);
}

.prancha__cod{
  margin-top:.9rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--ink-4);
}
.prancha__cores + .prancha__cod{margin-top:.65rem}
.prancha__nome{
  margin-top:.2rem;
  font-size:1.02rem;font-weight:800;letter-spacing:-.02em;line-height:1.25;
  color:var(--ink);
}
.prancha__nota{
  margin-top:.15rem;
  font-size:.83rem;line-height:1.45;color:var(--ink-3);
}
.prancha__nota:empty{display:none}

/* ---------- Prancha reduzida ----------
   Mesma linguagem, sem os dados: serve às listas secundárias
   (relacionados na ficha, sugestões do 404, Linha Smart). */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.card{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card__link{
  display:grid;grid-template-rows:auto auto 1fr auto;
  height:100%;padding:1rem 1.1rem 1.05rem;
  transition:background-color .35s var(--ease);
}
.card__link:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.card__fig{
  display:grid;place-items:center;
  grid-template-rows:minmax(0,1fr);
  aspect-ratio:4/3;
  padding:.9rem;
  background:var(--paper-3);
  overflow:hidden;
}
.card__fig img{
  min-height:0;min-width:0;
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply;
}
.card__cod{
  order:-1;
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  color:var(--accent);padding-bottom:.7rem;
}
.card__body{display:contents}
.card__nome{
  padding-top:.8rem;
  font-size:.97rem;font-weight:850;letter-spacing:-.025em;line-height:1.2;
}
.card__txt{
  margin-top:.4rem;font-size:.85rem;line-height:1.5;color:var(--fg-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card__cta{
  align-self:end;margin-top:.85rem;
  font-family:var(--mono);font-size:.72rem;color:var(--fg-2);
  transition:color .3s var(--ease);
}
.card__link:hover .card__cta{color:var(--accent)}
/* No escuro, a peça precisa aparecer sobre a grade clara. */
.band--dark .card__fig img{mix-blend-mode:normal}
.prancha__palco img{mix-blend-mode:multiply}

/* ============================================================
   FICHA DE PRODUTO
   ============================================================ */
/* Faixa escura: o cabeçalho do site é claro e some sobre fundo claro.
   O escuro devolve a leitura do menu e destaca o palco branco da peça. */
.prd__top{
  position:relative;
  padding-top:calc(var(--hdr-h) + clamp(2.2rem,5vw,4rem));
  padding-bottom:clamp(2.5rem,6vw,5rem);
  overflow:hidden;
}
.prd__top::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(var(--line-dk-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dk-2) 1px,transparent 1px);
  background-size:28px 28px;
}
.prd__topin{position:relative}

/* Imagem à esquerda ocupando mais espaço, coluna de decisão à direita:
   é o arranjo que as fichas de referência usam. */
.prd__hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(2rem,4.5vw,4rem);
  margin-top:clamp(1.4rem,2.6vw,2.2rem);
}
.prd__visual{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start}
.prd__palco{
  position:relative;
  display:grid;place-items:center;
  grid-template-rows:minmax(0,1fr);
  aspect-ratio:1;
  padding:clamp(1.4rem,3vw,2.6rem);
  background:var(--paper);
  overflow:hidden;
}
.prd__palco.is-girando{cursor:grab;touch-action:none}
.prd__palco.is-girando:active{cursor:grabbing}
.prd__palco.is-girando img{pointer-events:none;user-select:none}

/* Botão do giro, no canto do palco. */
.prd__giro{
  position:absolute;left:.85rem;bottom:.85rem;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.48rem .8rem;
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);
  font-size:.78rem;font-weight:700;color:var(--ink-2);
  cursor:pointer;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.prd__giro svg{width:17px;height:17px}
.prd__giro:hover{border-color:var(--ink-3);color:var(--ink)}
.prd__giro[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.prd__giro.is-carregando{opacity:.55;pointer-events:none}
.prd__giro.is-carregando span::after{content:"…"}
.prd__giro__dica{
  position:absolute;right:.9rem;bottom:1.15rem;
  font-size:.72rem;color:var(--ink-4);
}
.prd__palco img{
  min-height:0;min-width:0;
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  mix-blend-mode:multiply;
}

.prd__cat{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.prd__cod{
  margin-top:1.1rem;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
  color:var(--fg-2);
}
.prd__title{
  margin-top:.15rem;
  font-weight:900;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.04;letter-spacing:-.035em;
}
.prd__lead{
  margin-top:1rem;max-width:46ch;
  font-size:1.02rem;color:var(--fg-2);line-height:1.6;
}

/* Acabamento com o nome da cor visível. */
.prd__acab{margin-top:1.6rem}
.prd__acab__t{font-size:.85rem;color:var(--fg-2)}
.prd__acab__t b{color:var(--fg);font-weight:800}
.prd__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* Dados de decisão antes da ficha completa. */
.prd__chave{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;margin-top:1.7rem;
  background:var(--rule);
  border:1px solid var(--rule);
}
.prd__chave > div{
  display:grid;gap:.25rem;
  padding:.8rem .9rem;
  background:var(--bg);
}
.prd__chave dt{
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-2);
}
.prd__chave dd{
  font-family:var(--mono);font-size:.82rem;line-height:1.35;color:var(--fg);
}

/* ---------- Sobre: faixa de fatos ---------- */
.fatos{padding-block:clamp(2.4rem,5vw,4rem);background:var(--paper-2)}
.fatos__lista{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.fatos__it{
  display:grid;gap:.35rem;align-content:start;
  padding:clamp(1.1rem,2.2vw,1.8rem);
  background:var(--paper);
}
.fatos__it dt{
  display:flex;align-items:baseline;gap:.4rem;
  font-size:clamp(2rem,4.2vw,3.2rem);font-weight:900;
  letter-spacing:-.045em;line-height:1;color:var(--ink);
}
.fatos__it dt span{
  font-size:.9rem;font-weight:800;letter-spacing:-.01em;color:var(--green);
}
.fatos__it dd{
  font-size:.85rem;line-height:1.4;color:var(--ink-3);max-width:22ch;
}
@media (max-width:820px){
  .fatos__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Aviso de que a seção descreve a linha que ainda não existe. */
.inov__aviso{
  margin-top:1.1rem;max-width:60ch;
  font-size:.93rem;line-height:1.6;color:var(--fg-2);
}
.inov__aviso a{
  color:var(--accent);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---------- Linha Smart sem catálogo ---------- */
.smart-breve{padding-block:clamp(3rem,6vw,5rem);background:var(--paper)}
.smart-breve__in{
  display:grid;gap:1.4rem;align-items:start;
  grid-template-columns:auto 1fr auto;
  padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--paper-2);
}
.smart-breve__selo{
  align-self:start;
  padding:.35rem .75rem;border-radius:var(--r-pill);
  background:var(--ink);color:var(--lime);
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
}
.smart-breve__txt h2{
  font-size:var(--t-h3);font-weight:850;letter-spacing:-.03em;line-height:1.15;
  margin-bottom:.5rem;
}
.smart-breve__txt p{color:var(--ink-3);font-size:.985rem;line-height:1.62;max-width:62ch}
.smart-breve__in .btn{align-self:center}
@media (max-width:860px){
  .smart-breve__in{grid-template-columns:1fr}
  .smart-breve__in .btn{justify-self:start}
}

/* Acabamentos: cada botão traz a amostra da cor do render. */
.prd__cores{
  position:relative;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
}
/* Amostras redondas, só a cor: o nome fica no rótulo acima. */
.prd__cores{display:flex;gap:.5rem;margin-top:.55rem}
.prd__cor{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  padding:0;background:none;border:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .3s var(--ease);
}
.prd__cor i{
  width:22px;height:22px;border-radius:50%;
  background:var(--amostra);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.prd__cor:hover{box-shadow:inset 0 0 0 1px var(--fg-2)}
.prd__cor.is-on{box-shadow:inset 0 0 0 2px var(--fg)}

/* Tira vertical ao lado da imagem, como nas fichas de referência.
   Um produto chega a ter 13 ângulos, então ela rola. */
.prd__thumbs{
  display:flex;flex-direction:column;gap:.45rem;
  max-height:min(62vh,560px);
  padding-right:.25rem;
  overflow-y:auto;overscroll-behavior-y:contain;
  scroll-snap-type:y proximate;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
.prd__thumbs::-webkit-scrollbar{width:3px}
.prd__thumbs::-webkit-scrollbar-track{background:transparent}
.prd__thumbs::-webkit-scrollbar-thumb{background:var(--rule)}
.prd__thumb{
  flex:0 0 auto;
  width:56px;height:56px;padding:5px;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--paper);
  outline:1px solid transparent;outline-offset:-1px;
  transition:outline-color .3s var(--ease);
}
.prd__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.prd__thumb:hover{outline-color:var(--ink-4)}
.prd__thumb.is-on{outline:2px solid var(--ink);outline-offset:-2px}

@media (max-width:900px){
  .prd__visual{grid-template-columns:1fr}
  .prd__thumbs{
    order:2;flex-direction:row;max-height:none;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximate;
  }
  .prd__thumbs::-webkit-scrollbar{width:auto;height:3px}
}

/* ---------- Corpo: descrição + ficha ---------- */
.prd__corpo{padding-block:clamp(3rem,7vw,6rem)}
.prd__grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
.prd__h2{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-size:.7rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);
  padding-bottom:.9rem;margin-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}
.prd__h2 span{letter-spacing:.12em;color:var(--ink-4)}
.rich{max-width:66ch}
.rich p{margin-bottom:1.05rem;color:var(--ink-2);line-height:1.72}
.rich p:last-child{margin-bottom:0}
.rich strong{font-weight:800;color:var(--ink)}
.rich ul{display:grid;gap:.45rem;margin:0 0 1.05rem}
.rich li{position:relative;padding-left:1.2rem;color:var(--ink-2)}
.rich li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:7px;height:7px;border-radius:2px;background:var(--green);
}
.rich h3,.rich h4{margin:1.6rem 0 .6rem;font-weight:850;letter-spacing:-.02em}

/* A ficha ficava numa coluna estreita com 17 linhas, ao lado de um
   parágrafo de 150 caracteres. Agora ela ocupa a coluna larga e se abre
   em duas colunas, e o texto curto vai para o cartão lateral. */
.prd__lateral{
  position:sticky;top:calc(var(--hdr-h) + 1.5rem);
  display:grid;justify-items:start;
  padding:1.4rem 1.5rem 1.6rem;
  border:1px solid var(--line);
  background:var(--paper-2);
}
.prd__lateral .rich p{font-size:.95rem}
.prd__lateral .btn{margin-top:1.3rem}

.ficha{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(1.6rem,3vw,3rem);
}
.ficha__row{
  /* Rótulo em medida fixa: a linha larga atravessa as duas colunas e, com
     fração, o valor dela começaria no meio da página, fora da prumada dos
     outros valores. */
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:1rem;
  padding:.72rem 0;
  border-bottom:1px dashed var(--line);
}
@media (max-width:1080px){
  .ficha{grid-template-columns:1fr}
}
/* Numa coluna só, a última linha é a única sem régua. */
.ficha > .ficha__row:last-child{border-bottom:0}
.ficha__row dt{
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-4);padding-top:.22em;
}
/* Valor em monoespaçada: medida se lê como medida. */
.ficha__row dd{
  font-family:var(--mono);
  font-size:.84rem;line-height:1.5;color:var(--ink);
}
/* Uma medida por linha, com a continuação recuada, para a vista separar
   onde termina uma e começa a outra. */
.ficha__row dd span{display:block}
.ficha__row dd span + span{margin-top:.3rem;padding-left:1.1rem;text-indent:-1.1rem}
/* Ficha longa atravessa as duas colunas, senão a medida quebra no meio. */
.ficha__row--largo{grid-column:1/-1}
.ficha__nota{
  margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-3);line-height:1.55;
}

/* ---------- Navegação anterior / próximo ---------- */
.prd__nav{border-block:1px solid var(--line)}
.prd__navin{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.15rem;
}
.prd__prev,.prd__next{display:grid;gap:.15rem;transition:color .3s}
.prd__next{text-align:right}
.prd__prev span,.prd__next span{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--ink-3)}
.prd__prev b,.prd__next b{font-size:.95rem;font-weight:850;letter-spacing:-.02em}
.prd__prev:hover,.prd__next:hover{color:var(--green)}
.prd__todos{
  font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);transition:color .3s;
}
.prd__todos:hover{color:var(--green)}

.rel{padding-block:clamp(3rem,7vw,5.5rem)}
.rel .shead{margin-bottom:clamp(1.6rem,3vw,2.4rem)}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.form{display:grid;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.campo{display:grid;gap:.42rem}
.campo > span{
  font-size:.72rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-2);
}
.campo input,
.campo textarea{
  width:100%;
  padding:.85rem 1rem;
  border-radius:12px;
  background:var(--paper);
  color:var(--ink);
  border:1.5px solid var(--line);
  font-size:.98rem;
  transition:border-color .3s, box-shadow .3s;
}
.campo textarea{resize:vertical;min-height:120px;line-height:1.6}

/* Verificação humana: a conta e a resposta dentro da mesma moldura, para
   ler como uma frase só. A caixa é estreita porque a resposta é curta, e
   um campo largo sugeriria que se espera muito mais do que dois dígitos. */
.verifica__in{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.5rem .6rem .5rem 1rem;
  border-radius:12px;
  background:var(--paper);
  border:1.5px solid var(--line);
  transition:border-color .3s, box-shadow .3s;
}
.verifica__conta{
  font-family:var(--mono);font-size:1.05rem;font-weight:700;
  color:var(--ink);letter-spacing:.06em;white-space:nowrap;user-select:none;
}
.verifica__conta i{font-style:normal;color:var(--green)}
.campo.verifica input{
  width:4.2rem;padding:.5rem .6rem;text-align:center;
  font-family:var(--mono);font-size:1.05rem;
  border-color:transparent;background:color-mix(in srgb, var(--ink) 5%, transparent);
}
.campo.verifica input:focus{box-shadow:none;border-color:var(--green)}
.verifica__in:focus-within{
  border-color:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 15%, transparent);
}
.band--dark .verifica__conta{color:#fff}
.band--dark .verifica__in{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.campo input:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 15%, transparent);
}
.band--dark .campo input,
.band--dark .campo textarea{
  background:rgba(255,255,255,.05);color:#fff;border-color:var(--line-dk);
}
.band--dark .campo input::placeholder,
.band--dark .campo textarea::placeholder{color:rgba(255,255,255,.35)}
.band--dark .campo input:focus,
.band--dark .campo textarea:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 18%, transparent);
}
.form .btn{justify-self:start;margin-top:.35rem}
.form__nota{font-size:.78rem;color:var(--fg-2)}

.aviso{
  display:grid;gap:.5rem;justify-items:start;
  padding:1.2rem 1.35rem;
  border-radius:14px;
  font-size:.94rem;line-height:1.55;
}
.aviso b{font-size:1.02rem;font-weight:850;letter-spacing:-.02em}
.aviso ul{display:grid;gap:.25rem;padding-left:1.1rem;list-style:disc}
.aviso--ok{
  background:color-mix(in srgb, var(--lime) 15%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 45%, transparent);
}
.aviso--erro{
  background:rgba(214,69,59,.1);
  box-shadow:inset 0 0 0 1.5px rgba(214,69,59,.4);
}

/* ---------- Bloco de orçamento na ficha ---------- */
.orc{padding-block:clamp(3.2rem,7vw,6rem)}
.orc__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.orc__lista{display:grid;gap:.5rem;margin-top:1.6rem}
.orc__lista li{
  position:relative;padding-left:1.3rem;
  font-size:.93rem;color:rgba(255,255,255,.68);
}
.orc__lista li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:2px;background:var(--lime);
}
.orc__lista b{color:#fff;font-weight:850}
.orc__form{
  padding:clamp(1.4rem,3vw,2.1rem);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px var(--line-dk-2);
}

/* ============================================================
   SOBRE
   ============================================================ */
.tres{padding-block:clamp(3.2rem,7vw,5.5rem)}
.tres__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.tres__it{
  display:grid;gap:.65rem;align-content:start;
  padding-top:1.4rem;border-top:2px solid var(--ink);
}
.tres__n{
  font-size:.7rem;font-weight:900;letter-spacing:.2em;color:var(--green);
}
.tres__it h2{font-size:clamp(1.2rem,2vw,1.55rem);font-weight:850;letter-spacing:-.03em;line-height:1.15}
.tres__it p{color:var(--ink-3);font-size:.96rem;line-height:1.62}

.difs{padding-block:clamp(3.5rem,8vw,6.5rem)}
.difs__lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1.2rem,2.6vw,2rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.difs__it{
  display:grid;gap:.6rem;align-content:start;
  padding:1.5rem 1.4rem;
  border-radius:var(--r-card);
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--line-dk-2);
  transition:background-color .4s, box-shadow .4s;
}
.difs__it:hover{
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lime) 34%, transparent);
}
/* Um sistema só: mesmo quadro, mesmo traço, o acento em lima. */
.difs__ico{
  width:48px;height:48px;margin-bottom:.4rem;
  color:rgba(255,255,255,.78);
  transition:color .4s var(--ease);
}
.difs__ico .ac{color:var(--lime)}
.difs__it:hover .difs__ico{color:#fff}
.difs__it h3{font-size:1.02rem;font-weight:850;letter-spacing:-.025em;line-height:1.2}
.difs__it p{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.55}

.inov{padding-block:clamp(3.5rem,8vw,6.5rem)}
.inov__lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(1.4rem,3vw,2.4rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.inov__it{
  display:grid;gap:.55rem;align-content:start;
  padding-top:1.3rem;
  border-top:1px solid var(--rule);
}
.inov__n{
  font-size:.68rem;font-weight:900;letter-spacing:.2em;color:var(--accent);
}
.inov__it h3{font-size:1.08rem;font-weight:850;letter-spacing:-.028em;line-height:1.2}
.inov__it p{font-size:.93rem;color:var(--fg-2);line-height:1.6}

.fabrica{padding-block:clamp(3rem,7vw,5.5rem)}

/* Palco da marca que se monta, no lugar da antiga foto de ambiente. */
.marca3d{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  min-height:280px;
  opacity:0;
  transition:opacity .7s var(--ease-out);
}
.marca3d.is-pronto{opacity:1}
.marca3d__tela{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){
  .marca3d{transition:none}
}
.fabrica__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.fabrica__foto{border-radius:var(--r-card);overflow:hidden}
.fabrica__foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.fabrica__copy{display:grid;gap:1.2rem;justify-items:start}

/* ============================================================
   CONTATO
   ============================================================ */
.contato{padding-block:clamp(3rem,7vw,5.5rem)}
.contato__in{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.contato__lado{display:grid;gap:1rem;align-content:start}
.contato__lado .ccard{margin:0}
/* O .ccard nasceu para o rodapé escuro, com texto quase branco. Aqui o
   fundo é claro, então telefone, e-mail e endereço precisam de tinta
   escura, e o rótulo, de um verde que sobreviva sobre o papel. */
.contato__lado .ccard__lb{color:var(--green-dk)}
.contato__lado .ccard a,
.contato__lado .ccard address{color:var(--ink)}
.contato__lado .ccard a:hover,
.contato__lado .ccard a:focus-visible{color:var(--green-dk)}
.mapa{line-height:0;filter:grayscale(.35) contrast(1.05)}
.mapa iframe{display:block;width:100%}

/* ============================================================
   FAIXA FINAL (newsletter + contato) — rodapé das internas
   ============================================================ */
.endcta{padding-block:clamp(3.2rem,7vw,5.5rem);position:relative;overflow:hidden}
.endcta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 100% at 12% 100%, color-mix(in srgb, var(--green) 22%, transparent), transparent 62%);
}
.endcta__in{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.endcta__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}
.endcta__news{
  display:grid;gap:.8rem;
  padding:clamp(1.3rem,3vw,1.9rem);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 1px var(--line-dk-2);
}
.endcta__news p{font-size:.92rem;color:rgba(255,255,255,.62);line-height:1.55}
.endcta__news .news{display:flex;gap:.55rem;align-items:stretch}
.news__field{flex:1;display:block}
.news__field input{
  width:100%;height:44px;
  padding:0 .95rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);color:#fff;
  border:1.5px solid var(--line-dk);
  font-size:.92rem;
}
.news__field input::placeholder{color:rgba(255,255,255,.35)}
.news__field input:focus{
  outline:none;border-color:var(--lime);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--lime) 16%, transparent);
}
.news__msg{font-size:.82rem;font-weight:700}
.news__msg.is-ok{color:var(--lime)}
.news__msg.is-erro{color:#F09A93}

/* ---------- Rodapé: coluna de contato ---------- */
.foot__contato{display:grid;align-content:start;gap:.35rem}
.foot__contato a{font-weight:700;font-size:.95rem;color:rgba(255,255,255,.72);transition:color .3s}
.foot__contato a:hover{color:var(--lime)}
.foot__contato address{margin-top:.5rem;font-size:.88rem;color:rgba(255,255,255,.5);line-height:1.6}
.foot__contato .ccard__lb{margin-bottom:.6rem}
.foot__in{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.8fr)}

/* ---------- Faixa Smart no catálogo ---------- */
.faixa-smart{padding-block:clamp(2.6rem,6vw,4.5rem);background:var(--paper-2)}
.faixa-smart__in{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.6rem,4vw,3rem);align-items:center;
}
.faixa-smart .shead__title{font-size:clamp(1.6rem,3.4vw,2.6rem);margin-block:.7rem .8rem}
.faixa-smart .shead__title .l{display:inline}

/* ============================================================
   ERRO 404
   ============================================================ */
.erro{
  padding-top:calc(var(--hdr-h) + clamp(4rem,10vw,8rem));
  padding-bottom:clamp(4rem,9vw,7rem);
  position:relative;overflow:hidden;
}
.erro::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 100% at 80% 10%, color-mix(in srgb, var(--green) 25%, transparent), transparent 62%);
}
.erro__in{position:relative;display:grid;gap:1.2rem;justify-items:start}
.erro__title{margin-top:.6rem;font-size:clamp(2.6rem,8vw,7rem)}
.erro__title .l{display:block}
.erro__lead{max-width:48ch;color:var(--fg-2);font-size:var(--t-lead)}
.erro__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.6rem}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .prd__hero{grid-template-columns:1fr;gap:2.4rem}
  .prd__grid{grid-template-columns:1fr}
  .prd__lateral{position:static}
  .orc__in{grid-template-columns:1fr}
  .contato__in{grid-template-columns:1fr}
  .endcta__in{grid-template-columns:1fr}
  .fabrica__in{grid-template-columns:1fr}
  .tres__in{grid-template-columns:1fr}
  .foot__in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
  .faixa-smart__in{grid-template-columns:1fr;justify-items:start}
}

@media (max-width:640px){
  .form__row{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .prd__navin{flex-wrap:wrap;gap:.9rem}
  .prd__todos{order:3;width:100%;text-align:center}
  .endcta__news .news{flex-direction:column}
  .endcta__news .btn{width:100%}
  .filtros{gap:.3rem 1.1rem}
  .prd__chave{grid-template-columns:1fr}
  .foot__in{grid-template-columns:1fr}
}

/* Preferência por menos movimento. As pranchas já não usam movimento
   no hover: a resposta é só mudança de cor. */
@media (prefers-reduced-motion:reduce){
  .prancha__link,
  .card__link{transition:none}
}