/* ============================================================
   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);
  /* Fundo escuro: os equipamentos são brancos e sumiam contra o papel. */
  background:#232A28;
  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;
  /* Sem multiplicação: ela fundia o fundo claro do render no cartão claro
     e, sobre o escuro, apagaria o produto inteiro. */
  mix-blend-mode:normal;
  transition:transform .6s var(--ease-out);
}
.prancha__link:hover .prancha__palco{background:color-mix(in srgb,var(--green) 16%,#232A28)}
.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;
  /* Fundo escuro: os equipamentos são brancos e desapareciam contra o
     papel claro. */
  background:#232A28;
  overflow:hidden;
}
.card__fig img{
  min-height:0;min-width:0;
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  /* Sem multiplicação: ela existia para fundir o fundo claro do render no
     cartão claro e, sobre o escuro, comeria o produto inteiro. */
  mix-blend-mode:normal;
}
.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)}

/* ============================================================
   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);
  /* Mesmo fundo escuro da listagem: o equipamento é branco e sumia. */
  background:#232A28;
  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;
  /* Sobre fundo escuro, multiplicar apagaria o produto inteiro. */
  mix-blend-mode:normal;
}

.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{
  /* Alinhado à esquerda, na mesma prumada do rótulo e do texto ao lado. */
  position:relative;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-start;
}
/* 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;
  /* Acompanha o palco: miniatura clara com peça branca não se lia. */
  background:#232A28;
  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:normal}
.prd__thumb:hover{outline-color:var(--lime)}
/* No escuro, a borda preta da miniatura ativa sumia. */
.prd__thumb.is-on{outline:2px solid var(--lime);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)}
/* ============================================================
   FICHA SIMPLIFICADA  (ficha_simples = 1)
   Mesma ficha de sempre; o giro toma o lugar da tira de ângulos e
   as fotos passam para uma janela em tela cheia.
   ============================================================ */
/* Sem a coluna de miniaturas, o palco usa a largura inteira. */
.prd__visual--giro{display:block}
/* Sem moldura: o giro fica solto na página e ganha o espaço que a caixa
   ocupava, aparecendo maior sem precisar de mais largura. */
.prd__palco--giro{
  cursor:grab;touch-action:none;
  background:transparent;border-radius:0;
  padding:0;
  /* Sem a caixa, o quadrado deixa de fazer sentido: a peça usa a altura
     disponível e aparece bem maior na mesma largura. */
  aspect-ratio:auto;
  min-height:min(76vh,660px);
}
.prd__palco--giro img{max-height:min(76vh,660px)}
.prd__palco--giro:active{cursor:grabbing}
.prd__palco--giro img{pointer-events:none;user-select:none}
/* Selo do giro: ninguém adivinha que a peça gira, então ele aparece em
   destaque, pulsando de leve, e some assim que a pessoa arrasta. */
