/* ==========================================================================
   CATÁLOGO DE PEÇAS

   Página do cliente, então clara e da mesma família da apresentação
   institucional: quem chega aqui pelo link do vendedor tem que reconhecer a
   mesma empresa.

   O desenho técnico é o protagonista. Numa peça de concreto o que distingue é
   a seção, não a aparência: é o corte que explica por que a viga é "I" e não
   retangular. A foto realista entra ao lado, sem substituir.
   ========================================================================== */

@import url("/pecas.css");

[hidden]{display:none!important}

:root{
  --papel:#FFFFFF;
  --papel-2:#F6F7F8;
  --papel-3:#EDEFF1;
  --fio:#E2E5E8;
  --fio-2:#CBD0D5;
  --tinta:#16191C;
  --tinta-2:#4A5158;
  --tinta-3:#636B73;
  --marca:#C1171F;
  --marca-forte:#A5131A;
  --marca-fraca:#FDEEEF;
  --fonte:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,5vw,64px);
  --r:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--papel)}
body{font-family:var(--fonte);color:var(--tinta);line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

.d1{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:800;line-height:1.06;
  letter-spacing:-.03em;margin:0 0 .6rem;text-wrap:balance}
.d2{font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:800;line-height:1.15;
  letter-spacing:-.025em;margin:0 0 .25rem}

.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none;
  padding:.7rem 1.3rem;border-radius:999px;
  border:1.5px solid var(--fio-2);background:var(--papel);color:var(--tinta);
  transition:background .16s ease-out,border-color .16s ease-out,transform .1s ease-out;
}
.bt:hover{border-color:var(--tinta-3);background:var(--papel-2)}
.bt:active{transform:scale(.98)}
.bt:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.bt--red{background:var(--marca);border-color:var(--marca);color:#FFFFFF}
.bt--red:hover{background:var(--marca-forte);border-color:var(--marca-forte)}
.bt--g{padding:.85rem 1.7rem;font-size:1rem}

/* --------------------------------------------------------------- cabeçalho */
.cab{border-bottom:1px solid var(--fio);background:var(--papel-2)}
.cab__env{max-width:74rem;margin:0 auto;padding:clamp(30px,6vh,64px) var(--gutter);
  display:grid;gap:clamp(18px,3vw,40px);grid-template-columns:auto 1fr;align-items:center}
.cab__logo{width:clamp(92px,10vw,124px);height:auto}
.cab__txt p{margin:0;color:var(--tinta-2);font-size:clamp(.98rem,1.6vw,1.1rem);max-width:52ch}
@media(max-width:44rem){ .cab__env{grid-template-columns:1fr} }

/* ----------------------------------------------------------------- filtros */
.filtros{
  position:sticky;top:0;z-index:5;display:flex;gap:.4rem;overflow-x:auto;
  padding:.8rem var(--gutter);background:var(--papel);
  border-bottom:1px solid var(--fio);scrollbar-width:none;
}
.filtros::-webkit-scrollbar{display:none}
.fl{
  font:inherit;font-size:.88rem;font-weight:600;white-space:nowrap;cursor:pointer;
  padding:.45rem .95rem;border-radius:999px;
  border:1.5px solid var(--fio);background:var(--papel);color:var(--tinta-2);
  transition:.16s ease-out;
}
.fl:hover{border-color:var(--fio-2);color:var(--tinta)}
.fl.on{background:var(--tinta);border-color:var(--tinta);color:#FFFFFF}
.fl:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

/* ------------------------------------------------------------------ lista */
.lista{max-width:74rem;margin:0 auto;padding:0 var(--gutter) clamp(40px,7vh,80px)}
.fam{padding:clamp(32px,5vh,56px) 0 0}
.fam__cab{margin-bottom:clamp(16px,2.5vh,26px)}
.fam__cab p{margin:0;color:var(--tinta-3);font-size:.94rem}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  gap:clamp(12px,2vw,20px)}

.pc{
  display:grid;gap:.7rem;padding:1rem;cursor:pointer;
  border:1.5px solid var(--fio);border-radius:var(--r);background:var(--papel);
  transition:border-color .16s ease-out,transform .14s ease-out,box-shadow .16s ease-out;
}
.pc:hover{border-color:var(--fio-2);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(22,25,28,.07)}
.pc:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.pc__fig{background:var(--papel-2);border-radius:8px;padding:.7rem;
  display:grid;place-items:center;min-height:8.5rem}
.pc__fig img{border-radius:6px}
.pc__txt b{display:block;font-size:.98rem;font-weight:700;line-height:1.25;margin-bottom:.15rem}
.pc__txt span{display:block;font-size:.86rem;color:var(--tinta-2);line-height:1.45}

.vazio{color:var(--tinta-3);padding:3rem 0}
.carregando{display:grid;place-items:center;gap:.8rem;padding:4rem 1rem;color:var(--tinta-3)}
.girando{width:24px;height:24px;border-radius:50%;
  border:2.5px solid var(--fio);border-top-color:var(--marca);
  animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ ficha */
.ficha{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:1rem}
.ficha__fundo{position:absolute;inset:0;background:rgba(14,17,20,.55)}
.ficha__folha{
  position:relative;background:var(--papel);border-radius:16px;padding:clamp(20px,4vw,36px);
  width:min(40rem,100%);max-height:90dvh;overflow:auto;
  box-shadow:0 24px 60px rgba(14,17,20,.28);
}
.ficha__x{
  position:absolute;top:.9rem;right:.9rem;font:inherit;font-size:.84rem;font-weight:600;
  padding:.4rem .8rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--fio-2);background:var(--papel);color:var(--tinta-2);
}
.ficha__x:hover{background:var(--papel-2);color:var(--tinta)}
.ficha__x:focus-visible{outline:2px solid var(--marca);outline-offset:2px}

.fi__fam{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--marca);margin:0 0 .5rem}
.fi__resumo{margin:.3rem 0 1.2rem;font-size:1.06rem;color:var(--tinta);line-height:1.5}
.fi__fig{background:var(--papel-2);border-radius:var(--r);padding:1.2rem;margin-bottom:1.2rem}
.fi__corpo{margin:0 0 1.2rem;color:var(--tinta-2);line-height:1.6}
.fi__onde{
  border-left:3px solid var(--marca);background:var(--marca-fraca);
  padding:.9rem 1.1rem;border-radius:0 8px 8px 0;margin-bottom:1.4rem;
}
.fi__onde b{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marca-forte);margin-bottom:.25rem}
.fi__onde span{color:var(--tinta);line-height:1.5}

