/* Fondo interrogantes a pantalla completa */
html, body { height: 100%; }
#Fondo-Interrogantes{
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #e6f3ff; /* color base bajo el patrón */
}

/* Capa con el motivo de interrogantes animado */
#Fondo-Interrogantes::before{
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 220vw;
  height: 220vh;
  background-image: url('../interrogantes.webp'); /* ajusta ruta si hace falta */
  background-repeat: repeat;
  background-size: 816px 492px;
  animation: fondo-pan 30s linear infinite;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

/* Cualquier contenido dentro se ve por encima */
#Fondo-Interrogantes > *{
  position: relative;
  z-index: 1;
}

@keyframes fondo-pan{
  0%   { background-position: 0 0; }
  100% { background-position: 816px -492px; }
}

@media (prefers-reduced-motion: reduce){
  #Fondo-Interrogantes::before{ animation: none; }
}