/* ============================================================================
   JM ELETRO MOTORES · DESIGN SYSTEM · 03 COMPONENTES
   Cada bloco aqui é reutilizável e não sabe em que seção está.
   Gramática: desenho técnico — hairline, cota, etiqueta mono, zero sombra.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   BOTÃO · .btn (cobre = acento único) · .btn--linha · .btn--fantasma
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--f-tit); font-weight:600; font-size:.98rem;
  line-height:1.2;
  color:var(--brand-azul);
  background:var(--brand-cobre);
  text-decoration:none;
  padding:var(--s-3) var(--s-5);
  border:var(--traco) solid rgba(10, 32, 54, .25);
  position:relative; overflow:hidden;
  transition:filter var(--dur-1) var(--ease-ui),
             transform var(--dur-1) var(--ease-ui),
             border-color var(--dur-1) var(--ease-ui);
}
.btn > *{ position:relative; z-index:1; }
.btn svg{ flex:none; }
.btn:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* varredura de luz na entrada do cursor — micro-interação discreta */
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 35%,
             rgba(255,255,255,.38) 50%, transparent 65%);
  transform:translateX(-120%);
  transition:transform .55s var(--ease-saida);
}
.btn:hover::after{ transform:translateX(120%); }

.btn--linha{
  background:transparent;
  border-color:var(--linha-c);
  color:var(--ink-c-forte);
}
.btn--linha:hover{ border-color:var(--ink-c-forte); filter:none; }
.btn--linha::after{ display:none; }
.inverso .btn--linha{ border-color:var(--linha-e); color:var(--ink-e-forte); }
.inverso .btn--linha:hover{ border-color:var(--ink-e-forte); }

.btn--p{ padding:var(--s-2) var(--s-4); font-size:.85rem; }

/* ----------------------------------------------------------------------------
   COTA DE SEÇÃO · "01 · Equipamentos ————————"
   A linha à direita é desenhada pelo GSAP (scaleX 0→1) ao entrar na tela.
   -------------------------------------------------------------------------- */
.cota{
  font-family:var(--f-mono);
  font-size:var(--t-dado);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-c-fraco);
  display:flex; align-items:center; gap:var(--s-4);
  margin-bottom:var(--s-5);
}
.cota b{ color:var(--ink-acento); font-weight:400; }
/* elemento real (não ::after) porque o GSAP desenha a linha com scaleX */
.cota__linha{
  flex:1; height:var(--traco);
  background:var(--linha-c);
  transform-origin:left center;
}
.inverso .cota{ color:var(--ink-e-fraco); }
.inverso .cota__linha{ background:var(--linha-e); }

/* ----------------------------------------------------------------------------
   FICHA TÉCNICA · linha de pares "RÓTULO · valor" em mono
   -------------------------------------------------------------------------- */
.ficha{
  border-top:var(--traco) solid var(--linha-c);
  padding-top:var(--s-4);
  display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-7);
  font-family:var(--f-mono);
  font-size:var(--t-dado);
  color:var(--ink-c-corpo);
}
.ficha b{ font-weight:400; color:var(--ink-c-fraco); letter-spacing:.08em; }
.ficha span{ white-space:nowrap; }

/* ----------------------------------------------------------------------------
   PLACA · cartela com legenda técnica (usada na foto do hero e no visor 3D)
   -------------------------------------------------------------------------- */
.placa{
  background:var(--sf-elevada);
  border:var(--traco) solid var(--linha-c);
  position:relative;
}
/* marcas de canto de desenho técnico */
.placa::before, .placa::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border-color:var(--linha-cobre); border-style:solid; border-width:0;
}
.placa::before{ top:-1px; left:-1px;  border-top-width:var(--traco); border-left-width:var(--traco); }
.placa::after { bottom:-1px; right:-1px; border-bottom-width:var(--traco); border-right-width:var(--traco); }

.placa__legenda{
  border-top:var(--traco) solid var(--linha-c);
  padding:var(--s-3) var(--s-4);
  font-family:var(--f-mono);
  font-size:var(--t-dado-p);
  letter-spacing:.06em;
  color:var(--ink-c-corpo);
  display:flex; justify-content:space-between; gap:var(--s-4);
}
.placa__legenda b{ font-weight:400; color:var(--ink-c-forte); }
.placa__midia{ width:100%; aspect-ratio:1/1; object-fit:cover; }

/* ----------------------------------------------------------------------------
   VISOR 3D · moldura do canvas Three.js (hero)
   Sem WebGL / com reduced-motion o canvas nem é criado: sobra a moldura com
   a cota, que já é um elemento de marca válido.
   -------------------------------------------------------------------------- */