/* --------------------------------------------------------------------- pé */
.pe{border-top:1px solid var(--fio);background:var(--papel-2)}
.pe__env{max-width:74rem;margin:0 auto;padding:clamp(34px,6vh,64px) var(--gutter)}
.pe__ch{margin:0 0 .3rem;font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:800;
  letter-spacing:-.02em}
.pe__env p{margin:0;color:var(--tinta-2);max-width:54ch}
.pe__bts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ------------------------------------------------------------ peça em 3D */
.pc__3d{
  display:inline-block;margin-left:.4rem;font-family:var(--mono);font-size:.6rem;
  font-weight:500;letter-spacing:.08em;vertical-align:middle;
  padding:.1rem .34rem;border-radius:4px;background:var(--marca-fraca);color:var(--marca);
}
.fi__3d{margin-bottom:1.2rem}
.v3d{
  position:relative;background:var(--papel-2);border-radius:var(--r);
  aspect-ratio:4/3;overflow:hidden;touch-action:none;
}
.v3d canvas{width:100%;height:100%;display:block;cursor:grab}
.v3d canvas:active{cursor:grabbing}
.v3d__dica{
  position:absolute;left:.8rem;bottom:.7rem;margin:0;font-size:.76rem;
  color:var(--tinta-3);pointer-events:none;
}
.v3d__med{
  position:absolute;right:.8rem;bottom:.7rem;margin:0;font-family:var(--mono);
  font-size:.76rem;color:var(--tinta-2);pointer-events:none;
}
/* O corte continua disponível, recolhido: quem quer entender a seção abre.
   Ele não some porque o 3D não mostra armadura nem espessura cotada. */
.fi__corte{margin-top:.7rem}
.fi__corte summary{
  cursor:pointer;font-size:.86rem;color:var(--tinta-2);padding:.4rem 0;
  list-style:none;display:flex;align-items:center;gap:.4rem;
}
.fi__corte summary::before{content:"+";font-family:var(--mono);color:var(--marca)}
.fi__corte[open] summary::before{content:"−"}
.fi__corte summary:hover{color:var(--tinta)}
.fi__corte summary:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
.fi__corte > div{background:var(--papel-2);border-radius:var(--r);padding:1rem;margin-top:.4rem}