.prd__selo360{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.1rem;border-radius:999px;
  background:var(--lime);color:var(--ink-deep);
  box-shadow:0 8px 22px rgba(11,13,14,.35);
  white-space:nowrap;
  animation:selo360 2.6s var(--ease) infinite;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.prd__selo360 svg{width:20px;height:20px;flex:none}
.prd__selo360 b{font-size:.95rem;font-weight:900;letter-spacing:-.01em}
.prd__selo360 span{font-size:.82rem;font-weight:700}
.prd__selo360.sumiu{opacity:0;transform:translateX(-50%) translateY(8px);animation:none}
@keyframes selo360{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%    {transform:translateX(-50%) translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){ .prd__selo360{animation:none} }
@media (max-width:520px){ .prd__selo360 span{display:none} }

/* Três dados numa grade de duas colunas deixavam uma célula vazia com
   borda, parecendo informação faltando. Em lista isso não acontece. */
.prd__chave--lista{display:grid;grid-template-columns:1fr;gap:0;border:0}
.prd__chave--lista > div{
  display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:1rem;align-items:baseline;
  padding:.85rem 0;border:0;border-bottom:1px solid var(--line-dk);
}
.prd__chave--lista > div:first-child{border-top:1px solid var(--line-dk)}
.prd__chave--lista dd{font-family:var(--mono);font-size:.86rem;line-height:1.5}

/* Duas ações de peso lado a lado, orçamento e PDF, e o WhatsApp embaixo,
   mais quieto. Em fila simples os três quebravam em larguras diferentes. */
.prd__acoes--grade{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.prd__acoes--grade > .btn{justify-content:center;text-align:center}
.prd__acoes--grade > .btn:last-child{grid-column:1 / -1}

/* O PDF é destino importante, então tem o mesmo peso do orçamento, em
   claro, para os dois não disputarem o mesmo verde. */
/* O preenchimento do botão vive num pseudoelemento, então é ele que
   muda de cor; pintar o fundo do próprio botão não apareceria. */
.btn--pdf{color:var(--ink-deep)}
.btn--pdf::before{background:#fff}
.btn--pdf::after{background:var(--ink)}
.btn--pdf:hover::after{transform:translateY(0)}
.btn--pdf:hover span{color:#fff}
@media (max-width:520px){
  .prd__acoes--grade{grid-template-columns:1fr}
  .prd__chave--lista > div{grid-template-columns:1fr;gap:.2rem}
}

/* Sem a ficha técnica no meio, a página escura encostava direto na faixa
   escura do orçamento e as duas viravam uma mancha só. Um fio e um clarão
   suave marcam onde uma termina e a outra começa. */
.orc--emenda{position:relative;border-top:1px solid var(--line-dk)}
.orc--emenda::before{
  content:"";position:absolute;inset:0 0 auto;height:220px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%,
             color-mix(in srgb, var(--green) 14%, transparent), transparent 70%);
}
.orc--emenda > *{position:relative}

/* Discreto de propósito: saída para quem quiser, não um destaque. */
.prd__verfotos{margin-top:.9rem;text-align:center}
.prd__verfotos button{
  font-size:.84rem;font-weight:700;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:4px;
  transition:color .3s var(--ease);
}
.prd__verfotos button:hover{color:var(--green-dk)}

/* ---------- Galeria em tela cheia ---------- */
body.sem-rolagem{overflow:hidden}
/* O display do navegador para [hidden] perde para uma classe, então a
   janela precisa dizer explicitamente que fechada é fechada. */
.fotos[hidden]{display:none}
.fotos{
  position:fixed;inset:0;z-index:9990;
  display:grid;grid-template-rows:auto minmax(0,1fr);
  background:rgba(11,13,14,.96);
  backdrop-filter:blur(6px);
}
.fotos__barra{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem clamp(1rem,3vw,2rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.fotos__cores{display:flex;flex-wrap:wrap;gap:.4rem}
.fotos__cor{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.fotos__cor i{
  width:13px;height:13px;border-radius:50%;flex:none;
  background:var(--amostra);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.fotos__cor:hover{color:#fff}
.fotos__cor.is-on{background:var(--lime);border-color:var(--lime);color:var(--ink-deep)}
.fotos__x{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;line-height:1;
}
.fotos__x:hover{background:rgba(255,255,255,.2)}
.fotos__lista{
  overflow:auto;
  /* A própria lista é item de grade da janela: sem min-width:0 ela também
     se recusa a encolher e empurra tudo para fora da tela. */
  min-width:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1rem;padding:clamp(1rem,3vw,2rem);
}
/* Altura em pixels, não proporção nem porcentagem: as duas dependem de
   uma medida definida acima na árvore, e sem ela a foto voltava ao
   tamanho natural e estourava a célula. */
/* O display do navegador para [hidden] perde para uma classe. Sem esta
   linha o filtro por acabamento deixa de esconder as fotos das outras
   cores, porque o display:grid abaixo vence. */
.fotos__lista li[hidden]{display:none}
.fotos__lista li{
  display:grid;
  /* min-width:0 é o que impede a célula de crescer até a largura natural
     da foto: item de grade não encolhe abaixo do conteúdo sem isso, e a
     lista inteira estourava para o lado. */
  min-width:0;
  height:clamp(170px,26vw,260px);
  border-radius:12px;overflow:hidden;
  background:#232A28;
}
.fotos__abrir{
  display:grid;place-items:center;
  min-width:0;min-height:0;
  cursor:zoom-in;
}
.fotos__lista img{
  /* A própria imagem também é item de grade: sem min-*:0 ela não encolhe
     abaixo do tamanho natural e continua sendo cortada, agora na altura. */
  min-width:0;min-height:0;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;padding:.8rem;
}

/* ---------- Uma foto sozinha, em tela cheia ---------- */
.foto1[hidden]{display:none}
.foto1{
  position:fixed;inset:0;z-index:9995;
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(11,13,14,.985);
  cursor:zoom-out;
}
/* O palco ocupa a área toda e a imagem cabe inteira dentro dele: na
   abertura ela nunca é cortada, só depois, se a pessoa ampliar. */
.foto1__palco{
  width:100%;height:100%;
  display:grid;place-items:center;
  overflow:hidden;
}
.foto1 img{
  max-width:100%;max-height:100%;object-fit:contain;
  transform-origin:center center;
  transition:transform .18s var(--ease-out);
  will-change:transform;
}
.foto1.ampliada .foto1__palco{cursor:grab}
.foto1.ampliada .foto1__palco:active{cursor:grabbing}
.foto1.ampliada img{transition:none}

.foto1__zoom{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:.2rem;
  padding:.3rem;border-radius:999px;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
}
.foto1__zoom button{
  min-width:44px;height:38px;border-radius:999px;
  color:#fff;font-size:1.1rem;font-weight:800;line-height:1;
  transition:background .25s var(--ease);
}
.foto1__zoom button:hover{background:rgba(255,255,255,.18)}
#prd-zoom-nivel{font-size:.8rem;min-width:62px}
.foto1__x{
  position:absolute;top:1rem;right:1rem;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;
}
.foto1__x:hover{background:rgba(255,255,255,.22)}

/* ============================================================
   CATÁLOGO  (/catalogo/, endereço impresso em QR codes)
   O quadro guarda a proporção 16:9 mesmo antes de o incorporado
   carregar, para a página não pular quando ele entra.
   ============================================================ */
.catalogo{padding-block:clamp(2.5rem,6vw,4.5rem);background:var(--paper)}
.catalogo__quadro{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;
  box-shadow:0 18px 44px rgba(20,23,26,.16);
  background:var(--paper-2);
}
.catalogo__quadro iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.catalogo__nota{
  margin-top:1.6rem;text-align:center;
  font-size:.95rem;color:var(--ink-3);
}
.catalogo__nota a{font-weight:800;color:var(--green-dk);text-decoration:underline}
/* Sem aspect-ratio, num navegador antigo, volta o truque do preenchimento. */
@supports not (aspect-ratio:16/9){
  .catalogo__quadro{height:0;padding-top:56.25%}
}

.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}
}

/* ---------- Remendos da peça do hero ----------
   O lugar certo destas regras é o sections.css e o index.php. Elas
   estão aqui porque aqueles dois arquivos estão sendo revertidos por
   um observador externo ao site (ver .impeccable/hook.cache.json), e o
   pages.css carrega depois do sections.css. Assim que der, mover.

   1. Limite de altura da peça. Sem ele a peça é dimensionada só pela
   largura, e uma peça em pé, como o carro de emergência, passa da
   altura do palco e sai cortada embaixo. A altura vai em cqh, e não em
   %, porque a altura do palco vem de aspect-ratio e o navegador trata
   isso como indefinido: max-height em porcentagem não limita nada ali.
   Medido no navegador, num palco de 570x581: com %, 481x738; com cqh,
   364x558. */
.hero__product{container-type:size}
.hero__product img{width:auto;height:auto;max-width:88%;max-height:96cqh}

/* 2. Posição dos três marcadores. As do index.php foram medidas para a
   peça anterior e caem fora do carro de emergência. Estas saíram do
   próprio quadro do hero: o amarelo do suporte de acessórios foi
   localizado por cor, o resto pelo perfil de largura da peça. O
   !important é o que vence o style inline do index.php. */
.hotspots li:nth-child(1){--x:32%!important;--y:41%!important;flex-direction:row-reverse}
.hotspots li:nth-child(2){--x:66%!important;--y:62%!important}
.hotspots li:nth-child(3){--x:67%!important;--y:79%!important;flex-direction:row}