.visor{
  position:absolute; inset:0;
  z-index:var(--z-fundo);
  pointer-events:none;
  overflow:hidden;
}
/* O fade entra por @keyframes, não por transition: uma transition disparada
   no mesmo instante em que o canvas é inserido no DOM fica presa em 0 — o
   navegador não chegou a resolver o estilo inicial para ter de onde sair. */
.visor canvas{ width:100%; height:100%; opacity:0; }
.visor[data-pronto="1"] canvas{
  animation:visor-entra 1.2s var(--ease-saida) forwards;
}
@keyframes visor-entra{ from{ opacity:0; } to{ opacity:.5; } }

/* ----------------------------------------------------------------------------
   GRADE · papel milimetrado do desenho técnico (fundo de seção)
   -------------------------------------------------------------------------- */
.grade{ position:relative; isolation:isolate; --grade-desloca:0px; }
.grade::before{
  content:""; position:absolute; inset:0; z-index:var(--z-fundo);
  pointer-events:none;
  background-image:
    linear-gradient(to right,  var(--grade-cor) var(--traco), transparent var(--traco)),
    linear-gradient(to bottom, var(--grade-cor) var(--traco), transparent var(--traco));
  background-size:var(--grade-passo) var(--grade-passo);
  background-position:0 var(--grade-desloca);   /* GSAP desloca na rolagem */
  -webkit-mask-image:radial-gradient(120% 85% at 62% 35%, #000 8%, transparent 72%);
          mask-image:radial-gradient(120% 85% at 62% 35%, #000 8%, transparent 72%);
}
/* o conteúdo sobe acima da grade — menos o visor 3D, que fica no fundo */
.grade > *:not(.visor){ position:relative; z-index:var(--z-base); }
.inverso.grade::before{
  background-image:
    linear-gradient(to right,  var(--grade-cor-e) var(--traco), transparent var(--traco)),
    linear-gradient(to bottom, var(--grade-cor-e) var(--traco), transparent var(--traco));
}

/* ----------------------------------------------------------------------------
   LISTA TÉCNICA · itens numerados "EQP-01 · Motores trifásicos"
   -------------------------------------------------------------------------- */
.lista{
  border-top:var(--traco) solid var(--linha-c);
  display:grid;
}
@media (min-width:820px){
  .lista{ grid-template-columns:1fr 1fr; column-gap:var(--s-8); }
}
.lista__item{
  display:grid;
  grid-template-columns:5.4rem 1fr;
  gap:var(--s-4);
  align-items:baseline;
  padding:var(--s-4) 0;
  border-bottom:var(--traco) solid var(--linha-c);
  position:relative;
  transition:background var(--dur-2) var(--ease-ui);
}
/* traço de cobre que cresce da esquerda no hover — cota "medindo" o item */
.lista__item::before{
  content:""; position:absolute; left:0; bottom:-1px; height:var(--traco);
  width:100%; background:var(--brand-cobre);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease-saida);
}
.lista__item:hover::before{ transform:scaleX(1); }
.lista__item:hover .lista__cod{ color:var(--ink-acento); }

.lista__cod{
  font-family:var(--f-mono);
  font-size:var(--t-dado-p);
  letter-spacing:.08em;
  color:var(--ink-c-fraco);
  transition:color var(--dur-2) var(--ease-ui);
}
.lista__item h3{ font-size:1.12rem; }
.lista__item p{
  font-size:.88rem; font-weight:300;
  color:var(--ink-c-corpo);
  margin-top:var(--s-1);
}

/* ----------------------------------------------------------------------------
   RAZÃO · fato numerado dentro do bloco azul
   -------------------------------------------------------------------------- */
.razoes{ border-top:var(--traco) solid var(--linha-e); }
.razao{
  display:grid;
  grid-template-columns:4.6rem 1fr;
  gap:var(--s-5);
  padding:var(--s-5) 0;
  border-bottom:var(--traco) solid var(--linha-e);
}
@media (min-width:820px){
  .razao{ grid-template-columns:4.6rem 17rem 1fr; align-items:baseline; }
}
.razao__num{
  font-family:var(--f-mono);
  font-size:var(--t-dado);
  letter-spacing:.08em;
  color:var(--ink-acento);
}
.razao h3{ font-size:1.3rem; }
.razao p{
  font-size:.95rem; font-weight:300;
  color:var(--ink-e-corpo);
  max-width:52ch;
}
@media (max-width:819px){
  .razao p{ grid-column:2; margin-top:var(--s-1); }
}

/* ----------------------------------------------------------------------------
   SLOT DE FOTO · a moldura pontilhada É o estado vazio
   Solte o arquivo em assets/fotos/ com o nome da tabela (LEIA-ME.md) que a
   imagem cobre o slot e a moldura vira sólida.
   -------------------------------------------------------------------------- */
.slots{
  display:grid; gap:var(--s-4);
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
}
.slot{
  position:relative; overflow:hidden;
  aspect-ratio:4/3;
  border:var(--traco) dashed var(--linha-e);
  display:grid; place-items:center;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:var(--ls-mono);
  color:var(--ink-e-fraco); text-align:center; padding:var(--s-3);
  text-transform:uppercase;
}
.slot b{ display:block; color:var(--ink-acento); font-weight:400; margin-bottom:var(--s-1); }
.slot img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.slot--cheio{ border-style:solid; border-color:var(--linha-e-forte); }

/* Sequência de serviço fotografada na vertical (3:4) — a legenda desce
   para o rodapé do quadro para não cobrir a peça. */
.slots--retrato{ grid-template-columns:repeat(2, 1fr); }
@media (min-width:60rem){ .slots--retrato{ grid-template-columns:repeat(4, 1fr); } }
.slots--retrato .slot{ aspect-ratio:3/4; place-items:end stretch; padding:0; }
.slots--retrato .slot span{
  position:relative; z-index:1;
  background:linear-gradient(transparent, rgba(10,32,54,.88) 55%);
  padding:var(--s-7) var(--s-3) var(--s-3);
  color:var(--ink-e-forte); text-align:left;
}
.slots--retrato .slot b{ margin-bottom:0; display:inline; }

/* ----------------------------------------------------------------------------
   ORDEM DE SERVIÇO · componente de marca (pares rótulo mono · valor)
   -------------------------------------------------------------------------- */
.os{
  background:var(--sf-elevada);
  border:var(--traco) solid var(--linha-c);
  max-width:820px;
}
.os__cab{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding:var(--s-3) var(--s-5);
  border-bottom:var(--traco) solid var(--linha-c);
  font-family:var(--f-mono); font-size:var(--t-dado-p);
  letter-spacing:var(--ls-mono); text-transform:uppercase;
  color:var(--ink-c-corpo);
}
.os__cab svg{ height:26px; width:auto; }
.os__etapa{
  display:grid;
  grid-template-columns:6.2rem 1fr;
  gap:var(--s-4);
  padding:var(--s-5);
  border-bottom:var(--traco) solid var(--linha-c);
  align-items:baseline;
}
.os__etapa:last-child{ border-bottom:none; }
@media (min-width:680px){
  .os__etapa{ grid-template-columns:6.2rem 11rem 1fr; }
}
.os__et{
  font-family:var(--f-mono); font-size:var(--t-dado-p);
  letter-spacing:var(--ls-mono); color:var(--ink-acento);
}
.os__etapa h3{ font-size:1.08rem; }
.os__etapa p{ font-size:.9rem; font-weight:300; color:var(--ink-c-corpo); }
@media (max-width:679px){
  .os__etapa p{ grid-column:2; margin-top:var(--s-1); }
}

/* ----------------------------------------------------------------------------
   PILHA FLUTUANTE · como chegar (acima) + WhatsApp (abaixo)
   Hierarquia proposital: o WhatsApp é maior e leva o cobre, porque é a
   conversão da página. O maps é apoio — azul profundo, um pouco menor.
   -------------------------------------------------------------------------- */
.flutua{
  position:fixed; right:var(--s-4); bottom:var(--s-4);
  z-index:var(--z-flutua);
  display:grid; gap:var(--s-3); justify-items:center;
  transform-origin:bottom right;   /* encolhe na direção do canto */
}
.flutua__btn{
  position:relative;
  border-radius:50%;
  display:grid; place-items:center;
  box-shadow:var(--sombra-flutua);
  transition:transform var(--dur-1) var(--ease-ui);
}
.flutua__btn:hover{ transform:scale(1.06); }

.flutua__btn--wa{
  width:56px; height:56px;
  background:var(--brand-cobre);
  border:var(--traco) solid rgba(10, 32, 54, .3);
}
.flutua__btn--wa svg{ width:28px; height:28px; }

.flutua__btn--mapa{
  width:48px; height:48px;
  background:var(--brand-azul);
  border:var(--traco) solid var(--linha-e-forte);
  color:var(--brand-gelo);
}
.flutua__btn--mapa svg{ width:23px; height:23px; }

/* halo de chamada no WhatsApp: um pulso lento e discreto */
.flutua__btn--wa::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:var(--traco) solid var(--brand-cobre);
  animation:wa-pulso 3.2s var(--ease-saida) infinite;
}
@keyframes wa-pulso{
  0%,70%,100%{ transform:scale(1);   opacity:0; }
  35%        { transform:scale(1.45); opacity:.55; }
}
@media (prefers-reduced-motion: reduce){
  .flutua__btn--wa::before{ animation:none; }
}