/* ======================================================
   JJ Paper — Logo 3D interactivo (contenedor)
   Aislado: solo estiliza [data-jj-logo3d] y su canvas.
   ====================================================== */
[data-jj-logo3d] {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;      /* cuadrado por defecto; sobreescribible */
  max-width: 460px;
  margin: 0 auto;
  touch-action: none;        /* evita scroll al arrastrar sobre el logo */
  -webkit-user-select: none;
  user-select: none;
}
[data-jj-logo3d] > canvas {
  filter: drop-shadow(0 18px 40px rgba(22, 96, 74, .28));
}

/* ---- Modo fondo: cubre al padre, detrás del contenido ---- */
[data-jj-logo3d="bg"] {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  max-width: none;
  margin: 0;
  pointer-events: none;   /* los clics pasan al contenido; logo3d.js los oye a nivel documento */
  touch-action: auto;
  user-select: auto;
}
[data-jj-logo3d="bg"] > canvas {
  filter: none;
  opacity: .85;
}
/* Mobile: la chapa queda detrás del texto → se atenúa para no pelear con él */
@media (max-width: 992px) {
  [data-jj-logo3d="bg"] > canvas { opacity: .38 }
}